mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
119 lines
75 KiB
HTML
119 lines
75 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 | StaticMap</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/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.0.9/mapbox-gl-draw.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 | StaticMap"/><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 | StaticMap"/><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 | StaticMap","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | StaticMap","headline":"react-map-gl | StaticMap","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 ikvPao cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd cncNYa hBeZII egvBsN dMoEUD fPGooQ jYCwIr ePRhQs dNeACf hsOfQe kVRSNy hAWDlt" 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;}.ikvPao{list-style:none;margin:0;max-height:1120px;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__H5-sc-1pmaksm-6 */
|
|
.dNeACf{font:bold 16px/24px 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;}
|
|
/* sc-component-id: typography__Img-sc-1pmaksm-15 */
|
|
.hBeZII{max-width:100%;}
|
|
/* sc-component-id: typography__BlockQuote-sc-1pmaksm-16 */
|
|
.hAWDlt{background-color:#FBE2CF;margin-inline-start:0;margin-inline-end:0;padding:10px 16px;}</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-2c18f7646db77443e860.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-0a6cd70b3a4e82f6df12.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/static-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="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</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="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</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 ikvPao"><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="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</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="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="InteractiveMap" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</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="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</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="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</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="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="StaticMap" class="" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</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="staticmap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#staticmap" aria-label="staticmap 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>StaticMap</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The simplest <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">React</code> wrapper around <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>. This is designed to be completely
|
|
static, and should be used to render a map with no interactivity. For a component
|
|
that supports full user interactivity, see <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</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> <span class="token punctuation">{</span>StaticMap<span class="token punctuation">}</span> <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 punctuation">(</span>
|
|
<span class="token operator"><</span>StaticMap
|
|
width<span class="token operator">=</span><span class="token string">"100vw"</span>
|
|
height<span class="token operator">=</span><span class="token string">"100vh"</span>
|
|
latitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">37.78</span><span class="token punctuation">}</span>
|
|
longitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">122.45</span><span class="token punctuation">}</span>
|
|
zoom<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">8</span><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>
|
|
<span class="token punctuation">}</span></code></pre></div><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="initialization" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#initialization" aria-label="initialization 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>Initialization</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">The following props are used during the creation of the Mapbox map.</p><h5 style="position:relative" id="attributioncontrol" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Equivalent to Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">attributionControl</code> <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd">option</a>. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, shows Mapbox's attribution control.</p><h5 style="position:relative" id="disabletokenwarning" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#disabletokenwarning" aria-label="code classlanguage textdisabletokenwarningcode 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">disableTokenWarning</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If the provided API access token is rejected by Mapbox, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>.</p><h5 style="position:relative" id="gl" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#gl" aria-label="code classlanguage textglcode webglcontext 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">gl</code> (WebGLContext)</h5><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">This prop is experimental.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution.</p><h5 style="position:relative" id="mapboxapiaccesstoken" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#mapboxapiaccesstoken" aria-label="code classlanguage textmapboxapiaccesstokencode 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">mapboxApiAccessToken</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Mapbox API access token for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>. Required when using Mapbox vector tiles/styles
|
|
Mapbox WebGL context creation option. Useful when you want to export the canvas as a PNG</p><h5 style="position:relative" id="mapboxapiurl" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#mapboxapiurl" aria-label="code classlanguage textmapboxapiurlcode 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">mapboxApiUrl</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">https://api.mapbox.com</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Enables the use of private and country specific servers Mapbox servers, e.g. <a href="https://api.mapbox.cn/" class="typography__A-sc-1pmaksm-0 dvhuEd">https://api.mapbox.cn/</a>.</p><h5 style="position:relative" id="mapoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#mapoptions" aria-label="code classlanguage textmapoptionscode 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">mapOptions</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{}</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">Non-public API, see <a href="https://github.com/visgl/react-map-gl/issues/545" class="typography__A-sc-1pmaksm-0 dvhuEd">https://github.com/visgl/react-map-gl/issues/545</a></p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">An object of additional options to be passed to Mapbox's <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> constructor</a>. Options specified here
|
|
will take precedence over those same options if set via props.</p><h5 style="position:relative" id="preservedrawingbuffer" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Equivalent to Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">preserveDrawingBuffer</code> <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd">option</a>. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the map's canvas can be exported to a PNG using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">map.getCanvas().toDataURL()</code>.</p><h5 style="position:relative" id="preventstylediffing" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#preventstylediffing" aria-label="code classlanguage textpreventstylediffingcode 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">preventStyleDiffing</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> is assigned an Immutable object, when the prop changes, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> can diff between the two values and call the appropriate Mapbox API such as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">addLayer</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">removeLayer</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setStyle</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setData</code>, etc.
|
|
This allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">There are known issues with style diffing. As stopgap, use this option to prevent style diffing.</p><h5 style="position:relative" id="reusemaps" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">This prop is experimental.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, when the map component is unmounted, instead of calling <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">remove</code> on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.</p><h5 style="position:relative" id="transformrequest" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transformrequest" aria-label="code classlanguage texttransformrequestcode function 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> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></li></ul><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.
|
|
Expected to return an object with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">url</code> property and optionally <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">headers</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">credentials</code> properties. Equivalent to Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code> <a href="https://www.mapbox.com/mapbox-gl-js/api#map" class="typography__A-sc-1pmaksm-0 dvhuEd">map option</a>.</p><h3 style="position:relative" id="map-state" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#map-state" aria-label="map state 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>Map State</h3><h5 style="position:relative" id="mapstyle" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#mapstyle" aria-label="code classlanguage textmapstylecode string object immutablemap 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> (String | Object | Immutable.Map)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">'mapbox://styles/mapbox/light-v8'</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">The Mapbox style. A string url or a
|
|
<a href="https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive" class="typography__A-sc-1pmaksm-0 dvhuEd">MapboxGL style</a>
|
|
object (regular JS object or Immutable.Map).</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Whenever the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">preventStyleDiffing</code> prop.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> is ignored when explicitly set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code>.</p><h5 style="position:relative" id="width" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#width" aria-label="code classlanguage textwidthcode number string required 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">width</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The width of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="height" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#height" aria-label="code classlanguage textheightcode number string required 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">height</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The height of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The latitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The longitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="zoom" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The tile zoom level of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code></p><h5 style="position:relative" id="bearing" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the bearing of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="pitch" class="typography__H5-sc-1pmaksm-6 dNeACf"><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)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the pitch of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied..</p><h5 style="position:relative" id="altitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#altitude" aria-label="code classlanguage textaltitudecode 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">altitude</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">Non-public API, see <a href="https://github.com/mapbox/mapbox-gl-js/issues/1137" class="typography__A-sc-1pmaksm-0 dvhuEd">https://github.com/mapbox/mapbox-gl-js/issues/1137</a>.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">Altitude of the viewport camera, relative to screen height.</p><h5 style="position:relative" id="viewstate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#viewstate" aria-label="code classlanguage textviewstatecode 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">viewState</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object containing the view state of the map specified by the following fields:</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">latitude</code> (Number) - The latitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number) - The longitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> (Number) - The tile zoom level of the map. Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The bearing of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The pitch of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5 screen heights</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Note: Either the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code>, or the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> properties need to be specified.</p><h3 style="position:relative" id="render-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#render-options" aria-label="render 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>Render Options</h3><h5 style="position:relative" id="asyncrender" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#asyncrender" aria-label="code classlanguage textasyncrendercode 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">asyncRender</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, let Mapbox manage its own render cycle. This is the behavior prior to v4.1.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode 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">style</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The CSS style of the map container.</p><h5 style="position:relative" id="visible" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visible" aria-label="code classlanguage textvisiblecode 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">visible</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.</p><h5 style="position:relative" id="visibilityconstraints" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visibilityconstraints" aria-label="code classlanguage textvisibilityconstraintscode 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">visibilityConstraints</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object that specifies bounds for viewport props with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">min*</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">max*</code> keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }</code></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><h5 style="position:relative" id="onload" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onload" aria-label="code classlanguage textonloadcode function 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> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() => {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">load</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:load" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><h5 style="position:relative" id="onresize" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onresize" aria-label="code classlanguage textonresizecode function 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> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() => {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map size has changed.</p><h5 style="position:relative" id="onerror" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onerror" aria-label="code classlanguage textonerrorcode function 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> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">console.error</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits an <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">error</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:error" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><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><h5 style="position:relative" id="getmap" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmap" aria-label="code classlanguage textgetmapcode 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></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns the Mapbox instance if initialized. The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance will have full access to <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd">MapboxGL's API</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code></p><h5 style="position:relative" id="queryrenderedfeatures" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#queryrenderedfeatures" aria-label="code classlanguage textqueryrenderedfeaturescode 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">queryRenderedFeatures</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Use Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures</code> API to find features at point or in a bounding box. If the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> argument is not specified, only queries the layers with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code> property in the layer style.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures(geometry, parameters)</code></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">geometry</code> {<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[Number, Number</code> | <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[[Number, Number, [Number, Number</code> - Point or an array of two points defining the bounding box. Coordinates in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> - Query options. For more details, see <a href="https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox API documentation</a>.</li></ul><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/6.1-release/src/components/static-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">static-map.js</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/static-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-27d1c1f505dad8dcb0bf.js"],"app":["/app-0a6cd70b3a4e82f6df12.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-cdce30b8929b53876a0d.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-42744c71b0627e33aa9e.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-1def9cc28e934bb7168d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.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-afa6fbf60f75ba79c6b1.js"],"component---src-home-js":["/component---src-home-js-0e560ad72d6d2996f9f7.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-27d1c1f505dad8dcb0bf.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.js" async=""></script><script src="/react-map-gl/app-0a6cd70b3a4e82f6df12.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-2c18f7646db77443e860.js" async=""></script></body></html> |