mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
198 lines
49 KiB
HTML
198 lines
49 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 dcdkiM 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;}
|
|
/* 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;}
|
|
/* 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-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/popup/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 jkbfmX"><a aria-current="page" title="Popup Control" class="" 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="popup-control" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#popup-control" aria-label="popup 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>Popup Control</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">This is a React equivalent of Mapbox's <a href="https://www.mapbox.com/mapbox-gl-js/api/#popup" class="typography__A-sc-1pmaksm-0 ewhNJT">Popup Control</a>, which can be used to
|
|
show tooltip popups with custom HTML content at specific locations on the map.</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> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Popup<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>
|
|
showPopup<span class="token operator">:</span> <span class="token boolean">true</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>showPopup<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 latitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">37.78</span><span class="token punctuation">}</span> longitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">122.41</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 punctuation">{</span>showPopup <span class="token operator">&&</span> <span class="token operator"><</span>Popup
|
|
latitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">37.78</span><span class="token punctuation">}</span>
|
|
longitude<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">122.41</span><span class="token punctuation">}</span>
|
|
closeButton<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
|
closeOnClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
|
|
onClose<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</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>showPopup<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
|
anchor<span class="token operator">=</span><span class="token string">"top"</span> <span class="token operator">></span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>You are here<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Popup<span class="token operator">></span><span class="token punctuation">}</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>
|
|
<h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#latitude" aria-label="code classlanguage textlatitudecode number 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">latitude</code> (Number, required)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Latitude of the anchor.</p>
|
|
<h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#longitude" aria-label="code classlanguage textlongitudecode number 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">longitude</code> (Number, required)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Longitude of the anchor.</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">0</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Altitude of the anchor.</p>
|
|
<h5 style="position:relative" id="offsetleft" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#offsetleft" aria-label="code classlanguage textoffsetleftcode 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">offsetLeft</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">Offset of the anchor from the left in pixels, negative number indicates left.</p>
|
|
<h5 style="position:relative" id="offsettop" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#offsettop" aria-label="code classlanguage textoffsettopcode 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">offsetTop</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">Offset of the anchor from the top in pixels, negative number indicates up.</p>
|
|
<h5 style="position:relative" id="closebutton" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#closebutton" aria-label="code classlanguage textclosebuttoncode 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">closeButton</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">If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">true</code>, a close button will appear in the top right corner of the popup.</p>
|
|
<h5 style="position:relative" id="closeonclick" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#closeonclick" aria-label="code classlanguage textcloseonclickcode 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">closeOnClick</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">If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">true</code>, the popup will closed when the map is clicked.</p>
|
|
<h5 style="position:relative" id="tipsize" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#tipsize" aria-label="code classlanguage texttipsizecode 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">tipSize</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">10</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Size of the tip pointing to the coordinate.</p>
|
|
<h5 style="position:relative" id="anchor" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#anchor" aria-label="code classlanguage textanchorcode 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">anchor</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">bottom</code></li>
|
|
</ul>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">A string indicating the popup's position relative to the coordinate.
|
|
Options are <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">top</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">bottom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">top-left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">top-right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">bottom-left</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">bottom-right</code>.</p>
|
|
<h5 style="position:relative" id="dynamicposition" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#dynamicposition" aria-label="code classlanguage textdynamicpositioncode 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">dynamicPosition</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">If <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">true</code>, the anchor will be dynamically adjusted to ensure the popup falls within the map container.</p>
|
|
<h5 style="position:relative" id="sortbydepth" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#sortbydepth" aria-label="code classlanguage textsortbydepthcode 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">sortByDepth</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>, the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map.</p>
|
|
<h5 style="position:relative" id="onclose" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#onclose" aria-label="code classlanguage textonclosecode 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">onClose</code> (Function)</h5>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user closes the popup.</p>
|
|
<h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode 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">captureScroll</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">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p>
|
|
<h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode 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">captureDrag</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">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p>
|
|
<h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode 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">captureClick</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">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">onClick</code> callback when this component is clicked.</p>
|
|
<h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 kPzBbv"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode 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">captureDoubleClick</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">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</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/uber/react-map-gl/tree/5.2-release/src/api-reference/popup.js" class="typography__A-sc-1pmaksm-0 ewhNJT">popup.js</a></p></div></div></div></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/popup";/*]]>*/</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> |