mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
151 lines
42 KiB
HTML
151 lines
42 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.20.36"/><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 cCpKjM FcGip FrNRT hGwSqT jkbfmX dKqGOe dydGug dKKgxr ewhNJT cncNYa cVbpdr kUifx kPzBbv hsOfQe kVRSNy" 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;}.cCpKjM{display:block;padding:16px 16px 16px 84px;} .cCpKjM: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__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__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;}</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-edcd51c8640cbbafbfe8.js"/><link as="script" rel="preload" href="/react-map-gl/framework-c329abde5cc18bcee814.js"/><link as="script" rel="preload" href="/react-map-gl/app-8de1e9f42913c7370890.js"/><link as="script" rel="preload" href="/react-map-gl/6e6a36f4ff8526c60314e9f12b0013febaeb8c38-44a364ff440a02a84e8d.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-655d6bb9a253703c6479.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map-controller/page-data.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><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 class="toc__TocEntry-c2gnov-1 fCCoSo"><span class="toc__TocHeader-c2gnov-2 cCpKjM"></span></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 jkbfmX"><a aria-current="page" title="MapController" class="" 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 hGwSqT"><a title="StaticMap" 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="mapcontroller" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#mapcontroller" aria-label="mapcontroller 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>MapController</h1>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.0-green" alt="Since v4.0"/></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">The easiest way to create a custom map control is to extend the default <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">MapController</code> class.</p>
|
|
<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>
|
|
<h5 style="position:relative" id="events" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#events" aria-label="code classlanguage texteventscode array 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">events</code> (Array)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">A list of additional event names that this control subscribes to.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Available events: <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">click</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">dblclick</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">tap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">doubletap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">press</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchin</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchout</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pinchcancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rotate</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rotatestart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rotatemove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rotateend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rotatecancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pan</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pandown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panright</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">panend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pancancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">swipe</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">swipeleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">swiperight</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">swipeup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">swipedown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pointerdown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pointermove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pointerup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">keydown</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">keyup</code>.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">The following events are toggled on/off by InteractiveMap props: </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">scrollZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">['wheel']</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">dragPan</code> and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">dragRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">['panstart', 'panmove', 'panend']</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">touchZoomRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">['pinchstart', 'pinchmove', 'pinchend']</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">doubleClickZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">['doubletap']</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">keyboard</code> - <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">['keydown']</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Event object is generated by <a href="https://github.com/uber-web/mjolnir.js" class="typography__A-sc-1pmaksm-0 ewhNJT">mjolnir.js</a>. It always has the following properties:</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">type</code> (string) - The event type to which the event handler is subscribed, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">'click'</code> or <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">'pointermove'</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">center</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">{x, y}</code>) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX" class="typography__A-sc-1pmaksm-0 ewhNJT"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">clientX/Y</code></a>)</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">offsetCenter</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">{x, y}</code>) - The center of the event location relative to the map.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">target</code> (Object) - The target of the event, as specified by the original <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">srcEvent</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">srcEvent</code> (Object) - The original event object dispatched by the browser to the JS runtime</li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Additionally, event objects for different event types contain a subset of the following properties:</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">key</code> (number) - The keycode of the keyboard event</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">leftButton</code> (boolean) - Flag indicating whether the left button is involved during the event</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">middleButton</code> (boolean) - Flag indicating whether the middle button is involved during the event</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">rightButton</code> (boolean) - Flag indicating whether the right button is involved during the event</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">pointerType</code> (string) - A string indicating the type of input (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">'mouse'</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">'touch'</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">'pointer'</code>)</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">delta</code> (number) - The scroll magnitude/distance of a wheel event</li>
|
|
</ul>
|
|
<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="handleevent" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#handleevent" aria-label="code classlanguage texthandleeventcode 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">handleEvent</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">handleEvent(event)</code></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:</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">_onPanStart(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onPan(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onPanEnd(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onPinchStart(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onPinch(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onPinchEnd(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onDoubleTap(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onWheel(event)</code></li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">_onKeyDown(event)</code></li>
|
|
</ul>
|
|
<h5 style="position:relative" id="getmapstate" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#getmapstate" aria-label="code classlanguage textgetmapstatecode 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">getMapState</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">getMapState(overrides)</code></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Get a new descriptor object of the map state. If specified, props in the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">overrides</code> object override the current map props.</p>
|
|
<h5 style="position:relative" id="setoptions" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#setoptions" aria-label="code classlanguage textsetoptionscode 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">setOptions</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">setOptions(options)</code></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Add/remove event listeners based on the latest <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">InteractiveMap</code> props.</p>
|
|
<h5 style="position:relative" id="setstate" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#setstate" aria-label="code classlanguage textsetstatecode 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">setState</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">setState(newState)</code></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Save a persistent state (e.g. isDragging) for future use.</p>
|
|
<h5 style="position:relative" id="updateviewport" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#updateviewport" aria-label="code classlanguage textupdateviewportcode 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">updateViewport</code></h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">updateViewport(newMapState, extraProps, extraState)</code></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Invoke <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">onViewportChange</code> callback with a new map state.</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/visgl/react-map-gl/tree/5.2-release/src/utils/map-controller.js" class="typography__A-sc-1pmaksm-0 ewhNJT">map-controller.js</a></p></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map-controller";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-8de1e9f42913c7370890.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-c5f2cf797f91936c45dd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-30dcbe73f2f848b6de03.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-f86884ab73a1ff19df0f.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-7d55061135d44b841bb7.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-0f75aa2f53287d1e675d.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-2fb526d33a91fd35db56.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-3485a097759b789df18b.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-d13935bd0dfa430e2b66.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-8aec7f17eb0b6c6778ce.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-3f5d65931d86fe2f5906.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3ee46a88cbd243948aa3.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-c33b8dc7804176d58f28.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-b20a4d3c7034b5901630.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-02f8ec90cccd70af698b.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-655d6bb9a253703c6479.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-1da58f114696ef3f2e8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-51d7708d40ff08f564da.js"],"component---src-home-js":["/component---src-home-js-a29533c9f20477918ebf.js"]};/*]]>*/</script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-655d6bb9a253703c6479.js" async=""></script><script src="/react-map-gl/6e6a36f4ff8526c60314e9f12b0013febaeb8c38-44a364ff440a02a84e8d.js" async=""></script><script src="/react-map-gl/app-8de1e9f42913c7370890.js" async=""></script><script src="/react-map-gl/framework-c329abde5cc18bcee814.js" async=""></script><script src="/react-map-gl/webpack-runtime-edcd51c8640cbbafbfe8.js" async=""></script></body></html> |