mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
44 lines
102 KiB
HTML
44 lines
102 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-get-started/tips-and-tricks" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.7.0">
|
||
<title data-rh="true">Tips and Tricks | react-map-gl</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://visgl.github.io/react-map-gl/docs/get-started/tips-and-tricks"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Tips and Tricks | react-map-gl"><meta data-rh="true" name="description" content="Securing Mapbox Token"><meta data-rh="true" property="og:description" content="Securing Mapbox Token"><link data-rh="true" rel="icon" href="/react-map-gl/favicon.png"><link data-rh="true" rel="canonical" href="https://visgl.github.io/react-map-gl/docs/get-started/tips-and-tricks"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/get-started/tips-and-tricks" hreflang="en"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/get-started/tips-and-tricks" hreflang="x-default"><link rel="stylesheet" href="/react-map-gl/assets/css/styles.b9a26a0c.css">
|
||
<script src="/react-map-gl/assets/js/runtime~main.94054164.js" defer="defer"></script>
|
||
<script src="/react-map-gl/assets/js/main.734268e4.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard" data-theme="light">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/react-map-gl/"><div class="navbar__logo"><img src="/react-map-gl/visgl-logo-dark.png" alt="vis.gl Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/react-map-gl/visgl-logo-light.png" alt="vis.gl Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">react-map-gl</b></a><a class="navbar__item navbar__link" href="/react-map-gl/examples">Examples</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/react-map-gl/docs">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/visgl/react-map-gl" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><div class="dsla-search-wrapper"><div class="dsla-search-field" data-tags="default,docs-default-current,docs-examples-current"></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/react-map-gl/docs">Overview</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/react-map-gl/docs/get-started">Developer Guide</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-map-gl/docs/get-started">Get Started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-map-gl/docs/get-started/state-management">State Management</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/react-map-gl/docs/get-started/tips-and-tricks">Tips and Tricks</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/react-map-gl/docs/api-reference/mapbox/map">API Reference</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/react-map-gl/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Developer Guide</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Tips and Tricks</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Tips and Tricks</h1></header>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="securing-mapbox-token">Securing Mapbox Token<a href="#securing-mapbox-token" class="hash-link" aria-label="Direct link to Securing Mapbox Token" title="Direct link to Securing Mapbox Token"></a></h2>
|
||
<p>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>
|
||
<li>Never commit your token in clear text into GitHub or other source control.</li>
|
||
<li>In your local dev environment, define the token in an environment variable e.g. <code>MapboxAccessTokenDev=...</code> in the command line, or use something like <a href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener noreferrer">dotenv</a> and put <code>MapboxAccessTokenDev=...</code> in a <code>.env</code> file. Add <code>.env</code> to <code>.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.</li>
|
||
<li>Create separate tokens for development (often times on <code>http://localhost</code>), public code snippet (Gist, Codepen etc.) and production (deployed to <code>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" target="_blank" rel="noopener noreferrer">scope and URL restrictions</a> that only allows it to be used on a domain that you own.</li>
|
||
<li>Add the following to your bundler config:</li>
|
||
</ul>
|
||
<!-- -->
|
||
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Webpack</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Rollup</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">/// webpack.config.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token maybe-class-name">DefinePlugin</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">require</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token string" style="color:rgb(72, 118, 214)">'webpack'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(12, 150, 155)">plugins</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(17, 17, 17)">DefinePlugin</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token string-property property" style="color:rgb(12, 150, 155)">'process.env.MapboxAccessToken'</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(17, 17, 17)">JSON</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">stringify</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token constant" style="color:rgb(72, 118, 214)">NODE_ENV</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'production'</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token plain"> process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access maybe-class-name">MapboxAccessTokenProd</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access maybe-class-name">MapboxAccessTokenDev</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">/// rollup.config.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> replace </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">require</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token string" style="color:rgb(72, 118, 214)">'@rollup/plugin-replace'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token keyword module" style="color:rgb(12, 150, 155)">default</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(12, 150, 155)">plugins</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">replace</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token string-property property" style="color:rgb(12, 150, 155)">'process.env.MapboxAccessToken'</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(17, 17, 17)">JSON</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">stringify</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token constant" style="color:rgb(72, 118, 214)">NODE_ENV</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'production'</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token plain"> process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access maybe-class-name">MapboxAccessTokenProd</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">env</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access maybe-class-name">MapboxAccessTokenDev</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<p>react-map-gl automatically picks up <code>process.env.MapboxAccessToken</code> or <code>process.env.REACT_APP_MAPBOX_ACCESS_TOKEN</code> if they are defined. Alternatively, you can use your own variable name (e.g. <code>__SUPER_SECRET_TOKEN__</code>) and pass it in manually with <code>mapboxAccessToken={__SUPER_SECRET_TOKEN__}</code>.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="minimize-cost-from-frequent-re-mounting">Minimize Cost from Frequent Re-mounting<a href="#minimize-cost-from-frequent-re-mounting" class="hash-link" aria-label="Direct link to Minimize Cost from Frequent Re-mounting" title="Direct link to Minimize Cost from Frequent Re-mounting"></a></h2>
|
||
<p>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="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">/// Example using Tabs from Material UI</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabContext</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">selectedTab</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabList</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">handleTabChange</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Tab</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">Map</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">map</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Tab</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">List</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">table</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabList</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">map</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">renderMarker</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">table</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Table</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">renderRow</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Table</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabContext</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>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" target="_blank" rel="noopener noreferrer">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>In this case, it is recommended that you set the <a href="/react-map-gl/docs/api-reference/mapbox/map#reuseMaps">reuseMaps</a> prop to <code>true</code>:</p>
|
||
<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">map</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">reuseMaps</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">renderMarker</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">TabPanel</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>This bypasses the initialization when a map is removed then added back.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="performance-with-many-markers">Performance with Many Markers<a href="#performance-with-many-markers" class="hash-link" aria-label="Direct link to Performance with Many Markers" title="Direct link to Performance with Many Markers"></a></h2>
|
||
<p>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="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token keyword" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token imports">useSelector</span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token imports"> useDispatch</span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'react-redux'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token maybe-class-name">Marker</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'react-map-gl/maplibre'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">MapView</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> viewState </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useSelector</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">s</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">RootState</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> s</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">viewState</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> vehicles </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useSelector</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">s</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">RootState</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> s</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> dispatch </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useDispatch</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> onMove </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useCallback</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">evt </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">dispatch</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">type</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'setViewState'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> payload</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> evt</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">viewState</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token tag spread" style="color:rgb(153, 76, 195)">viewState</span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">onMove</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">onMove</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> ></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">vehicle </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Marker</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">id</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">longitude</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">coordinates</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token tag script language-javascript number" style="color:rgb(170, 9, 130)">0</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">latitude</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">coordinates</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token tag script language-javascript number" style="color:rgb(170, 9, 130)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag" style="color:rgb(153, 76, 195)">svg</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> // vehicle icon</span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag" style="color:rgb(153, 76, 195)">svg</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Marker</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>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>One way to improve the performance is <code>useMemo</code>:</p>
|
||
<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> markers </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useMemo</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">vehicle </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Marker</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">id</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">longitude</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">coordinates</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token tag script language-javascript number" style="color:rgb(170, 9, 130)">0</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">latitude</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehicle</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(153, 76, 195)">coordinates</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token tag script language-javascript number" style="color:rgb(170, 9, 130)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag" style="color:rgb(153, 76, 195)">svg</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> // vehicle icon</span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag" style="color:rgb(153, 76, 195)">svg</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Marker</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token plain">vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token tag spread" style="color:rgb(153, 76, 195)">viewState</span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">onMove</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">onMove</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> ></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain">markers</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>This prevents React from rerendering the markers unless they have changed.</p>
|
||
<p>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" target="_blank" rel="noopener noreferrer">symbol layer</a>. Layers are rendered in WebGL and are much more performant than markers:</p>
|
||
<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> vehiclesGeoJSON </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">useMemo</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> type</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'FeatureCollection'</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> features</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">map</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">vehicle </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> turf</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">point</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">vehicle</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">coordinates</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> vehicle</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token plain">vehicles</span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token tag spread" style="color:rgb(153, 76, 195)">viewState</span><span class="token tag spread punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">onMove</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">onMove</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> ></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Source</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">vehicles</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">geojson</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">data</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">vehiclesGeoJSON</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Layer</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(153, 76, 195)">=</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag attr-value" style="color:rgb(153, 76, 195)">symbol</span><span class="token tag attr-value punctuation" style="color:rgb(153, 76, 195)">"</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">layout</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript string-property property" style="color:rgb(12, 150, 155)">'icon-image'</span><span class="token tag script language-javascript operator" style="color:rgb(12, 150, 155)">:</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript string" style="color:rgb(72, 118, 214)">'vehicle-icon'</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript string-property property" style="color:rgb(12, 150, 155)">'icon-size'</span><span class="token tag script language-javascript operator" style="color:rgb(12, 150, 155)">:</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript number" style="color:rgb(170, 9, 130)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript string-property property" style="color:rgb(12, 150, 155)">'text-field'</span><span class="token tag script language-javascript operator" style="color:rgb(12, 150, 155)">:</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token tag script language-javascript string" style="color:rgb(72, 118, 214)">'get'</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript string" style="color:rgb(72, 118, 214)">'id'</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"></span><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Source</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"></</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="finding-out-if-a-point-is-within-the-current-viewport">Finding out if a point is within the current viewport<a href="#finding-out-if-a-point-is-within-the-current-viewport" class="hash-link" aria-label="Direct link to Finding out if a point is within the current viewport" title="Direct link to Finding out if a point is within the current viewport"></a></h2>
|
||
<p>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="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#403f53"><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> mapRef </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:rgb(153, 76, 195);font-style:italic">useRef</span><span class="token generic-function generic class-name operator" style="color:rgb(12, 150, 155)"><</span><span class="token generic-function generic class-name" style="color:rgb(17, 17, 17)">MapRef</span><span class="token generic-function generic class-name operator" style="color:rgb(12, 150, 155)">></span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(153, 76, 195);font-style:italic">checkIfPositionInViewport</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">lat</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> lng</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(12, 150, 155)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> bounds </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> mapRef</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">getBounds</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> bounds</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">contains</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">[</span><span class="token plain">lng</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> lat</span><span class="token punctuation" style="color:rgb(153, 76, 195)">]</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)"><</span><span class="token tag class-name" style="color:rgb(17, 17, 17)">Map</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(153, 76, 195)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token tag script language-javascript" style="color:rgb(153, 76, 195)">mapRef</span><span class="token tag script language-javascript punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag attr-name" style="color:rgb(72, 118, 214);font-style:italic">...</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag punctuation" style="color:rgb(153, 76, 195)">/></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/tips-and-tricks.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/react-map-gl/docs/get-started/adding-custom-data"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Adding Custom Data</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/react-map-gl/docs/api-reference/mapbox/map"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">default (Map)</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#securing-mapbox-token" class="table-of-contents__link toc-highlight">Securing Mapbox Token</a></li><li><a href="#minimize-cost-from-frequent-re-mounting" class="table-of-contents__link toc-highlight">Minimize Cost from Frequent Re-mounting</a></li><li><a href="#performance-with-many-markers" class="table-of-contents__link toc-highlight">Performance with Many Markers</a></li><li><a href="#finding-out-if-a-point-is-within-the-current-viewport" class="table-of-contents__link toc-highlight">Finding out if a point is within the current viewport</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Other vis.gl Libraries</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https:/deck.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">deck.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://luma.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">luma.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://loaders.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">loaders.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://visgl.github.io/deck.gl-community/" target="_blank" rel="noopener noreferrer" class="footer__link-item">deck.gl-community<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://medium.com/vis-gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">vis.gl blog on Medium<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/visgl/react-map-gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright"><p>Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and vis.gl contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.</p><p><a href="https://openjsf.org">The OpenJS Foundation</a> | <a href="https://terms-of-use.openjsf.org">Terms of Use</a> | <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> | <a href="https://bylaws.openjsf.org">Bylaws</a> | <a href="https://code-of-conduct.openjsf.org">Code of Conduct</a> | <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> | <a href="https://trademark-list.openjsf.org">Trademark List</a> | <a href="https://www.linuxfoundation.org/cookies">Cookie Policy</a></p></div></div></div></footer></div>
|
||
</body>
|
||
</html> |