archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-18 15:54:22 +00:00
Code Issues Projects Releases Wiki Activity
react-map-gl/docs/index.html

110 lines
31 KiB
HTML
Raw Blame History

<!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 | Introduction</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/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.3.0/mapbox-gl-draw.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.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 | Introduction"/><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 | Introduction"/><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 | Introduction","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | Introduction","headline":"react-map-gl | Introduction","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 ljEIIX isdBno cqPqff cpyGKT FcGip eYbFBV cowmvG idNLwm iTIrjR cncNYa dvhuEd hBeZII dMTgn bnjLCb kXxWox kxRoVr hsOfQe kVRSNy dMoEUD jYCwIr egvBsN" 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 */
.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;}.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;}
/* 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 */
.eYbFBV a{display:block;padding:16px 16px 16px 60px;color:#00ADE6 !important;-webkit-text-decoration:none;text-decoration:none;} .eYbFBV:hover{background:#f7fcfb;}.cowmvG a{display:block;padding:16px 16px 16px 60px;color:#486865 !important;-webkit-text-decoration:none;text-decoration:none;} .cowmvG:hover{background:#f7fcfb;}
/* sc-component-id: toc__TocSubpages-c2gnov-4 */
.cpyGKT{list-style:none;margin:0;max-height:224px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}.FcGip{list-style:none;margin:0;max-height:0px;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__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__Img-sc-1pmaksm-15 */
.hBeZII{max-width:100%;}
/* sc-component-id: typography__Table-sc-1pmaksm-17 */
.bnjLCb{border-collapse:collapse;border-spacing:1px;width:100%;}
/* sc-component-id: typography__TableHeaderCell-sc-1pmaksm-18 */
.kXxWox{padding:4px;text-align:left;background:#f7fcfb;font-weight:bold;border:1px solid #e1f0ee;}
/* sc-component-id: typography__TableBodyCell-sc-1pmaksm-19 */
.kxRoVr{padding:4px;text-align:left;border:1px solid #e1f0ee;}</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-b299849377ee80f100b6.js"/><link as="script" rel="preload" href="/react-map-gl/framework-47a7447cd78cae046a8b.js"/><link as="script" rel="preload" href="/react-map-gl/app-c33704d3a1abd6ea3046.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/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 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">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Introduction" class="" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;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 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">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><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="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Tips and Tricks" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Tips and Tricks" href="/react-map-gl/docs/get-started/tips-and-tricks">Tips and Tricks</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="default (Map)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (Map)" href="/react-map-gl/docs/api-reference/map">default (Map)</a></div></div></li></div><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="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="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="MapProvider" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapProvider" href="/react-map-gl/docs/api-reference/map-provider">MapProvider</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="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="useControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="useControl" href="/react-map-gl/docs/api-reference/use-control">useControl</a></div></div></li></div><div><li><div title="useMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="useMap" href="/react-map-gl/docs/api-reference/use-map">useMap</a></div></div></li></div><div><li><div title="Types" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Types" href="/react-map-gl/docs/api-reference/types">Types</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"><p class="typography__P-sc-1pmaksm-8 cncNYa">
These docs are for
<a href="https://github.com/visgl/react-map-gl/tree/7.0-release/docs" class="typography__A-sc-1pmaksm-0 dvhuEd">
<img src="https://img.shields.io/badge/v7.0-brightgreen.svg?style=flat-square" class="typography__Img-sc-1pmaksm-15 hBeZII"/>
</a>
Looking for an old version?
<a href="https://github.com/visgl/react-map-gl/tree/7.0-release/docs" class="typography__A-sc-1pmaksm-0 dvhuEd">
<img src="https://img.shields.io/badge/v6.1-brightgreen.svg?style=flat-square" class="typography__Img-sc-1pmaksm-15 hBeZII"/>
</a>
<a href="https://github.com/visgl/react-map-gl/tree/7.0-release/docs" class="typography__A-sc-1pmaksm-0 dvhuEd">
<img src="https://img.shields.io/badge/v5.3-brightgreen.svg?style=flat-square" class="typography__Img-sc-1pmaksm-15 hBeZII"/>
</a>
</p><h1 id="introduction" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#introduction" aria-label="introduction 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>Introduction</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl is a suite of <a href="http://facebook.github.io/react/" class="typography__A-sc-1pmaksm-0 dvhuEd">React</a> components for
Mapbox GL JS-compatible libraries.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Library</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/MapLibre/maplibre-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">MapLibre</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">An open fork of mapbox-gl v1, that can be used without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v1</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v2</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Other mapbox-gl forks</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted.</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">For basemaps:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can load map data from Mapbox&#x27;s own service.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can create and host your own map data using one of the many <a href="https://github.com/mapbox/awesome-vector-tiles" class="typography__A-sc-1pmaksm-0 dvhuEd">open source tools</a>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">New to react-map-gl? <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/get-started">Get Started</a></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Want to contribute? See our <a href="/react-map-gl/docs/developer-guide.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Developer Guide</a></p><h2 style="position:relative" id="design-philosophy" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#design-philosophy" aria-label="design philosophy 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>Design Philosophy</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl was first created by Uber&#x27;s Visualization team, where Mapbox was used as a component to build powerful web tools such as <a href="https://kepler.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">geospatial analytics</a> and <a href="https://avs.auto/" class="typography__A-sc-1pmaksm-0 dvhuEd">self-driving data visualization</a>. To manage the complexity of these applications, we fully embrace React and reactive programming.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The stock mapbox-gl APIs are <a href="https://en.wikipedia.org/wiki/Imperative_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">imperative</a>. That is, you instruct the map to do something (for example, <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">map.flyTo</a>), and it will execute the command at its own pace.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This does not scale when we have many components that need to synchronize with each other. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with <a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a>. In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. We might store the <strong>source of truth</strong> in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. </p><p class="typography__P-sc-1pmaksm-8 cncNYa">Ultimately, in the spirit of the <a href="https://en.wikipedia.org/wiki/Reactive_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">reactive programming paradigm</a>, data always flows <strong>down</strong>. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl creates a fully reactive wrapper for mapbox-gl. The <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map">Map</a> component can be fully <a href="https://reactjs.org/docs/forms.html#controlled-components" class="typography__A-sc-1pmaksm-0 dvhuEd">controlled</a>, that is, the map&#x27;s camera would never deviate from the props that it&#x27;s assigned. Read more about this core behavior in <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/state-management">state management</a>.</p><h2 style="position:relative" id="limitations" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#limitations" aria-label="limitations 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>Limitations</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper&#x27;s props and methods are 1:1 mappings to their native API equivelants.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">It is possible to call the native methods directly from the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance obtained via <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map#gemap">getMap</a>. However, doing so may result in the map&#x27;s state to deviate from its props. For example, calling <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">map.setMaxZoom</code> directly will cause the map&#x27;s constraint settings to differ from the value of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.</p></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";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-4b657be50967bad20dc3.js"],"app":["/app-c33704d3a1abd6ea3046.js"],"component---examples-clusters-src-app-tsx":["/component---examples-clusters-src-app-tsx-ae435c98aa31b91df409.js"],"component---examples-controls-src-app-tsx":["/component---examples-controls-src-app-tsx-d64f7d83a89165ad193f.js"],"component---examples-custom-cursor-src-app-tsx":["/component---examples-custom-cursor-src-app-tsx-bd123514f109e45b15c9.js"],"component---examples-draggable-markers-src-app-tsx":["/component---examples-draggable-markers-src-app-tsx-c08cc0293d6f625308f7.js"],"component---examples-draw-polygon-src-app-tsx":["/component---examples-draw-polygon-src-app-tsx-4287be5a2ea35fbe0113.js"],"component---examples-filter-src-app-tsx":["/component---examples-filter-src-app-tsx-28b144519a629b0e0c53.js"],"component---examples-geocoder-src-app-tsx":["/component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js"],"component---examples-geojson-animation-src-app-tsx":["/component---examples-geojson-animation-src-app-tsx-8eaab89aa0e2583bf5b2.js"],"component---examples-geojson-src-app-tsx":["/component---examples-geojson-src-app-tsx-96c6855ca732a70078ab.js"],"component---examples-heatmap-src-app-tsx":["/component---examples-heatmap-src-app-tsx-c7a35aaf435bc075107c.js"],"component---examples-interaction-src-app-tsx":["/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"],"component---examples-layers-src-app-tsx":["/component---examples-layers-src-app-tsx-cf13aa48a159342af3e3.js"],"component---examples-side-by-side-src-app-tsx":["/component---examples-side-by-side-src-app-tsx-c948e78a1a5129b01a93.js"],"component---examples-terrain-src-app-tsx":["/component---examples-terrain-src-app-tsx-66f43d9bdd9acd36ee6b.js"],"component---examples-viewport-animation-src-app-tsx":["/component---examples-viewport-animation-src-app-tsx-8c2f70b3ab14cbdc2a58.js"],"component---examples-zoom-to-bounds-src-app-tsx":["/component---examples-zoom-to-bounds-src-app-tsx-2d6b6e19aa1d94266910.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.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-b867458182f2a5e115e0.js"],"component---src-home-js":["/component---src-home-js-d077024a439c8e9d840e.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-4b657be50967bad20dc3.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js" async=""></script><script src="/react-map-gl/app-c33704d3a1abd6ea3046.js" async=""></script><script src="/react-map-gl/framework-47a7447cd78cae046a8b.js" async=""></script><script src="/react-map-gl/webpack-runtime-b299849377ee80f100b6.js" async=""></script></body></html>
Reference in New Issue View Git Blame Copy Permalink