mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
164 lines
42 KiB
HTML
164 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 dcdkiM cVbpdr kUifx kPzBbv dFJdWN 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__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__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;}</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/geolocate-control/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 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 jkbfmX"><a aria-current="page" title="Geolocate Control" class="" 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="geolocate-control" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#geolocate-control" aria-label="geolocate control 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>Geolocate Control</h1>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.1-green" alt="Since v4.1"/></p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox's <a href="https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 ewhNJT">GeolocateControl</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 operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> 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> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>GeolocateControl<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>
|
|
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
viewport<span class="token operator">:</span> <span class="token punctuation">{</span>longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">122.45</span><span class="token punctuation">,</span> latitude<span class="token operator">:</span> <span class="token number">37.78</span><span class="token punctuation">,</span> zoom<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">}</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">const</span> <span class="token punctuation">{</span>viewport<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>ReactMapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span>
|
|
width<span class="token operator">=</span><span class="token string">"100vw"</span>
|
|
height<span class="token operator">=</span><span class="token string">"100vh"</span>
|
|
onViewportChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">viewport</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>viewport<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>GeolocateControl
|
|
positionOptions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>enableHighAccuracy<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
trackUserLocation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>ReactMapGL<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>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Accepts all the options of <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 ewhNJT">Mapbox GeolocatControl</a>.</p>
|
|
<h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function optional 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">onViewportChange</code> (Function, optional)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing <a class="typography__GatsbyA-sc-1pmaksm-1 dFJdWN" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>'s <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">onViewportChange</code>.</p>
|
|
<h5 style="position:relative" id="ongeolocate" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#ongeolocate" aria-label="code classlanguage textongeolocatecode function optional 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">onGeolocate</code> (Function, optional)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when Geolocation API position updates. It is called with a Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 ewhNJT">PositionOptions</a> object.</p>
|
|
<h5 style="position:relative" id="positionoptions" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#positionoptions" aria-label="code classlanguage textpositionoptionscode 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">positionOptions</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">{enableHighAccuracy: false, timeout: 6000}</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">A Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 ewhNJT">PositionOptions</a> object.</p>
|
|
<h5 style="position:relative" id="fitboundsoptions" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#fitboundsoptions" aria-label="code classlanguage textfitboundsoptionscode 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">fitBoundsOptions</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">{maxZoom: 15}</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#fitbounds" class="typography__A-sc-1pmaksm-0 ewhNJT">fitBounds</a> options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.</p>
|
|
<h5 style="position:relative" id="trackuserlocation" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#trackuserlocation" aria-label="code classlanguage texttrackuserlocationcode 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">trackUserLocation</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 true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.</p>
|
|
<h5 style="position:relative" id="showuserlocation" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#showuserlocation" aria-label="code classlanguage textshowuserlocationcode 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">showUserLocation</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">By default a dot will be shown on the map at the user's location. Set to false to disable.</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">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 ewhNJT">React style</a> object applied to Geolocate control button.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Check <a href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/locate-user/src/app.js" class="typography__A-sc-1pmaksm-0 ewhNJT"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">locate user</code></a> example for basic styling.</p>
|
|
<h5 style="position:relative" id="label" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#label" aria-label="code classlanguage textlabelcode 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">label</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">Geolocate</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the Geolocate control button.</p>
|
|
<h5 style="position:relative" id="auto" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#auto" aria-label="code classlanguage textautocode 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">auto</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">Auto trigger geolocate on successful mounting of component</p>
|
|
<h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#styling" aria-label="styling 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>Styling</h2>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</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/components/geolocate-control.js" class="typography__A-sc-1pmaksm-0 ewhNJT">geolocate-control.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/geolocate-control";/*]]>*/</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> |