mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
135 lines
42 KiB
HTML
135 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.32.0"/><title data-react-helmet="true">react-map-gl | Adding Custom Data</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.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" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="og:url" content="https://github.com/visgl/*"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:title" content="react-map-gl | Adding Custom Data"/><meta data-react-helmet="true" property="og:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" property="og:image" content="https://github.com/visgl/images/hero-sm.jpg"/><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" content="react-map-gl | Adding Custom Data"/><meta data-react-helmet="true" name="twitter:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="twitter:image" content="https://github.com/visgl/images/hero-sm.jpg"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://github.com/visgl","name":"react-map-gl"},[{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://github.com/visgl/*","name":"react-map-gl | Adding Custom Data","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | Adding Custom Data","headline":"react-map-gl | Adding Custom Data","image":{"@type":"ImageObject","url":"https://github.com/visgl/images/hero-sm.jpg"},"description":"React wrapper for Mapbox GL JS"}]]</script><script data-react-helmet="true" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-74374017-2"></script><style data-styled="ckjqBY kTxBVF hLObhf jcCSEG bdPEit dkfbFn isdBno ljEIIX cqPqff FcGip iZLwPt cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd jYCwIr cncNYa dMoEUD fPGooQ egvBsN ePRhQs hsOfQe kVRSNy" data-styled-version="4.4.1">
|
|
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
|
|
.idNLwm{height:100%;width:100%;padding:64px 0 0 300px;} @media screen and (max-width:768px){.idNLwm{height:calc(100vh - 64px);padding:0;-webkit-order:2;-ms-flex-order:2;order:2;}}
|
|
/* sc-component-id: body__Body-lvm4v2-3 */
|
|
.ckjqBY{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;width:100vw;height:100vh;}
|
|
/* sc-component-id: toc__TocChevron-c2gnov-0 */
|
|
.isdBno{height:16px;width:16px;position:absolute;left:24px;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;}.ljEIIX{height:16px;width:16px;position:absolute;left:24px;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 */
|
|
.jcCSEG{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.bdPEit{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#486865;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.dkfbFn{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid #e1f0ee;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
/* sc-component-id: toc__TocHeader-c2gnov-2 */
|
|
.cqPqff{display:block;padding:16px 16px 16px 48px;} .cqPqff:hover{background:#f7fcfb;}
|
|
/* sc-component-id: toc__TocLink-c2gnov-3 */
|
|
.cowmvG a{display:block;padding:16px 16px 16px 60px;color:#486865 !important;-webkit-text-decoration:none;text-decoration:none;} .cowmvG:hover{background:#f7fcfb;}.eYbFBV a{display:block;padding:16px 16px 16px 60px;color:#00ADE6 !important;-webkit-text-decoration:none;text-decoration:none;} .eYbFBV:hover{background:#f7fcfb;}
|
|
/* 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;}.iZLwPt{list-style:none;margin:0;max-height:448px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}
|
|
/* sc-component-id: toc__TocContainer-c2gnov-5 */
|
|
.hLObhf{position:fixed;top:0;padding:64px 0;max-width:300px;height:100%;z-index:2;border-right:1px solid #cae0dc;overflow-y:auto;overflow-x:hidden;width:100%;} @media screen and (max-width:768px){.hLObhf{max-width:100%;height:initial;border-right:none;position:-webkit-sticky;position:sticky;padding: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: header__HeaderContainer-sc-3r2dxq-1 */
|
|
.kTxBVF{grid-column:1/3;grid-row:1/2;} @media screen and (max-width:768px){.kTxBVF{-webkit-order:1;-ms-flex-order:1;order:1;}}
|
|
/* sc-component-id: sc-global-3868639009 */
|
|
body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:border-box;}
|
|
/* sc-component-id: typography__A-sc-1pmaksm-0 */
|
|
.dvhuEd{-webkit-text-decoration:none;text-decoration:none;color:#00ADE6;} .dvhuEd:visited{color:#174EB6;} .dvhuEd:active{color:#123D90;} .dvhuEd:hover{color:#123D90;}
|
|
/* sc-component-id: typography__GatsbyA-sc-1pmaksm-1 */
|
|
.dMoEUD{-webkit-text-decoration:none;text-decoration:none;color:#00ADE6;} .dMoEUD:visited{color:#174EB6;} .dMoEUD:active{color:#123D90;} .dMoEUD:hover{color:#123D90;}
|
|
/* sc-component-id: typography__H1-sc-1pmaksm-2 */
|
|
.dMTgn{font:bold 40px/56px UberMove,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 */
|
|
.jYCwIr{font:bold 32px/48px UberMove,Helvetica,Arial,sans-serif;margin:24px 0 16px;}
|
|
/* sc-component-id: typography__H3-sc-1pmaksm-4 */
|
|
.ePRhQs{font:bold 24px/36px UberMove,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 */
|
|
.iTIrjR{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;padding:36px;max-width:692px;}
|
|
/* sc-component-id: typography__InlineCode-sc-1pmaksm-12 */
|
|
.egvBsN{background-color:#f7fcfb;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 */
|
|
.fPGooQ{font-size:14px;background-color:#f7fcfb;padding:6px;overflow-x:auto;} .fPGooQ .token.comment,.fPGooQ .token.prolog,.fPGooQ .token.doctype,.fPGooQ .token.cdata{color:slategray;} .fPGooQ .token.punctuation{color:#999;} .fPGooQ .token.namespace{opacity:.7;} .fPGooQ .token.property,.fPGooQ .token.tag,.fPGooQ .token.boolean,.fPGooQ .token.number,.fPGooQ .token.constant,.fPGooQ .token.symbol,.fPGooQ .token.deleted{color:#905;} .fPGooQ .token.selector,.fPGooQ .token.attr-name,.fPGooQ .token.string,.fPGooQ .token.char,.fPGooQ .token.builtin,.fPGooQ .token.inserted{color:#690;} .fPGooQ .token.operator,.fPGooQ .token.entity,.fPGooQ .token.url,.fPGooQ .language-css .token.string,.fPGooQ .style .token.string{color:#9a6e3a;background:hsla(0,0%,100%,.5);} .fPGooQ .token.atrule,.fPGooQ .token.attr-value,.fPGooQ .token.keyword{color:#07a;} .fPGooQ .token.function,.fPGooQ .token.class-name{color:#DD4A68;} .fPGooQ .token.regex,.fPGooQ .token.important,.fPGooQ .token.variable{color:#e90;} .fPGooQ .token.important,.fPGooQ .token.bold{font-weight:bold;} .fPGooQ .token.italic{font-style:italic;} .fPGooQ .token.entity{cursor:help;}</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-79a215a9209e4388589b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-58440f29242e55fac5e3.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-5428c6cd0874988e6a97.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/adding-custom-data/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.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 class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" 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 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" 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 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><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><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" 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 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="adding-custom-data" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#adding-custom-data" aria-label="adding custom data permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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 jYCwIr"><a href="#native-mapbox-layers" aria-label="native mapbox layers permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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 using the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source">Source</a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer">Layer</a> components:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN 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> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Source<span class="token punctuation">,</span> Layer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-map-gl'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> geojson <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.4</span><span class="token punctuation">,</span> <span class="token number">37.8</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> layerStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
id<span class="token operator">:</span> <span class="token string">'point'</span><span class="token punctuation">,</span>
|
|
type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
|
|
paint<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">'circle-radius'</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
|
<span class="token string">'circle-color'</span><span class="token operator">:</span> <span class="token string">'#007cbf'</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">App</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> setViewport<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</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 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>setViewport<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Source id<span class="token operator">=</span><span class="token string">"my-data"</span> type<span class="token operator">=</span><span class="token string">"geojson"</span> data<span class="token operator">=</span><span class="token punctuation">{</span>geojson<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Layer <span class="token punctuation">{</span><span class="token operator">...</span>layerStyle<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>Source<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></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 dvhuEd">Mapbox style specification</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">For dynamically updating data sources and layers, check out the <a href="http://visgl.github.io/react-map-gl/examples/geojson" class="typography__A-sc-1pmaksm-0 dvhuEd">GeoJSON</a> and <a href="http://visgl.github.io/react-map-gl/examples/geojson-animation" class="typography__A-sc-1pmaksm-0 dvhuEd">GeoJSON animation</a> examples.</p><h2 style="position:relative" id="overlays" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#overlays" aria-label="overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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.
|
|
They are great for creating light-weight custom drawings.</p><h3 style="position:relative" id="example" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#example" aria-label="example permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN 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 ePRhQs"><a href="#built-in-overlays" aria-label="built in overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></li></ul><h3 style="position:relative" id="example-overlays" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#example-overlays" aria-label="example overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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/visgl/react-map-gl/tree/6.1-release/examples/additional-overlays" class="typography__A-sc-1pmaksm-0 dvhuEd">additional overlays</a> in the examples folder that can be copied into applications <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScatterplotOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ChoroplethOverlay</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Third-party overlays are also available. For example, the <a href="https://github.com/vicapow/react-map-gl-heatmap-overlay" class="typography__A-sc-1pmaksm-0 dvhuEd">heatmap-overlay</a> module uses <a href="https://github.com/vicapow/webgl-heatmap" class="typography__A-sc-1pmaksm-0 dvhuEd">webgl-heatmap</a> to create geographic heatmaps.</p><h2 style="position:relative" id="other-visgl-libraries" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#other-visgl-libraries" aria-label="other visgl libraries permalink" class="typography__A-sc-1pmaksm-0 dvhuEd 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>Other vis.gl Libraries</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the <a href="https://www.github.com/visgl" class="typography__A-sc-1pmaksm-0 dvhuEd">vis.gl</a> ecosystem, a suite of high-performance data visualization tools for the Web.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a> - WebGL-powered framework for the visualization of large datasets.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://loaders.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">loaders.gl</a> - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://nebula.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">nebula.gl</a> - 3D-enabled GeoJSON editing based on deck.gl and React.</li></ul></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/get-started/adding-custom-data";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-27d1c1f505dad8dcb0bf.js"],"app":["/app-58440f29242e55fac5e3.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-71c2eb2a34d6826fd04b.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-2b8e7448bb4a052847d1.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-37fcc68696a0c9739502.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-4fa2b8391fdb31334ecd.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-a34bab23c903ff0d55ef.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-1ae2a33eac75d717984e.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-f811d5ce3360516a2fc7.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-329bf0e586dd2ce4a0ce.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-2fd17e53e1ab83d2e8a6.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-ced1d318641b85bc48be.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-0102c9fe4ce1a9892dcb.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-4810f9f856c45f18a4f4.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-632796bdf22aca3cd796.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-738ee71ff9e3d1ceb8cc.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-5428c6cd0874988e6a97.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-861d77d9a70335a1bb15.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-afa6fbf60f75ba79c6b1.js"],"component---src-home-js":["/component---src-home-js-71cf7f05173b1dddaaf7.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-27d1c1f505dad8dcb0bf.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-5428c6cd0874988e6a97.js" async=""></script><script src="/react-map-gl/app-58440f29242e55fac5e3.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-79a215a9209e4388589b.js" async=""></script></body></html> |