16 lines
48 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/types">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.4.1">
<title data-rh="true">Types | 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/types"><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="Types | React Map GL"><meta data-rh="true" name="description" content="The following types can be imported from react-map-gl when using TypeScript."><meta data-rh="true" property="og:description" content="The following types can be imported from react-map-gl when using TypeScript."><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/types"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/api-reference/types" hreflang="en"><link data-rh="true" rel="alternate" href="https://visgl.github.io/react-map-gl/docs/api-reference/types" 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.ffa55eeb.js" as="script">
<link rel="preload" href="/react-map-gl/assets/js/main.684e2b73.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" 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 menu__link--active" aria-current="page" 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">Types</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>Types</h1><p>The following types can be imported from <code>react-map-gl</code> when using TypeScript.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="components">Components<a href="#components" class="hash-link" aria-label="Direct link to Components" title="Direct link to Components"></a></h2><h4 class="anchor anchorWithStickyNavbar_LWe7" id="icontrol">IControl<a href="#icontrol" class="hash-link" aria-label="Direct link to IControl" title="Direct link to IControl"></a></h4><p>A <a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol" target="_blank" rel="noopener noreferrer">custom control implementation</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="customlayerinterface">CustomLayerInterface<a href="#customlayerinterface" class="hash-link" aria-label="Direct link to CustomLayerInterface" title="Direct link to CustomLayerInterface"></a></h4><p>A <a href="https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface" target="_blank" rel="noopener noreferrer">custom layer implementation</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapref">MapRef<a href="#mapref" class="hash-link" aria-label="Direct link to MapRef" title="Direct link to MapRef"></a></h4><p>Instance <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" target="_blank" rel="noopener noreferrer">ref</a> of a <code>Map</code> component. See <a href="/react-map-gl/docs/api-reference/map#methods">Map documentation</a> for details.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="styling">Styling<a href="#styling" class="hash-link" aria-label="Direct link to Styling" title="Direct link to Styling"></a></h2><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapstyle">MapStyle<a href="#mapstyle" class="hash-link" aria-label="Direct link to MapStyle" title="Direct link to MapStyle"></a></h4><p>An object conforming to the <a href="https://mapbox.com/mapbox-gl-style-spec/" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="fog">Fog<a href="#fog" class="hash-link" aria-label="Direct link to Fog" title="Direct link to Fog"></a></h4><p>An object conforming to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/" target="_blank" rel="noopener noreferrer">Fog Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="light">Light<a href="#light" class="hash-link" aria-label="Direct link to Light" title="Direct link to Light"></a></h4><p>An object conforming 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="terrain">Terrain<a href="#terrain" class="hash-link" aria-label="Direct link to Terrain" title="Direct link to Terrain"></a></h4><p>An object conforming to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/" target="_blank" rel="noopener noreferrer">Terrain Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="projection">Projection<a href="#projection" class="hash-link" aria-label="Direct link to Projection" title="Direct link to Projection"></a></h4><p>An object conforming to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/projection/" target="_blank" rel="noopener noreferrer">Projection Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="backgroundlayer">BackgroundLayer<a href="#backgroundlayer" class="hash-link" aria-label="Direct link to BackgroundLayer" title="Direct link to BackgroundLayer"></a></h4><p>A JSON object that defines a <code>background</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="circlelayer">CircleLayer<a href="#circlelayer" class="hash-link" aria-label="Direct link to CircleLayer" title="Direct link to CircleLayer"></a></h4><p>A JSON object that defines a <code>circle</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="fillextrusionlayer">FillExtrusionLayer<a href="#fillextrusionlayer" class="hash-link" aria-label="Direct link to FillExtrusionLayer" title="Direct link to FillExtrusionLayer"></a></h4><p>A JSON object that defines a <code>fill-extrusion</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="filllayer">FillLayer<a href="#filllayer" class="hash-link" aria-label="Direct link to FillLayer" title="Direct link to FillLayer"></a></h4><p>A JSON object that defines a <code>fill</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="heatmaplayer">HeatmapLayer<a href="#heatmaplayer" class="hash-link" aria-label="Direct link to HeatmapLayer" title="Direct link to HeatmapLayer"></a></h4><p>A JSON object that defines a <code>heatmap</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="hillshadelayer">HillshadeLayer<a href="#hillshadelayer" class="hash-link" aria-label="Direct link to HillshadeLayer" title="Direct link to HillshadeLayer"></a></h4><p>A JSON object that defines a <code>hillshade</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#hillshade" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="linelayer">LineLayer<a href="#linelayer" class="hash-link" aria-label="Direct link to LineLayer" title="Direct link to LineLayer"></a></h4><p>A JSON object that defines a <code>line</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="rasterlayer">RasterLayer<a href="#rasterlayer" class="hash-link" aria-label="Direct link to RasterLayer" title="Direct link to RasterLayer"></a></h4><p>A JSON object that defines a <code>raster</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#raster" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="symbollayer">SymbolLayer<a href="#symbollayer" class="hash-link" aria-label="Direct link to SymbolLayer" title="Direct link to SymbolLayer"></a></h4><p>A JSON object that defines a <code>symbol</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="skylayer">SkyLayer<a href="#skylayer" class="hash-link" aria-label="Direct link to SkyLayer" title="Direct link to SkyLayer"></a></h4><p>A JSON object that defines a <code>sky</code> layer according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="geojsonsourceraw">GeoJSONSourceRaw<a href="#geojsonsourceraw" class="hash-link" aria-label="Direct link to GeoJSONSourceRaw" title="Direct link to GeoJSONSourceRaw"></a></h4><p>A JSON object that defines a <code>geojson</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="videosourceraw">VideoSourceRaw<a href="#videosourceraw" class="hash-link" aria-label="Direct link to VideoSourceRaw" title="Direct link to VideoSourceRaw"></a></h4><p>A JSON object that defines a <code>video</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#video" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="imagesourceraw">ImageSourceRaw<a href="#imagesourceraw" class="hash-link" aria-label="Direct link to ImageSourceRaw" title="Direct link to ImageSourceRaw"></a></h4><p>A JSON object that defines a <code>image</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="vectorsourceraw">VectorSourceRaw<a href="#vectorsourceraw" class="hash-link" aria-label="Direct link to VectorSourceRaw" title="Direct link to VectorSourceRaw"></a></h4><p>A JSON object that defines a <code>vector</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="rastersource">RasterSource<a href="#rastersource" class="hash-link" aria-label="Direct link to RasterSource" title="Direct link to RasterSource"></a></h4><p>A JSON object that defines a <code>raster</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="rasterdemsource">RasterDemSource<a href="#rasterdemsource" class="hash-link" aria-label="Direct link to RasterDemSource" title="Direct link to RasterDemSource"></a></h4><p>A JSON object that defines a <code>raster-dem</code> source according to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster-dem" target="_blank" rel="noopener noreferrer">Mapbox Style Specification</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="canvassourceraw">CanvasSourceRaw<a href="#canvassourceraw" class="hash-link" aria-label="Direct link to CanvasSourceRaw" title="Direct link to CanvasSourceRaw"></a></h4><p>A JSON object that defines a <code>canvas</code> source type. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassourceoptions" target="_blank" rel="noopener noreferrer">CanvasSourceOptions</a>.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="configurations">Configurations<a href="#configurations" class="hash-link" aria-label="Direct link to Configurations" title="Direct link to Configurations"></a></h2><h4 class="anchor anchorWithStickyNavbar_LWe7" id="controlposition">ControlPosition<a href="#controlposition" class="hash-link" aria-label="Direct link to ControlPosition" title="Direct link to ControlPosition"></a></h4><p>One of <code>&#x27;top-right&#x27;</code>, <code>&#x27;top-left&#x27;</code>, <code>&#x27;bottom-right&#x27;</code> and <code>&#x27;bottom-left&#x27;</code>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="paddingoptions">PaddingOptions<a href="#paddingoptions" class="hash-link" aria-label="Direct link to PaddingOptions" title="Direct link to PaddingOptions"></a></h4><p>An object with the following fields:</p><ul><li><code>left</code>: number - in pixels.</li><li><code>top</code>: number - in pixels.</li><li><code>right</code>: number - in pixels.</li><li><code>bottom</code>: number - in pixels.</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="data-types">Data Types<a href="#data-types" class="hash-link" aria-label="Direct link to Data Types" title="Direct link to Data Types"></a></h2><h4 class="anchor anchorWithStickyNavbar_LWe7" id="lnglat">LngLat<a href="#lnglat" class="hash-link" aria-label="Direct link to LngLat" title="Direct link to LngLat"></a></h4><p>A <a href="https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat" target="_blank" rel="noopener noreferrer">mapboxgl.LngLat</a> object.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="lnglatlike">LngLatLike<a href="#lnglatlike" class="hash-link" aria-label="Direct link to LngLatLike" title="Direct link to LngLatLike"></a></h4><p>A <a href="#lnglat">LngLat</a> object, an array of two numbers representing longitude and latitude, or an object with <code>lng</code> and <code>lat</code> or <code>lon</code> and <code>lat</code> properties.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="lnglatbounds">LngLatBounds<a href="#lnglatbounds" class="hash-link" aria-label="Direct link to LngLatBounds" title="Direct link to LngLatBounds"></a></h4><p>A <a href="https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds" target="_blank" rel="noopener noreferrer">mapboxgl.LngLatBounds</a> object.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="lnglatboundslike">LngLatBoundsLike<a href="#lnglatboundslike" class="hash-link" aria-label="Direct link to LngLatBoundsLike" title="Direct link to LngLatBoundsLike"></a></h4><p>A <a href="#lnglatbounds">LngLatBounds</a> object, an array of <a href="#lnglatlike">LngLatLike</a> objects in <!-- -->[sw, ne]<!-- --> order, or an array of numbers in <!-- -->[west, south, east, north]<!-- --> order.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="point">Point<a href="#point" class="hash-link" aria-label="Direct link to Point" title="Direct link to Point"></a></h4><p>A <a href="https://github.com/mapbox/point-geometry" target="_blank" rel="noopener noreferrer">mapboxgl.Point</a> object.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="pointlike">PointLike<a href="#pointlike" class="hash-link" aria-label="Direct link to PointLike" title="Direct link to PointLike"></a></h4><p>A <a href="#point">Point</a> or an array of two numbers representing x and y screen coordinates in pixels.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapgeojsonfeature">MapGeoJSONFeature<a href="#mapgeojsonfeature" class="hash-link" aria-label="Direct link to MapGeoJSONFeature" title="Direct link to MapGeoJSONFeature"></a></h4><p>A <a href="http://geojson.org/" target="_blank" rel="noopener noreferrer">GeoJSON</a> feature that also contains the following library-specific fields:</p><ul><li><code>layer</code>: Layer</li><li><code>source</code>: string</li><li><code>sourceLayer</code>: string</li><li><code>state</code>: { <!-- -->[key: string]<!-- -->: any }</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="viewstate">ViewState<a href="#viewstate" class="hash-link" aria-label="Direct link to ViewState" title="Direct link to ViewState"></a></h4><p>An object with the following fields:</p><ul><li><code>longitude</code>: number - The longitude of the map center.</li><li><code>latitude</code>: number - The latitude of the map center.</li><li><code>zoom</code>: number - The zoom level.</li><li><code>pitch</code>: number - The pitch (tilt) of the map, in degrees.</li><li><code>bearing</code>: number - The bearing (rotation) of the map, in degrees.</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="sources">Sources<a href="#sources" class="hash-link" aria-label="Direct link to Sources" title="Direct link to Sources"></a></h2><p>The following are implementations of source types that could be retrieved with <code>Map.getSource</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#getsource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Map/#getsource" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="geojsonsource">GeoJSONSource<a href="#geojsonsource" class="hash-link" aria-label="Direct link to GeoJSONSource" title="Direct link to GeoJSONSource"></a></h4><p>A source containing GeoJSON. See <code>GeoJSONSource</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeoJSONSource/" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="videosource">VideoSource<a href="#videosource" class="hash-link" aria-label="Direct link to VideoSource" title="Direct link to VideoSource"></a></h4><p>A source containing video. See <code>VideoSource</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#videosource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.VideoSource/" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="imagesource">ImageSource<a href="#imagesource" class="hash-link" aria-label="Direct link to ImageSource" title="Direct link to ImageSource"></a></h4><p>A source containing image. See <code>ImageSource</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#imagesource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.ImageSource/" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="canvassource">CanvasSource<a href="#canvassource" class="hash-link" aria-label="Direct link to CanvasSource" title="Direct link to CanvasSource"></a></h4><p>A source containing the contents of an HTML canvas. See <code>CanvasSource</code>(<a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.CanvasSource/" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="vectortilesource">VectorTileSource<a href="#vectortilesource" class="hash-link" aria-label="Direct link to VectorTileSource" title="Direct link to VectorTileSource"></a></h4><p>A source containing vector tiles in <a href="https://docs.mapbox.com/vector-tiles/reference/" target="_blank" rel="noopener noreferrer">Mapbox Vector Tile format</a>. See <code>VectorTileSource</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/sources/#vectortilesource" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.VectorTileSource/" target="_blank" rel="noopener noreferrer">Maplibre</a>).</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="events">Events<a href="#events" class="hash-link" aria-label="Direct link to Events" title="Direct link to Events"></a></h2><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapevent">MapEvent<a href="#mapevent" class="hash-link" aria-label="Direct link to MapEvent" title="Direct link to MapEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string - Event type</li><li><code>target</code>: <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>)</li><li><code>originalEvent?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noopener noreferrer">Event</a></li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maplayermouseevent">MapLayerMouseEvent<a href="#maplayermouseevent" class="hash-link" aria-label="Direct link to MapLayerMouseEvent" title="Direct link to MapLayerMouseEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>originalEvent?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noopener noreferrer">MouseEvent</a></li><li><code>point</code>: <a href="#point">Point</a></li><li><code>lngLat</code>: <a href="#lnglat">LngLat</a></li><li><code>preventDefault</code>: () =&gt; void</li><li><code>defaultPrevented</code>: boolean</li><li><code>features?</code>: <a href="#mapgeojsonfeature">MapGeoJSONFeature</a>[]</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapwheelevent">MapWheelEvent<a href="#mapwheelevent" class="hash-link" aria-label="Direct link to MapWheelEvent" title="Direct link to MapWheelEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>originalEvent?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent" target="_blank" rel="noopener noreferrer">WheelEvent</a></li><li><code>preventDefault</code>: () =&gt; void</li><li><code>defaultPrevented</code>: boolean</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="maplayertouchevent">MapLayerTouchEvent<a href="#maplayertouchevent" class="hash-link" aria-label="Direct link to MapLayerTouchEvent" title="Direct link to MapLayerTouchEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>originalEvent?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" target="_blank" rel="noopener noreferrer">TouchEvent</a></li><li><code>point</code>: <a href="#point">Point</a></li><li><code>lngLat</code>: <a href="#lnglat">LngLat</a></li><li><code>points</code>: <a href="#point">Point</a>[]</li><li><code>lngLats</code>: <a href="#lnglat">LngLat</a>[]</li><li><code>preventDefault</code>: () =&gt; void</li><li><code>defaultPrevented</code>: boolean</li><li><code>features?</code>: <a href="#mapgeojsonfeature">MapGeoJSONFeature</a>[]</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="viewstatechangeevent">ViewStateChangeEvent<a href="#viewstatechangeevent" class="hash-link" aria-label="Direct link to ViewStateChangeEvent" title="Direct link to ViewStateChangeEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string - Event type</li><li><code>target</code>: <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>)</li><li><code>viewState</code>: <a href="#viewstate">ViewState</a> - the next view state that the camera wants to change to based on user input or transition.</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapboxzoomevent">MapBoxZoomEvent<a href="#mapboxzoomevent" class="hash-link" aria-label="Direct link to MapBoxZoomEvent" title="Direct link to MapBoxZoomEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>originalEvent?</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank" rel="noopener noreferrer">MouseEvent</a></li><li><code>boxZoomBounds</code>: <a href="#lnglatbounds">LngLatBounds</a></li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapstyledataevent">MapStyleDataEvent<a href="#mapstyledataevent" class="hash-link" aria-label="Direct link to MapStyleDataEvent" title="Direct link to MapStyleDataEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>dataType</code>: &#x27;style&#x27;</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapsourcedataevent">MapSourceDataEvent<a href="#mapsourcedataevent" class="hash-link" aria-label="Direct link to MapSourceDataEvent" title="Direct link to MapSourceDataEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>dataType</code>: &#x27;source&#x27;</li><li><code>isSourceLoaded</code>: boolean</li><li><code>source</code>: string</li><li><code>sourceId</code>: string</li><li><code>sourceDataType</code>: &#x27;metadata&#x27; | &#x27;content&#x27;</li><li><code>tile</code>: any</li><li><code>coord</code>: Coordinate</li></ul><p>See <a href="https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent" target="_blank" rel="noopener noreferrer">MapDataEvent</a>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="errorevent">ErrorEvent<a href="#errorevent" class="hash-link" aria-label="Direct link to ErrorEvent" title="Direct link to ErrorEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: &#x27;error&#x27;</li><li><code>target</code>: <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>)</li><li><code>error</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" target="_blank" rel="noopener noreferrer">Error</a></li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="geolocateevent">GeolocateEvent<a href="#geolocateevent" class="hash-link" aria-label="Direct link to GeolocateEvent" title="Direct link to GeolocateEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <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>)</li><li><code>target</code>: <code>GeolocateControl</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="geolocateresultevent">GeolocateResultEvent<a href="#geolocateresultevent" class="hash-link" aria-label="Direct link to GeolocateResultEvent" title="Direct link to GeolocateResultEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <code>GeolocateControl</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li><li><code>coords</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates" target="_blank" rel="noopener noreferrer">GeolocationCoordinates</a> - the current location.</li><li><code>timestamp</code>: number - the time at which the location was retrieved.</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="geolocateerrorevent">GeolocateErrorEvent<a href="#geolocateerrorevent" class="hash-link" aria-label="Direct link to GeolocateErrorEvent" title="Direct link to GeolocateErrorEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <code>GeolocateControl</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li><li><code>code</code>: PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see <a href="https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError" target="_blank" rel="noopener noreferrer">GeolocationPositionError</a></li><li><code>message</code>: string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="markerevent">MarkerEvent<a href="#markerevent" class="hash-link" aria-label="Direct link to MarkerEvent" title="Direct link to MarkerEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <code>Marker</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Marker/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="markerdragevent">MarkerDragEvent<a href="#markerdragevent" class="hash-link" aria-label="Direct link to MarkerDragEvent" title="Direct link to MarkerDragEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <code>Marker</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Marker/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li><li><code>lngLat</code>: <a href="#lnglat">LngLat</a> - the new location of the marker</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="popupevent">PopupEvent<a href="#popupevent" class="hash-link" aria-label="Direct link to PopupEvent" title="Direct link to PopupEvent"></a></h4><p>An object with the following fields:</p><ul><li><code>type</code>: string</li><li><code>target</code>: <code>Popup</code> (<a href="https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup" target="_blank" rel="noopener noreferrer">Mapbox</a> | <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Popup/" target="_blank" rel="noopener noreferrer">Maplibre</a>)</li></ul></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/react-map-gl/tree/master/docs/../docs/api-reference/types.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/api-reference/use-map"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">useMap</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="#components" class="table-of-contents__link toc-highlight">Components</a></li><li><a href="#styling" class="table-of-contents__link toc-highlight">Styling</a></li><li><a href="#configurations" class="table-of-contents__link toc-highlight">Configurations</a></li><li><a href="#data-types" class="table-of-contents__link toc-highlight">Data Types</a></li><li><a href="#sources" class="table-of-contents__link toc-highlight">Sources</a></li><li><a href="#events" class="table-of-contents__link toc-highlight">Events</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 © 2024 OpenJS Foundation</div></div></div></footer></div>
<script src="/react-map-gl/assets/js/runtime~main.ffa55eeb.js"></script>
<script src="/react-map-gl/assets/js/main.684e2b73.js"></script>
</body>
</html>