mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-25 16:02:50 +00:00
211 lines
63 KiB
HTML
211 lines
63 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 | Tips and Tricks</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 | Tips and Tricks"/><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 | Tips and Tricks"/><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 | Tips and Tricks","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | Tips and Tricks","headline":"react-map-gl | Tips and Tricks","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 femPON cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd jYCwIr cncNYa hsOfQe kVRSNy egvBsN fPGooQ dMoEUD" 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;}.femPON{list-style:none;margin:0;max-height:280px;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__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-53e1d5786ef6c6593773.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/get-started/tips-and-tricks/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 femPON"><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 eYbFBV"><a aria-current="page" title="Tips and Tricks" class="" 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"><h1 id="tips-and-tricks" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#tips-and-tricks" aria-label="tips and tricks 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>Tips and Tricks</h1><h2 style="position:relative" id="securing-mapbox-token" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#securing-mapbox-token" aria-label="securing mapbox token 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>Securing Mapbox Token</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><p class="typography__P-sc-1pmaksm-8 cncNYa">Never commit your token in clear text into GitHub or other source control.</p></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><p class="typography__P-sc-1pmaksm-8 cncNYa">In your local dev environment, define the token in an environment variable e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxAccessTokenDev=...</code> in the command line, or use something like <a href="https://github.com/motdotla/dotenv" class="typography__A-sc-1pmaksm-0 dvhuEd">dotenv</a> and put <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxAccessTokenDev=...</code> in a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">.env</code> file. Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">.env</code> to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">.gitignore</code> so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.</p></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><p class="typography__P-sc-1pmaksm-8 cncNYa">Create separate tokens for development (often times on <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">http://localhost</code>), public code snippet (Gist, Codepen etc.) and production (deployed to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">https://mycompany.com</code>). The public token should be rotated regularly. The production token should have strict <a href="https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens" class="typography__A-sc-1pmaksm-0 dvhuEd">scope and URL restrictions</a> that only allows it to be used on a domain that you own.</p></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><p class="typography__P-sc-1pmaksm-8 cncNYa">Add the following to your bundler config:</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 comment">/// webpack.config.js</span>
|
|
<span class="token keyword">const</span> <span class="token punctuation">{</span>DefinePlugin<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token keyword">new</span> <span class="token class-name">DefinePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token string-property property">'process.env.MapboxAccessToken'</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">==</span> <span class="token string">'production'</span> <span class="token operator">?</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>MapboxAccessTokenProd <span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>MapboxAccessTokenDev<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></code></pre></div><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 comment">/// rollup.config.js</span>
|
|
<span class="token keyword">const</span> replace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@rollup/plugin-replace'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span>
|
|
|
|
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token string-property property">'process.env.MapboxAccessToken'</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">==</span> <span class="token string">'production'</span> <span class="token operator">?</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>MapboxAccessTokenProd <span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>MapboxAccessTokenDev<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></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl automatically picks up <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">process.env.MapboxAccessToken</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">process.env.REACT_APP_MAPBOX_ACCESS_TOKEN</code> if they are defined. Alternatively, you can use your own variable name (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">__SUPER_SECRET_TOKEN__</code>) and pass it in manually with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapboxAccessToken={__SUPER_SECRET_TOKEN__}</code>.</p></li></ul><h2 style="position:relative" id="minimize-cost-from-frequent-re-mounting" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#minimize-cost-from-frequent-re-mounting" aria-label="minimize cost from frequent re mounting 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>Minimize Cost from Frequent Re-mounting</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token comment">/// Example using Tabs from Material UI</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabContext</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selectedTab<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabList</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleTabChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Tab</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Map<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Tab</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>List<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TabList</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabPanel</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Map</span></span>
|
|
<span class="token attr-name">mapStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mapbox://styles/mapbox/streets-v9<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token punctuation">{</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>renderMarker<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Map</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabPanel</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Table</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token punctuation">{</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>renderRow<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Table</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TabContext</span></span><span class="token punctuation">></span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a <a href="https://www.mapbox.com/pricing#maploads" class="typography__A-sc-1pmaksm-0 dvhuEd">billable event</a> every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">In this case, it is recommended that you set the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map#reuseMaps">reuseMaps</a> prop to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabPanel</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Map</span></span> <span class="token attr-name">reuseMaps</span>
|
|
<span class="token attr-name">mapStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mapbox://styles/mapbox/streets-v9<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token punctuation">{</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>renderMarker<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Map</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TabPanel</span></span><span class="token punctuation">></span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">This bypasses the initialization when a map is removed then added back.</p><h2 style="position:relative" id="performance-with-many-markers" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#performance-with-many-markers" aria-label="performance with many markers 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>Performance with Many Markers</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>useSelector<span class="token punctuation">,</span> useDispatch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> Map<span class="token punctuation">,</span> <span class="token punctuation">{</span>Marker<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">MapView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> viewState <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token parameter">s</span> <span class="token operator">=></span> s<span class="token punctuation">.</span>viewState<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> vehicles <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token parameter">s</span> <span class="token operator">=></span> s<span class="token punctuation">.</span>vehicles<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> dispatch <span class="token operator">=</span> <span class="token function">useDispatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> onMove <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token parameter">evt</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'setViewState'</span><span class="token punctuation">,</span> <span class="token literal-property property">payload</span><span class="token operator">:</span> evt<span class="token punctuation">.</span>viewState<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><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Map</span></span>
|
|
<span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>viewState<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">onMove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onMove<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">mapStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mapbox://styles/mapbox/streets-v9<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
>
|
|
</span><span class="token punctuation">{</span>vehicles<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">vehicle</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Marker</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">longitude</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>coordinates<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">latitude</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>coordinates<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
// vehicle icon
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Marker</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Map</span></span><span class="token punctuation">></span></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">This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">One way to improve the performance is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">useMemo</code>:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"> <span class="token keyword">const</span> markers <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> vehicles<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">vehicle</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Marker</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">longitude</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>coordinates<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">latitude</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehicle<span class="token punctuation">.</span>coordinates<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
// vehicle icon
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Marker</span></span><span class="token punctuation">></span></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>vehicles<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Map</span></span>
|
|
<span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>viewState<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">onMove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onMove<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">mapStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mapbox://styles/mapbox/streets-v9<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
>
|
|
</span><span class="token punctuation">{</span>markers<span class="token punctuation">}</span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Map</span></span><span class="token punctuation">></span></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">This prevents React from rerendering the markers unless they have changed.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If your application can do without complicated DOM objects and CSS styling, consider switching to a <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol" class="typography__A-sc-1pmaksm-0 dvhuEd">symbol layer</a>. Layers are rendered in WebGL and are much more performant than markers:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"> <span class="token keyword">const</span> vehiclesGeoJSON <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'FeatureCollection'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">features</span><span class="token operator">:</span> vehicles<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">vehicle</span> <span class="token operator">=></span> turf<span class="token punctuation">.</span><span class="token function">point</span><span class="token punctuation">(</span>vehicle<span class="token punctuation">.</span>coordinates<span class="token punctuation">,</span> vehicle<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>vehicles<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Map</span></span>
|
|
<span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>viewState<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">onMove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onMove<span class="token punctuation">}</span></span>
|
|
<span class="token attr-name">mapStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mapbox://styles/mapbox/streets-v9<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
>
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Source</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicles<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geojson<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>vehiclesGeoJSON<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Layer</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>symbol<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">layout</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
|
<span class="token string-property property">'icon-image'</span><span class="token operator">:</span> <span class="token string">'vehicle-icon'</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'icon-size'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'text-field'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Sources</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Map</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
|
);</span></code></pre></div><h2 style="position:relative" id="finding-out-if-a-point-is-within-the-current-viewport" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#finding-out-if-a-point-is-within-the-current-viewport" aria-label="finding out if a point is within the current viewport 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>Finding out if a point is within the current viewport</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">There are some situations where you want to know if a point is currently visible on the map.<br/>
|
|
<!-- -->Checking this is simple and can be done like so:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">const</span> mapRef <span class="token operator">=</span> useRef<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapRef</span></span><span class="token punctuation">></span></span><span class="token plain-text">();
|
|
|
|
const checkIfPositionInViewport = (lat, lng) => </span><span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> bounds <span class="token operator">=</span> mapRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">getMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getBounds</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>lat <span class="token operator">>=</span> bounds<span class="token punctuation">.</span>_sw<span class="token punctuation">.</span>lat <span class="token operator">&&</span> lat <span class="token operator"><=</span> bounds<span class="token punctuation">.</span>_nw<span class="token punctuation">.</span>lat <span class="token operator">&&</span> lng <span class="token operator">>=</span> bounds<span class="token punctuation">.</span>_sw<span class="token punctuation">.</span>lng <span class="token operator">&&</span> lng <span class="token operator"><=</span> bounds<span class="token punctuation">.</span>_nw<span class="token punctuation">.</span>lng<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token plain-text">
|
|
|
|
return <Map ref=</span><span class="token punctuation">{</span>mapRef<span class="token punctuation">}</span><span class="token plain-text"> [..]/></span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/tips-and-tricks";/*]]>*/</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-0fc6f5753e0415fde950.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-244936683de9dee32672.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-7b12f3bb393a8bb524f0.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-53e1d5786ef6c6593773.js" async=""></script></body></html> |