mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
20 lines
118 KiB
HTML
20 lines
118 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-api-reference/map">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.4.1">
|
||
<title data-rh="true">default (Map) | 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/api-reference/map"><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="default (Map) | React Map GL"><meta data-rh="true" name="description" content="React component that wraps the base library's Map class (Mapbox | Maplibre). This is also the default export from react-map-gl."><meta data-rh="true" property="og:description" content="React component that wraps the base library's Map class (Mapbox | Maplibre). This is also the default export from react-map-gl."><link data-rh="true" rel="icon" href="/react-map-gl/favicon.ico"><link data-rh="true" rel="canonical" href="https://visgl.github.io/react-map-gl/docs/api-reference/map"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/api-reference/map" hreflang="en"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/api-reference/map" hreflang="x-default"><link rel="stylesheet" href="/react-map-gl/assets/css/styles.0a7fd3ef.css">
|
||
<link rel="preload" href="/react-map-gl/assets/js/runtime~main.406bf385.js" as="script">
|
||
<link rel="preload" href="/react-map-gl/assets/js/main.c72ab2fe.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</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/images/visgl-logo-dark.png" alt="vis.gl Logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="/react-map-gl/images/visgl-logo-light.png" alt="vis.gl Logo" class="themedImage_ToTc themedImage--dark_i4oU"></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"><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="searchBox_ZlJk"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><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" 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 menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" 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"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" href="/react-map-gl/docs/api-reference/map">API Reference</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 menu__link--active" aria-current="page" tabindex="0" href="/react-map-gl/docs/api-reference/map">default (Map)</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/api-reference/attribution-control">AttributionControl</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/api-reference/fullscreen-control">FullscreenControl</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/api-reference/geolocate-control">GeolocateControl</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/api-reference/layer">Layer</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/api-reference/map-provider">MapProvider</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/api-reference/marker">Marker</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/api-reference/navigation-control">NavigationControl</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/api-reference/popup">Popup</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/api-reference/scale-control">ScaleControl</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/api-reference/source">Source</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/api-reference/use-control">useControl</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/api-reference/use-map">useMap</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/api-reference/types">Types</a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_gTbr"><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">API Reference</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">default (Map)</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"><h1>default (Map)</h1><p>React component that wraps the base library's <code>Map</code> class (<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js-docs/api/map/" target="_blank" rel="noopener noreferrer">Maplibre</a>). This is also the default export from react-map-gl.</p><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">Mapbox</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Maplibre</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">app.tsx</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapboxAccessToken</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c"><Mapbox access token></span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">initialViewState</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> longitude</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript operator" style="color:#393A34">-</span><span class="token tag script language-javascript number" style="color:#36acaa">122.4</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> latitude</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">37.8</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> zoom</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">14</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">width</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">600</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"> height</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">400</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">mapbox://styles/mapbox/streets-v9</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">app.tsx</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl/maplibre'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">initialViewState</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> longitude</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript operator" style="color:#393A34">-</span><span class="token tag script language-javascript number" style="color:#36acaa">122.4</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> latitude</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">37.8</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> zoom</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">14</span><span class="token tag script language-javascript" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">width</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">600</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"> height</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript number" style="color:#36acaa">400</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapStyle</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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><h2 class="anchor anchorWithStickyNavbar_LWe7" id="properties">Properties<a href="#properties" class="hash-link" aria-label="Direct link to Properties" title="Direct link to Properties"></a></h2><p>Aside from the props listed below, the <code>Map</code> component supports all parameters of the <code>Map</code> class constructor (<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js-docs/api/map/" target="_blank" rel="noopener noreferrer">Maplibre</a>). Beware that this is not an exhaustive list of all props. Different base map libraries may offer different options and default values. When in doubt, refer to your base map library's documentation.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="layout-options">Layout options<a href="#layout-options" class="hash-link" aria-label="Direct link to Layout options" title="Direct link to Layout options"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="id"><code>id</code>: string<a href="#id" class="hash-link" aria-label="Direct link to id" title="Direct link to id"></a></h4><p>Map container id.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code>: CSSProperties<a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"></a></h4><p>Default: <code>{position: 'relative', width: '100%', height: '100%'}</code></p><p>Map container CSS.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="cursor"><code>cursor</code>: string<a href="#cursor" class="hash-link" aria-label="Direct link to cursor" title="Direct link to cursor"></a></h4><p>Default: <code>'auto'</code></p><p>The current cursor <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" target="_blank" rel="noopener noreferrer">type</a>.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="styling-options">Styling options<a href="#styling-options" class="hash-link" aria-label="Direct link to Styling options" title="Direct link to Styling options"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="fog"><code>fog</code>: <a href="/react-map-gl/docs/api-reference/types#fog">Fog</a><a href="#fog" class="hash-link" aria-label="Direct link to fog" title="Direct link to fog"></a></h4><p>The fog property of the style. Must conform to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/" target="_blank" rel="noopener noreferrer">Fog Style Specification</a>.
|
||
If <code>undefined</code> is provided, removes the fog from the map.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="light"><code>light</code>: <a href="/react-map-gl/docs/api-reference/types#light">Light</a><a href="#light" class="hash-link" aria-label="Direct link to light" title="Direct link to light"></a></h4><p>Light properties of the style. Must conform to the <a href="https://www.mapbox.com/mapbox-gl-style-spec/#light" target="_blank" rel="noopener noreferrer">Light Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapstyle"><code>mapStyle</code>: <a href="/react-map-gl/docs/api-reference/types#mapboxstyle">MapboxStyle</a> | string | Immutable<a href="#mapstyle" class="hash-link" aria-label="Direct link to mapstyle" title="Direct link to mapstyle"></a></h4><p>Default: (empty style)</p><p>The map's Mapbox style. This must be an a JSON object conforming to the schema described in the <a href="https://mapbox.com/mapbox-gl-style-spec/" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>, or a URL to such JSON.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="projection"><code>projection</code>: string | <a href="/react-map-gl/docs/api-reference/types#projectionspecification">ProjectionSpecification</a><a href="#projection" class="hash-link" aria-label="Direct link to projection" title="Direct link to projection"></a></h4><p>Default: <code>'mercator'</code></p><p>The projection the map should be rendered in. Available projections are Albers (<code>'albers'</code>), Equal Earth (<code>'equalEarth'</code>), Equirectangular/Plate Carrée/WGS84 (<code>'equirectangular'</code>), Lambert (<code>'lambertConformalConic'</code>), Mercator (<code>'mercator'</code>), Natural Earth (<code>'naturalEarth'</code>), and Winkel Tripel (<code>'winkelTripel'</code>). Conic projections such as Albers and Lambert have configurable <code>center</code> and <code>parallels</code> properties that allow developers to define the region in which the projection has minimal distortion; see <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection" target="_blank" rel="noopener noreferrer">example</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="renderworldcopies"><code>renderWorldCopies</code>: boolean<a href="#renderworldcopies" class="hash-link" aria-label="Direct link to renderworldcopies" title="Direct link to renderworldcopies"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, multiple copies of the world will be rendered, when zoomed out.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="stylediffing"><code>styleDiffing</code>: boolean<a href="#stylediffing" class="hash-link" aria-label="Direct link to stylediffing" title="Direct link to stylediffing"></a></h4><p>Default: <code>true</code></p><p>Enable diffing when <code>mapStyle</code> changes. If <code>false</code>, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="terrain"><code>terrain</code>: <a href="/react-map-gl/docs/api-reference/types#terrainspecification">TerrainSpecification</a><a href="#terrain" class="hash-link" aria-label="Direct link to terrain" title="Direct link to terrain"></a></h4><p>Terrain property of the style. Must conform to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/" target="_blank" rel="noopener noreferrer">Terrain Style Specification</a>.
|
||
If <code>undefined</code> is provided, removes terrain from the map.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="camera-options">Camera options<a href="#camera-options" class="hash-link" aria-label="Direct link to Camera options" title="Direct link to Camera options"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="initialviewstate"><code>initialViewState</code>: object<a href="#initialviewstate" class="hash-link" aria-label="Direct link to initialviewstate" title="Direct link to initialviewstate"></a></h4><p>The initial view state of the map. If specified, <code>longitude</code>, <code>latitude</code>, <code>zoom</code> etc. in props are ignored when constructing the map. Only specify <code>initialViewState</code> if <code>Map</code> is being used as an <strong>uncontrolled component</strong>. See <a href="/react-map-gl/docs/get-started/state-management">state management</a> for examples.</p><ul><li><code>bounds?</code>: <a href="/react-map-gl/docs/api-reference/types#lnglatboundslike">LngLatBoundsLike</a> - The initial bounds of the map. If specified, it overrides the <code>longitude</code>, <code>latitude</code> and <code>zoom</code> options. Default <code>null</code>.</li><li><code>fitBoundsOptions</code>: <a href="/react-map-gl/docs/api-reference/types#fitboundsoptions">FitBoundsOptions</a> - A <code>fitBounds</code> options object to use only when setting the <code>bounds</code> option. Default <code>null</code>.</li><li><code>longitude</code>: number - The initial longitude of the map center. Default <code>0</code>.</li><li><code>latitude</code>: number - The initial latitude of the map center. Default <code>0</code>.</li><li><code>zoom</code>: number - The initial zoom level. Default <code>0</code>.</li><li><code>pitch</code>: number - The initial pitch (tilt) of the map. Default <code>0</code>.</li><li><code>bearing</code>: number - The initial bearing (rotation) of the map. Default <code>0</code>.</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="longitude"><code>longitude</code>: number<a href="#longitude" class="hash-link" aria-label="Direct link to longitude" title="Direct link to longitude"></a></h4><p>The longitude of the map center.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="latitude"><code>latitude</code>: number<a href="#latitude" class="hash-link" aria-label="Direct link to latitude" title="Direct link to latitude"></a></h4><p>The latitude of the map center.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="zoom"><code>zoom</code>: number<a href="#zoom" class="hash-link" aria-label="Direct link to zoom" title="Direct link to zoom"></a></h4><p>The <a href="https://docs.mapbox.com/help/glossary/camera/#zoom-level" target="_blank" rel="noopener noreferrer">zoom level</a> of the map.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="pitch"><code>pitch</code>: number<a href="#pitch" class="hash-link" aria-label="Direct link to pitch" title="Direct link to pitch"></a></h4><p>The initial <a href="https://docs.mapbox.com/help/glossary/camera/#pitch" target="_blank" rel="noopener noreferrer">pitch</a> (tilt) of the map, measured in degrees away from the plane of the screen (0-85).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="bearing"><code>bearing</code>: number<a href="#bearing" class="hash-link" aria-label="Direct link to bearing" title="Direct link to bearing"></a></h4><p>The initial <a href="https://docs.mapbox.com/help/glossary/camera/#bearing" target="_blank" rel="noopener noreferrer">bearing</a> (rotation) of the map, measured in degrees counter-clockwise from north.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="padding"><code>padding</code>: <a href="/react-map-gl/docs/api-reference/types#paddingoptions">PaddingOptions</a><a href="#padding" class="hash-link" aria-label="Direct link to padding" title="Direct link to padding"></a></h4><p>Default: <code>null</code></p><p>The padding in pixels around the viewport.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="minzoom"><code>minZoom</code>: number<a href="#minzoom" class="hash-link" aria-label="Direct link to minzoom" title="Direct link to minzoom"></a></h4><p>Default: <code>0</code></p><p>The minimum zoom level of the map (0-24).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maxzoom"><code>maxZoom</code>: number<a href="#maxzoom" class="hash-link" aria-label="Direct link to maxzoom" title="Direct link to maxzoom"></a></h4><p>Default: <code>22</code></p><p>The maximum zoom level of the map (0-24).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="minpitch"><code>minPitch</code>: number<a href="#minpitch" class="hash-link" aria-label="Direct link to minpitch" title="Direct link to minpitch"></a></h4><p>Default: <code>0</code></p><p>The minimum pitch of the map (0-85).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maxpitch"><code>maxPitch</code>: number<a href="#maxpitch" class="hash-link" aria-label="Direct link to maxpitch" title="Direct link to maxpitch"></a></h4><p>Default: <code>60</code></p><p>The maximum pitch of the map (0-85).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maxbounds"><code>maxBounds</code>: <a href="/react-map-gl/docs/api-reference/types#lnglatboundslike">LngLatBoundsLike</a><a href="#maxbounds" class="hash-link" aria-label="Direct link to maxbounds" title="Direct link to maxbounds"></a></h4><p>Default: <code>null</code></p><p>If set, the map is constrained to the given bounds.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="input-handler-options">Input handler options<a href="#input-handler-options" class="hash-link" aria-label="Direct link to Input handler options" title="Direct link to Input handler options"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="boxzoom"><code>boxZoom</code>: boolean<a href="#boxzoom" class="hash-link" aria-label="Direct link to boxzoom" title="Direct link to boxzoom"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "box zoom" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler" target="_blank" rel="noopener noreferrer">BoxZoomHandler</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="doubleclickzoom"><code>doubleClickZoom</code>: boolean<a href="#doubleclickzoom" class="hash-link" aria-label="Direct link to doubleclickzoom" title="Direct link to doubleclickzoom"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "double click to zoom" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler" target="_blank" rel="noopener noreferrer">DoubleClickZoomHandler</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="dragrotate"><code>dragRotate</code>: boolean<a href="#dragrotate" class="hash-link" aria-label="Direct link to dragrotate" title="Direct link to dragrotate"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "drag to rotate" interaction is enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler" target="_blank" rel="noopener noreferrer">DragRotateHandler</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="dragpan"><code>dragPan</code>: boolean | <a href="/react-map-gl/docs/api-reference/types#dragpanoptions">DragPanOptions</a><a href="#dragpan" class="hash-link" aria-label="Direct link to dragpan" title="Direct link to dragpan"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "drag to pan" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler" target="_blank" rel="noopener noreferrer">DragPanHandler#enable</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="keyboard"><code>keyboard</code>: boolean<a href="#keyboard" class="hash-link" aria-label="Direct link to keyboard" title="Direct link to keyboard"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, keyboard shortcuts are enabled (see <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler" target="_blank" rel="noopener noreferrer">KeyboardHandler</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="scrollzoom"><code>scrollZoom</code>: boolean | <a href="/react-map-gl/docs/api-reference/types#zoomrotateoptions">ZoomRotateOptions</a><a href="#scrollzoom" class="hash-link" aria-label="Direct link to scrollzoom" title="Direct link to scrollzoom"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "scroll to zoom" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler" target="_blank" rel="noopener noreferrer">ScrollZoomHandler#enable</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="touchpitch"><code>touchPitch</code>: boolean<a href="#touchpitch" class="hash-link" aria-label="Direct link to touchpitch" title="Direct link to touchpitch"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "drag to pitch" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler" target="_blank" rel="noopener noreferrer">TouchPitchHandler#enable</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="touchzoomrotate"><code>touchZoomRotate</code>: boolean | <a href="/react-map-gl/docs/api-reference/types#zoomrotateoptions">ZoomRotateOptions</a><a href="#touchzoomrotate" class="hash-link" aria-label="Direct link to touchzoomrotate" title="Direct link to touchzoomrotate"></a></h4><p>Default: <code>true</code></p><p>If <code>true</code>, the "pinch to rotate and zoom" interaction is enabled. Optionally accpt an object value that is the options to <a href="https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler" target="_blank" rel="noopener noreferrer">TouchZoomRotateHandler#enable</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="interactivelayerids"><code>interactiveLayerIds</code>: string[]<a href="#interactivelayerids" class="hash-link" aria-label="Direct link to interactivelayerids" title="Direct link to interactivelayerids"></a></h4><p>Default: <code>null</code></p><p>The id(s) of style layer(s).</p><p>If specified, pointer event (<code>mousemove</code>, <code>click</code> etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a <code>features</code> property containing an array of the matching features.</p><p>If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a <code>features</code> property.</p><p>See the <a href="#callbacks">Callbacks</a> section for affected events.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="callbacks">Callbacks<a href="#callbacks" class="hash-link" aria-label="Direct link to Callbacks" title="Direct link to Callbacks"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onresize"><code>onResize</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void<a href="#onresize" class="hash-link" aria-label="Direct link to onresize" title="Direct link to onresize"></a></h4><p>Called when the map has been resized.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onload"><code>onLoad</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void<a href="#onload" class="hash-link" aria-label="Direct link to onload" title="Direct link to onload"></a></h4><p>Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onrender"><code>onRender</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void<a href="#onrender" class="hash-link" aria-label="Direct link to onrender" title="Direct link to onrender"></a></h4><p>Called whenever the map is drawn to the screen.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onidle"><code>onIdle</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void<a href="#onidle" class="hash-link" aria-label="Direct link to onidle" title="Direct link to onidle"></a></h4><p>Called after the last frame rendered before the map enters an "idle" state:</p><ul><li>No camera transitions are in progress</li><li>All currently requested tiles have loaded</li><li>All fade/transition animations have completed</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onremove"><code>onRemove</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxevent">MapboxEvent</a>) => void<a href="#onremove" class="hash-link" aria-label="Direct link to onremove" title="Direct link to onremove"></a></h4><p>Called when the map has been removed.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onerror"><code>onError</code>: (event: <a href="/react-map-gl/docs/api-reference/types#errorevent">ErrorEvent</a>) => void<a href="#onerror" class="hash-link" aria-label="Direct link to onerror" title="Direct link to onerror"></a></h4><p>Default: <code>evt => console.error(evt.error)</code></p><p>Called when an error occurs.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmousedown"><code>onMouseDown</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmousedown" class="hash-link" aria-label="Direct link to onmousedown" title="Direct link to onmousedown"></a></h4><p>Called when a pointing device (usually a mouse) is pressed within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmouseup"><code>onMouseUp</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmouseup" class="hash-link" aria-label="Direct link to onmouseup" title="Direct link to onmouseup"></a></h4><p>Called when a pointing device (usually a mouse) is released within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmouseover"><code>onMouseOver</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmouseover" class="hash-link" aria-label="Direct link to onmouseover" title="Direct link to onmouseover"></a></h4><p>Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmouseenter"><code>onMouseEnter</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmouseenter" class="hash-link" aria-label="Direct link to onmouseenter" title="Direct link to onmouseenter"></a></h4><p>Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by <code>interactiveLayerIds</code> from outside that layer or outside the map canvas.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmousemove"><code>onMouseMove</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmousemove" class="hash-link" aria-label="Direct link to onmousemove" title="Direct link to onmousemove"></a></h4><p>Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmouseleave"><code>onMouseLeave</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmouseleave" class="hash-link" aria-label="Direct link to onmouseleave" title="Direct link to onmouseleave"></a></h4><p>Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by <code>interactiveLayerIds</code> or moves from the layer to outside the map canvas.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmouseout"><code>onMouseOut</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onmouseout" class="hash-link" aria-label="Direct link to onmouseout" title="Direct link to onmouseout"></a></h4><p>Called when a point device (usually a mouse) leaves the map's canvas.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onclick"><code>onClick</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#onclick" class="hash-link" aria-label="Direct link to onclick" title="Direct link to onclick"></a></h4><p>Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ondblclick"><code>onDblClick</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#ondblclick" class="hash-link" aria-label="Direct link to ondblclick" title="Direct link to ondblclick"></a></h4><p>Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="oncontextmenu"><code>onContextMenu</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayermouseevent">MapLayerMouseEvent</a>) => void<a href="#oncontextmenu" class="hash-link" aria-label="Direct link to oncontextmenu" title="Direct link to oncontextmenu"></a></h4><p>Called when the right button of the mouse is clicked or the context menu key is pressed within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onwheel"><code>onWheel</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapwheelevent">MapWheelEvent</a>) => void<a href="#onwheel" class="hash-link" aria-label="Direct link to onwheel" title="Direct link to onwheel"></a></h4><p>Called when a wheel event occurs within the map.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ontouchstart"><code>onTouchStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void<a href="#ontouchstart" class="hash-link" aria-label="Direct link to ontouchstart" title="Direct link to ontouchstart"></a></h4><p>Called when a <code>touchstart</code> event occurs within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ontouchend"><code>onTouchEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void<a href="#ontouchend" class="hash-link" aria-label="Direct link to ontouchend" title="Direct link to ontouchend"></a></h4><p>Called when a <code>touchend</code> event occurs within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ontouchmove"><code>onTouchMove</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void<a href="#ontouchmove" class="hash-link" aria-label="Direct link to ontouchmove" title="Direct link to ontouchmove"></a></h4><p>Called when a <code>touchmove</code> event occurs within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ontouchcancel"><code>onTouchCancel</code>: (event: <a href="/react-map-gl/docs/api-reference/types#maplayertouchevent">MapLayerTouchEvent</a>) => void<a href="#ontouchcancel" class="hash-link" aria-label="Direct link to ontouchcancel" title="Direct link to ontouchcancel"></a></h4><p>Called when a <code>touchcancel</code> event occurs within the map.</p><p>If <code>interactiveLayerIds</code> is specified, the event will contain an additional <code>features</code> field that contains features under the cursor from the specified layer.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmovestart"><code>onMoveStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onmovestart" class="hash-link" aria-label="Direct link to onmovestart" title="Direct link to onmovestart"></a></h4><p>Called just before the map begins a transition from one view to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmove"><code>onMove</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onmove" class="hash-link" aria-label="Direct link to onmove" title="Direct link to onmove"></a></h4><p>Called repeatedly during an animated transition from one view to another.</p><p>When <code>Map</code> is used as a controlled component, <code>event.viewState</code> reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" target="_blank" rel="noopener noreferrer">flyTo</a>. The camera does not actually change until the application updates the view state props (<code>longitude</code>, <code>latitude</code>, <code>zoom</code> etc.).
|
||
See <a href="/react-map-gl/docs/get-started/state-management">state management</a> for examples.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onmoveend"><code>onMoveEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onmoveend" class="hash-link" aria-label="Direct link to onmoveend" title="Direct link to onmoveend"></a></h4><p>Called just after the map completes a transition from one view to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ondragstart"><code>onDragStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#ondragstart" class="hash-link" aria-label="Direct link to ondragstart" title="Direct link to ondragstart"></a></h4><p>Called when a "drag to pan" interaction starts.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ondrag"><code>onDrag</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#ondrag" class="hash-link" aria-label="Direct link to ondrag" title="Direct link to ondrag"></a></h4><p>Called repeatedly during a "drag to pan" interaction.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ondragend"><code>onDragEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#ondragend" class="hash-link" aria-label="Direct link to ondragend" title="Direct link to ondragend"></a></h4><p>Called when a "drag to pan" interaction ends.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onzoomstart"><code>onZoomStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onzoomstart" class="hash-link" aria-label="Direct link to onzoomstart" title="Direct link to onzoomstart"></a></h4><p>Called just before the map begins a transition from one zoom level to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onzoom"><code>onZoom</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onzoom" class="hash-link" aria-label="Direct link to onzoom" title="Direct link to onzoom"></a></h4><p>Called repeatedly during an animated transition from one zoom level to another.</p><p>When <code>Map</code> is used as a controlled component, <code>event.viewState.zoom</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" target="_blank" rel="noopener noreferrer">flyTo</a>. The camera does not actually change until the application updates the <code>zoom</code> prop.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onzoomend"><code>onZoomEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onzoomend" class="hash-link" aria-label="Direct link to onzoomend" title="Direct link to onzoomend"></a></h4><p>Called just after the map completes a transition from one zoom level to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onrotatestart"><code>onRotateStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onrotatestart" class="hash-link" aria-label="Direct link to onrotatestart" title="Direct link to onrotatestart"></a></h4><p>Called just before the map begins a transition from one bearing (rotation) to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onrotate"><code>onRotate</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onrotate" class="hash-link" aria-label="Direct link to onrotate" title="Direct link to onrotate"></a></h4><p>Called repeatedly during an animated transition from one bearing (rotation) to another.</p><p>When <code>Map</code> is used as a controlled component, <code>event.viewState.bearing</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" target="_blank" rel="noopener noreferrer">flyTo</a>. The camera does not actually change until the application updates the <code>bearing</code> prop.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onrotateend"><code>onRotateEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onrotateend" class="hash-link" aria-label="Direct link to onrotateend" title="Direct link to onrotateend"></a></h4><p>Called just after the map completes a transition from one bearing (rotation) to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onpitchstart"><code>onPitchStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onpitchstart" class="hash-link" aria-label="Direct link to onpitchstart" title="Direct link to onpitchstart"></a></h4><p>Called just before the map begins a transition from one pitch (tilt) to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onpitch"><code>onPitch</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onpitch" class="hash-link" aria-label="Direct link to onpitch" title="Direct link to onpitch"></a></h4><p>Called repeatedly during an animated transition from one pitch (tilt) to another.</p><p>When <code>Map</code> is used as a controlled component, <code>event.viewState.pitch</code> reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto" target="_blank" rel="noopener noreferrer">flyTo</a>. The camera does not actually change until the application updates the <code>pitch</code> prop.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onpitchend"><code>onPitchEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#viewstatechangeevent">ViewStateChangeEvent</a>) => void<a href="#onpitchend" class="hash-link" aria-label="Direct link to onpitchend" title="Direct link to onpitchend"></a></h4><p>Called just after the map completes a transition from one pitch (tilt) to another.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onboxzoomstart"><code>onBoxZoomStart</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void<a href="#onboxzoomstart" class="hash-link" aria-label="Direct link to onboxzoomstart" title="Direct link to onboxzoomstart"></a></h4><p>Called when a "box zoom" interaction starts.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onboxzoomend"><code>onBoxZoomEnd</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void<a href="#onboxzoomend" class="hash-link" aria-label="Direct link to onboxzoomend" title="Direct link to onboxzoomend"></a></h4><p>Called when a "box zoom" interaction ends.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onboxzoomcancel"><code>onBoxZoomCancel</code>: (event:<a href="/react-map-gl/docs/api-reference/types#mapboxzoomevent">MapBoxZoomEvent</a>) => void<a href="#onboxzoomcancel" class="hash-link" aria-label="Direct link to onboxzoomcancel" title="Direct link to onboxzoomcancel"></a></h4><p>Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="ondata"><code>onData</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapstyledataevent">MapStyleDataEvent</a> | <a href="/react-map-gl/docs/api-reference/types#mapsourcedataevent">MapSourceDataEvent</a>) => void<a href="#ondata" class="hash-link" aria-label="Direct link to ondata" title="Direct link to ondata"></a></h4><p>Called when any map data loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" target="_blank" rel="noopener noreferrer">MapDataEvent</a> for more information.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onstyledata"><code>onStyleData</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapstyledataevent">MapStyleDataEvent</a>) => void<a href="#onstyledata" class="hash-link" aria-label="Direct link to onstyledata" title="Direct link to onstyledata"></a></h4><p>Called when the map's style loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" target="_blank" rel="noopener noreferrer">MapDataEvent</a> for more information.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="onsourcedata"><code>onSourceData</code>: (event: <a href="/react-map-gl/docs/api-reference/types#mapsourcedataevent">MapSourceDataEvent</a>) => void<a href="#onsourcedata" class="hash-link" aria-label="Direct link to onsourcedata" title="Direct link to onsourcedata"></a></h4><p>Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" target="_blank" rel="noopener noreferrer">MapDataEvent</a> for more information.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="other-options">Other options<a href="#other-options" class="hash-link" aria-label="Direct link to Other options" title="Direct link to Other options"></a></h3><p>The following props, along with any options of the <code>Map</code> class (<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js-docs/api/map/" target="_blank" rel="noopener noreferrer">Maplibre</a>) not listed above, can be specified to construct the underlying <code>Map</code> instance. </p><p>Note: props in this section are not reactive. They are only used once when the Map instance is constructed.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maplib"><code>mapLib</code>: any<a href="#maplib" class="hash-link" aria-label="Direct link to maplib" title="Direct link to maplib"></a></h4><p>Default:</p><ul><li><code>import('mapbox-gl')</code> if imported from <code>react-map-gl</code></li><li><code>import('maplibre-gl')</code> if imported from <code>react-map-gl/maplibre</code></li></ul><p>Specify the underlying base map library for the Map component. The value can be provided with several options:</p><p>By module import (and embedding in the final bundle):</p><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">mapboxgl</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'mapbox-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapLib</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">mapboxgl</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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>By dynamic import (thus enable bundle splitting):</p><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapLib</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript keyword" style="color:#00009f">import</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript string" style="color:#e3116c">'mapbox-gl'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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>Or to load a pre-bundled version of the library:</p><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">index.html</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">></span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></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:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">app.tsx</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">mapLib</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript dom variable" style="color:#36acaa">window</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#00009f">mapboxgl</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapboxaccesstoken"><code>mapboxAccessToken</code>: string<a href="#mapboxaccesstoken" class="hash-link" aria-label="Direct link to mapboxaccesstoken" title="Direct link to mapboxaccesstoken"></a></h4><p>Token used to access the Mapbox data service. See <a href="/react-map-gl/docs/get-started/mapbox-tokens">about map tokens</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="baseapiurl"><code>baseApiUrl</code>: string<a href="#baseapiurl" class="hash-link" aria-label="Direct link to baseapiurl" title="Direct link to baseapiurl"></a></h4><p>The map's default API URL for requesting tiles, styles, sprites, and glyphs.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maxparallelimagerequests"><code>maxParallelImageRequests</code>: number<a href="#maxparallelimagerequests" class="hash-link" aria-label="Direct link to maxparallelimagerequests" title="Direct link to maxparallelimagerequests"></a></h4><p>Default: <code>16</code></p><p>The maximum number of images (raster tiles, sprites, icons) to load in parallel.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="reusemaps"><code>reuseMaps</code>: boolean<a href="#reusemaps" class="hash-link" aria-label="Direct link to reusemaps" title="Direct link to reusemaps"></a></h4><p>Default: <code>false</code></p><p>By default, every time a map component is unmounted, all internal resources associated with the underlying <code>Map</code> instance are released. If the map gets mounted again, a new <code>Map</code> instance is constructed.</p><p>If <code>reuseMaps</code> is set to <code>true</code>, when a map component is unmounted, the underlying <code>Map</code> instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid Mapbox's <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0" target="_blank" rel="noopener noreferrer">billable events</a> triggered by initialization.</p><p>Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and <code>initialViewState</code> of the new component are respected.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="rtltextplugin"><code>RTLTextPlugin</code>: string<a href="#rtltextplugin" class="hash-link" aria-label="Direct link to rtltextplugin" title="Direct link to rtltextplugin"></a></h4><p>Default: <code>'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'</code></p><p>Sets the map's <a href="https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text" target="_blank" rel="noopener noreferrer">RTL text plugin</a>. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.</p><p>Setting this prop is the equivelant of calling <a href="https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin" target="_blank" rel="noopener noreferrer">mapboxgl.setRTLTextPlugin</a> with <code>lazy: true</code>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="workerclass"><code>workerClass</code>: object<a href="#workerclass" class="hash-link" aria-label="Direct link to workerclass" title="Direct link to workerclass"></a></h4><p>Default: <code>null</code></p><p>Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
|
||
Takes precedence over <code>workerUrl</code>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="workercount"><code>workerCount</code>: number<a href="#workercount" class="hash-link" aria-label="Direct link to workercount" title="Direct link to workercount"></a></h4><p>Default: <code>2</code></p><p>The number of web workers instantiated on a page with mapbox-gl maps.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="workerurl"><code>workerUrl</code>: string<a href="#workerurl" class="hash-link" aria-label="Direct link to workerurl" title="Direct link to workerurl"></a></h4><p>Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="methods">Methods<a href="#methods" class="hash-link" aria-label="Direct link to Methods" title="Direct link to Methods"></a></h2><p>Imperative methods are accessible via a <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" target="_blank" rel="noopener noreferrer">React ref</a> or the <a href="/react-map-gl/docs/api-reference/use-map">useMap</a> hook.</p><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">Mapbox</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Maplibre</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">useRef</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> useCallback</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token maybe-class-name">MapRef</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> mapRef </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">useRef</span><span class="token generic-function generic class-name operator" style="color:#393A34"><</span><span class="token generic-function generic class-name">MapRef</span><span class="token generic-function generic class-name operator" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onMapLoad </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> mapRef</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'move'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// do something</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">mapRef</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">onLoad</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">onMapLoad</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">...</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports operator" style="color:#393A34">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:#00009f">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">useRef</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> useCallback</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token known-class-name class-name">Map</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl/maplibre'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token maybe-class-name">MapRef</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react-map-gl/maplibre'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> mapRef </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">useRef</span><span class="token generic-function generic class-name operator" style="color:#393A34"><</span><span class="token generic-function generic class-name">MapRef</span><span class="token generic-function generic class-name operator" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> onMapLoad </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> mapRef</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'move'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// do something</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Map</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">mapRef</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">onLoad</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">onMapLoad</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">...</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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>The <a href="/react-map-gl/docs/api-reference/types#mapref">MapRef</a> object exposes <a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members" target="_blank" rel="noopener noreferrer">Map methods</a> that <strong>are safe to call without breaking the React bindings</strong>. For example, <code>setStyle()</code> is hidden from the ref object, because the style is supposed to be changed by updating the <code>mapStyle</code> prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.</p><p>You can still access the hidden members via <code>getMap()</code>:</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="getmap"><code>getMap()</code><a href="#getmap" class="hash-link" aria-label="Direct link to getmap" title="Direct link to getmap"></a></h4><p>Returns the native <code>Map</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js-docs/api/map/" target="_blank" rel="noopener noreferrer">Maplibre</a>) instance associated with this component.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="source">Source<a href="#source" class="hash-link" aria-label="Direct link to Source" title="Direct link to Source"></a></h2><p><a href="https://github.com/visgl/react-map-gl/tree/7.1-release/src/components/map.tsx" target="_blank" rel="noopener noreferrer">map.tsx</a></p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/map.md" target="_blank" rel="noreferrer noopener" 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_vwxv"></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/tips-and-tricks"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Tips and Tricks</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/react-map-gl/docs/api-reference/attribution-control"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">AttributionControl</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="#properties" class="table-of-contents__link toc-highlight">Properties</a><ul><li><a href="#layout-options" class="table-of-contents__link toc-highlight">Layout options</a></li><li><a href="#styling-options" class="table-of-contents__link toc-highlight">Styling options</a></li><li><a href="#camera-options" class="table-of-contents__link toc-highlight">Camera options</a></li><li><a href="#input-handler-options" class="table-of-contents__link toc-highlight">Input handler options</a></li><li><a href="#callbacks" class="table-of-contents__link toc-highlight">Callbacks</a></li><li><a href="#other-options" class="table-of-contents__link toc-highlight">Other options</a></li></ul></li><li><a href="#methods" class="table-of-contents__link toc-highlight">Methods</a></li><li><a href="#source" class="table-of-contents__link toc-highlight">Source</a></li></ul></div></div></div></div></main></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">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/react-map-gl/docs/api-reference/map">API Reference</a></li><li class="footer__item"><a href="https://github.com/visgl/react-map-gl/tree/master/examples/get-started" target="_blank" rel="noopener noreferrer" class="footer__link-item">Starter templates<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">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://nebula.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">nebula.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></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://www.openvisualization.org/#" target="_blank" rel="noopener noreferrer" class="footer__link-item">Open Visualization<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://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">Copyright © 2023 OpenJS Foundation</div></div></div></footer></div>
|
||
<script src="/react-map-gl/assets/js/runtime~main.406bf385.js"></script>
|
||
<script src="/react-map-gl/assets/js/main.c72ab2fe.js"></script>
|
||
</body>
|
||
</html> |