mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
296 lines
78 KiB
HTML
296 lines
78 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.18.25"/><title data-react-helmet="true">react-map-gl</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.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"/><meta data-react-helmet="true" name="image" content="NaN"/><meta data-react-helmet="true" property="og:url" content="NaN"/><meta data-react-helmet="true" property="og:title"/><meta data-react-helmet="true" property="og:description"/><meta data-react-helmet="true" property="og:image" content="NaN"/><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"/><meta data-react-helmet="true" name="twitter:description"/><meta data-react-helmet="true" name="twitter:image" content="NaN"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":null,"alternateName":""}]</script><style data-styled="gXXAFg bDuPoM eyqZow cWxAeV fybxvQ fCCoSo gGlvpi eFnCLU dMoLKk FcGip FrNRT hGwSqT jkbfmX dKqGOe dydGug dKKgxr ewhNJT cncNYa cVbpdr dFJdWN dcdkiM kUifx duevmh kPzBbv hsOfQe kVRSNy dUYRyl" data-styled-version="4.4.1">
|
|
/* sc-component-id: toc__TocChevron-c2gnov-0 */
|
|
.gGlvpi{height:16px;width:16px;position:absolute;left:36px;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;}.eFnCLU{height:16px;width:16px;position:absolute;left:36px;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 */
|
|
.fybxvQ{font:bold 14px/20px "Uber Move",Helvetica,Arial,sans-serif;border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;color:#000000;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.fCCoSo{font:bold 14px/20px "Uber Move",Helvetica,Arial,sans-serif;border-top:1px solid tranparent;border-bottom:1px solid tranparent;color:#666666;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
/* sc-component-id: toc__TocHeader-c2gnov-2 */
|
|
.dMoLKk{display:block;padding:16px 16px 16px 60px;} .dMoLKk:hover{background:#F7F7F7;}
|
|
/* sc-component-id: toc__TocLink-c2gnov-3 */
|
|
.hGwSqT a{display:block;padding:16px 16px 16px 84px;color:#666666 !important;-webkit-text-decoration:none;text-decoration:none;} .hGwSqT:hover{background:#F7F7F7;}.jkbfmX a{display:block;padding:16px 16px 16px 84px;color:#276EF1 !important;-webkit-text-decoration:none;text-decoration:none;} .jkbfmX:hover{background:#F7F7F7;}
|
|
/* 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;}.FrNRT{list-style:none;margin:0;max-height:1008px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}
|
|
/* sc-component-id: toc__TocContainer-c2gnov-5 */
|
|
@media screen and (min-width:600px){.cWxAeV{position:fixed;top:0;padding:64px 0;max-width:300px;height:100%;z-index:2;border-right:1px solid #CCCCCC;overflow-y:scroll;overflow-x:hidden;width:100%;}} @media screen and (max-width:600px){.cWxAeV{border-right:none;position:-webkit-sticky;position:sticky;padding:0 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: toc__StyledTocToggle-c2gnov-6 */
|
|
.eyqZow{font:normal 14px/20px "Uber Move",Helvetica,Arial,sans-serif;color:#FFFFFF;cursor:pointer;position:fixed;top:0;right:24px;line-height:64px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;display:none;} @media screen and (max-width:600px){.eyqZow{display:block;}}
|
|
/* sc-component-id: header__HeaderContainer-sc-1hd3yin-1 */
|
|
.bDuPoM{grid-column:1/3;grid-row:1/2;} @media screen and (max-width:600px){.bDuPoM{-webkit-order:1;-ms-flex-order:1;order:1;}}
|
|
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
|
|
.dKqGOe{height:100%;width:100%;padding:64px 0 0 300px;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);opacity:1;} @media screen and (max-width:600px){.dKqGOe{padding-left:0;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);opacity:1;}}
|
|
/* sc-component-id: body__Body-lvm4v2-3 */
|
|
.gXXAFg{height:100vh;}
|
|
/* sc-component-id: sc-global-495056895 */
|
|
body{margin:0;overflow-x:hidden;} *{box-sizing:border-box;}
|
|
/* sc-component-id: typography__A-sc-1pmaksm-0 */
|
|
.ewhNJT{-webkit-text-decoration:none;text-decoration:none;color:#276EF1;} .ewhNJT:visited{color:#174EB6;} .ewhNJT:active{color:#123D90;} .ewhNJT:hover{color:#123D90;}
|
|
/* sc-component-id: typography__GatsbyA-sc-1pmaksm-1 */
|
|
.dFJdWN{-webkit-text-decoration:none;text-decoration:none;color:#276EF1;} .dFJdWN:visited{color:#174EB6;} .dFJdWN:active{color:#123D90;} .dFJdWN:hover{color:#123D90;}
|
|
/* sc-component-id: typography__H1-sc-1pmaksm-2 */
|
|
.dKKgxr{font:bold 40px/56px "Uber Move",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 */
|
|
.kUifx{font:bold 32px/48px "Uber Move",Helvetica,Arial,sans-serif;margin:24px 0 16px;}
|
|
/* sc-component-id: typography__H3-sc-1pmaksm-4 */
|
|
.duevmh{font:bold 24px/36px "Uber Move",Helvetica,Arial,sans-serif;}
|
|
/* sc-component-id: typography__H5-sc-1pmaksm-6 */
|
|
.kPzBbv{font:bold 16px/24px "Uber Move",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 */
|
|
.dydGug{font:normal 14px/20px "Uber Move",Helvetica,Arial,sans-serif;padding:36px;max-width:692px;}
|
|
/* sc-component-id: typography__InlineCode-sc-1pmaksm-12 */
|
|
.cVbpdr{background-color:#F7F7F7;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 */
|
|
.dcdkiM{background-color:#F7F7F7;padding:6px;overflow-x:auto;} .dcdkiM .keyword{color:#339;font-weight:bold;} .dcdkiM .operator{color:#d14;} .dcdkiM .punctuation{color:#458;} .dcdkiM .string,.dcdkiM .number{color:#008080;}
|
|
/* sc-component-id: typography__BlockQuote-sc-1pmaksm-15 */
|
|
.dUYRyl{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-7bb4a793dd08c19a1d8e.js"/><link as="script" rel="preload" href="/react-map-gl/app-a414266688039f7921e7.js"/><link as="script" rel="preload" href="/react-map-gl/commons-1a18a7edb09934892679.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/static-map/page-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div><div class="body__Body-lvm4v2-3 gXXAFg"><div class="header__HeaderContainer-sc-1hd3yin-1 bDuPoM"><div></div></div><div class="toc__StyledTocToggle-c2gnov-6 eyqZow">Table of Contents</div><div class="toc__TocContainer-c2gnov-5 cWxAeV"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Developer Guide" href="/react-map-gl/docs/developer-guide">Developer Guide</a></div></div></li></div></ul></div><div><div title="Getting Started" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">Getting Started</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div></ul></div><div><div title="Advanced" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">Advanced</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div><div><li><div title="Custom Overlays" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Custom Overlays" href="/react-map-gl/docs/advanced/custom-overlays">Custom Overlays</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 eFnCLU" 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 dMoLKk">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FrNRT"><div><li><div title="Canvas Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Canvas Overlay" href="/react-map-gl/docs/api-reference/canvas-overlay">Canvas Overlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="HTML Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="HTML Overlay" href="/react-map-gl/docs/api-reference/html-overlay">HTML Overlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="Marker Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Marker Control" href="/react-map-gl/docs/api-reference/marker">Marker Control</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Navigation Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Navigation Control" href="/react-map-gl/docs/api-reference/navigation-control">Navigation Control</a></div></div></li></div><div><li><div title="Fullscreen Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Fullscreen Control" href="/react-map-gl/docs/api-reference/fullscreen-control">Fullscreen Control</a></div></div></li></div><div><li><div title="Geolocate Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Geolocate Control" href="/react-map-gl/docs/api-reference/geolocate-control">Geolocate Control</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Popup Control" href="/react-map-gl/docs/api-reference/popup">Popup Control</a></div></div></li></div><div><li><div title="Scale Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Scale Control" href="/react-map-gl/docs/api-reference/scale-control">Scale Control</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 jkbfmX"><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="SVG Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="SVG Overlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVG Overlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 dKqGOe"><div class="typography__MarkdownBody-sc-1pmaksm-11 dydGug"><div><h1 id="staticmap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#staticmap" aria-label="staticmap permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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"/></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">The simplest <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">React</code> wrapper around <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 dFJdWN" 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 dcdkiM language-js"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <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">class</span> <span class="token class-name">Map</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</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 punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span>
|
|
height<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">400</span><span class="token punctuation">}</span>
|
|
latitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">37.7577</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.4376</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>
|
|
<span class="token punctuation">}</span></code></pre></div>
|
|
<h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 duevmh"><a href="#initialization" aria-label="initialization permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 kPzBbv"><a href="#attributioncontrol" aria-label="code classlanguage textattributioncontrolcode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">attributionControl</code> <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 ewhNJT">option</a>. If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">true</code>, shows Mapbox's attribution control.</p>
|
|
<h5 style="position:relative" id="disabletokenwarning" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#disabletokenwarning" aria-label="code classlanguage textdisabletokenwarningcode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">true</code>.</p>
|
|
<h5 style="position:relative" id="gl" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#gl" aria-label="code classlanguage textglcode webglcontext permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr language-text">gl</code> (WebGLContext)</h5>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<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 kPzBbv"><a href="#mapboxapiaccesstoken" aria-label="code classlanguage textmapboxapiaccesstokencode string permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 kPzBbv"><a href="#mapboxapiurl" aria-label="code classlanguage textmapboxapiurlcode string permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 ewhNJT">https://api.mapbox.cn/</a>.</p>
|
|
<h5 style="position:relative" id="mapoptions" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#mapoptions" aria-label="code classlanguage textmapoptionscode object permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">{}</code></li>
|
|
</ul>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Non-public API, see <a href="https://github.com/uber/react-map-gl/issues/545" class="typography__A-sc-1pmaksm-0 ewhNJT">https://github.com/uber/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 ewhNJT"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 kPzBbv"><a href="#preservedrawingbuffer" aria-label="code classlanguage textpreservedrawingbuffercode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">preserveDrawingBuffer</code> <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 ewhNJT">option</a>. If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">true</code>, the map's canvas can be exported to a PNG using <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">map.getCanvas().toDataURL()</code>.</p>
|
|
<h5 style="position:relative" id="preventstylediffing" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#preventstylediffing" aria-label="code classlanguage textpreventstylediffingcode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">false</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">mapStyle</code> is assigned an Immutable object, when the prop changes, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr language-text">addLayer</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">removeLayer</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">setStyle</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 kPzBbv"><a href="#reusemaps" aria-label="code classlanguage textreusemapscode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">false</code></li>
|
|
</ul>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<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 cVbpdr language-text">true</code>, when the map component is unmounted, instead of calling <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 kPzBbv"><a href="#transformrequest" aria-label="code classlanguage texttransformrequestcode function permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">url</code> property and optionally <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">headers</code> and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">credentials</code> properties. Equivalent to Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">transformRequest</code> <a href="https://www.mapbox.com/mapbox-gl-js/api#map" class="typography__A-sc-1pmaksm-0 ewhNJT">map option</a>.</p>
|
|
<h3 style="position:relative" id="map-state" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#map-state" aria-label="map state permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 kPzBbv"><a href="#mapstyle" aria-label="code classlanguage textmapstylecode string object immutablemap permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 ewhNJT">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 cVbpdr 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 cVbpdr language-text">preventStyleDiffing</code> prop.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">mapStyle</code> is ignored when explicitly set to <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">null</code>.</p>
|
|
<h5 style="position:relative" id="width" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#width" aria-label="code classlanguage textwidthcode number string required permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 kPzBbv"><a href="#height" aria-label="code classlanguage textheightcode number string required permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 kPzBbv"><a href="#latitude" aria-label="code classlanguage textlatitudecode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">viewState</code> is not supplied.</p>
|
|
<h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#longitude" aria-label="code classlanguage textlongitudecode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">viewState</code> is not supplied.</p>
|
|
<h5 style="position:relative" id="zoom" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#zoom" aria-label="code classlanguage textzoomcode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">MapboxGL</code></p>
|
|
<h5 style="position:relative" id="bearing" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#bearing" aria-label="code classlanguage textbearingcode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">viewState</code> is not supplied.</p>
|
|
<h5 style="position:relative" id="pitch" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#pitch" aria-label="code classlanguage textpitchcode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">viewState</code> is not supplied..</p>
|
|
<h5 style="position:relative" id="altitude" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#altitude" aria-label="code classlanguage textaltitudecode number permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">1.5</code></li>
|
|
</ul>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<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 ewhNJT">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 kPzBbv"><a href="#viewstate" aria-label="code classlanguage textviewstatecode object permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">zoom</code> (Number) - The tile zoom level of the map. Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">MapboxGL</code>.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">bearing</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr language-text">pitch</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr language-text">altitude</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr language-text">viewState</code>, or the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">zoom</code> properties need to be specified.</p>
|
|
<h3 style="position:relative" id="render-options" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#render-options" aria-label="render options permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 kPzBbv"><a href="#asyncrender" aria-label="code classlanguage textasyncrendercode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">false</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr 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 kPzBbv"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 kPzBbv"><a href="#visible" aria-label="code classlanguage textvisiblecode boolean permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 kPzBbv"><a href="#visibilityconstraints" aria-label="code classlanguage textvisibilityconstraintscode object permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr language-text">min*</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr language-text">{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }</code></p>
|
|
<h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 kPzBbv"><a href="#onload" aria-label="code classlanguage textonloadcode function permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">load</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:load" class="typography__A-sc-1pmaksm-0 ewhNJT">Mapbox docs</a></p>
|
|
<h5 style="position:relative" id="onresize" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#onresize" aria-label="code classlanguage textonresizecode function permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 kPzBbv"><a href="#onerror" aria-label="code classlanguage textonerrorcode function permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">error</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:error" class="typography__A-sc-1pmaksm-0 ewhNJT">Mapbox docs</a></p>
|
|
<h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 kPzBbv"><a href="#getmap" aria-label="code classlanguage textgetmapcode permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr 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 cVbpdr 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 ewhNJT">MapboxGL's API</a>.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">getMap()</code></p>
|
|
<h5 style="position:relative" id="queryrenderedfeatures" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#queryrenderedfeatures" aria-label="code classlanguage textqueryrenderedfeaturescode permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 cVbpdr language-text">queryRenderedFeatures</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Use Mapbox's <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">queryRenderedFeatures</code> API to find features at point or in a bounding box. If the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">parameters</code> argument is not specified, only queries the layers with the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr 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 cVbpdr language-text">geometry</code> {<code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">[Number, Number</code> | <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 cVbpdr 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 ewhNJT">Mapbox API documentation</a>.</li>
|
|
</ul>
|
|
<h2 style="position:relative" id="faq" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#faq" aria-label="faq permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>FAQ</h2>
|
|
<h5 style="position:relative" id="where-is-fitbounds" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#where-is-fitbounds" aria-label="where is code classlanguage textfitboundscode permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Where is <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">fitBounds</code>?</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">You can use the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">WebMercatorViewport</code> utility to find the target viewport that fits around a lngLat bounding box:</p>
|
|
<div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-js"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>WebMercatorViewport<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">const</span> viewport <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebMercatorViewport</span><span class="token punctuation">(</span><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">fitBounds</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">122.4</span><span class="token punctuation">,</span> <span class="token number">37.7</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">122.5</span><span class="token punctuation">,</span> <span class="token number">37.8</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
padding<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
|
offset<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/* viewport is a WebMercatorViewport instance, containing these fields:
|
|
latitude: 37.75001689223574,
|
|
longitude: -122.44999999999976,
|
|
zoom: 10.966817190981073,
|
|
pitch: 0,
|
|
bearing: 0,
|
|
...
|
|
*/</span></code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="docs/api-reference/web-mercator-viewport.md" class="typography__A-sc-1pmaksm-0 ewhNJT">Documentation of WebMercatorViewport</a></p>
|
|
<h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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/uber/react-map-gl/tree/5.2-release/src/api-reference/static-map.js" class="typography__A-sc-1pmaksm-0 ewhNJT">static-map.js</a></p></div></div></div></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/static-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-a414266688039f7921e7.js"],"component---src-home-js":["/component---src-home-js-5567f17f64fafd54b99f.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-ebadec786762b14117ce.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-0ca00b6efcf12c356533.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-9385631f409fcb6f6d30.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-e53df838b76b9e8a878d.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-ef2b15826e6c37659257.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-0febf6e932334bf369bf.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-4124fa82dc370367b642.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-d01467258de71693e0fa.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7d9fccdd44147c143435.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-cc82d672cc2091e15622.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-1c97791be7a1455e6a31.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-6c8edb41435526128e70.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-3195e542ef4c2dd8d826.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-0525c25f5c4d5bd72dfe.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-0f17310fe89f108bbbae.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-b85c4e0d9b18863e5a9a.js"]};/*]]>*/</script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js" async=""></script><script src="/react-map-gl/commons-1a18a7edb09934892679.js" async=""></script><script src="/react-map-gl/app-a414266688039f7921e7.js" async=""></script><script src="/react-map-gl/webpack-runtime-7bb4a793dd08c19a1d8e.js" async=""></script></body></html> |