mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
150 lines
38 KiB
HTML
150 lines
38 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 cpyGKT hGwSqT jkbfmX dKqGOe dydGug dKKgxr ewhNJT kUifx cncNYa dcdkiM cVbpdr duevmh" 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;}.cpyGKT{list-style:none;margin:0;max-height:224px;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__H3-sc-1pmaksm-4 */
|
|
.duevmh{font:bold 24px/36px "Uber Move",Helvetica,Arial,sans-serif;}
|
|
/* sc-component-id: typography__P-sc-1pmaksm-8 */
|
|
.cncNYa{margin:'0 0 16px';}
|
|
/* 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/get-started/adding-custom-data/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 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">Getting Started</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><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 jkbfmX"><a aria-current="page" title="Adding Custom Data" class="" 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 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">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Canvas Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Canvas Overlay" href="/react-map-gl/docs/api-reference/canvas-overlay">Canvas Overlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="HTML Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="HTML Overlay" href="/react-map-gl/docs/api-reference/html-overlay">HTML Overlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="InteractiveMap" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="Marker Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Marker Control" href="/react-map-gl/docs/api-reference/marker">Marker Control</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Navigation Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Navigation Control" href="/react-map-gl/docs/api-reference/navigation-control">Navigation Control</a></div></div></li></div><div><li><div title="Fullscreen Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Fullscreen Control" href="/react-map-gl/docs/api-reference/fullscreen-control">Fullscreen Control</a></div></div></li></div><div><li><div title="Geolocate Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Geolocate Control" href="/react-map-gl/docs/api-reference/geolocate-control">Geolocate Control</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Popup Control" href="/react-map-gl/docs/api-reference/popup">Popup Control</a></div></div></li></div><div><li><div title="Scale Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Scale Control" href="/react-map-gl/docs/api-reference/scale-control">Scale Control</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 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="adding-custom-data" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#adding-custom-data" aria-label="adding custom data 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>Adding Custom Data</h1>
|
|
<h2 style="position:relative" id="native-mapbox-layers" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#native-mapbox-layers" aria-label="native mapbox layers 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>Native Mapbox Layers</h2>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">You can inject data and mapbox native layers by modifying the map style object:</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>fromJS<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'immutable'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> mapStyle <span class="token operator">=</span> <span class="token function">fromJS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
version<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
|
sources<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
points<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
type<span class="token operator">:</span> <span class="token string">'geojson'</span><span class="token punctuation">,</span>
|
|
data<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
type<span class="token operator">:</span> <span class="token string">'FeatureCollection'</span><span class="token punctuation">,</span>
|
|
features<span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>type<span class="token operator">:</span> <span class="token string">'Feature'</span><span class="token punctuation">,</span> geometry<span class="token operator">:</span> <span class="token punctuation">{</span>type<span class="token operator">:</span> <span class="token string">'Point'</span><span class="token punctuation">,</span> coordinates<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">122.45</span><span class="token punctuation">,</span> <span class="token number">37.78</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
layers<span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
id<span class="token operator">:</span> <span class="token string">'my-layer'</span><span class="token punctuation">,</span>
|
|
type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
|
|
source<span class="token operator">:</span> <span class="token string">'points'</span><span class="token punctuation">,</span>
|
|
paint<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">'circle-color'</span><span class="token operator">:</span> <span class="token string">'#f00'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'circle-radius'</span><span class="token operator">:</span> <span class="token number">4</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token operator"><</span>ReactMapGL mapStyle<span class="token operator">=</span><span class="token punctuation">{</span>mapStyle<span class="token punctuation">}</span> <span class="token operator">...</span> <span class="token operator">/</span><span class="token operator">></span></code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">For details about data sources and layer configuration, check out the <a href="https://www.mapbox.com/mapbox-gl-js/style-spec" class="typography__A-sc-1pmaksm-0 ewhNJT">Mapbox style specification</a>.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">For dynamically updating data and layers, check out the <a href="http://uber.github.io/react-map-gl/examples/geojson" class="typography__A-sc-1pmaksm-0 ewhNJT">GeoJSON</a> and <a href="http://uber.github.io/react-map-gl/examples/geojson-animation" class="typography__A-sc-1pmaksm-0 ewhNJT">GeoJSON animation</a> examples.</p>
|
|
<h2 style="position:relative" id="overlays" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#overlays" aria-label="overlays 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>Overlays</h2>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl provides a basic overlay API that enables applications to overlay data on top of maps.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Note that the built-in overlays are intended to provide basic functionality only. For more feature rich and performant data visualization overlay use cases, consider using <a href="https://uber.github.io/deck.gl" class="typography__A-sc-1pmaksm-0 ewhNJT">deck.gl</a>.</p>
|
|
<h3 style="position:relative" id="example" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#example" aria-label="example 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>Example</h3>
|
|
<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>SVGOverlay<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">redraw</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>project<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> <span class="token punctuation">[</span>cx<span class="token punctuation">,</span> cy<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">project</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token operator"><</span>circle cx<span class="token operator">=</span><span class="token punctuation">{</span>cx<span class="token punctuation">}</span> cy<span class="token operator">=</span><span class="token punctuation">{</span>cy<span class="token punctuation">}</span> r<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span> fill<span class="token operator">=</span><span class="token string">"blue"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token operator"><</span>MapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>SVGOverlay redraw<span class="token operator">=</span><span class="token punctuation">{</span>redraw<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>MapGL<span class="token operator">></span></code></pre></div>
|
|
<h3 style="position:relative" id="built-in-overlays" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#built-in-overlays" aria-label="built in overlays 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>Built-in Overlays</h3>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Built-in overlays are: <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">SVGOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">HTMLOverlay</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">CanvasOverlay</code>. They are imported using</p>
|
|
<div class="gatsby-highlight" data-language="text"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-text"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">import {SVGOverlay, HTMLOverlay, CanvasOverlay} from 'react-map-gl';</code></pre></div>
|
|
<h3 style="position:relative" id="example-overlays" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#example-overlays" aria-label="example overlays 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>Example Overlays</h3>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">There are a couple of <a href="https://github.com/uber/react-map-gl/tree/5.2-release/examples/additional-overlays" class="typography__A-sc-1pmaksm-0 ewhNJT">additional overlays</a> in the examples folder that can be copied into applications <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">ScatterplotOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">DraggablePointsOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">ChoroplethOverlay</code>.</p>
|
|
<h3 style="position:relative" id="third-party-overlays" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#third-party-overlays" aria-label="third party overlays 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>Third-party Overlays</h3>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Third party overlays can also be created. For example, the <a href="https://github.com/vicapow/react-map-gl-heatmap-overlay" class="typography__A-sc-1pmaksm-0 ewhNJT">heatmap-overlay</a> uses <a href="https://github.com/vicapow/webgl-heatmap" class="typography__A-sc-1pmaksm-0 ewhNJT">webgl-heatmap</a> to create geographic heatmaps.</p>
|
|
<img width="200" src="https://cloud.githubusercontent.com/assets/499192/11028150/33f34640-86bc-11e5-9678-3fa1798394d5.gif"/>
|
|
<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> HeatmapOverlay <span class="token keyword">from</span> <span class="token string">'react-map-gl-heatmap-overlay'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> cities <span class="token keyword">from</span> <span class="token string">'example-cities'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token operator"><</span>MapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>HeatmapOverlay locations<span class="token operator">=</span><span class="token punctuation">{</span>cities<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span>viewport<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>MapGL<span class="token operator">></span></code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Want to create and share your own overlay? Check the <a href="https://github.com/uber/react-map-gl/tree/5.2-release/examples/additional-overlays" class="typography__A-sc-1pmaksm-0 ewhNJT">examples/additional-overlays</a> folder for examples.</p></div></div></div></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/adding-custom-data";/*]]>*/</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> |