mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
144 lines
180 KiB
HTML
144 lines
180 KiB
HTML
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.32.0"/><title data-react-helmet="true">react-map-gl | default (Map)</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="/react-map-gl/style.css" type="text/css"/><link data-react-helmet="true" rel="icon" type="img/ico" href="favicon.ico"/><meta data-react-helmet="true" name="description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="og:url" content="https://github.com/visgl/*"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:title" content="react-map-gl | default (Map)"/><meta data-react-helmet="true" property="og:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" property="og:image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="fb:app_id" content=""/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content=""/><meta data-react-helmet="true" name="twitter:title" content="react-map-gl | default (Map)"/><meta data-react-helmet="true" name="twitter:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="twitter:image" content="https://github.com/visgl/images/hero-sm.jpg"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://github.com/visgl","name":"react-map-gl"},[{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://github.com/visgl/*","name":"react-map-gl | default (Map)","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | default (Map)","headline":"react-map-gl | default (Map)","image":{"@type":"ImageObject","url":"https://github.com/visgl/images/hero-sm.jpg"},"description":"React wrapper for Mapbox GL JS"}]]</script><script data-react-helmet="true" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-74374017-2"></script><style data-styled="ckjqBY kTxBVF hLObhf jcCSEG bdPEit dkfbFn isdBno ljEIIX cqPqff FcGip drnfrA cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd cncNYa fPGooQ egvBsN jYCwIr dMoEUD dMIfYV ePRhQs hsOfQe kVRSNy" data-styled-version="4.4.1">
|
|
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
|
|
.idNLwm{height:100%;width:100%;padding:64px 0 0 300px;} @media screen and (max-width:768px){.idNLwm{height:calc(100vh - 64px);padding:0;-webkit-order:2;-ms-flex-order:2;order:2;}}
|
|
/* sc-component-id: body__Body-lvm4v2-3 */
|
|
.ckjqBY{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;width:100vw;height:100vh;}
|
|
/* sc-component-id: toc__TocChevron-c2gnov-0 */
|
|
.isdBno{height:16px;width:16px;position:absolute;left:24px;top:20px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;}.ljEIIX{height:16px;width:16px;position:absolute;left:24px;top:20px;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;}
|
|
/* sc-component-id: toc__TocEntry-c2gnov-1 */
|
|
.jcCSEG{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.bdPEit{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#486865;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.dkfbFn{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid #e1f0ee;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
/* sc-component-id: toc__TocHeader-c2gnov-2 */
|
|
.cqPqff{display:block;padding:16px 16px 16px 48px;} .cqPqff:hover{background:#f7fcfb;}
|
|
/* sc-component-id: toc__TocLink-c2gnov-3 */
|
|
.cowmvG a{display:block;padding:16px 16px 16px 60px;color:#486865 !important;-webkit-text-decoration:none;text-decoration:none;} .cowmvG:hover{background:#f7fcfb;}.eYbFBV a{display:block;padding:16px 16px 16px 60px;color:#00ADE6 !important;-webkit-text-decoration:none;text-decoration:none;} .eYbFBV:hover{background:#f7fcfb;}
|
|
/* sc-component-id: toc__TocSubpages-c2gnov-4 */
|
|
.FcGip{list-style:none;margin:0;max-height:0px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}.drnfrA{list-style:none;margin:0;max-height:784px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}
|
|
/* sc-component-id: toc__TocContainer-c2gnov-5 */
|
|
.hLObhf{position:fixed;top:0;padding:64px 0;max-width:300px;height:100%;z-index:2;border-right:1px solid #cae0dc;overflow-y:auto;overflow-x:hidden;width:100%;} @media screen and (max-width:768px){.hLObhf{max-width:100%;height:initial;border-right:none;position:-webkit-sticky;position:sticky;padding:0;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-webkit-transition:opacity 0.3s,transform 0.3s;transition:opacity 0.3s,transform 0.3s;opacity:0;max-height:0;overflow:hidden;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}}
|
|
/* sc-component-id: header__HeaderContainer-sc-3r2dxq-1 */
|
|
.kTxBVF{grid-column:1/3;grid-row:1/2;} @media screen and (max-width:768px){.kTxBVF{-webkit-order:1;-ms-flex-order:1;order:1;}}
|
|
/* sc-component-id: sc-global-3868639009 */
|
|
body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:border-box;}
|
|
/* sc-component-id: typography__A-sc-1pmaksm-0 */
|
|
.dvhuEd{-webkit-text-decoration:none;text-decoration:none;color:#00ADE6;} .dvhuEd:visited{color:#174EB6;} .dvhuEd:active{color:#123D90;} .dvhuEd:hover{color:#123D90;}
|
|
/* sc-component-id: typography__GatsbyA-sc-1pmaksm-1 */
|
|
.dMoEUD{-webkit-text-decoration:none;text-decoration:none;color:#00ADE6;} .dMoEUD:visited{color:#174EB6;} .dMoEUD:active{color:#123D90;} .dMoEUD:hover{color:#123D90;}
|
|
/* sc-component-id: typography__H1-sc-1pmaksm-2 */
|
|
.dMTgn{font:bold 40px/56px UberMove,Helvetica,Arial,sans-serif;-webkit-letter-spacing:0.02em;-moz-letter-spacing:0.02em;-ms-letter-spacing:0.02em;letter-spacing:0.02em;margin:4px 0 24px;}
|
|
/* sc-component-id: typography__H2-sc-1pmaksm-3 */
|
|
.jYCwIr{font:bold 32px/48px UberMove,Helvetica,Arial,sans-serif;margin:24px 0 16px;}
|
|
/* sc-component-id: typography__H3-sc-1pmaksm-4 */
|
|
.ePRhQs{font:bold 24px/36px UberMove,Helvetica,Arial,sans-serif;}
|
|
/* sc-component-id: typography__H4-sc-1pmaksm-5 */
|
|
.dMIfYV{font:bold 20px/28px UberMove,Helvetica,Arial,sans-serif;}
|
|
/* sc-component-id: typography__P-sc-1pmaksm-8 */
|
|
.cncNYa{margin:'0 0 16px';}
|
|
/* sc-component-id: typography__List-sc-1pmaksm-9 */
|
|
.hsOfQe{margin:0 0 12px;}
|
|
/* sc-component-id: typography__ListItem-sc-1pmaksm-10 */
|
|
.kVRSNy{margin-bottom:4px;}
|
|
/* sc-component-id: typography__MarkdownBody-sc-1pmaksm-11 */
|
|
.iTIrjR{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;padding:36px;max-width:692px;}
|
|
/* sc-component-id: typography__InlineCode-sc-1pmaksm-12 */
|
|
.egvBsN{background-color:#f7fcfb;border-radius:4px;padding:0 5px;font-family:Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;font-size:0.9em;margin:1px 0;line-height:calc(1.5em / 0.9 - 2px);display:inline-block;vertical-align:top;}
|
|
/* sc-component-id: typography__Pre-sc-1pmaksm-14 */
|
|
.fPGooQ{font-size:14px;background-color:#f7fcfb;padding:6px;overflow-x:auto;} .fPGooQ .token.comment,.fPGooQ .token.prolog,.fPGooQ .token.doctype,.fPGooQ .token.cdata{color:slategray;} .fPGooQ .token.punctuation{color:#999;} .fPGooQ .token.namespace{opacity:.7;} .fPGooQ .token.property,.fPGooQ .token.tag,.fPGooQ .token.boolean,.fPGooQ .token.number,.fPGooQ .token.constant,.fPGooQ .token.symbol,.fPGooQ .token.deleted{color:#905;} .fPGooQ .token.selector,.fPGooQ .token.attr-name,.fPGooQ .token.string,.fPGooQ .token.char,.fPGooQ .token.builtin,.fPGooQ .token.inserted{color:#690;} .fPGooQ .token.operator,.fPGooQ .token.entity,.fPGooQ .token.url,.fPGooQ .language-css .token.string,.fPGooQ .style .token.string{color:#9a6e3a;background:hsla(0,0%,100%,.5);} .fPGooQ .token.atrule,.fPGooQ .token.attr-value,.fPGooQ .token.keyword{color:#07a;} .fPGooQ .token.function,.fPGooQ .token.class-name{color:#DD4A68;} .fPGooQ .token.regex,.fPGooQ .token.important,.fPGooQ .token.variable{color:#e90;} .fPGooQ .token.important,.fPGooQ .token.bold{font-weight:bold;} .fPGooQ .token.italic{font-style:italic;} .fPGooQ .token.entity{cursor:help;}</style><style type="text/css">
|
|
.anchor.before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
padding-right: 4px;
|
|
}
|
|
.anchor.after {
|
|
display: inline-block;
|
|
padding-left: 4px;
|
|
}
|
|
h1 .anchor svg,
|
|
h2 .anchor svg,
|
|
h3 .anchor svg,
|
|
h4 .anchor svg,
|
|
h5 .anchor svg,
|
|
h6 .anchor svg {
|
|
visibility: hidden;
|
|
}
|
|
h1:hover .anchor svg,
|
|
h2:hover .anchor svg,
|
|
h3:hover .anchor svg,
|
|
h4:hover .anchor svg,
|
|
h5:hover .anchor svg,
|
|
h6:hover .anchor svg,
|
|
h1 .anchor:focus svg,
|
|
h2 .anchor:focus svg,
|
|
h3 .anchor:focus svg,
|
|
h4 .anchor:focus svg,
|
|
h5 .anchor:focus svg,
|
|
h6 .anchor:focus svg {
|
|
visibility: visible;
|
|
}
|
|
</style><script>
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
var hash = window.decodeURI(location.hash.replace('#', ''))
|
|
if (hash !== '') {
|
|
var element = document.getElementById(hash)
|
|
if (element) {
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
|
|
var offset = element.getBoundingClientRect().top + scrollTop - clientTop
|
|
// Wait for the browser to finish rendering before scrolling.
|
|
setTimeout((function() {
|
|
window.scrollTo(0, offset - 64)
|
|
}), 0)
|
|
}
|
|
}
|
|
})
|
|
</script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-13194050b9941d78906c.js"/><link as="script" rel="preload" href="/react-map-gl/framework-47a7447cd78cae046a8b.js"/><link as="script" rel="preload" href="/react-map-gl/app-c33704d3a1abd6ea3046.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What's new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What's new" href="/react-map-gl/docs/whats-new">What's new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Tips and Tricks" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Tips and Tricks" href="/react-map-gl/docs/get-started/tips-and-tricks">Tips and Tricks</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 drnfrA"><div><li><div title="default (Map)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="default (Map)" class="" href="/react-map-gl/docs/api-reference/map">default (Map)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="MapProvider" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapProvider" href="/react-map-gl/docs/api-reference/map-provider">MapProvider</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="useControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="useControl" href="/react-map-gl/docs/api-reference/use-control">useControl</a></div></div></li></div><div><li><div title="useMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="useMap" href="/react-map-gl/docs/api-reference/use-map">useMap</a></div></div></li></div><div><li><div title="Types" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Types" href="/react-map-gl/docs/api-reference/types">Types</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="default-map" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#default-map" aria-label="default map permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>default (Map)</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">React component that wraps <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" class="typography__A-sc-1pmaksm-0 dvhuEd">Map</a>. This is also the default export from react-map-gl.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token operator"><</span>Map
|
|
initialViewState<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">longitude</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">latitude</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">3.5</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100vw'</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'100vh'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
mapStyle<span class="token operator">=</span><span class="token string">"mapbox://styles/mapbox/streets-v9"</span>
|
|
mapboxAccessToken<span class="token operator">=</span><span class="token string">"MY_ACCESS_TOKEN"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Imperative methods are accessible via a <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" class="typography__A-sc-1pmaksm-0 dvhuEd">React ref</a> or the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/use-map">useMap</a> hook.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> mapRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> onMapLoad <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
mapRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'move'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// do something</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token operator"><</span>Map ref<span class="token operator">=</span><span class="token punctuation">{</span>mapRef<span class="token punctuation">}</span> onLoad<span class="token operator">=</span><span class="token punctuation">{</span>onMapLoad<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">The <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapref">MapRef</a> object exposes <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members" class="typography__A-sc-1pmaksm-0 dvhuEd">Map methods</a> that <strong>are safe to call without breaking the React bindings</strong>. For example, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setStyle()</code> is hidden from the ref object, because the style is supposed to be changed by updating the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">You can still access the hidden members via <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code>:</p><h4 style="position:relative" id="getmap" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#getmap" aria-label="code classlanguage textgetmapcode mapboxmap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code>: MapboxMap</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns the native <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" class="typography__A-sc-1pmaksm-0 dvhuEd">Map</a> instance associated with this component.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h3 style="position:relative" id="layout-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#layout-options" aria-label="layout options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layout options</h3><h4 style="position:relative" id="id" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#id" aria-label="code classlanguage textidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">id</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Map container id.</p><h4 style="position:relative" id="style" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#style" aria-label="code classlanguage textstylecode cssproperties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code>: CSSProperties</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: 'relative', width: '100%', height: '100%'}</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Map container CSS.</p><h4 style="position:relative" id="cursor" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#cursor" aria-label="code classlanguage textcursorcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">cursor</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'auto'</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The current cursor <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" class="typography__A-sc-1pmaksm-0 dvhuEd">type</a>.</p><h3 style="position:relative" id="styling-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#styling-options" aria-label="styling options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling options</h3><h4 style="position:relative" id="fog" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#fog" aria-label="code classlanguage textfogcode fog null permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fog</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#fog">Fog</a> | null</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The fog property of the style. Must conform to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/" class="typography__A-sc-1pmaksm-0 dvhuEd">Fog Style Specification</a>.
|
|
If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code> is provided, removes the fog from the map.</p><h4 style="position:relative" id="light" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#light" aria-label="code classlanguage textlightcode light permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">light</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#light">Light</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Light properties of the style. Must conform to the <a href="https://www.mapbox.com/mapbox-gl-style-spec/#light" class="typography__A-sc-1pmaksm-0 dvhuEd">Light Style Specification</a>.</p><h4 style="position:relative" id="mapstyle" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#mapstyle" aria-label="code classlanguage textmapstylecode mapboxstyle string immutable permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxstyle">MapboxStyle</a> | string | Immutable</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: (empty style)</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The map's Mapbox style. This must be an a JSON object conforming to the schema described in the <a href="https://mapbox.com/mapbox-gl-style-spec/" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox Style Specification</a>, or a URL to such JSON.</p><h4 style="position:relative" id="projection" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#projection" aria-label="code classlanguage textprojectioncode string projectionspecification permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">projection</code>: string | <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#projectionspecification">ProjectionSpecification</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'mercator'</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The projection the map should be rendered in. Available projections are Albers (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'albers'</code>), Equal Earth (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'equalEarth'</code>), Equirectangular/Plate Carrée/WGS84 (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'equirectangular'</code>), Lambert (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'lambertConformalConic'</code>), Mercator (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'mercator'</code>), Natural Earth (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'naturalEarth'</code>), and Winkel Tripel (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'winkelTripel'</code>). Conic projections such as Albers and Lambert have configurable <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">center</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parallels</code> properties that allow developers to define the region in which the projection has minimal distortion; see <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection" class="typography__A-sc-1pmaksm-0 dvhuEd">example</a>.</p><h4 style="position:relative" id="renderworldcopies" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#renderworldcopies" aria-label="code classlanguage textrenderworldcopiescode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">renderWorldCopies</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, multiple copies of the world will be rendered, when zoomed out.</p><h4 style="position:relative" id="stylediffing" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#stylediffing" aria-label="code classlanguage textstylediffingcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">styleDiffing</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Enable diffing when <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> changes. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.</p><h4 style="position:relative" id="terrain" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#terrain" aria-label="code classlanguage textterraincode terrainspecification permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">terrain</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#terrainspecification">TerrainSpecification</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Terrain property of the style. Must conform to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/" class="typography__A-sc-1pmaksm-0 dvhuEd">Terrain Style Specification</a>.
|
|
If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code> is provided, removes terrain from the map.</p><h3 style="position:relative" id="camera-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#camera-options" aria-label="camera options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Camera options</h3><h4 style="position:relative" id="initialviewstate" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#initialviewstate" aria-label="code classlanguage textinitialviewstatecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">initialViewState</code>: object</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The initial view state of the map. If specified, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> etc. in props are ignored when constructing the map. Only specify <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">initialViewState</code> if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> is being used as an <strong>uncontrolled component</strong>. See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/state-management">state management</a> for examples.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds?</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#lnglatboundslike">LngLatBoundsLike</a> - The initial bounds of the map. If specified, it overrides the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> options. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBoundsOptions</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#fitboundsoptions">FitBoundsOptions</a> - A <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBounds</code> options object to use only when setting the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> option. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>: number - The initial longitude of the map center. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>: number - The initial latitude of the map center. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>: number - The initial zoom level. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>: number - The initial pitch (tilt) of the map. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code>: number - The initial bearing (rotation) of the map. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li></ul><h4 style="position:relative" id="longitude" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#longitude" aria-label="code classlanguage textlongitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The longitude of the map center.</p><h4 style="position:relative" id="latitude" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#latitude" aria-label="code classlanguage textlatitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The latitude of the map center.</p><h4 style="position:relative" id="zoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#zoom" aria-label="code classlanguage textzoomcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The <a href="https://docs.mapbox.com/help/glossary/camera/#zoom-level" class="typography__A-sc-1pmaksm-0 dvhuEd">zoom level</a> of the map.</p><h4 style="position:relative" id="pitch" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#pitch" aria-label="code classlanguage textpitchcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The initial <a href="https://docs.mapbox.com/help/glossary/camera/#pitch" class="typography__A-sc-1pmaksm-0 dvhuEd">pitch</a> (tilt) of the map, measured in degrees away from the plane of the screen (0-85).</p><h4 style="position:relative" id="bearing" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#bearing" aria-label="code classlanguage textbearingcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The initial <a href="https://docs.mapbox.com/help/glossary/camera/#bearing" class="typography__A-sc-1pmaksm-0 dvhuEd">bearing</a> (rotation) of the map, measured in degrees counter-clockwise from north.</p><h4 style="position:relative" id="padding" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#padding" aria-label="code classlanguage textpaddingcode paddingoptions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">padding</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#paddingoptions">PaddingOptions</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The padding in pixels around the viewport.</p><h4 style="position:relative" id="minzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#minzoom" aria-label="code classlanguage textminzoomcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The minimum zoom level of the map (0-24).</p><h4 style="position:relative" id="maxzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maxzoom" aria-label="code classlanguage textmaxzoomcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">22</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum zoom level of the map (0-24).</p><h4 style="position:relative" id="minpitch" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#minpitch" aria-label="code classlanguage textminpitchcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minPitch</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The minimum pitch of the map (0-85).</p><h4 style="position:relative" id="maxpitch" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maxpitch" aria-label="code classlanguage textmaxpitchcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxPitch</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">60</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum pitch of the map (0-85).</p><h4 style="position:relative" id="maxbounds" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maxbounds" aria-label="code classlanguage textmaxboundscode lnglatboundslike permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxBounds</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#lnglatboundslike">LngLatBoundsLike</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If set, the map is constrained to the given bounds.</p><h3 style="position:relative" id="input-handler-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#input-handler-options" aria-label="input handler options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Input handler options</h3><h4 style="position:relative" id="boxzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#boxzoom" aria-label="code classlanguage textboxzoomcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">boxZoom</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "box zoom" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">BoxZoomHandler</a>).</p><h4 style="position:relative" id="doubleclickzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#doubleclickzoom" aria-label="code classlanguage textdoubleclickzoomcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubleClickZoom</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "double click to zoom" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">DoubleClickZoomHandler</a>).</p><h4 style="position:relative" id="dragrotate" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#dragrotate" aria-label="code classlanguage textdragrotatecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragRotate</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "drag to rotate" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler" class="typography__A-sc-1pmaksm-0 dvhuEd">DragRotateHandler</a>).</p><h4 style="position:relative" id="dragpan" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#dragpan" aria-label="code classlanguage textdragpancode boolean dragpanoptions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragPan</code>: boolean | <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#dragpanoptions">DragPanOptions</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "drag to pan" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">DragPanHandler#enable</a>.</p><h4 style="position:relative" id="keyboard" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#keyboard" aria-label="code classlanguage textkeyboardcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keyboard</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, keyboard shortcuts are enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">KeyboardHandler</a>).</p><h4 style="position:relative" id="scrollzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#scrollzoom" aria-label="code classlanguage textscrollzoomcode boolean zoomrotateoptions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scrollZoom</code>: boolean | <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#zoomrotateoptions">ZoomRotateOptions</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "scroll to zoom" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">ScrollZoomHandler#enable</a>.</p><h4 style="position:relative" id="touchpitch" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#touchpitch" aria-label="code classlanguage texttouchpitchcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchPitch</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "drag to pitch" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler" class="typography__A-sc-1pmaksm-0 dvhuEd">TouchPitchHandler#enable</a>.</p><h4 style="position:relative" id="touchzoomrotate" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#touchzoomrotate" aria-label="code classlanguage texttouchzoomrotatecode boolean zoomrotateoptions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoomRotate</code>: boolean | <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#zoomrotateoptions">ZoomRotateOptions</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the "pinch to rotate and zoom" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler" class="typography__A-sc-1pmaksm-0 dvhuEd">TouchZoomRotateHandler#enable</a>.</p><h4 style="position:relative" id="interactivelayerids" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#interactivelayerids" aria-label="code classlanguage textinteractivelayeridscode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code>: string[]</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The id(s) of style layer(s).</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If specified, pointer event (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mousemove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">click</code> etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> property containing an array of the matching features.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> property.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">See the <a href="#callbacks" class="typography__A-sc-1pmaksm-0 dvhuEd">Callbacks</a> section for affected events.</p><h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3><h4 style="position:relative" id="onresize" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onresize" aria-label="code classlanguage textonresizecode event mapboxevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map has been resized.</p><h4 style="position:relative" id="onload" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onload" aria-label="code classlanguage textonloadcode event mapboxevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.</p><h4 style="position:relative" id="onrender" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onrender" aria-label="code classlanguage textonrendercode event mapboxevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onRender</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called whenever the map is drawn to the screen.</p><h4 style="position:relative" id="onidle" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onidle" aria-label="code classlanguage textonidlecode event mapboxevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onIdle</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called after the last frame rendered before the map enters an "idle" state:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">No camera transitions are in progress</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All currently requested tiles have loaded</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All fade/transition animations have completed</li></ul><h4 style="position:relative" id="onremove" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onremove" aria-label="code classlanguage textonremovecode event mapboxevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onRemove</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map has been removed.</p><h4 style="position:relative" id="onerror" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onerror" aria-label="code classlanguage textonerrorcode event errorevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onError</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#errorevent">ErrorEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">evt => console.error(evt.error)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when an error occurs.</p><h4 style="position:relative" id="onmousedown" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmousedown" aria-label="code classlanguage textonmousedowncode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseDown</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is pressed within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="onmouseup" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmouseup" aria-label="code classlanguage textonmouseupcode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseUp</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is released within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="onmouseover" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmouseover" aria-label="code classlanguage textonmouseovercode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOver</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.</p><h4 style="position:relative" id="onmouseenter" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmouseenter" aria-label="code classlanguage textonmouseentercode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseEnter</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> from outside that layer or outside the map canvas.</p><h4 style="position:relative" id="onmousemove" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmousemove" aria-label="code classlanguage textonmousemovecode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="onmouseleave" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmouseleave" aria-label="code classlanguage textonmouseleavecode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseLeave</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> or moves from the layer to outside the map canvas.</p><h4 style="position:relative" id="onmouseout" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmouseout" aria-label="code classlanguage textonmouseoutcode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOut</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a point device (usually a mouse) leaves the map's canvas.</p><h4 style="position:relative" id="onclick" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onclick" aria-label="code classlanguage textonclickcode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="ondblclick" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ondblclick" aria-label="code classlanguage textondblclickcode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDblClick</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="oncontextmenu" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#oncontextmenu" aria-label="code classlanguage textoncontextmenucode event maplayermouseevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onContextMenu</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the right button of the mouse is clicked or the context menu key is pressed within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="onwheel" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onwheel" aria-label="code classlanguage textonwheelcode event mapwheelevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onWheel</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapwheelevent">MapWheelEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a wheel event occurs within the map.</p><h4 style="position:relative" id="ontouchstart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ontouchstart" aria-label="code classlanguage textontouchstartcode event maplayertouchevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchstart</code> event occurs within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="ontouchend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ontouchend" aria-label="code classlanguage textontouchendcode event maplayertouchevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchend</code> event occurs within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="ontouchmove" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ontouchmove" aria-label="code classlanguage textontouchmovecode event maplayertouchevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchmove</code> event occurs within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="ontouchcancel" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ontouchcancel" aria-label="code classlanguage textontouchcancelcode event maplayertouchevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchCancel</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchcancel</code> event occurs within the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> is specified, the event will contain an additional <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">features</code> field that contains features under the cursor from the specified layer.</p><h4 style="position:relative" id="onmovestart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmovestart" aria-label="code classlanguage textonmovestartcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMoveStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just before the map begins a transition from one view to another.</p><h4 style="position:relative" id="onmove" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmove" aria-label="code classlanguage textonmovecode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMove</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called repeatedly during an animated transition from one view to another.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> is used as a controlled component, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.viewState</code> reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">flyTo</a>. The camera does not actually change until the application updates the view state props (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> etc.).
|
|
See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/state-management">state management</a> for examples.</p><h4 style="position:relative" id="onmoveend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onmoveend" aria-label="code classlanguage textonmoveendcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMoveEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just after the map completes a transition from one view to another.</p><h4 style="position:relative" id="ondragstart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ondragstart" aria-label="code classlanguage textondragstartcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a "drag to pan" interaction starts.</p><h4 style="position:relative" id="ondrag" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ondrag" aria-label="code classlanguage textondragcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDrag</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called repeatedly during a "drag to pan" interaction.</p><h4 style="position:relative" id="ondragend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ondragend" aria-label="code classlanguage textondragendcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a "drag to pan" interaction ends.</p><h4 style="position:relative" id="onzoomstart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onzoomstart" aria-label="code classlanguage textonzoomstartcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onZoomStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just before the map begins a transition from one zoom level to another.</p><h4 style="position:relative" id="onzoom" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onzoom" aria-label="code classlanguage textonzoomcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onZoom</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called repeatedly during an animated transition from one zoom level to another.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> is used as a controlled component, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.viewState.zoom</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">flyTo</a>. The camera does not actually change until the application updates the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> prop.</p><h4 style="position:relative" id="onzoomend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onzoomend" aria-label="code classlanguage textonzoomendcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onZoomEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just after the map completes a transition from one zoom level to another.</p><h4 style="position:relative" id="onrotatestart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onrotatestart" aria-label="code classlanguage textonrotatestartcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onRotateStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just before the map begins a transition from one bearing (rotation) to another.</p><h4 style="position:relative" id="onrotate" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onrotate" aria-label="code classlanguage textonrotatecode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onRotate</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called repeatedly during an animated transition from one bearing (rotation) to another.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> is used as a controlled component, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.viewState.bearing</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">flyTo</a>. The camera does not actually change until the application updates the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> prop.</p><h4 style="position:relative" id="onrotateend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onrotateend" aria-label="code classlanguage textonrotateendcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onRotateEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just after the map completes a transition from one bearing (rotation) to another.</p><h4 style="position:relative" id="onpitchstart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onpitchstart" aria-label="code classlanguage textonpitchstartcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onPitchStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just before the map begins a transition from one pitch (tilt) to another.</p><h4 style="position:relative" id="onpitch" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onpitch" aria-label="code classlanguage textonpitchcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onPitch</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called repeatedly during an animated transition from one pitch (tilt) to another.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> is used as a controlled component, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.viewState.pitch</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">flyTo</a>. The camera does not actually change until the application updates the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> prop.</p><h4 style="position:relative" id="onpitchend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onpitchend" aria-label="code classlanguage textonpitchendcode event viewstatechangeevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onPitchEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called just after the map completes a transition from one pitch (tilt) to another.</p><h4 style="position:relative" id="onboxzoomstart" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onboxzoomstart" aria-label="code classlanguage textonboxzoomstartcode event mapboxzoomevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onBoxZoomStart</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a "box zoom" interaction starts.</p><h4 style="position:relative" id="onboxzoomend" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onboxzoomend" aria-label="code classlanguage textonboxzoomendcode event mapboxzoomevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onBoxZoomEnd</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a "box zoom" interaction ends.</p><h4 style="position:relative" id="onboxzoomcancel" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onboxzoomcancel" aria-label="code classlanguage textonboxzoomcancelcode eventmapboxzoomevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onBoxZoomCancel</code>: (event:<a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.</p><h4 style="position:relative" id="ondata" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#ondata" aria-label="code classlanguage textondatacode event mapstyledataevent mapsourcedataevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onData</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapstyledataevent">MapStyleDataEvent</a> | <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapsourcedataevent">MapSourceDataEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when any map data loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" class="typography__A-sc-1pmaksm-0 dvhuEd">MapDataEvent</a> for more information.</p><h4 style="position:relative" id="onstyledata" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onstyledata" aria-label="code classlanguage textonstyledatacode event mapstyledataevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onStyleData</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapstyledataevent">MapStyleDataEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map's style loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" class="typography__A-sc-1pmaksm-0 dvhuEd">MapDataEvent</a> for more information.</p><h4 style="position:relative" id="onsourcedata" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#onsourcedata" aria-label="code classlanguage textonsourcedatacode event mapsourcedataevent void permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onSourceData</code>: (event: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#mapsourcedataevent">MapSourceDataEvent</a>) => void</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" class="typography__A-sc-1pmaksm-0 dvhuEd">MapDataEvent</a> for more information.</p><h3 style="position:relative" id="other-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#other-options" aria-label="other options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other options</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Props in this section are not reactive. They are only used once when the Map instance is constructed.</p><h4 style="position:relative" id="maplib" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maplib" aria-label="code classlanguage textmaplibcode any permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapLib</code>: any</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Override the map library. By default, it loads the mapbox-gl module using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports" class="typography__A-sc-1pmaksm-0 dvhuEd">dynamic import</a>. This can be used to replace mapbox-gl with a compatible fork:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> maplibregl <span class="token keyword">from</span> <span class="token string">'maplibre-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token operator"><</span>Map mapLib<span class="token operator">=</span><span class="token punctuation">{</span>maplibregl<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Or to load a pre-bundled version of the library:</p><div class="gatsby-highlight" data-language="html"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-html"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token operator"><</span>Map mapLib<span class="token operator">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>mapboxgl<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">import('mapbox-gl')</code></p><h4 style="position:relative" id="mapboxaccesstoken" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#mapboxaccesstoken" aria-label="code classlanguage textmapboxaccesstokencode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapboxAccessToken</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Token used to access the Mapbox data service. See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/mapbox-tokens">about map tokens</a>.</p><h4 style="position:relative" id="antialias" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#antialias" aria-label="code classlanguage textantialiascode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">antialias</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> , the gl context will be created with <a href="https://en.wikipedia.org/wiki/Multisample_anti-aliasing" class="typography__A-sc-1pmaksm-0 dvhuEd">MSAA antialiasing</a>, which can be useful for antialiasing custom layers.
|
|
This is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code> by default as a performance optimization.</p><h4 style="position:relative" id="attributioncontrol" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#attributioncontrol" aria-label="code classlanguage textattributioncontrolcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">attributionControl</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, an attribution control will be added to the map.</p><h4 style="position:relative" id="baseapiurl" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#baseapiurl" aria-label="code classlanguage textbaseapiurlcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">baseApiUrl</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">The map's default API URL for requesting tiles, styles, sprites, and glyphs.</p><h4 style="position:relative" id="bearingsnap" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#bearingsnap" aria-label="code classlanguage textbearingsnapcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearingSnap</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">7</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Snap to north threshold in degrees.</p><h4 style="position:relative" id="clicktolerance" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#clicktolerance" aria-label="code classlanguage textclicktolerancecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">clickTolerance</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">3</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).</p><h4 style="position:relative" id="collectresourcetiming" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#collectresourcetiming" aria-label="code classlanguage textcollectresourcetimingcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">collectResourceTiming</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">resourceTiming</code> property of relevant <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">data</code> events.</p><h4 style="position:relative" id="cooperativegestures" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#cooperativegestures" aria-label="code classlanguage textcooperativegesturescode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">cooperativeGestures</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.</p><h4 style="position:relative" id="crosssourcecollisions" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#crosssourcecollisions" aria-label="code classlanguage textcrosssourcecollisionscode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">crossSourceCollisions</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, symbols from multiple sources can collide with each other during collision detection. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, collision detection is run separately for the symbols in each source.</p><h4 style="position:relative" id="customattribution" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#customattribution" aria-label="code classlanguage textcustomattributioncode string string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">customAttribution</code>: string | string[]</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">String or strings to show in an AttributionControl.
|
|
Only applicable if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">attributionControl</code> is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>.</p><h4 style="position:relative" id="fadeduration" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#fadeduration" aria-label="code classlanguage textfadedurationcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fadeDuration</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">300</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.</p><h4 style="position:relative" id="failifmajorperformancecaveat" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#failifmajorperformancecaveat" aria-label="code classlanguage textfailifmajorperformancecaveatcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">failIfMajorPerformanceCaveat</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.</p><h4 style="position:relative" id="hash" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#hash" aria-label="code classlanguage texthashcode boolean string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">hash</code>: boolean | string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.
|
|
For example, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">An additional string may optionally be provided to indicate a parameter-styled hash,
|
|
e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar</code>, where <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">foo</code> is a custom parameter and bar is an arbitrary hash distinct from the map hash.</p><h4 style="position:relative" id="interactive" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#interactive" aria-label="code classlanguage textinteractivecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input.</p><h4 style="position:relative" id="locale" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#locale" aria-label="code classlanguage textlocalecode recordstring string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">locale</code>: Record\<string, string<!-- -->></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">A patch to apply to the default localization table for UI strings, e.g. control tooltips.
|
|
The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">locale</code> object maps namespaced UI string IDs to translated strings in the target language; see <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">src/ui/default_locale.js</code> for an example with all supported string IDs.
|
|
The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).</p><h4 style="position:relative" id="localfontfamily" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#localfontfamily" aria-label="code classlanguage textlocalfontfamilycode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">localFontFamily</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily.</p><h4 style="position:relative" id="localideographfontfamily" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#localideographfontfamily" aria-label="code classlanguage textlocalideographfontfamilycode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">localIdeographFontFamily</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'sans-serif'</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See <a href="https://www.mapbox.com/mapbox-gl-js/example/local-ideographs" class="typography__A-sc-1pmaksm-0 dvhuEd">example</a>.</p><h4 style="position:relative" id="logoposition" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#logoposition" aria-label="code classlanguage textlogopositioncode top left top right bottom left bottom right permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">logoPosition</code>: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'bottom-left'</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">A string representing the position of the Mapbox wordmark on the map.</p><h4 style="position:relative" id="maxparallelimagerequests" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maxparallelimagerequests" aria-label="code classlanguage textmaxparallelimagerequestscode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxParallelImageRequests</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">16</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum number of images (raster tiles, sprites, icons) to load in parallel.</p><h4 style="position:relative" id="maxtilecachesize" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#maxtilecachesize" aria-label="code classlanguage textmaxtilecachesizecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxTileCacheSize</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.</p><h4 style="position:relative" id="optimizeforterrain" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#optimizeforterrain" aria-label="code classlanguage textoptimizeforterraincode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">optimizeForTerrain</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If true, map will prioritize rendering for performance by reordering layers.
|
|
If false, layers will always be drawn in the specified order.</p><h4 style="position:relative" id="pitchwithrotate" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#pitchwithrotate" aria-label="code classlanguage textpitchwithrotatecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitchWithRotate</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.</p><h4 style="position:relative" id="preservedrawingbuffer" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#preservedrawingbuffer" aria-label="code classlanguage textpreservedrawingbuffercode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">preserveDrawingBuffer</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, The maps canvas can be exported to a PNG using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">map.getCanvas().toDataURL()</code>;. This is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code> by default as a performance optimization.</p><h4 style="position:relative" id="refreshexpiredtiles" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#refreshexpiredtiles" aria-label="code classlanguage textrefreshexpiredtilescode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">refreshExpiredTiles</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, the map won't attempt to re-request tiles once they expire per their HTTP <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">cacheControl</code>/<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">expires</code> headers.</p><h4 style="position:relative" id="reusemaps" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#reusemaps" aria-label="code classlanguage textreusemapscode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">By default, every time a map component is unmounted, all internal resources associated with the underlying <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance are released. If the map gets mounted again, a new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance is constructed.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code> is set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, when a map component is unmounted, the underlying <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">new billable events</a> triggered by initialization.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">initialViewState</code> of the new component are respected.</p><h4 style="position:relative" id="rtltextplugin" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#rtltextplugin" aria-label="code classlanguage textrtltextplugincode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">RTLTextPlugin</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Sets the map's <a href="https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text" class="typography__A-sc-1pmaksm-0 dvhuEd">RTL text plugin</a>. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Setting this prop is the equivelant of calling <a href="https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin" class="typography__A-sc-1pmaksm-0 dvhuEd">mapboxgl.setRTLTextPlugin</a> with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lazy: true</code>.</p><h4 style="position:relative" id="testmode" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#testmode" aria-label="code classlanguage texttestmodecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">testMode</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests.</p><h4 style="position:relative" id="trackresize" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#trackresize" aria-label="code classlanguage texttrackresizecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">trackResize</code>: boolean</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the map will automatically resize when the browser window resizes.</p><h4 style="position:relative" id="transformrequest" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#transformrequest" aria-label="code classlanguage texttransformrequestcode transformrequestfunction permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/types#transformrequestfunction">TransformRequestFunction</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.</p><h4 style="position:relative" id="workerclass" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#workerclass" aria-label="code classlanguage textworkerclasscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">workerClass</code>: object</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
|
|
Takes precedence over <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">workerUrl</code>.</p><h4 style="position:relative" id="workercount" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#workercount" aria-label="code classlanguage textworkercountcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">workerCount</code>: number</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">2</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The number of web workers instantiated on a page with mapbox-gl maps.</p><h4 style="position:relative" id="workerurl" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#workerurl" aria-label="code classlanguage textworkerurlcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">workerUrl</code>: string</h4><p class="typography__P-sc-1pmaksm-8 cncNYa">Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/map.tsx" class="typography__A-sc-1pmaksm-0 dvhuEd">map.tsx</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-4b657be50967bad20dc3.js"],"app":["/app-c33704d3a1abd6ea3046.js"],"component---examples-clusters-src-app-tsx":["/component---examples-clusters-src-app-tsx-ae435c98aa31b91df409.js"],"component---examples-controls-src-app-tsx":["/component---examples-controls-src-app-tsx-0fc6f5753e0415fde950.js"],"component---examples-custom-cursor-src-app-tsx":["/component---examples-custom-cursor-src-app-tsx-bd123514f109e45b15c9.js"],"component---examples-draggable-markers-src-app-tsx":["/component---examples-draggable-markers-src-app-tsx-c08cc0293d6f625308f7.js"],"component---examples-draw-polygon-src-app-tsx":["/component---examples-draw-polygon-src-app-tsx-7daea6e064ad3a1eef2c.js"],"component---examples-filter-src-app-tsx":["/component---examples-filter-src-app-tsx-28b144519a629b0e0c53.js"],"component---examples-geocoder-src-app-tsx":["/component---examples-geocoder-src-app-tsx-244936683de9dee32672.js"],"component---examples-geojson-animation-src-app-tsx":["/component---examples-geojson-animation-src-app-tsx-63ecd3bd20b2020e4799.js"],"component---examples-geojson-src-app-tsx":["/component---examples-geojson-src-app-tsx-96c6855ca732a70078ab.js"],"component---examples-heatmap-src-app-tsx":["/component---examples-heatmap-src-app-tsx-c7a35aaf435bc075107c.js"],"component---examples-interaction-src-app-tsx":["/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"],"component---examples-layers-src-app-tsx":["/component---examples-layers-src-app-tsx-cf13aa48a159342af3e3.js"],"component---examples-side-by-side-src-app-tsx":["/component---examples-side-by-side-src-app-tsx-c948e78a1a5129b01a93.js"],"component---examples-terrain-src-app-tsx":["/component---examples-terrain-src-app-tsx-7b12f3bb393a8bb524f0.js"],"component---examples-viewport-animation-src-app-tsx":["/component---examples-viewport-animation-src-app-tsx-8c2f70b3ab14cbdc2a58.js"],"component---examples-zoom-to-bounds-src-app-tsx":["/component---examples-zoom-to-bounds-src-app-tsx-2d6b6e19aa1d94266910.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-861d77d9a70335a1bb15.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-b867458182f2a5e115e0.js"],"component---src-home-js":["/component---src-home-js-d077024a439c8e9d840e.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-4b657be50967bad20dc3.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js" async=""></script><script src="/react-map-gl/app-c33704d3a1abd6ea3046.js" async=""></script><script src="/react-map-gl/framework-47a7447cd78cae046a8b.js" async=""></script><script src="/react-map-gl/webpack-runtime-13194050b9941d78906c.js" async=""></script></body></html> |