mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
176 lines
69 KiB
HTML
176 lines
69 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-upgrade-guide" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.7.0">
|
||
<title data-rh="true">Upgrade Guide | 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/upgrade-guide"><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="Upgrade Guide | react-map-gl"><meta data-rh="true" name="description" content="Upgrading to v8.0"><meta data-rh="true" property="og:description" content="Upgrading to v8.0"><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/upgrade-guide"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/upgrade-guide" hreflang="en"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/upgrade-guide" hreflang="x-default"><link rel="stylesheet" href="/react-map-gl/assets/css/styles.0e7a9c76.css">
|
||
<script src="/react-map-gl/assets/js/runtime~main.dc24065f.js" defer="defer"></script>
|
||
<script src="/react-map-gl/assets/js/main.6061bbbc.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"><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">Overview</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">Introduction</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/whats-new">What's new</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/upgrade-guide">Upgrade Guide</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/contributing">Contributing</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/get-started">Developer Guide</a></div></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">Overview</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">Upgrade Guide</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>Upgrade Guide</h1></header>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v80">Upgrading to v8.0<a href="#upgrading-to-v80" class="hash-link" aria-label="Direct link to Upgrading to v8.0" title="Direct link to Upgrading to v8.0"></a></h2>
|
||
<ul>
|
||
<li>
|
||
<p>All imports from <code>react-map-gl</code> should be replaced with one of the following endpoints:</p>
|
||
<ul>
|
||
<li>If using with <code>mapbox-gl@>=3.5.0</code>: import from <code>react-map-gl/mapbox</code></li>
|
||
<li>If using with <code>mapbox-gl@<3.5.0</code>: import from <code>react-map-gl/mapbox-legacy</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p><code>maplibre-gl@<=3</code> is no longer supported.</p>
|
||
</li>
|
||
<li>
|
||
<p>Some TypeScript types have been renamed to align with the official types from the base map libraries:</p>
|
||
<table><thead><tr><th>Old name</th><th>New name</th></tr></thead><tbody><tr><td><code>MapStyle</code></td><td><code>StyleSpecification</code></td></tr><tr><td><code>Fog</code></td><td><code>FogSpecification</code></td></tr><tr><td><code>Light</code></td><td><code>LightSpecification</code></td></tr><tr><td><code>Terrain</code></td><td><code>TerrainSpecification</code></td></tr><tr><td><code>Projection</code></td><td><code>ProjectionSpecification</code></td></tr><tr><td><code>*Layer</code></td><td><code>*LayerSpecification</code></td></tr><tr><td><code>*SourceRaw</code></td><td><code>*SourceSpecification</code></td></tr></tbody></table>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="maplibre">MapLibre<a href="#maplibre" class="hash-link" aria-label="Direct link to MapLibre" title="Direct link to MapLibre"></a></h3>
|
||
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="removed-default-for-rtltextplugin">Removed default for <code>RTLTextPlugin</code><a href="#removed-default-for-rtltextplugin" class="hash-link" aria-label="Direct link to removed-default-for-rtltextplugin" title="Direct link to removed-default-for-rtltextplugin"></a></h4>
|
||
<p>The default <code>RTLTextPlugin</code> loaded from mapbox.com has been removed to align with the default behavior of MapLibre.
|
||
To keep the previous behavior, specify the <code>pluginUrl</code> which was previously used or supply the plugin from any other source:</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 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">RTLTextPlugin</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)">https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js</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><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="upgrading-to-v71">Upgrading to v7.1<a href="#upgrading-to-v71" class="hash-link" aria-label="Direct link to Upgrading to v7.1" title="Direct link to Upgrading to v7.1"></a></h2>
|
||
<ul>
|
||
<li><code>maplibre-gl</code> users no longer need to install <code>mapbox-gl</code> or a placeholder package as dependency. Change your imports to the new endpoint <code>react-map-gl/maplibre</code>. Components imported from here do not require setting the <code>mapLib</code> prop, and use the types defined by <code>maplibre-gl</code>.</li>
|
||
</ul>
|
||
<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockTitle_Ktv7">map-v7.0.tsx</div><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 known-class-name class-name" style="color:rgb(17, 17, 17)">Map</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'</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 imports">maplibregl</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)">'maplibre-gl'</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">App</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)">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><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">mapLib</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)">maplibregl</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">style</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 constant" style="color:rgb(72, 118, 214)">MAP_STYLE</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">maplibreLogo</span><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag comment" style="color:rgb(152, 159, 177);font-style:italic">// This will generate a TypeScript error because it's not defined in Mapbox options</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 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>
|
||
<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockTitle_Ktv7">map-v7.1.tsx</div><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 known-class-name class-name" style="color:rgb(17, 17, 17)">Map</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><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">// <- mind the updated import</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">App</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)">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><br></span><span class="token-line" style="color:#403f53"><span class="token tag" style="color:rgb(153, 76, 195)"> </span><span class="token tag comment" style="color:rgb(152, 159, 177);font-style:italic">// mapLib is default to `import('maplibre-gl')`</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">style</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 constant" style="color:rgb(72, 118, 214)">MAP_STYLE</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">maplibreLogo</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"></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>If you installed <code>mapbox-gl</code> from a placeholder such as <code>npm:empty-npm-package@^1.0.0</code> as suggested by the previous version's documentation, it should be removed from your package.json.</p>
|
||
<ul>
|
||
<li>The <code>@types/mapbox-gl</code> dependency has relaxed its version constraint. If you use <code>mapbox-gl</code> as the base map library, it's recommended to explicitly list <code>@types/mapbox-gl</code> in your package.json with a version matching that of <code>mapbox-gl</code> (v1 or v2). This package is no longer required by the non-mapbox code path, and may be further demoted to an optional peer dependency in a future release.</li>
|
||
<li>If you use the <code>Map</code> component as a child of the <code>DeckGL</code> component from <code>deck.gl</code>, upgrade <code>deck.gl</code> to <code>>=8.9.18</code>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v70">Upgrading to v7.0<a href="#upgrading-to-v70" class="hash-link" aria-label="Direct link to Upgrading to v7.0" title="Direct link to Upgrading to v7.0"></a></h2>
|
||
<p>v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.</p>
|
||
<blockquote>
|
||
<p>If you are using react-map-gl controls (<code>Marker</code>, <code>Popup</code>, <code>NavigationControl</code> etc.) with deck.gl's <code>ContextProvider</code>, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.</p>
|
||
</blockquote>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="dependencies">Dependencies<a href="#dependencies" class="hash-link" aria-label="Direct link to Dependencies" title="Direct link to Dependencies"></a></h3>
|
||
<ul>
|
||
<li>Add <code>mapbox-gl</code> (or a compatible fork) to your package.json. <code>react-map-gl</code> no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.</li>
|
||
<li><code>viewport-mercator-project</code> (an alias of <code>@math.gl/web-mercator</code>) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="module-exports">Module exports<a href="#module-exports" class="hash-link" aria-label="Direct link to Module exports" title="Direct link to Module exports"></a></h3>
|
||
<ul>
|
||
<li><code>InteractiveMap</code> and <code>StaticMap</code> are removed. Instead, import <code>Map</code>.</li>
|
||
<li><code>setRTLTextPlugin</code> is removed. Use the <code>Map</code> component's <code>RTLTextPlugin</code> prop (default enabled).</li>
|
||
<li><code>MapController</code> is removed. v7.0 has removed its own implementation of user input handling in favor of the <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/" target="_blank" rel="noopener noreferrer">native handlers</a>. If you are using a custom implementation of <code>MapController</code>, check if the native handlers offer options to address your application's needs.</li>
|
||
<li><code>MapContext</code> and <code>useMapControl</code> are removed. Check out the new API <a href="/react-map-gl/docs/api-reference/mapbox/use-map">useMap</a> and <a href="/react-map-gl/docs/api-reference/mapbox/use-control">useControl</a>.</li>
|
||
<li>The overlay components (<code>HTMLOverlay</code>, <code>CanvasOverlay</code> and <code>SVGOverlay</code>) are removed. Check out <a href="https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay" target="_blank" rel="noopener noreferrer">this example</a> for implementing similar controls in your own application.</li>
|
||
<li><code>LinearInterpolator</code> and <code>FlyToInterpolator</code> are removed. Use <code>map.easeTo()</code> and <code>map.flyTo()</code> instead, see <a href="https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation" target="_blank" rel="noopener noreferrer">this example</a>.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="map">Map<a href="#map" class="hash-link" aria-label="Direct link to Map" title="Direct link to Map"></a></h3>
|
||
<p><a href="/react-map-gl/docs/api-reference/mapbox/map">documentation</a></p>
|
||
<ul>
|
||
<li>Renamed props for better consistency with the wrapped library:<!-- -->
|
||
<ul>
|
||
<li><code>mapboxApiAccessToken</code> is now <code>mapboxAccessToken</code></li>
|
||
<li><code>mapboxApiUrl</code> is now <code>baseApiUrl</code></li>
|
||
<li><code>preventStyleDiffing</code> (default <code>false</code>) is replaced with <code>styleDiffing</code> (default <code>true</code>)</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>mapStyle</code> should be explicitly specified. The default value has changed from <code>"mapbox://styles/mapbox/light-v9"</code> to an empty style.</li>
|
||
<li>The following props are removed and apps should use <code>style</code> instead:<!-- -->
|
||
<ul>
|
||
<li><code>width</code></li>
|
||
<li><code>height</code></li>
|
||
<li><code>visible</code></li>
|
||
</ul>
|
||
</li>
|
||
<li><code>onViewportChange</code>, <code>onViewStateChange</code> and <code>onInteractionStateChange</code> are removed. You can either use <code>Map</code> as an uncontrolled component with the new <code>initialViewState</code> prop, or if you need to manage the camera state externally (e.g. in Redux), use the <code>onMove</code> callback instead. See examples in <a href="/react-map-gl/docs/get-started/state-management">state management</a>.</li>
|
||
<li><code>transition*</code> props are removed. Use <code>map.easeTo()</code> and <code>map.flyTo()</code> instead, see <a href="https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation" target="_blank" rel="noopener noreferrer">this example</a>.</li>
|
||
<li><code>mapOptions</code> is removed. Almost all of the options for the native <code>Map</code> class are exposed as props.</li>
|
||
<li><code>onHover</code> is removed. Use <code>onMouseMove</code> or <code>onMouseEnter</code>.</li>
|
||
<li>The event argument is changed for all interaction callbacks. See documentation for details.</li>
|
||
<li><code>getCursor</code> is removed as part of the effort to get <code>Map</code> behave the same as the native component. To set the cursor, use the <code>cursor</code> prop. Follow <a href="https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-cursor" target="_blank" rel="noopener noreferrer">this example</a> to change cursor on hover.</li>
|
||
<li><code>touchAction</code> and <code>eventRecognizerOptions</code> are removed. Check out the <code>cooperativeGestures</code> prop.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="other-components">Other components<a href="#other-components" class="hash-link" aria-label="Direct link to Other components" title="Direct link to Other components"></a></h3>
|
||
<ul>
|
||
<li><code>capture*</code> props are removed.</li>
|
||
<li><code>*label</code> props are removed. Use <code>Map</code>'s <code>locale</code> prop.</li>
|
||
<li>All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on <a href="https://github.com/visgl/react-map-gl/discussions" target="_blank" rel="noopener noreferrer">Discussion</a> so we can review on a case-by-case basis.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v53v61">Upgrading to v5.3/v6.1<a href="#upgrading-to-v53v61" class="hash-link" aria-label="Direct link to Upgrading to v5.3/v6.1" title="Direct link to Upgrading to v5.3/v6.1"></a></h2>
|
||
<ul>
|
||
<li><code>MapContext</code> is now an official API. The experimental <code>_MapContext</code> export will be removed in a future release.</li>
|
||
<li><code>react-virtualized-auto-sizer</code> is no longer a dependency.</li>
|
||
<li>Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the <a href="https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options" target="_blank" rel="noopener noreferrer">interaction options</a>:</li>
|
||
</ul>
|
||
<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 keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> </span><span class="token constant" style="color:rgb(72, 118, 214)">CONTROLLER_OPTS</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 literal-property property" style="color:rgb(12, 150, 155)">dragPan</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 literal-property property" style="color:rgb(12, 150, 155)">inertia</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">0</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 literal-property property" style="color:rgb(12, 150, 155)">dragRotate</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 literal-property property" style="color:rgb(12, 150, 155)">inertia</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">0</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 literal-property property" style="color:rgb(12, 150, 155)">touchZoom</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 literal-property property" style="color:rgb(12, 150, 155)">inertia</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">0</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" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token operator" style="color:rgb(12, 150, 155)"><</span><span class="token maybe-class-name">MapGL</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token constant" style="color:rgb(72, 118, 214)">CONTROLLER_OPTS</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> </span><span class="token spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">/</span><span class="token operator" style="color:rgb(12, 150, 155)">></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>
|
||
<ul>
|
||
<li><code>Source</code> and <code>Layer</code> components no longer expose imperative methods via <code>ref</code> as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.<!-- -->
|
||
<ul>
|
||
<li>If you used to call <code>sourceRef.getSource()</code>, it can be replaced with <code>mapRef().getMap().getSource(sourceId)</code>.</li>
|
||
<li>If you used to call <code>layerRef.getLayer()</code>, it can be replaced with <code>mapRef().getMap().getLayer(layerId)</code>.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v6">Upgrading to v6<a href="#upgrading-to-v6" class="hash-link" aria-label="Direct link to Upgrading to v6" title="Direct link to Upgrading to v6"></a></h2>
|
||
<ul>
|
||
<li>A valid Mapbox access token is always required.</li>
|
||
<li>The default value of <code>InteractiveMap</code>'s <code>maxPitch</code> prop is changed to <code>85</code> from <code>60</code>.</li>
|
||
<li><code>mapbox-gl</code> v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message <code>m is not defined</code>. Find solutions in <a href="https://github.com/mapbox/mapbox-gl-js/issues/10173" target="_blank" rel="noopener noreferrer">this thread</a>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v4">Upgrading to v4<a href="#upgrading-to-v4" class="hash-link" aria-label="Direct link to Upgrading to v4" title="Direct link to Upgrading to v4"></a></h2>
|
||
<ul>
|
||
<li><code>onChangeViewport</code> is removed, use <code>onViewportChange</code> instead</li>
|
||
<li><code>Immutable.js</code> is no longer a dependency</li>
|
||
<li>Export <code>experimental.MapControls</code> is removed, use <code>MapController</code> instead</li>
|
||
<li><code>InteractiveMap</code>'s <code>mapControls</code> prop is renamed to <code>controller</code></li>
|
||
<li>Removed support for the deprecated <code>interactive</code> property on the layer styles. Use the <code>interactiveLayerIds</code> prop to specify which layers are clickable.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v32">Upgrading to v3.2<a href="#upgrading-to-v32" class="hash-link" aria-label="Direct link to Upgrading to v3.2" title="Direct link to Upgrading to v3.2"></a></h2>
|
||
<ul>
|
||
<li>The latest mapbox-gl release requires stylesheet to be included at all times. See <a href="/react-map-gl/docs/get-started">Get Started</a> for information about styling.</li>
|
||
<li>Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v3">Upgrading to v3<a href="#upgrading-to-v3" class="hash-link" aria-label="Direct link to Upgrading to v3" title="Direct link to Upgrading to v3"></a></h2>
|
||
<p>v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="version-requirements">Version Requirements<a href="#version-requirements" class="hash-link" aria-label="Direct link to Version Requirements" title="Direct link to Version Requirements"></a></h3>
|
||
<ul>
|
||
<li>The <strong>Node Version Requirement</strong> for <strong>building</strong> react-map-gl is now <strong>>=v6.4.0</strong>. Using prebuilt react-map-gl does <strong>NOT</strong> has this limitation. This is introduced by <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.38.0" target="_blank" rel="noopener noreferrer">Mapbox GL JS v0.38.0</a></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="mapgl-component">MapGL Component<a href="#mapgl-component" class="hash-link" aria-label="Direct link to MapGL Component" title="Direct link to MapGL Component"></a></h3>
|
||
<ul>
|
||
<li><strong>Two Map Components</strong> - v3 now splits the Map component into two React components: <code>StaticMap</code> and <code>InteractiveMap</code>. <code>InteractiveMap</code> is the default export, and designed to be as compatible as possible with the v2 default component.</li>
|
||
</ul>
|
||
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="onchangeviewport-callback-now-includes-width-and-height"><code>onChangeViewport</code> callback now includes <code>width</code> and <code>height</code>.<a href="#onchangeviewport-callback-now-includes-width-and-height" class="hash-link" aria-label="Direct link to onchangeviewport-callback-now-includes-width-and-height" title="Direct link to onchangeviewport-callback-now-includes-width-and-height"></a></h4>
|
||
<p>The <code>viewport</code> parameter passed to the <code>onChangeViewport</code> callback now includes <code>width</code> and <code>height</code>. Application code that composed the <code>viewport</code> with <code>width</code> and <code>height</code> may have to be updated. Please double check your render code if you relied on this behavior.</p>
|
||
<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">// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token operator" style="color:rgb(12, 150, 155)"><</span><span class="token maybe-class-name">ReactMapGL</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token number" style="color:rgb(170, 9, 130)">500</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token number" style="color:rgb(170, 9, 130)">400</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 spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token plain">viewport</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 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 comment" style="color:rgb(152, 159, 177);font-style:italic">// GOOD: 'width' and 'height' below will override the values in 'viewport'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token operator" style="color:rgb(12, 150, 155)"><</span><span class="token maybe-class-name">ReactMapGL</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token spread operator" style="color:rgb(12, 150, 155)">...</span><span class="token plain">viewport</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token number" style="color:rgb(170, 9, 130)">500</span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token number" style="color:rgb(170, 9, 130)">400</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 operator" style="color:rgb(12, 150, 155)">></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>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="overlays">Overlays<a href="#overlays" class="hash-link" aria-label="Direct link to Overlays" title="Direct link to Overlays"></a></h3>
|
||
<ul>
|
||
<li><strong>Some Overlays Moved to Examples</strong> - Some less frequently used overlays (<code>DraggablePointsOverlay</code>, <code>ChoroplethOverlay</code>, <code>ScatterplotOverlay</code>), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.</li>
|
||
<li><strong>Overlays must be Children of the Map</strong> - Overlays <strong>must</strong> now be rendered as children of the main <code>react-map-gl</code> component to automatically sync with the map viewport.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="fitbounds-utility-function"><code>fitBounds</code> utility function<a href="#fitbounds-utility-function" class="hash-link" aria-label="Direct link to fitbounds-utility-function" title="Direct link to fitbounds-utility-function"></a></h3>
|
||
<p>The <code>fitBounds</code> utility has been moved to the <a href="https://github.com/uber-web/math.gl" target="_blank" rel="noopener noreferrer">math.gl</a> library. The function can now be called as follows:</p>
|
||
<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 keyword module" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">WebMercatorViewport</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(12, 150, 155)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">'viewport-mercator-project'</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"> viewport </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><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)">WebMercatorViewport</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 literal-property property" style="color:rgb(12, 150, 155)">width</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">600</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(12, 150, 155)">height</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">400</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)">const</span><span class="token plain"> bound </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> viewport</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">fitBounds</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 operator" style="color:rgb(12, 150, 155)">-</span><span class="token number" style="color:rgb(170, 9, 130)">73.9876</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">40.7661</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 operator" style="color:rgb(12, 150, 155)">-</span><span class="token number" style="color:rgb(170, 9, 130)">72.9876</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">41.7661</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 literal-property property" style="color:rgb(12, 150, 155)">padding</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">20</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(12, 150, 155)">offset</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 number" style="color:rgb(170, 9, 130)">0</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 number" style="color:rgb(170, 9, 130)">40</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 comment" style="color:rgb(152, 159, 177);font-style:italic">// => bounds: instance of WebMercatorViewport</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">// {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}</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>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="deprecations">Deprecations<a href="#deprecations" class="hash-link" aria-label="Direct link to Deprecations" title="Direct link to Deprecations"></a></h3>
|
||
<p>We have started to deprecate a few React props. In all the cases below, the old <code>props</code> will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new <code>props</code> as soon as possible.</p>
|
||
<table><thead><tr><th>Old Prop</th><th>New Prop</th></tr></thead><tbody><tr><td><code>onChangeViewport(<viewport>)</code></td><td><code>onViewportChange(<viewport>)</code></td></tr><tr><td><code>onHoverFeatures(<features>)</code></td><td><code>onHover(<event>)</code></td></tr><tr><td><code>onClickFeatures(<features>)</code></td><td><code>onClick(<event>)</code></td></tr><tr><td><code>perspectiveEnabled [default: false]</code></td><td><code>dragRotate [default: true]</code></td></tr></tbody></table>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v2">Upgrading to v2<a href="#upgrading-to-v2" class="hash-link" aria-label="Direct link to Upgrading to v2" title="Direct link to Upgrading to v2"></a></h2>
|
||
<p>v2 is API compatible with v1, however if you are still using <code>v1</code> of react-map-gl, make sure that you first upgrade:</p>
|
||
<ul>
|
||
<li>Your <code>node</code> version to <code>v4</code> or higher</li>
|
||
<li>Your <code>react</code> version to <code>15.4</code> or higher.</li>
|
||
</ul>
|
||
<p>Background: <code>mapbox-gl</code> 0.31.0 introduced a hard dependency on Node >= v4.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="upgrading-to-v1">Upgrading to v1<a href="#upgrading-to-v1" class="hash-link" aria-label="Direct link to Upgrading to v1" title="Direct link to Upgrading to v1"></a></h2>
|
||
<p>(Upgrading from 0.6.x)</p>
|
||
<ul>
|
||
<li><strong>Importing Overlays</strong> - The map overlay components (<code>HTMLOverlay</code>, <code>CanvasOverlay</code>, <code>SVGOverlay</code> etc) are now named exports. They previously had to be imported via their relative source paths:</li>
|
||
</ul>
|
||
<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">// v1.0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword module" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">MapGL</span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token imports maybe-class-name">SVGOverlay</span><span class="token imports punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"> </span><span class="token keyword module" 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'</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 comment" style="color:rgb(152, 159, 177);font-style:italic">// v0.6</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword module" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">MapGL</span><span class="token plain"> </span><span class="token keyword module" 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'</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 module" style="color:rgb(12, 150, 155)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">SVGOverlay</span><span class="token plain"> </span><span class="token keyword module" 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/src/api-reference/svg-overlay'</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>
|
||
<ul>
|
||
<li><strong>Map State</strong> - The map state reported by <code>onViewportChanged</code> will now contain additional state fields (tracking not only <code>pitch</code> and <code>bearing</code> needed for perspective mode, but also transient information about how the projection is being changed by the user).<!-- -->
|
||
<ul>
|
||
<li>This information must be passed back to the react-map-gl component in the next render.</li>
|
||
<li>To simplify and future proof applications, it is recommended to simply save the entire <code>mapState</code> in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like <code>longitude</code>, <code>latitude</code> and <code>zoom</code>).</li>
|
||
</ul>
|
||
</li>
|
||
</ul></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/upgrade-guide.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/whats-new"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">What's new</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/react-map-gl/docs/contributing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Contributing</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="#upgrading-to-v80" class="table-of-contents__link toc-highlight">Upgrading to v8.0</a><ul><li><a href="#maplibre" class="table-of-contents__link toc-highlight">MapLibre</a></li></ul></li><li><a href="#upgrading-to-v71" class="table-of-contents__link toc-highlight">Upgrading to v7.1</a></li><li><a href="#upgrading-to-v70" class="table-of-contents__link toc-highlight">Upgrading to v7.0</a><ul><li><a href="#dependencies" class="table-of-contents__link toc-highlight">Dependencies</a></li><li><a href="#module-exports" class="table-of-contents__link toc-highlight">Module exports</a></li><li><a href="#map" class="table-of-contents__link toc-highlight">Map</a></li><li><a href="#other-components" class="table-of-contents__link toc-highlight">Other components</a></li></ul></li><li><a href="#upgrading-to-v53v61" class="table-of-contents__link toc-highlight">Upgrading to v5.3/v6.1</a></li><li><a href="#upgrading-to-v6" class="table-of-contents__link toc-highlight">Upgrading to v6</a></li><li><a href="#upgrading-to-v4" class="table-of-contents__link toc-highlight">Upgrading to v4</a></li><li><a href="#upgrading-to-v32" class="table-of-contents__link toc-highlight">Upgrading to v3.2</a></li><li><a href="#upgrading-to-v3" class="table-of-contents__link toc-highlight">Upgrading to v3</a><ul><li><a href="#version-requirements" class="table-of-contents__link toc-highlight">Version Requirements</a></li><li><a href="#mapgl-component" class="table-of-contents__link toc-highlight">MapGL Component</a></li><li><a href="#overlays" class="table-of-contents__link toc-highlight">Overlays</a></li><li><a href="#fitbounds-utility-function" class="table-of-contents__link toc-highlight"><code>fitBounds</code> utility function</a></li><li><a href="#deprecations" class="table-of-contents__link toc-highlight">Deprecations</a></li></ul></li><li><a href="#upgrading-to-v2" class="table-of-contents__link toc-highlight">Upgrading to v2</a></li><li><a href="#upgrading-to-v1" class="table-of-contents__link toc-highlight">Upgrading to v1</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> |