diff --git a/404.html b/404.html
index 4cdf54fd..6205f751 100644
--- a/404.html
+++ b/404.html
@@ -1,16 +1,13 @@
-
+
React Map GL react-map-gl
-
-
-
+
\ No newline at end of file
diff --git a/assets/css/styles.0a7fd3ef.css b/assets/css/styles.0a7fd3ef.css
deleted file mode 100644
index f6cbce78..00000000
--- a/assets/css/styles.0a7fd3ef.css
+++ /dev/null
@@ -1 +0,0 @@
-.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.avatar__photo,.card,.text--truncate{overflow:hidden}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.hitPath_ieM4,.hitTitle_vyVt,.mapboxgl-ctrl-geocoder--input,.text--truncate{text-overflow:ellipsis;white-space:nowrap}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:rgba(0,0,0,.05);--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 rgba(0,0,0,.1);--ifm-global-shadow-md:0 5px 40px rgba(0,0,0,.2);--ifm-global-shadow-tl:0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1);--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:transparent;--ifm-table-stripe-background:rgba(0,0,0,.03);--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,{let n=null;"interactive"in e&&(n=Object.assign({},e),delete n.interactive);const o=t[e.ref];if(o){n=n||Object.assign({},e),delete n.ref;for(const e of u)e in o&&(n[e]=o[e])}return n||e}));return Object.assign({},e,{layers:n})}const d={version:8,sources:{},layers:[]},f={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},m={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},h={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},g=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],y=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class v{constructor(e,t,n){this._map=null,this._internalUpdate=!1,this._inRender=!1,this._hoveredFeatures=null,this._deferredEvents={move:!1,zoom:!1,pitch:!1,rotate:!1},this._onEvent=e=>{const t=this.props[h[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[f[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._onCameraEvent=e=>{if(!this._internalUpdate){const t=this.props[m[e.type]];t&&t(e)}e.type in this._deferredEvents&&(this._deferredEvents[e.type]=!1)},this._MapClass=e,this.props=t,this._initialize(n)}get map(){return this._map}get transform(){return this._renderTransform}setProps(e){const t=this.props;this.props=e;const n=this._updateSettings(e,t);n&&this._createShadowTransform(this._map);const o=this._updateSize(e),r=this._updateViewState(e,!0);this._updateStyle(e,t),this._updateStyleComponents(e,t),this._updateHandlers(e,t),(n||o||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const n=v.savedMaps.pop();if(!n)return null;const o=n.map,r=o.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);o._container=t,n.setProps(Object.assign({},e,{styleDiffing:!1})),o.resize();const{initialViewState:s}=e;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(()=>o.fire("load"))),o._update(),n}_initialize(e){const{props:t}=this,{mapStyle:n=d}=t,o=Object.assign({},t,t.initialViewState,{accessToken:t.mapboxAccessToken||x()||null,container:e,style:p(n)}),r=o.initialViewState||o.viewState||o;if(Object.assign(o,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(o);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),this._createShadowTransform(s);const a=s._render;s._render=e=>{this._inRender=!0,a.call(s,e),this._inRender=!1};const c=s._renderTaskQueue.run;s._renderTaskQueue.run=e=>{c.call(s._renderTaskQueue,e),this._onBeforeRepaint()},s.on("render",(()=>this._onAfterRepaint()));const l=s.fire;s.fire=this._fireEvent.bind(this,l),s.on("resize",(()=>{this._renderTransform.resize(s.transform.width,s.transform.height)})),s.on("styledata",(()=>{this._updateStyleComponents(this.props,{}),i(s.transform,this._renderTransform)})),s.on("sourcedata",(()=>this._updateStyleComponents(this.props,{})));for(const i in f)s.on(i,this._onPointerEvent);for(const i in m)s.on(i,this._onCameraEvent);for(const i in h)s.on(i,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),v.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_createShadowTransform(e){const t=function(e){const t=e.clone();return t.pixelsToGLUnits=e.pixelsToGLUnits,t}(e.transform);e.painter.transform=t,this._renderTransform=t}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e,t){if(this._internalUpdate)return!1;const n=this._map,o=this._renderTransform,{zoom:r,pitch:s,bearing:a}=o,i=n.isMoving();i&&(o.cameraElevationReference="sea");const u=l(o,Object.assign({},c(n.transform),e));if(i&&(o.cameraElevationReference="ground"),u&&t){const e=this._deferredEvents;e.move=!0,e.zoom||(e.zoom=r!==o.zoom),e.rotate||(e.rotate=a!==o.bearing),e.pitch||(e.pitch=s!==o.pitch)}return i||l(n.transform,e),u}_updateSettings(e,t){const n=this._map;let o=!1;for(const r of g)if(r in e&&!a(e[r],t[r])){o=!0;const t=n["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(n,e[r])}return o}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=d,styleDiffing:n=!0}=e,o={diff:n};return"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(p(t),o),!0}return!1}_updateStyleComponents(e,t){const n=this._map;let o=!1;return n.isStyleLoaded()&&("light"in e&&n.setLight&&!a(e.light,t.light)&&(o=!0,n.setLight(e.light)),"fog"in e&&n.setFog&&!a(e.fog,t.fog)&&(o=!0,n.setFog(e.fog)),"terrain"in e&&n.setTerrain&&!a(e.terrain,t.terrain)&&(e.terrain&&!n.getSource(e.terrain.source)||(o=!0,n.setTerrain(e.terrain)))),o}_updateHandlers(e,t){const n=this._map;let o=!1;for(const i of y){var r,s;const c=null==(r=e[i])||r;a(c,null==(s=t[i])||s)||(o=!0,c?n[i].enable(c):n[i].disable())}return o}_queryRenderedFeatures(e){const t=this._map,n=t.transform,{interactiveLayerIds:o=[]}=this.props;try{return t.transform=this._renderTransform,t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(r){return[]}finally{t.transform=n}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var n;const t=e.type,o=(null==(n=this._hoveredFeatures)?void 0:n.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}_fireEvent(e,t,n){const o=this._map,r=o.transform,s="string"==typeof t?t:t.type;return"move"===s&&this._updateViewState(this.props,!1),s in m&&("object"==typeof t&&(t.viewState=c(r)),this._map.isMoving())?(o.transform=this._renderTransform,e.call(o,t,n),o.transform=r,o):(e.call(o,t,n),o)}_onBeforeRepaint(){const e=this._map;this._internalUpdate=!0;for(const n in this._deferredEvents)this._deferredEvents[n]&&e.fire(n);this._internalUpdate=!1;const t=this._map.transform;e.transform=this._renderTransform,this._onAfterRepaint=()=>{i(this._renderTransform,t),e.transform=t}}}function x(){let e=null;if("undefined"!=typeof location){const t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(t){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}v.savedMaps=[];const _=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,n={getMap:()=>t,getCenter:()=>e.transform.center,getZoom:()=>e.transform.zoom,getBearing:()=>e.transform.bearing,getPitch:()=>e.transform.pitch,getPadding:()=>e.transform.padding,getBounds:()=>e.transform.getBounds(),project:n=>{const o=t.transform;t.transform=e.transform;const r=t.project(n);return t.transform=o,r},unproject:n=>{const o=t.transform;t.transform=e.transform;const r=t.unproject(n);return t.transform=o,r},queryTerrainElevation:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryTerrainElevation(n,o);return t.transform=r,s},queryRenderedFeatures:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryRenderedFeatures(n,o);return t.transform=r,s}};for(const o of function(e){const t=new Set;let n=e;for(;n;){for(const o of Object.getOwnPropertyNames(n))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);n=Object.getPrototypeOf(n)}return Array.from(t)}(t))o in n||_.includes(o)||(n[o]=t[o].bind(t));return n}const j="undefined"!=typeof document?o.useLayoutEffect:o.useEffect,S=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];const L=o.createContext(null);function C(e,t){const a=(0,o.useContext)(s),[i,c]=(0,o.useState)(null),l=(0,o.useRef)(),{current:u}=(0,o.useRef)({mapLib:null,map:null});(0,o.useEffect)((()=>{const t=e.mapLib;let o,r=!0;return Promise.resolve(t||n.e(842).then(n.t.bind(n,842,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const n="Map"in t?t:t.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(const o of S)o in t&&(e[o]=t[o]);const{RTLTextPlugin:n="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;n&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(n,(e=>{e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(o=v.reuse(e,l.current)),o||(o=new v(n.Map,e,l.current)),u.map=b(o),u.mapLib=n,c(o),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:n}=e;n?n({type:"error",target:null,error:t}):console.error(t)})),()=>{r=!1,o&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),j((()=>{i&&i.setProps(e)})),(0,o.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,o.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:l,style:p,children:i&&(0,r.jsx)(L.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const w=o.forwardRef(C);var E=n(961);const M=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function P(e,t){if(!e||!t)return;const n=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!M.test(o)?n[o]=e+"px":n[o]=e}}const T=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(L),s=(0,o.useRef)({props:e});s.current.props=e;const a=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const n=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(n);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(a.addTo(n.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:c,offset:l,style:u,draggable:p=!1,popup:d=null,rotation:f=0,rotationAlignment:m="auto",pitchAlignment:h="auto"}=e;return(0,o.useEffect)((()=>{P(a.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===c||a.setLngLat([i,c]),l&&!function(e,t){const n=Array.isArray(e)?e[0]:e?e.x:0,o=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return n===r&&o===s}(a.getOffset(),l)&&a.setOffset(l),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==f&&a.setRotation(f),a.getRotationAlignment()!==m&&a.setRotationAlignment(m),a.getPitchAlignment()!==h&&a.setPitchAlignment(h),a.getPopup()!==d&&a.setPopup(d),(0,E.createPortal)(e.children,a.getElement())})));function N(e){return new Set(e?e.trim().split(/\s+/):[])}const R=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(L),s=(0,o.useMemo)((()=>document.createElement("div")),[]),i=(0,o.useRef)({props:e});i.current.props=e;const c=(0,o.useMemo)((()=>{const t=Object.assign({},e),n=new r.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),n}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return c.on("close",e),c.setDOMContent(s).addTo(n.getMap()),()=>{c.off("close",e),c.isOpen()&&c.remove()}}),[]),(0,o.useEffect)((()=>{P(c.getElement(),e.style)}),[e.style]),(0,o.useImperativeHandle)(t,(()=>c),[]),c.isOpen()&&(c.getLngLat().lng===e.longitude&&c.getLngLat().lat===e.latitude||c.setLngLat([e.longitude,e.latitude]),e.offset&&!a(c.options.offset,e.offset)&&c.setOffset(e.offset),c.options.anchor===e.anchor&&c.options.maxWidth===e.maxWidth||(c.options.anchor=e.anchor,c.setMaxWidth(e.maxWidth)),c.options.className!==e.className)){const t=N(c.options.className),n=N(e.className);for(const e of t)n.has(e)||c.removeClassName(e);for(const e of n)t.has(e)||c.addClassName(e);c.options.className=e.className}return(0,E.createPortal)(e.children,s)})));function O(e,t,n,r){const s=(0,o.useContext)(L),a=(0,o.useMemo)((()=>e(s)),[]);return(0,o.useEffect)((()=>{const e=r||n||t,o="function"==typeof t&&"function"==typeof n?t:null,i="function"==typeof n?n:"function"==typeof t?t:null,{map:c}=s;return c.hasControl(a)||(c.addControl(a,null==e?void 0:e.position),o&&o(s)),()=>{i&&i(s),c.hasControl(a)&&c.removeControl(a)}}),[]),a}function k(e){const t=O((t=>{let{mapLib:n}=t;return new n.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{P(t._controlContainer,e.style)}),[e.style]),null}const z=(0,o.memo)(k);function A(e,t){const n=(0,o.useRef)({props:e}),r=O((t=>{let{mapLib:o}=t;const r=new o.GeolocateControl(e),s=r._setupUI.bind(r);return r._setupUI=e=>{r._container.hasChildNodes()||s(e)},r.on("geolocate",(e=>{null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(e=>{null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,o.useImperativeHandle)(t,(()=>r),[]),(0,o.useEffect)((()=>{P(r._container,e.style)}),[e.style]),null}const I=(0,o.memo)((0,o.forwardRef)(A));function F(e){const t=O((t=>{let{mapLib:n}=t;return new n.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{P(t._container,e.style)}),[e.style]),null}const D=(0,o.memo)(F);function U(e){const t=O((t=>{let{mapLib:n}=t;return new n.ScaleControl(e)}),{position:e.position}),n=(0,o.useRef)(e),r=n.current;n.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,o.useEffect)((()=>{P(t._container,s)}),[s]),null}const Z=(0,o.memo)(U);function W(e,t){if(!e)throw new Error(t)}let B=0;function H(e){const t=(0,o.useContext)(L).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-source-"+B++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var n;const e=null==(n=t.getStyle())?void 0:n.layers;if(e)for(const n of e)n.source===s&&t.removeLayer(n.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,n){W(t.id===n.id,"source id changed"),W(t.type===n.type,"source type changed");let o="",r=0;for(const i in t)"children"===i||"id"===i||a(n[i],t[i])||(o=i,r++);if(!r)return;const s=t.type;"geojson"===s?e.setData(t.data):"image"===s?e.updateImage({url:t.url,coordinates:t.coordinates}):"setCoordinates"in e&&1===r&&"coordinates"===o?e.setCoordinates(t.coordinates):"setUrl"in e&&"url"===o?e.setUrl(t.url):"setTiles"in e&&"tiles"===o?e.setTiles(t.tiles):console.warn("Unable to update prop: "+o)}(i,e,n.current):i=function(e,t,n){if(e.style&&e.style._loaded){const o=Object.assign({},n);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,s,e),n.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:s})))||null}let q=0;function G(e){const t=(0,o.useContext)(L).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-layer-"+q++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,n,o){if(W(n.id===o.id,"layer id changed"),W(n.type===o.type,"layer type changed"),"custom"===n.type||"custom"===o.type)return;const{layout:r={},paint:s={},filter:i,minzoom:c,maxzoom:l,beforeId:u}=n;if(u!==o.beforeId&&e.moveLayer(t,u),r!==o.layout){const n=o.layout||{};for(const o in r)a(r[o],n[o])||e.setLayoutProperty(t,o,r[o]);for(const o in n)r.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(s!==o.paint){const n=o.paint||{};for(const o in s)a(s[o],n[o])||e.setPaintProperty(t,o,s[o]);for(const o in n)s.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}a(i,o.filter)||e.setFilter(t,i),c===o.minzoom&&l===o.maxzoom||e.setLayerZoomRange(t,c,l)}(t,s,e,n.current)}catch(i){console.warn(i)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){const o=Object.assign({},n,{id:t});delete o.beforeId,e.addLayer(o,n.beforeId)}}(t,s,e);return n.current=e,null}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function a(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:t},e.children)}},6561:(e,t,n)=>{function o(e,t,n){e=+e,t=+t,n=(r=arguments.length)<2?(t=e,e=0,1):r<3?1:+n;for(var o=-1,r=0|Math.max(0,Math.ceil((t-e)/n)),s=new Array(r);++oo})},7982:(e,t,n)=>{function o(e){return null===e?NaN:+e}function r(e,t,n=o){if((r=e.length)&&!isNaN(t=+t)){if(t<=0||r<2)return+n(e[0],0,e);if(t>=1)return+n(e[r-1],r-1,e);var r,s=(r-1)*t,a=Math.floor(s),i=+n(e[a],a,e);return i+(+n(e[a+1],a+1,e)-i)*(s-a)}}function s(e,t){return null==e||null==t?NaN:et?1:e>=t?0:NaN}function a(e,t){return null==e||null==t?NaN:te?1:t>=e?0:NaN}function i(e){let t,n,o;function r(e,o,r=0,s=e.length){if(r>>1;n(e[t],o)<0?r=t+1:s=t}while(rs(e(t),n),o=(t,n)=>e(t)-n):(t=e===s||e===a?e:c,n=e,o=e),{left:r,center:function(e,t,n=0,s=e.length){const a=r(e,t,n,s-1);return a>n&&o(e[a-1],t)>-o(e[a],t)?a-1:a},right:function(e,o,r=0,s=e.length){if(r>>1;n(e[t],o)<=0?r=t+1:s=t}while(rf});const l=i(s),u=l.right,p=(l.left,i(o).center,u);function d(e,t){switch(arguments.length){case 0:break;case 1:this.range(e);break;default:this.range(t).domain(e)}return this}function f(){var e,t=[],n=[],o=[];function a(){var e=0,s=Math.max(1,n.length);for(o=new Array(s-1);++e0?o[r-1]:t[0],r{a.d(t,{Zo:()=>m,kt:()=>k});var l=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,l)}return a}function i(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=l.createContext({}),s=function(e){var t=l.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},m=function(e){var t=s(e.components);return l.createElement(p.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return l.createElement(l.Fragment,{},t)}},u=l.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,p=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),c=s(a),u=n,k=c["".concat(p,".").concat(u)]||c[u]||d[u]||r;return a?l.createElement(k,i(i({ref:t},m),{},{components:a})):l.createElement(k,i({ref:t},m))}));function k(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,i=new Array(r);i[0]=u;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[c]="string"==typeof e?e:n,i[1]=o;for(var s=2;s{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>p,default:()=>k,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var l=a(7462),n=a(3366),r=(a(7294),a(3905)),i=["components"],o={},p="Types",s={unversionedId:"api-reference/types",id:"api-reference/types",title:"Types",description:"The following types can be imported from react-map-gl when using TypeScript.",source:"@site/../docs/api-reference/types.md",sourceDirName:"api-reference",slug:"/api-reference/types",permalink:"/react-map-gl/docs/api-reference/types",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/types.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"useMap",permalink:"/react-map-gl/docs/api-reference/use-map"}},m={},c=[{value:"Components",id:"components",level:2},{value:"IControl",id:"icontrol",level:4},{value:"CustomLayerInterface",id:"customlayerinterface",level:4},{value:"MapRef",id:"mapref",level:4},{value:"Styling",id:"styling",level:2},{value:"MapStyle",id:"mapstyle",level:4},{value:"Fog",id:"fog",level:4},{value:"Light",id:"light",level:4},{value:"Terrain",id:"terrain",level:4},{value:"Projection",id:"projection",level:4},{value:"BackgroundLayer",id:"backgroundlayer",level:4},{value:"CircleLayer",id:"circlelayer",level:4},{value:"FillExtrusionLayer",id:"fillextrusionlayer",level:4},{value:"FillLayer",id:"filllayer",level:4},{value:"HeatmapLayer",id:"heatmaplayer",level:4},{value:"HillshadeLayer",id:"hillshadelayer",level:4},{value:"LineLayer",id:"linelayer",level:4},{value:"RasterLayer",id:"rasterlayer",level:4},{value:"SymbolLayer",id:"symbollayer",level:4},{value:"SkyLayer",id:"skylayer",level:4},{value:"GeoJSONSourceRaw",id:"geojsonsourceraw",level:4},{value:"VideoSourceRaw",id:"videosourceraw",level:4},{value:"ImageSourceRaw",id:"imagesourceraw",level:4},{value:"VectorSourceRaw",id:"vectorsourceraw",level:4},{value:"RasterSource",id:"rastersource",level:4},{value:"RasterDemSource",id:"rasterdemsource",level:4},{value:"CanvasSourceRaw",id:"canvassourceraw",level:4},{value:"Configurations",id:"configurations",level:2},{value:"ControlPosition",id:"controlposition",level:4},{value:"PaddingOptions",id:"paddingoptions",level:4},{value:"Data Types",id:"data-types",level:2},{value:"LngLat",id:"lnglat",level:4},{value:"LngLatLike",id:"lnglatlike",level:4},{value:"LngLatBounds",id:"lnglatbounds",level:4},{value:"LngLatBoundsLike",id:"lnglatboundslike",level:4},{value:"Point",id:"point",level:4},{value:"PointLike",id:"pointlike",level:4},{value:"MapGeoJSONFeature",id:"mapgeojsonfeature",level:4},{value:"ViewState",id:"viewstate",level:4},{value:"Sources",id:"sources",level:2},{value:"GeoJSONSource",id:"geojsonsource",level:4},{value:"VideoSource",id:"videosource",level:4},{value:"ImageSource",id:"imagesource",level:4},{value:"CanvasSource",id:"canvassource",level:4},{value:"VectorTileSource",id:"vectortilesource",level:4},{value:"Events",id:"events",level:2},{value:"MapEvent",id:"mapevent",level:4},{value:"MapLayerMouseEvent",id:"maplayermouseevent",level:4},{value:"MapWheelEvent",id:"mapwheelevent",level:4},{value:"MapLayerTouchEvent",id:"maplayertouchevent",level:4},{value:"ViewStateChangeEvent",id:"viewstatechangeevent",level:4},{value:"MapBoxZoomEvent",id:"mapboxzoomevent",level:4},{value:"MapStyleDataEvent",id:"mapstyledataevent",level:4},{value:"MapSourceDataEvent",id:"mapsourcedataevent",level:4},{value:"ErrorEvent",id:"errorevent",level:4},{value:"GeolocateEvent",id:"geolocateevent",level:4},{value:"GeolocateResultEvent",id:"geolocateresultevent",level:4},{value:"GeolocateErrorEvent",id:"geolocateerrorevent",level:4},{value:"MarkerEvent",id:"markerevent",level:4},{value:"MarkerDragEvent",id:"markerdragevent",level:4},{value:"PopupEvent",id:"popupevent",level:4}],d={toc:c},u="wrapper";function k(e){var t=e.components,a=(0,n.Z)(e,i);return(0,r.kt)(u,(0,l.Z)({},d,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"types"},"Types"),(0,r.kt)("p",null,"The following types can be imported from ",(0,r.kt)("inlineCode",{parentName:"p"},"react-map-gl")," when using TypeScript."),(0,r.kt)("h2",{id:"components"},"Components"),(0,r.kt)("h4",{id:"icontrol"},"IControl"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol"},"custom control implementation"),"."),(0,r.kt)("h4",{id:"customlayerinterface"},"CustomLayerInterface"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface"},"custom layer implementation"),"."),(0,r.kt)("h4",{id:"mapref"},"MapRef"),(0,r.kt)("p",null,"Instance ",(0,r.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs"},"ref")," of a ",(0,r.kt)("inlineCode",{parentName:"p"},"Map")," component. See ",(0,r.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/map#methods"},"Map documentation")," for details."),(0,r.kt)("h2",{id:"styling"},"Styling"),(0,r.kt)("h4",{id:"mapstyle"},"MapStyle"),(0,r.kt)("p",null,"An object conforming to the ",(0,r.kt)("a",{parentName:"p",href:"https://mapbox.com/mapbox-gl-style-spec/"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"fog"},"Fog"),(0,r.kt)("p",null,"An object conforming to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/"},"Fog Style Specification"),"."),(0,r.kt)("h4",{id:"light"},"Light"),(0,r.kt)("p",null,"An object conforming to the ",(0,r.kt)("a",{parentName:"p",href:"https://www.mapbox.com/mapbox-gl-style-spec/#light"},"Light Style Specification"),"."),(0,r.kt)("h4",{id:"terrain"},"Terrain"),(0,r.kt)("p",null,"An object conforming to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/"},"Terrain Style Specification"),"."),(0,r.kt)("h4",{id:"projection"},"Projection"),(0,r.kt)("p",null,"An object conforming to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/projection/"},"Projection Style Specification"),"."),(0,r.kt)("h4",{id:"backgroundlayer"},"BackgroundLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"background")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"circlelayer"},"CircleLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"circle")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"fillextrusionlayer"},"FillExtrusionLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"fill-extrusion")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"filllayer"},"FillLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"fill")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"heatmaplayer"},"HeatmapLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"heatmap")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"hillshadelayer"},"HillshadeLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"hillshade")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#hillshade"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"linelayer"},"LineLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"line")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"rasterlayer"},"RasterLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"raster")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#raster"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"symbollayer"},"SymbolLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"symbol")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"skylayer"},"SkyLayer"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"sky")," layer according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"geojsonsourceraw"},"GeoJSONSourceRaw"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"geojson")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"videosourceraw"},"VideoSourceRaw"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"video")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#video"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"imagesourceraw"},"ImageSourceRaw"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"image")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"vectorsourceraw"},"VectorSourceRaw"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"vector")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"rastersource"},"RasterSource"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"raster")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"rasterdemsource"},"RasterDemSource"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"raster-dem")," source according to the ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster-dem"},"Mapbox Style Specification"),"."),(0,r.kt)("h4",{id:"canvassourceraw"},"CanvasSourceRaw"),(0,r.kt)("p",null,"A JSON object that defines a ",(0,r.kt)("inlineCode",{parentName:"p"},"canvas")," source type. See ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassourceoptions"},"CanvasSourceOptions"),"."),(0,r.kt)("h2",{id:"configurations"},"Configurations"),(0,r.kt)("h4",{id:"controlposition"},"ControlPosition"),(0,r.kt)("p",null,"One of ",(0,r.kt)("inlineCode",{parentName:"p"},"'top-right'"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"'top-left'"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"'bottom-right'")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"'bottom-left'"),"."),(0,r.kt)("h4",{id:"paddingoptions"},"PaddingOptions"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"left"),": number - in pixels."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"top"),": number - in pixels."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"right"),": number - in pixels."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"bottom"),": number - in pixels.")),(0,r.kt)("h2",{id:"data-types"},"Data Types"),(0,r.kt)("h4",{id:"lnglat"},"LngLat"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat"},"mapboxgl.LngLat")," object."),(0,r.kt)("h4",{id:"lnglatlike"},"LngLatLike"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"#lnglat"},"LngLat")," object, an array of two numbers representing longitude and latitude, or an object with ",(0,r.kt)("inlineCode",{parentName:"p"},"lng")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"lat")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"lon")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"lat")," properties."),(0,r.kt)("h4",{id:"lnglatbounds"},"LngLatBounds"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds"},"mapboxgl.LngLatBounds")," object."),(0,r.kt)("h4",{id:"lnglatboundslike"},"LngLatBoundsLike"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"#lnglatbounds"},"LngLatBounds")," object, an array of ",(0,r.kt)("a",{parentName:"p",href:"#lnglatlike"},"LngLatLike")," objects in ","[sw, ne]"," order, or an array of numbers in ","[west, south, east, north]"," order."),(0,r.kt)("h4",{id:"point"},"Point"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/mapbox/point-geometry"},"mapboxgl.Point")," object."),(0,r.kt)("h4",{id:"pointlike"},"PointLike"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"#point"},"Point")," or an array of two numbers representing x and y screen coordinates in pixels."),(0,r.kt)("h4",{id:"mapgeojsonfeature"},"MapGeoJSONFeature"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"http://geojson.org/"},"GeoJSON")," feature that also contains the following library-specific fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"layer"),": Layer"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"source"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"sourceLayer"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"state"),": { ","[key: string]",": any }")),(0,r.kt)("h4",{id:"viewstate"},"ViewState"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"longitude"),": number - The longitude of the map center."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"latitude"),": number - The latitude of the map center."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"zoom"),": number - The zoom level."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"pitch"),": number - The pitch (tilt) of the map, in degrees."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"bearing"),": number - The bearing (rotation) of the map, in degrees.")),(0,r.kt)("h2",{id:"sources"},"Sources"),(0,r.kt)("p",null,"The following are implementations of source types that could be retrieved with ",(0,r.kt)("inlineCode",{parentName:"p"},"Map.getSource")," (",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#getsource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Map/#getsource"},"Maplibre"),")."),(0,r.kt)("h4",{id:"geojsonsource"},"GeoJSONSource"),(0,r.kt)("p",null,"A source containing GeoJSON. See ",(0,r.kt)("inlineCode",{parentName:"p"},"GeoJSONSource")," (",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeoJSONSource/"},"Maplibre"),")."),(0,r.kt)("h4",{id:"videosource"},"VideoSource"),(0,r.kt)("p",null,"A source containing video. See ",(0,r.kt)("inlineCode",{parentName:"p"},"VideoSource")," (",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#videosource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.VideoSource/"},"Maplibre"),")."),(0,r.kt)("h4",{id:"imagesource"},"ImageSource"),(0,r.kt)("p",null,"A source containing image. See ",(0,r.kt)("inlineCode",{parentName:"p"},"ImageSource")," (",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#imagesource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.ImageSource/"},"Maplibre"),")."),(0,r.kt)("h4",{id:"canvassource"},"CanvasSource"),(0,r.kt)("p",null,"A source containing the contents of an HTML canvas. See ",(0,r.kt)("inlineCode",{parentName:"p"},"CanvasSource"),"(",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.CanvasSource/"},"Maplibre"),")."),(0,r.kt)("h4",{id:"vectortilesource"},"VectorTileSource"),(0,r.kt)("p",null,"A source containing vector tiles in ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/vector-tiles/reference/"},"Mapbox Vector Tile format"),". See ",(0,r.kt)("inlineCode",{parentName:"p"},"VectorTileSource")," (",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/sources/#vectortilesource"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.VectorTileSource/"},"Maplibre"),")."),(0,r.kt)("h2",{id:"events"},"Events"),(0,r.kt)("h4",{id:"mapevent"},"MapEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string - Event type"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"originalEvent?"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/Event"},"Event"))),(0,r.kt)("h4",{id:"maplayermouseevent"},"MapLayerMouseEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"originalEvent?"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent"},"MouseEvent")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"point"),": ",(0,r.kt)("a",{parentName:"li",href:"#point"},"Point")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"lngLat"),": ",(0,r.kt)("a",{parentName:"li",href:"#lnglat"},"LngLat")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"preventDefault"),": () => void"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaultPrevented"),": boolean"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"features?"),": ",(0,r.kt)("a",{parentName:"li",href:"#mapgeojsonfeature"},"MapGeoJSONFeature"),"[]")),(0,r.kt)("h4",{id:"mapwheelevent"},"MapWheelEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"originalEvent?"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent"},"WheelEvent")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"preventDefault"),": () => void"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaultPrevented"),": boolean")),(0,r.kt)("h4",{id:"maplayertouchevent"},"MapLayerTouchEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"originalEvent?"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent"},"TouchEvent")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"point"),": ",(0,r.kt)("a",{parentName:"li",href:"#point"},"Point")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"lngLat"),": ",(0,r.kt)("a",{parentName:"li",href:"#lnglat"},"LngLat")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"points"),": ",(0,r.kt)("a",{parentName:"li",href:"#point"},"Point"),"[]"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"lngLats"),": ",(0,r.kt)("a",{parentName:"li",href:"#lnglat"},"LngLat"),"[]"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"preventDefault"),": () => void"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaultPrevented"),": boolean"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"features?"),": ",(0,r.kt)("a",{parentName:"li",href:"#mapgeojsonfeature"},"MapGeoJSONFeature"),"[]")),(0,r.kt)("h4",{id:"viewstatechangeevent"},"ViewStateChangeEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string - Event type"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"viewState"),": ",(0,r.kt)("a",{parentName:"li",href:"#viewstate"},"ViewState")," - the next view state that the camera wants to change to based on user input or transition.")),(0,r.kt)("h4",{id:"mapboxzoomevent"},"MapBoxZoomEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"originalEvent?"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent"},"MouseEvent")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"boxZoomBounds"),": ",(0,r.kt)("a",{parentName:"li",href:"#lnglatbounds"},"LngLatBounds"))),(0,r.kt)("h4",{id:"mapstyledataevent"},"MapStyleDataEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"dataType"),": 'style'")),(0,r.kt)("h4",{id:"mapsourcedataevent"},"MapSourceDataEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"dataType"),": 'source'"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"isSourceLoaded"),": boolean"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"source"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"sourceId"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"sourceDataType"),": 'metadata' | 'content'"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"tile"),": any"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"coord"),": Coordinate")),(0,r.kt)("p",null,"See ",(0,r.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent"},"MapDataEvent"),"."),(0,r.kt)("h4",{id:"errorevent"},"ErrorEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": 'error'"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"error"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"},"Error"))),(0,r.kt)("h4",{id:"geolocateevent"},"GeolocateEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Map")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/map/"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js-docs/api/map/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"GeolocateControl")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/"},"Maplibre"),")")),(0,r.kt)("h4",{id:"geolocateresultevent"},"GeolocateResultEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"GeolocateControl")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"coords"),": ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates"},"GeolocationCoordinates")," - the current location."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"timestamp"),": number - the time at which the location was retrieved.")),(0,r.kt)("h4",{id:"geolocateerrorevent"},"GeolocateErrorEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"GeolocateControl")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeolocateControl/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"code"),": PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see ",(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError"},"GeolocationPositionError")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"message"),": 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.")),(0,r.kt)("h4",{id:"markerevent"},"MarkerEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Marker")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Marker/"},"Maplibre"),")")),(0,r.kt)("h4",{id:"markerdragevent"},"MarkerDragEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Marker")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Marker/"},"Maplibre"),")"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"lngLat"),": ",(0,r.kt)("a",{parentName:"li",href:"#lnglat"},"LngLat")," - the new location of the marker")),(0,r.kt)("h4",{id:"popupevent"},"PopupEvent"),(0,r.kt)("p",null,"An object with the following fields:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"type"),": string"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"target"),": ",(0,r.kt)("inlineCode",{parentName:"li"},"Popup")," (",(0,r.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup"},"Mapbox")," | ",(0,r.kt)("a",{parentName:"li",href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.Popup/"},"Maplibre"),")")))}k.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/046a68a4.37a1fce3.js b/assets/js/046a68a4.37a1fce3.js
new file mode 100644
index 00000000..2fab3012
--- /dev/null
+++ b/assets/js/046a68a4.37a1fce3.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6501],{3343:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>g,contentTitle:()=>h,default:()=>x,frontMatter:()=>f,metadata:()=>o,toc:()=>y});const o=JSON.parse('{"id":"mapbox/heatmap","title":"Heatmap","description":"","source":"@site/src/examples/mapbox/heatmap.mdx","sourceDirName":"mapbox","slug":"/mapbox/heatmap","permalink":"/react-map-gl/examples/mapbox/heatmap","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"GeoJSON","permalink":"/react-map-gl/examples/mapbox/geojson"},"next":{"title":"Limit Map Interaction","permalink":"/react-map-gl/examples/mapbox/interaction"}}');var r=n(4848),s=n(8453),a=n(6540),i=(n(5338),n(2198));function c(e){const t=new Date(e);return t.getMonth()+1+"/"+t.getDate()+"/"+t.getFullYear()}function l(e){const{startTime:t,endTime:n,onChangeTime:o,allDays:s,onChangeAllDays:a,selectedTime:i}=e,l=864e5,u=Math.round((n-t)/l),p=Math.round((i-t)/l);return(0,r.jsxs)("div",{className:"control-panel",children:[(0,r.jsx)("h3",{children:"Heatmap"}),(0,r.jsxs)("p",{children:["Map showing earthquakes",(0,r.jsx)("br",{}),"from ",(0,r.jsx)("b",{children:c(t)})," to ",(0,r.jsx)("b",{children:c(n)}),"."]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{className:"input",children:[(0,r.jsx)("label",{children:"All Days"}),(0,r.jsx)("input",{type:"checkbox",name:"allday",checked:s,onChange:e=>a(e.target.checked)})]}),(0,r.jsxs)("div",{className:"input "+(s?"disabled":""),children:[(0,r.jsxs)("label",{children:["Each Day: ",c(i)]}),(0,r.jsx)("input",{type:"range",disabled:s,min:1,max:u,value:p,step:1,onChange:e=>{const n=e.target.value;o(t+n*l)}})]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("p",{children:["Data source:"," ",(0,r.jsx)("a",{href:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",children:"earthquakes.geojson"})]}),(0,r.jsx)("div",{className:"source-link",children:(0,r.jsx)("a",{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/heatmap",target:"_new",children:"View Code \u2197"})})]})}const u=a.memo(l),p={id:"heatmap",maxzoom:9,type:"heatmap",paint:{"heatmap-weight":["interpolate",["linear"],["get","mag"],0,0,6,1],"heatmap-intensity":["interpolate",["linear"],["zoom"],0,1,9,3],"heatmap-color":["interpolate",["linear"],["heatmap-density"],0,"rgba(33,102,172,0)",.2,"rgb(103,169,207)",.4,"rgb(209,229,240)",.6,"rgb(253,219,199)",.8,"rgb(239,138,98)",.9,"rgb(255,201,101)"],"heatmap-radius":["interpolate",["linear"],["zoom"],0,2,9,20],"heatmap-opacity":["interpolate",["linear"],["zoom"],7,1,9,0]}},d="";function m(){const[e,t]=(0,a.useState)(!0),[n,o]=(0,a.useState)([0,0]),[s,c]=(0,a.useState)(0),[l,m]=(0,a.useState)(null);(0,a.useEffect)((()=>{fetch("https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson").then((e=>e.json())).then((e=>{const t=e.features,n=t[0].properties.time,r=t[t.length-1].properties.time;o([r,n]),m(e),c(n)})).catch((e=>console.error("Could not load data",e)))}),[]);const f=(0,a.useMemo)((()=>e?l:function(e,t){const n=new Date(t),o=n.getFullYear(),r=n.getMonth(),s=n.getDate();return{type:"FeatureCollection",features:e.features.filter((e=>{const t=new Date(e.properties.time);return t.getFullYear()===o&&t.getMonth()===r&&t.getDate()===s}))}}(l,s)),[l,e,s]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.Ay,{initialViewState:{latitude:40,longitude:-100,zoom:3},mapStyle:"mapbox://styles/mapbox/dark-v9",mapboxAccessToken:d,children:f&&(0,r.jsx)(i.kL,{type:"geojson",data:f,children:(0,r.jsx)(i.Wd,Object.assign({},p))})}),(0,r.jsx)(u,{startTime:n[0],endTime:n[1],selectedTime:s,allDays:e,onChangeTime:c,onChangeAllDays:t})]})}const f={},h="Heatmap",g={},y=[];function v(e){const t={h1:"h1",header:"header",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"heatmap",children:"Heatmap"})}),"\n","\n",(0,r.jsx)(m,{})]})}function x(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}},2198:(e,t,n)=>{n.d(t,{T3:()=>A,tG:()=>I,Wd:()=>V,T5:()=>E,pH:()=>P,ov:()=>N,zD:()=>k,g0:()=>Z,kL:()=>q,Ay:()=>E,VI:()=>z});var o=n(6540),r=n(4848);const s=o.createContext(null);function a(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let n=0;n{let n=null;"interactive"in e&&(n=Object.assign({},e),delete n.interactive);const o=t[e.ref];if(o){n=n||Object.assign({},e),delete n.ref;for(const e of u)e in o&&(n[e]=o[e])}return n||e}));return Object.assign({},e,{layers:n})}const d={version:8,sources:{},layers:[]},m={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},f={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},h={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},g=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],y=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class v{constructor(e,t,n){this._map=null,this._internalUpdate=!1,this._inRender=!1,this._hoveredFeatures=null,this._deferredEvents={move:!1,zoom:!1,pitch:!1,rotate:!1},this._onEvent=e=>{const t=this.props[h[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[m[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._onCameraEvent=e=>{if(!this._internalUpdate){const t=this.props[f[e.type]];t&&t(e)}e.type in this._deferredEvents&&(this._deferredEvents[e.type]=!1)},this._MapClass=e,this.props=t,this._initialize(n)}get map(){return this._map}get transform(){return this._renderTransform}setProps(e){const t=this.props;this.props=e;const n=this._updateSettings(e,t);n&&this._createShadowTransform(this._map);const o=this._updateSize(e),r=this._updateViewState(e,!0);this._updateStyle(e,t),this._updateStyleComponents(e,t),this._updateHandlers(e,t),(n||o||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const n=v.savedMaps.pop();if(!n)return null;const o=n.map,r=o.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);o._container=t,n.setProps(Object.assign({},e,{styleDiffing:!1})),o.resize();const{initialViewState:s}=e;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(()=>o.fire("load"))),o._update(),n}_initialize(e){const{props:t}=this,{mapStyle:n=d}=t,o=Object.assign({},t,t.initialViewState,{accessToken:t.mapboxAccessToken||x()||null,container:e,style:p(n)}),r=o.initialViewState||o.viewState||o;if(Object.assign(o,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(o);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),this._createShadowTransform(s);const a=s._render;s._render=e=>{this._inRender=!0,a.call(s,e),this._inRender=!1};const c=s._renderTaskQueue.run;s._renderTaskQueue.run=e=>{c.call(s._renderTaskQueue,e),this._onBeforeRepaint()},s.on("render",(()=>this._onAfterRepaint()));const l=s.fire;s.fire=this._fireEvent.bind(this,l),s.on("resize",(()=>{this._renderTransform.resize(s.transform.width,s.transform.height)})),s.on("styledata",(()=>{this._updateStyleComponents(this.props,{}),i(s.transform,this._renderTransform)})),s.on("sourcedata",(()=>this._updateStyleComponents(this.props,{})));for(const i in m)s.on(i,this._onPointerEvent);for(const i in f)s.on(i,this._onCameraEvent);for(const i in h)s.on(i,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),v.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_createShadowTransform(e){const t=function(e){const t=e.clone();return t.pixelsToGLUnits=e.pixelsToGLUnits,t}(e.transform);e.painter.transform=t,this._renderTransform=t}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e,t){if(this._internalUpdate)return!1;const n=this._map,o=this._renderTransform,{zoom:r,pitch:s,bearing:a}=o,i=n.isMoving();i&&(o.cameraElevationReference="sea");const u=l(o,Object.assign({},c(n.transform),e));if(i&&(o.cameraElevationReference="ground"),u&&t){const e=this._deferredEvents;e.move=!0,e.zoom||(e.zoom=r!==o.zoom),e.rotate||(e.rotate=a!==o.bearing),e.pitch||(e.pitch=s!==o.pitch)}return i||l(n.transform,e),u}_updateSettings(e,t){const n=this._map;let o=!1;for(const r of g)if(r in e&&!a(e[r],t[r])){o=!0;const t=n["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(n,e[r])}return o}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=d,styleDiffing:n=!0}=e,o={diff:n};return"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(p(t),o),!0}return!1}_updateStyleComponents(e,t){const n=this._map;let o=!1;return n.isStyleLoaded()&&("light"in e&&n.setLight&&!a(e.light,t.light)&&(o=!0,n.setLight(e.light)),"fog"in e&&n.setFog&&!a(e.fog,t.fog)&&(o=!0,n.setFog(e.fog)),"terrain"in e&&n.setTerrain&&!a(e.terrain,t.terrain)&&(e.terrain&&!n.getSource(e.terrain.source)||(o=!0,n.setTerrain(e.terrain)))),o}_updateHandlers(e,t){const n=this._map;let o=!1;for(const i of y){var r,s;const c=null==(r=e[i])||r;a(c,null==(s=t[i])||s)||(o=!0,c?n[i].enable(c):n[i].disable())}return o}_queryRenderedFeatures(e){const t=this._map,n=t.transform,{interactiveLayerIds:o=[]}=this.props;try{return t.transform=this._renderTransform,t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(r){return[]}finally{t.transform=n}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var n;const t=e.type,o=(null==(n=this._hoveredFeatures)?void 0:n.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}_fireEvent(e,t,n){const o=this._map,r=o.transform,s="string"==typeof t?t:t.type;return"move"===s&&this._updateViewState(this.props,!1),s in f&&("object"==typeof t&&(t.viewState=c(r)),this._map.isMoving())?(o.transform=this._renderTransform,e.call(o,t,n),o.transform=r,o):(e.call(o,t,n),o)}_onBeforeRepaint(){const e=this._map;this._internalUpdate=!0;for(const n in this._deferredEvents)this._deferredEvents[n]&&e.fire(n);this._internalUpdate=!1;const t=this._map.transform;e.transform=this._renderTransform,this._onAfterRepaint=()=>{i(this._renderTransform,t),e.transform=t}}}function x(){let e=null;if("undefined"!=typeof location){const t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(t){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}v.savedMaps=[];const _=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,n={getMap:()=>t,getCenter:()=>e.transform.center,getZoom:()=>e.transform.zoom,getBearing:()=>e.transform.bearing,getPitch:()=>e.transform.pitch,getPadding:()=>e.transform.padding,getBounds:()=>e.transform.getBounds(),project:n=>{const o=t.transform;t.transform=e.transform;const r=t.project(n);return t.transform=o,r},unproject:n=>{const o=t.transform;t.transform=e.transform;const r=t.unproject(n);return t.transform=o,r},queryTerrainElevation:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryTerrainElevation(n,o);return t.transform=r,s},queryRenderedFeatures:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryRenderedFeatures(n,o);return t.transform=r,s}};for(const o of function(e){const t=new Set;let n=e;for(;n;){for(const o of Object.getOwnPropertyNames(n))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);n=Object.getPrototypeOf(n)}return Array.from(t)}(t))o in n||_.includes(o)||(n[o]=t[o].bind(t));return n}const j="undefined"!=typeof document?o.useLayoutEffect:o.useEffect,L=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];const C=o.createContext(null);function S(e,t){const a=(0,o.useContext)(s),[i,c]=(0,o.useState)(null),l=(0,o.useRef)(),{current:u}=(0,o.useRef)({mapLib:null,map:null});(0,o.useEffect)((()=>{const t=e.mapLib;let o,r=!0;return Promise.resolve(t||n.e(842).then(n.t.bind(n,842,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const n="Map"in t?t:t.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(const o of L)o in t&&(e[o]=t[o]);const{RTLTextPlugin:n="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;n&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(n,(e=>{e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(o=v.reuse(e,l.current)),o||(o=new v(n.Map,e,l.current)),u.map=b(o),u.mapLib=n,c(o),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:n}=e;n?n({type:"error",target:null,error:t}):console.error(t)})),()=>{r=!1,o&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),j((()=>{i&&i.setProps(e)})),(0,o.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,o.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:l,style:p,children:i&&(0,r.jsx)(C.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const E=o.forwardRef(S);var M=n(961);const w=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function T(e,t){if(!e||!t)return;const n=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!w.test(o)?n[o]=e+"px":n[o]=e}}const P=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(C),s=(0,o.useRef)({props:e});s.current.props=e;const a=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const n=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(n);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(a.addTo(n.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:c,offset:l,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:f="auto",pitchAlignment:h="auto"}=e;return(0,o.useEffect)((()=>{T(a.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===c||a.setLngLat([i,c]),l&&!function(e,t){const n=Array.isArray(e)?e[0]:e?e.x:0,o=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return n===r&&o===s}(a.getOffset(),l)&&a.setOffset(l),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==m&&a.setRotation(m),a.getRotationAlignment()!==f&&a.setRotationAlignment(f),a.getPitchAlignment()!==h&&a.setPitchAlignment(h),a.getPopup()!==d&&a.setPopup(d),(0,M.createPortal)(e.children,a.getElement())})));function R(e){return new Set(e?e.trim().split(/\s+/):[])}const k=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(C),s=(0,o.useMemo)((()=>document.createElement("div")),[]),i=(0,o.useRef)({props:e});i.current.props=e;const c=(0,o.useMemo)((()=>{const t=Object.assign({},e),n=new r.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),n}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return c.on("close",e),c.setDOMContent(s).addTo(n.getMap()),()=>{c.off("close",e),c.isOpen()&&c.remove()}}),[]),(0,o.useEffect)((()=>{T(c.getElement(),e.style)}),[e.style]),(0,o.useImperativeHandle)(t,(()=>c),[]),c.isOpen()&&(c.getLngLat().lng===e.longitude&&c.getLngLat().lat===e.latitude||c.setLngLat([e.longitude,e.latitude]),e.offset&&!a(c.options.offset,e.offset)&&c.setOffset(e.offset),c.options.anchor===e.anchor&&c.options.maxWidth===e.maxWidth||(c.options.anchor=e.anchor,c.setMaxWidth(e.maxWidth)),c.options.className!==e.className)){const t=R(c.options.className),n=R(e.className);for(const e of t)n.has(e)||c.removeClassName(e);for(const e of n)t.has(e)||c.addClassName(e);c.options.className=e.className}return(0,M.createPortal)(e.children,s)})));function z(e,t,n,r){const s=(0,o.useContext)(C),a=(0,o.useMemo)((()=>e(s)),[]);return(0,o.useEffect)((()=>{const e=r||n||t,o="function"==typeof t&&"function"==typeof n?t:null,i="function"==typeof n?n:"function"==typeof t?t:null,{map:c}=s;return c.hasControl(a)||(c.addControl(a,null==e?void 0:e.position),o&&o(s)),()=>{i&&i(s),c.hasControl(a)&&c.removeControl(a)}}),[]),a}function O(e){const t=z((t=>{let{mapLib:n}=t;return new n.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{T(t._controlContainer,e.style)}),[e.style]),null}const A=(0,o.memo)(O);function D(e,t){const n=(0,o.useRef)({props:e}),r=z((t=>{let{mapLib:o}=t;const r=new o.GeolocateControl(e),s=r._setupUI.bind(r);return r._setupUI=e=>{r._container.hasChildNodes()||s(e)},r.on("geolocate",(e=>{null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(e=>{null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,o.useImperativeHandle)(t,(()=>r),[]),(0,o.useEffect)((()=>{T(r._container,e.style)}),[e.style]),null}const I=(0,o.memo)((0,o.forwardRef)(D));function F(e){const t=z((t=>{let{mapLib:n}=t;return new n.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{T(t._container,e.style)}),[e.style]),null}const N=(0,o.memo)(F);function U(e){const t=z((t=>{let{mapLib:n}=t;return new n.ScaleControl(e)}),{position:e.position}),n=(0,o.useRef)(e),r=n.current;n.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,o.useEffect)((()=>{T(t._container,s)}),[s]),null}const Z=(0,o.memo)(U);function H(e,t){if(!e)throw new Error(t)}let W=0;function q(e){const t=(0,o.useContext)(C).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-source-"+W++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var n;const e=null==(n=t.getStyle())?void 0:n.layers;if(e)for(const n of e)n.source===s&&t.removeLayer(n.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,n){H(t.id===n.id,"source id changed"),H(t.type===n.type,"source type changed");let o="",r=0;for(const i in t)"children"===i||"id"===i||a(n[i],t[i])||(o=i,r++);if(!r)return;const s=t.type;"geojson"===s?e.setData(t.data):"image"===s?e.updateImage({url:t.url,coordinates:t.coordinates}):"setCoordinates"in e&&1===r&&"coordinates"===o?e.setCoordinates(t.coordinates):"setUrl"in e&&"url"===o?e.setUrl(t.url):"setTiles"in e&&"tiles"===o?e.setTiles(t.tiles):console.warn("Unable to update prop: "+o)}(i,e,n.current):i=function(e,t,n){if(e.style&&e.style._loaded){const o=Object.assign({},n);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,s,e),n.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:s})))||null}let B=0;function V(e){const t=(0,o.useContext)(C).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-layer-"+B++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,n,o){if(H(n.id===o.id,"layer id changed"),H(n.type===o.type,"layer type changed"),"custom"===n.type||"custom"===o.type)return;const{layout:r={},paint:s={},filter:i,minzoom:c,maxzoom:l,beforeId:u}=n;if(u!==o.beforeId&&e.moveLayer(t,u),r!==o.layout){const n=o.layout||{};for(const o in r)a(r[o],n[o])||e.setLayoutProperty(t,o,r[o]);for(const o in n)r.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(s!==o.paint){const n=o.paint||{};for(const o in s)a(s[o],n[o])||e.setPaintProperty(t,o,s[o]);for(const o in n)s.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}a(i,o.filter)||e.setFilter(t,i),c===o.minzoom&&l===o.maxzoom||e.setLayerZoomRange(t,c,l)}(t,s,e,n.current)}catch(i){console.warn(i)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){const o=Object.assign({},n,{id:t});delete o.beforeId,e.addLayer(o,n.beforeId)}}(t,s,e);return n.current=e,null}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function a(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/07881648.45b12b74.js b/assets/js/07881648.45b12b74.js
deleted file mode 100644
index ced199c6..00000000
--- a/assets/js/07881648.45b12b74.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[9609],{9944:(e,t,n)=>{n.r(t),n.d(t,{default:()=>r});var o=n(7294),a=n(63),i=n(4996),l=a.ZP.div.withConfig({displayName:"doc-item-component__DemoContainer",componentId:"sc-16i3x2q-0"})(["position:absolute;overflow:hidden !important;left:0;right:0;top:0;bottom:0;> h1{display:none;}"]);function r(e){var t=e.content,n=e.route,a=t,r=(0,i.Z)("/examples");return n.path===r?o.createElement("div",{key:"index"},o.createElement(a,null)):o.createElement(l,{key:"demo"},o.createElement(a,null))}}}]);
\ No newline at end of file
diff --git a/assets/js/0a0750ee.1c63c44d.js b/assets/js/0a0750ee.1c63c44d.js
new file mode 100644
index 00000000..9efafcf6
--- /dev/null
+++ b/assets/js/0a0750ee.1c63c44d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5188],{668:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>s,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>a,toc:()=>i});const a=JSON.parse('{"id":"api-reference/mapbox/map-provider","title":"MapProvider","description":"A Context.Provider that facilitates map operations outside of the component that directly renders a Map.","source":"@site/../docs/api-reference/mapbox/map-provider.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/map-provider","permalink":"/react-map-gl/docs/api-reference/mapbox/map-provider","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/map-provider.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Layer","permalink":"/react-map-gl/docs/api-reference/mapbox/layer"},"next":{"title":"Marker","permalink":"/react-map-gl/docs/api-reference/mapbox/marker"}}');var n=t(4848),o=t(8453);const c={},p="MapProvider",s={},i=[{value:"Source",id:"source",level:2}];function d(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.header,{children:(0,n.jsx)(r.h1,{id:"mapprovider",children:"MapProvider"})}),"\n",(0,n.jsxs)(r.p,{children:["A ",(0,n.jsx)(r.a,{href:"https://reactjs.org/docs/context.html#contextprovider",children:"Context.Provider"})," that facilitates map operations outside of the component that directly renders a ",(0,n.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/mapbox/map",children:"Map"}),"."]}),"\n",(0,n.jsx)(r.p,{children:"The component should wrap all nodes in which you may want to access the maps:"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-tsx",children:"import {MapProvider} from 'react-map-gl/mapbox';\n\nfunction Root() {\n return (\n \n {\n // Application tree, somewhere one or more \n );\n}\n"})}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/mapbox/use-map",children:"useMap"})," for more information."]}),"\n",(0,n.jsx)(r.h2,{id:"source",children:"Source"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-map.tsx",children:"use-map.tsx"})})]})}function m(e={}){const{wrapper:r}={...(0,o.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},8453:(e,r,t)=>{t.d(r,{R:()=>c,x:()=>p});var a=t(6540);const n={},o=a.createContext(n);function c(e){const r=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function p(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:c(e.components),a.createElement(o.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0e9bb885.e3de89da.js b/assets/js/0e9bb885.e3de89da.js
new file mode 100644
index 00000000..69d873de
--- /dev/null
+++ b/assets/js/0e9bb885.e3de89da.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6984],{8180:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>i,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>t,toc:()=>p});const t=JSON.parse('{"id":"api-reference/mapbox/use-control","title":"useControl","description":"The useControl hook is used to create React wrappers for custom map controls.","source":"@site/../docs/api-reference/mapbox/use-control.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/use-control","permalink":"/react-map-gl/docs/api-reference/mapbox/use-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/use-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Source","permalink":"/react-map-gl/docs/api-reference/mapbox/source"},"next":{"title":"useMap","permalink":"/react-map-gl/docs/api-reference/mapbox/use-map"}}');var r=n(4848),a=n(8453);const s={},l="useControl",i={},p=[{value:"Signature",id:"signature",level:2},{value:"Source",id:"source",level:2}];function c(e){const o={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.header,{children:(0,r.jsx)(o.h1,{id:"usecontrol",children:"useControl"})}),"\n",(0,r.jsxs)(o.p,{children:["The ",(0,r.jsx)(o.code,{children:"useControl"})," hook is used to create React wrappers for custom map controls."]}),"\n",(0,r.jsx)(o.pre,{children:(0,r.jsx)(o.code,{className:"language-tsx",children:"import MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport Map, {useControl} from 'react-map-gl/mapbox';\n\nfunction DrawControl(props: DrawControlProps) {\n useControl(() => new MapboxDraw(props), {\n position: props.position\n });\n\n return null;\n}\n\nfunction App() {\n return (\n \n (\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n onAdd: ({map: MapRef, mapLib: mapboxgl}) => void,\n onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n"})}),"\n",(0,r.jsxs)(o.p,{children:["The hook creates an ",(0,r.jsx)(o.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol",children:"IControl"})," instance, adds it to the map when it's available, and removes it upon unmount."]}),"\n",(0,r.jsx)(o.p,{children:"Parameters:"}),"\n",(0,r.jsxs)(o.ul,{children:["\n",(0,r.jsxs)(o.li,{children:[(0,r.jsx)(o.code,{children:"onCreate"}),": (",(0,r.jsx)(o.code,{children:"{map: MapRef, mapLib: mapboxgl}"}),") => ",(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#icontrol",children:"IControl"})," - called to create an instance of the control."]}),"\n",(0,r.jsxs)(o.li,{children:[(0,r.jsx)(o.code,{children:"onAdd"}),": (",(0,r.jsx)(o.code,{children:"{map: MapRef, mapLib: mapboxgl}"}),") => void - called when the control has been added to the map."]}),"\n",(0,r.jsxs)(o.li,{children:[(0,r.jsx)(o.code,{children:"onRemove"}),": (",(0,r.jsx)(o.code,{children:"{map: MapRef, mapLib: mapboxgl}"}),") => void - called when the control is about to be removed from the map."]}),"\n",(0,r.jsxs)(o.li,{children:[(0,r.jsx)(o.code,{children:"options"}),": object","\n",(0,r.jsxs)(o.ul,{children:["\n",(0,r.jsxs)(o.li,{children:[(0,r.jsx)(o.code,{children:"position"}),": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(o.p,{children:"Returns:"}),"\n",(0,r.jsxs)(o.p,{children:[(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#icontrol",children:"IControl"})," - the control instance from ",(0,r.jsx)(o.code,{children:"onCreate"}),"."]}),"\n",(0,r.jsx)(o.h2,{id:"source",children:"Source"}),"\n",(0,r.jsx)(o.p,{children:(0,r.jsx)(o.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-control.ts",children:"use-control.ts"})})]})}function d(e={}){const{wrapper:o}={...(0,a.R)(),...e.components};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,o,n)=>{n.d(o,{R:()=>s,x:()=>l});var t=n(6540);const r={},a=t.createContext(r);function s(e){const o=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function l(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),t.createElement(a.Provider,{value:o},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/0f7476ce.ca584950.js b/assets/js/0f7476ce.ca584950.js
new file mode 100644
index 00000000..87fabd9b
--- /dev/null
+++ b/assets/js/0f7476ce.ca584950.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2643],{7964:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>i,contentTitle:()=>s,default:()=>d,frontMatter:()=>a,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"api-reference/maplibre/use-control","title":"useControl","description":"The useControl hook is used to create React wrappers for custom map controls.","source":"@site/../docs/api-reference/maplibre/use-control.md","sourceDirName":"api-reference/maplibre","slug":"/api-reference/maplibre/use-control","permalink":"/react-map-gl/docs/api-reference/maplibre/use-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/maplibre/use-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"TerrainControl","permalink":"/react-map-gl/docs/api-reference/maplibre/terrain-control"},"next":{"title":"useMap","permalink":"/react-map-gl/docs/api-reference/maplibre/use-map"}}');var t=o(4848),l=o(8453);const a={},s="useControl",i={},p=[{value:"Signature",id:"signature",level:2},{value:"Source",id:"source",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"usecontrol",children:"useControl"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"useControl"})," hook is used to create React wrappers for custom map controls."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport {Map, useControl} from 'react-map-gl/maplibre';\n\nfunction DrawControl(props: DrawControlProps) {\n useControl(() => new MapboxDraw(props), {\n position: props.position\n });\n\n return null;\n}\n\nfunction App() {\n return (\n \n (\n onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,\n onRemove: ({map: MapRef, mapLib: maplibregl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,\n onAdd: ({map: MapRef, mapLib: maplibregl}) => void,\n onRemove: ({map: MapRef, mapLib: maplibregl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The hook creates an ",(0,t.jsx)(n.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/interfaces/IControl/",children:"IControl"})," instance, adds it to the map when it's available, and removes it upon unmount."]}),"\n",(0,t.jsx)(n.p,{children:"Parameters:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onCreate"}),": ",(0,t.jsx)(n.code,{children:"({map: MapRef, mapLib: maplibregl}) => IControl"})," - called to create an instance of the control."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onAdd"}),": ",(0,t.jsx)(n.code,{children:"({map: MapRef, mapLib: maplibregl}) => void"})," - called when the control has been added to the map."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onRemove"}),": ",(0,t.jsx)(n.code,{children:"({map: MapRef, mapLib: maplibregl}) => void"})," - called when the control is about to be removed from the map."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"options"}),": object","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"position"}),": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Returns:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/maplibre/types#icontrol",children:"IControl"})," - the control instance from ",(0,t.jsx)(n.code,{children:"onCreate"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"source",children:"Source"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/master/modules/maplibre/src/components/use-control.ts",children:"use-control.ts"})})]})}function d(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,o)=>{o.d(n,{R:()=>a,x:()=>s});var r=o(6540);const t={},l=r.createContext(t);function a(e){const n=r.useContext(l);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),r.createElement(l.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1102cf8d.ad139458.js b/assets/js/1102cf8d.ad139458.js
new file mode 100644
index 00000000..cfcf9ec1
--- /dev/null
+++ b/assets/js/1102cf8d.ad139458.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6712],{9262:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>h,contentTitle:()=>g,default:()=>b,frontMatter:()=>f,metadata:()=>n,toc:()=>y});const n=JSON.parse('{"id":"maplibre/draw-polygon","title":"Draw Polygon","description":"","source":"@site/src/examples/maplibre/draw-polygon.mdx","sourceDirName":"maplibre","slug":"/maplibre/draw-polygon","permalink":"/react-map-gl/examples/maplibre/draw-polygon","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Draggable Marker","permalink":"/react-map-gl/examples/maplibre/draggable-markers"},"next":{"title":"Highlight By Filter","permalink":"/react-map-gl/examples/maplibre/filter"}}');var r=o(4848),s=o(8453),a=o(6540),i=(o(5338),o(5490)),l=o(4604);function c(e){return(0,i.VI)((()=>new l.A(e)),(t=>{let{map:o}=t;o.on("draw.create",e.onCreate),o.on("draw.update",e.onUpdate),o.on("draw.delete",e.onDelete)}),(t=>{let{map:o}=t;o.off("draw.create",e.onCreate),o.off("draw.update",e.onUpdate),o.off("draw.delete",e.onDelete)}),{position:e.position}),null}c.defaultProps={onCreate:()=>{},onUpdate:()=>{},onDelete:()=>{}};var u=o(999);function p(e){let t=0;for(const o of e.polygons)t+=(0,u.A)(o);return(0,r.jsxs)("div",{className:"control-panel",children:[(0,r.jsx)("h3",{children:"Draw Polygon"}),t>0&&(0,r.jsxs)("p",{children:[Math.round(100*t)/100," ",(0,r.jsx)("br",{}),"square meters"]}),(0,r.jsx)("div",{className:"source-link",children:(0,r.jsx)("a",{href:"https://github.com/visgl/react-maplibre/tree/1.0-release/examples/draw-polygon",target:"_new",children:"View Code \u2197"})})]})}const d=a.memo(p);function m(){const[e,t]=(0,a.useState)({}),o=(0,a.useCallback)((e=>{t((t=>{const o=Object.assign({},t);for(const n of e.features)o[n.id]=n;return o}))}),[]),n=(0,a.useCallback)((e=>{t((t=>{const o=Object.assign({},t);for(const n of e.features)delete o[n.id];return o}))}),[]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.T5,{initialViewState:{longitude:-91.874,latitude:42.76,zoom:12},mapStyle:"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",children:(0,r.jsx)(c,{position:"top-left",displayControlsDefault:!1,controls:{polygon:!0,trash:!0},defaultMode:"draw_polygon",onCreate:o,onUpdate:o,onDelete:n})}),(0,r.jsx)(d,{polygons:Object.values(e)})]})}const f={},g="Draw Polygon",h={},y=[];function v(e){const t={h1:"h1",header:"header",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"draw-polygon",children:"Draw Polygon"})}),"\n","\n",(0,r.jsx)(m,{})]})}function b(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}},5490:(e,t,o)=>{o.d(t,{T3:()=>R,tG:()=>T,Wd:()=>V,T5:()=>w,pH:()=>j,ov:()=>U,zD:()=>P,g0:()=>A,kL:()=>H,jG:()=>N,Ay:()=>w,VI:()=>k});var n=o(6540),r=o(4848);const s=n.createContext(null);function a(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let o=0;o{let o=null;"interactive"in e&&(o=Object.assign({},e),delete o.interactive);const n=t[e.ref];if(n){o=o||Object.assign({},e),delete o.ref;for(const e of c)e in n&&(o[e]=n[e])}return o||e}));return Object.assign({},e,{layers:o})}const p={version:8,sources:{},layers:[]},d={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},m={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},f={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},g=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],h=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class y{constructor(e,t,o){this._map=null,this._internalUpdate=!1,this._hoveredFeatures=null,this._propsedCameraUpdate=null,this._styleComponents={},this._onEvent=e=>{const t=this.props[f[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onCameraEvent=e=>{if(this._internalUpdate)return;e.viewState=this._propsedCameraUpdate||i(this._map.transform);const t=this.props[m[e.type]];t&&t(e)},this._onCameraUpdate=e=>this._internalUpdate?e:(this._propsedCameraUpdate=i(e),l(e,this.props)),this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[d[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._MapClass=e,this.props=t,this._initialize(o)}get map(){return this._map}setProps(e){const t=this.props;this.props=e;const o=this._updateSettings(e,t),n=this._updateSize(e),r=this._updateViewState(e);this._updateStyle(e,t),this._updateStyleComponents(e),this._updateHandlers(e,t),(o||n||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const o=y.savedMaps.pop();if(!o)return null;const n=o.map,r=n.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);n._container=t;const s=n._resizeObserver;s&&(s.disconnect(),s.observe(t)),o.setProps(Object.assign({},e,{styleDiffing:!1})),n.resize();const{initialViewState:a}=e;return a&&(a.bounds?n.fitBounds(a.bounds,Object.assign({},a.fitBoundsOptions,{duration:0})):o._updateViewState(a)),n.isStyleLoaded()?n.fire("load"):n.once("style.load",(()=>n.fire("load"))),n._update(),o}_initialize(e){const{props:t}=this,{mapStyle:o=p}=t,n=Object.assign({},t,t.initialViewState,{container:e,style:u(o)}),r=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(n);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),s.transformCameraUpdate=this._onCameraUpdate,s.on("style.load",(()=>{this._styleComponents={light:s.getLight(),sky:s.getSky(),projection:null==s.getProjection?void 0:s.getProjection(),terrain:s.getTerrain()},this._updateStyleComponents(this.props)})),s.on("sourcedata",(()=>{this._updateStyleComponents(this.props)}));for(const a in d)s.on(a,this._onPointerEvent);for(const a in m)s.on(a,this._onCameraEvent);for(const a in f)s.on(a,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),y.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e){const t=this._map,o=t.transform;if(!t.isMoving()){const n=l(o,e);if(Object.keys(n).length>0)return this._internalUpdate=!0,t.jumpTo(n),this._internalUpdate=!1,!0}return!1}_updateSettings(e,t){const o=this._map;let n=!1;for(const r of g)if(r in e&&!a(e[r],t[r])){n=!0;const t=o["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(o,e[r])}return n}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=p,styleDiffing:o=!0}=e,n={diff:o};"localIdeographFontFamily"in e&&(n.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(u(t),n)}}_updateStyleComponents(e){let{light:t,projection:o,sky:n,terrain:r}=e;const s=this._map,i=this._styleComponents;var l;s.style._loaded&&(t&&!a(t,i.light)&&(i.light=t,s.setLight(t)),o&&!a(o,i.projection)&&o!==(null==(l=i.projection)?void 0:l.type)&&(i.projection="string"==typeof o?{type:o}:o,null==s.setProjection||s.setProjection(i.projection)),n&&!a(n,i.sky)&&(i.sky=n,s.setSky(n)),void 0===r||a(r,i.terrain)||r&&!s.getSource(r.source)||(i.terrain=r,s.setTerrain(r)))}_updateHandlers(e,t){const o=this._map;for(const s of h){var n,r;const i=null==(n=e[s])||n;a(i,null==(r=t[s])||r)||(i?o[s].enable(i):o[s].disable())}}_queryRenderedFeatures(e){const t=this._map,{interactiveLayerIds:o=[]}=this.props;try{return t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(n){return[]}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var o;const t=e.type,n=(null==(o=this._hoveredFeatures)?void 0:o.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&n&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!n&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}}y.savedMaps=[];const v=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,o={getMap:()=>t};for(const n of function(e){const t=new Set;let o=e;for(;o;){for(const n of Object.getOwnPropertyNames(o))"_"!==n[0]&&"function"==typeof e[n]&&"fire"!==n&&"setEventedParent"!==n&&t.add(n);o=Object.getPrototypeOf(o)}return Array.from(t)}(t))n in o||v.includes(n)||(o[n]=t[n].bind(t));return o}const _="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;const x=n.createContext(null);function C(e,t){const a=(0,n.useContext)(s),[i,l]=(0,n.useState)(null),c=(0,n.useRef)(),{current:u}=(0,n.useRef)({mapLib:null,map:null});(0,n.useEffect)((()=>{const t=e.mapLib;let n,r=!0;return Promise.resolve(t||o.e(6443).then(o.t.bind(o,6443,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const o="Map"in t?t:t.default;if(!o.Map)throw new Error("Invalid mapLib");if(function(e,t){const{RTLTextPlugin:o,maxParallelImageRequests:n,workerCount:r,workerUrl:s}=t;if(o&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()){const{pluginUrl:t,lazy:n=!0}="string"==typeof o?{pluginUrl:o}:o;e.setRTLTextPlugin(t,(e=>{e&&console.error(e)}),n)}void 0!==n&&e.setMaxParallelImageRequests(n),void 0!==r&&e.setWorkerCount(r),void 0!==s&&e.setWorkerUrl(s)}(o,e),o.supported&&!o.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(n=y.reuse(e,c.current)),n||(n=new y(o.Map,e,c.current)),u.map=b(n),u.mapLib=o,l(n),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:o}=e;o?o({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),()=>{r=!1,n&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?n.recycle():n.destroy())}}),[]),_((()=>{i&&i.setProps(e)})),(0,n.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,n.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:c,style:p,children:i&&(0,r.jsx)(x.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const w=n.forwardRef(C);var L=o(961);const S=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(!e||!t)return;const o=e.style;for(const n in t){const e=t[n];Number.isFinite(e)&&!S.test(n)?o[n]=e+"px":o[n]=e}}const j=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:r}=(0,n.useContext)(x),s=(0,n.useRef)({props:e});s.current.props=e;const a=(0,n.useMemo)((()=>{let t=!1;n.Children.forEach(e.children,(e=>{e&&(t=!0)}));const o=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(o);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,n.useEffect)((()=>(a.addTo(o.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:l,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:f="auto",pitchAlignment:g="auto"}=e;return(0,n.useEffect)((()=>{M(a.getElement(),u)}),[u]),(0,n.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===l||a.setLngLat([i,l]),c&&!function(e,t){const o=Array.isArray(e)?e[0]:e?e.x:0,n=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return o===r&&n===s}(a.getOffset(),c)&&a.setOffset(c),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==m&&a.setRotation(m),a.getRotationAlignment()!==f&&a.setRotationAlignment(f),a.getPitchAlignment()!==g&&a.setPitchAlignment(g),a.getPopup()!==d&&a.setPopup(d),(0,L.createPortal)(e.children,a.getElement())})));function E(e){return new Set(e?e.trim().split(/\s+/):[])}const P=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:r}=(0,n.useContext)(x),s=(0,n.useMemo)((()=>document.createElement("div")),[]),i=(0,n.useRef)({props:e});i.current.props=e;const l=(0,n.useMemo)((()=>{const t=Object.assign({},e),o=new r.Popup(t);return o.setLngLat([e.longitude,e.latitude]),o.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),o}),[]);if((0,n.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(o.getMap()),()=>{l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,n.useEffect)((()=>{M(l.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(()=>l),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!a(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){const t=E(l.options.className),o=E(e.className);for(const e of t)o.has(e)||l.removeClassName(e);for(const e of o)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,L.createPortal)(e.children,s)})));function k(e,t,o,r){const s=(0,n.useContext)(x),a=(0,n.useMemo)((()=>e(s)),[]);return(0,n.useEffect)((()=>{const e=r||o||t,n="function"==typeof t&&"function"==typeof o?t:null,i="function"==typeof o?o:"function"==typeof t?t:null,{map:l}=s;return l.hasControl(a)||(l.addControl(a,null==e?void 0:e.position),n&&n(s)),()=>{i&&i(s),l.hasControl(a)&&l.removeControl(a)}}),[]),a}function O(e){const t=k((t=>{let{mapLib:o}=t;return new o.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((()=>{M(t._controlContainer,e.style)}),[e.style]),null}const R=(0,n.memo)(O);function z(e,t){const o=(0,n.useRef)({props:e}),r=k((t=>{let{mapLib:n}=t;const r=new n.GeolocateControl(e),s=r._setupUI;return r._setupUI=()=>{r._container.hasChildNodes()||s()},r.on("geolocate",(e=>{null==o.current.props.onGeolocate||o.current.props.onGeolocate(e)})),r.on("error",(e=>{null==o.current.props.onError||o.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==o.current.props.onOutOfMaxBounds||o.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==o.current.props.onTrackUserLocationStart||o.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==o.current.props.onTrackUserLocationEnd||o.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return o.current.props=e,(0,n.useImperativeHandle)(t,(()=>r),[]),(0,n.useEffect)((()=>{M(r._container,e.style)}),[e.style]),null}const T=(0,n.memo)((0,n.forwardRef)(z));function D(e){const t=k((t=>{let{mapLib:o}=t;return new o.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const U=(0,n.memo)(D);function I(e){const t=k((t=>{let{mapLib:o}=t;return new o.ScaleControl(e)}),{position:e.position}),o=(0,n.useRef)(e),r=o.current;o.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,n.useEffect)((()=>{M(t._container,s)}),[s]),null}const A=(0,n.memo)(I);function F(e){const t=k((t=>{let{mapLib:o}=t;return new o.TerrainControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const N=(0,n.memo)(F);function W(e,t){if(!e)throw new Error(t)}let Z=0;function H(e){const t=(0,n.useContext)(x).map.getMap(),o=(0,n.useRef)(e),[,r]=(0,n.useState)(0),s=(0,n.useMemo)((()=>e.id||"jsx-source-"+Z++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var o;const e=null==(o=t.getStyle())?void 0:o.layers;if(e)for(const o of e)o.source===s&&t.removeLayer(o.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,o){W(t.id===o.id,"source id changed"),W(t.type===o.type,"source type changed");let n="",r=0;for(const i in t)"children"===i||"id"===i||a(o[i],t[i])||(n=i,r++);if(!r)return;const s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(n){case"coordinates":null==e.setCoordinates||e.setCoordinates(t.coordinates);break;case"url":null==e.setUrl||e.setUrl(t.url);break;case"tiles":null==e.setTiles||e.setTiles(t.tiles);break;default:console.warn("Unable to update prop: "+n)}}(i,e,o.current):i=function(e,t,o){if(e.style&&e.style._loaded){const n=Object.assign({},o);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,s,e),o.current=e,i&&n.Children.map(e.children,(e=>e&&(0,n.cloneElement)(e,{source:s})))||null}let B=0;function V(e){const t=(0,n.useContext)(x).map.getMap(),o=(0,n.useRef)(e),[,r]=(0,n.useState)(0),s=(0,n.useMemo)((()=>e.id||"jsx-layer-"+B++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,o,n){if(W(o.id===n.id,"layer id changed"),W(o.type===n.type,"layer type changed"),"custom"===o.type||"custom"===n.type)return;const{layout:r={},paint:s={},filter:i,minzoom:l,maxzoom:c,beforeId:u}=o;if(u!==n.beforeId&&e.moveLayer(t,u),r!==n.layout){const o=n.layout||{};for(const n in r)a(r[n],o[n])||e.setLayoutProperty(t,n,r[n]);for(const n in o)r.hasOwnProperty(n)||e.setLayoutProperty(t,n,void 0)}if(s!==n.paint){const o=n.paint||{};for(const n in s)a(s[n],o[n])||e.setPaintProperty(t,n,s[n]);for(const n in o)s.hasOwnProperty(n)||e.setPaintProperty(t,n,void 0)}a(i,n.filter)||e.setFilter(t,i),l===n.minzoom&&c===n.maxzoom||e.setLayerZoomRange(t,l,c)}(t,s,e,o.current)}catch(i){console.warn(i)}else!function(e,t,o){if(e.style&&e.style._loaded&&(!("source"in o)||e.getSource(o.source))){const n=Object.assign({},o,{id:t});delete n.beforeId,e.addLayer(n,o.beforeId)}}(t,s,e);return o.current=e,null}}}]);
\ No newline at end of file
diff --git a/assets/js/12488a06.d1f525e6.js b/assets/js/12488a06.d1f525e6.js
deleted file mode 100644
index a9e58e66..00000000
--- a/assets/js/12488a06.d1f525e6.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5004],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),c=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=c(e.components);return n.createElement(u.Provider,{value:t},e.children)},f="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,u=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),f=c(r),d=o,m=f["".concat(u,".").concat(d)]||f[d]||p[d]||a;return r?n.createElement(m,i(i({ref:t},l),{},{components:r})):n.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=d;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s[f]="string"==typeof e?e:o,i[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>b,contentTitle:()=>h,default:()=>w,frontMatter:()=>g,metadata:()=>y,toc:()=>_});var n=r(7462),o=r(3366),a=r(7294),i=r(3905),s=(r(745),r(945));function u(){return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Create and Style Clusters"),a.createElement("p",null,"Use Mapbox GL JS' built-in functions to visualize points as clusters."),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/clusters",target:"_new"},"View Code \u2197")))}const c=a.memo(u);var l={id:"clusters",type:"circle",source:"earthquakes",filter:["has","point_count"],paint:{"circle-color":["step",["get","point_count"],"#51bbd6",100,"#f1f075",750,"#f28cb1"],"circle-radius":["step",["get","point_count"],20,100,30,750,40]}},f={id:"cluster-count",type:"symbol",source:"earthquakes",filter:["has","point_count"],layout:{"text-field":"{point_count_abbreviated}","text-font":["DIN Offc Pro Medium","Arial Unicode MS Bold"],"text-size":12}},p={id:"unclustered-point",type:"circle",source:"earthquakes",filter:["!",["has","point_count"]],paint:{"circle-color":"#11b4da","circle-radius":4,"circle-stroke-width":1,"circle-stroke-color":"#fff"}},d="";function m(){var e=(0,a.useRef)(null);return a.createElement(a.Fragment,null,a.createElement(s.D5,{initialViewState:{latitude:40.67,longitude:-103.59,zoom:3},mapStyle:"mapbox://styles/mapbox/dark-v9",mapboxAccessToken:d,interactiveLayerIds:[l.id],onClick:function(t){var r=t.features[0],n=r.properties.cluster_id;e.current.getSource("earthquakes").getClusterExpansionZoom(n,(function(t,n){t||e.current.easeTo({center:r.geometry.coordinates,zoom:n,duration:500})}))},ref:e},a.createElement(s.Hw,{id:"earthquakes",type:"geojson",data:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",cluster:!0,clusterMaxZoom:14,clusterRadius:50},a.createElement(s.mh,l),a.createElement(s.mh,f),a.createElement(s.mh,p))),a.createElement(c,null))}var v=["components"],g={},h="Clusters",y={unversionedId:"clusters",id:"clusters",title:"Clusters",description:"",source:"@site/src/examples/clusters.mdx",sourceDirName:".",slug:"/clusters",permalink:"/react-map-gl/examples/clusters",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar",previous:{title:"GeoJSON Animation",permalink:"/react-map-gl/examples/geojson-animation"},next:{title:"Limit Map Interaction",permalink:"/react-map-gl/examples/interaction"}},b={},_=[],E={toc:_},x="wrapper";function w(e){var t=e.components,r=(0,o.Z)(e,v);return(0,i.kt)(x,(0,n.Z)({},E,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"clusters"},"Clusters"),(0,i.kt)(m,{mdxType:"App"}))}w.isMDXComponent=!0},945:(e,t,r)=>{r.d(t,{ot:()=>$,$j:()=>te,mh:()=>ne,D5:()=>X,Jx:()=>K,Pv:()=>ee,GI:()=>Y,jf:()=>re,Hw:()=>oe,ZP:()=>ae,PE:()=>Z});var n=r(7294),o=n.createContext(null);var a=r(1202);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var r=0;r0;)r.appendChild(a.childNodes[0]);o._container=r;var i=o._resizeObserver;i&&(i.disconnect(),i.observe(r)),n.setProps(Object.assign({},t,{styleDiffing:!1})),o.resize();var s=t.initialViewState;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),o._update(),n},t._initialize=function(e){var t=this,r=this.props,n=r.mapStyle,o=void 0===n?d:n,a=Object.assign({},r,r.initialViewState,{accessToken:r.mapboxAccessToken||_()||null,container:e,style:p(o)}),i=a.initialViewState||a.viewState||a;if(Object.assign(a,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),r.gl){var u=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=u,r.gl}}var c=new this._MapClass(a);i.padding&&c.setPadding(i.padding),r.cursor&&(c.getCanvas().style.cursor=r.cursor),this._createShadowTransform(c);var l=c._render;c._render=function(e){t._inRender=!0,l.call(c,e),t._inRender=!1};var f=c._renderTaskQueue.run;c._renderTaskQueue.run=function(e){f.call(c._renderTaskQueue,e),t._onBeforeRepaint()},c.on("render",(function(){return t._onAfterRepaint()}));var h=c.fire;for(var y in c.fire=this._fireEvent.bind(this,h),c.on("resize",(function(){t._renderTransform.resize(c.transform.width,c.transform.height)})),c.on("styledata",(function(){t._updateStyleComponents(t.props,{}),s(c.transform,t._renderTransform)})),c.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),m)c.on(y,this._onPointerEvent);for(var b in v)c.on(b,this._onCameraEvent);for(var E in g)c.on(E,this._onEvent);this._map=c},t.recycle=function(){var t=this.map.getContainer().querySelector("[mapboxgl-children]");null==t||t.remove(),e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._createShadowTransform=function(e){var t,r,n=(t=e.transform,(r=t.clone()).pixelsToGLUnits=t.pixelsToGLUnits,r);e.painter.transform=n,this._renderTransform=n},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=r.isMoving();s&&(n.cameraElevationReference="sea");var l=c(n,Object.assign({},u(r.transform),e));if(s&&(n.cameraElevationReference="ground"),l&&t){var f=this._deferredEvents;f.move=!0,f.zoom||(f.zoom=o!==n.zoom),f.rotate||(f.rotate=i!==n.bearing),f.pitch||(f.pitch=a!==n.pitch)}return s||c(r.transform,e),l},t._updateSettings=function(e,t){for(var r=this._map,n=!1,o=0,a=h;o0,a=this._queryRenderedFeatures(e.point),i=a.length>0;!i&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,i&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=n}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in v&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;t.transform=this._renderTransform,this._onAfterRepaint=function(){s(e._renderTransform,n),t.transform=n}},(0,a.Z)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function _(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}b.savedMaps=[];var E=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function x(e){if(!e)return null;for(var t,r=e.map,n={getMap:function(){return r},getCenter:function(){return e.transform.center},getZoom:function(){return e.transform.zoom},getBearing:function(){return e.transform.bearing},getPitch:function(){return e.transform.pitch},getPadding:function(){return e.transform.padding},getBounds:function(){return e.transform.getBounds()},project:function(t){var n=r.transform;r.transform=e.transform;var o=r.project(t);return r.transform=n,o},unproject:function(t){var n=r.transform;r.transform=e.transform;var o=r.unproject(t);return r.transform=n,o},queryTerrainElevation:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryTerrainElevation(t,n);return r.transform=o,a},queryRenderedFeatures:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryRenderedFeatures(t,n);return r.transform=o,a}},o=(0,l.Z)(function(e){var t=new Set,r=e;for(;r;){for(var n,o=(0,l.Z)(Object.getOwnPropertyNames(r));!(n=o()).done;){var a=n.value;"_"!==a[0]&&"function"==typeof e[a]&&"fire"!==a&&"setEventedParent"!==a&&t.add(a)}r=Object.getPrototypeOf(r)}return Array.from(t)}(r));!(t=o()).done;){var a=t.value;a in n||E.includes(a)||(n[a]=r[a].bind(r))}return n}const w="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;var S=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];var L=n.createContext(null);function C(e,t,r){var a=(0,n.useContext)(o),i=(0,n.useState)(null),s=i[0],u=i[1],c=(0,n.useRef)(),f=(0,n.useRef)({mapLib:null,map:null}).current;(0,n.useEffect)((function(){var t,n=e.mapLib,o=!0;return Promise.resolve(n||r).then((function(r){if(o){if(!r)throw new Error("Invalid mapLib");var n="Map"in r?r:r.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(var r,n=(0,l.Z)(S);!(r=n()).done;){var o=r.value;o in t&&(e[o]=t[o])}var a=t.RTLTextPlugin,i=void 0===a?"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js":a;i&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(i,(function(e){e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(t=b.reuse(e,c.current)),t||(t=new b(n.Map,e,c.current)),f.map=x(t),f.mapLib=n,u(t),null==a||a.onMapMount(f.map,e.id)}})).catch((function(t){var r=e.onError;r?r({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),function(){o=!1,t&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?t.recycle():t.destroy())}}),[]),w((function(){s&&s.setProps(e)})),(0,n.useImperativeHandle)(t,(function(){return f.map}),[s]);var p=(0,n.useMemo)((function(){return Object.assign({position:"relative",width:"100%",height:"100%"},e.style)}),[e.style]);return n.createElement("div",{id:e.id,ref:c,style:p},s&&n.createElement(L.Provider,{value:f},n.createElement("div",{"mapboxgl-children":"",style:{height:"100%"}},e.children)))}var P=r(3935),O=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(e&&t){var r=e.style;for(var n in t){var o=t[n];Number.isFinite(o)&&!O.test(n)?r[n]=o+"px":r[n]=o}}}function j(e,t){var r=(0,n.useContext)(L),o=r.map,a=r.mapLib,i=(0,n.useRef)({props:e});i.current.props=e;var s=(0,n.useMemo)((function(){var t=!1;n.Children.forEach(e.children,(function(e){e&&(t=!0)}));var r=Object.assign({},e,{element:t?document.createElement("div"):null}),o=new a.Marker(r);return o.setLngLat([e.longitude,e.latitude]),o.getElement().addEventListener("click",(function(e){null==i.current.props.onClick||i.current.props.onClick({type:"click",target:o,originalEvent:e})})),o.on("dragstart",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragStart||i.current.props.onDragStart(t)})),o.on("drag",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDrag||i.current.props.onDrag(t)})),o.on("dragend",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragEnd||i.current.props.onDragEnd(t)})),o}),[]);(0,n.useEffect)((function(){return s.addTo(o.getMap()),function(){s.remove()}}),[]);var u,c,l,f,p,d,m=e.longitude,v=e.latitude,g=e.offset,h=e.style,y=e.draggable,b=void 0!==y&&y,_=e.popup,E=void 0===_?null:_,x=e.rotation,w=void 0===x?0:x,S=e.rotationAlignment,C=void 0===S?"auto":S,O=e.pitchAlignment,j=void 0===O?"auto":O;return(0,n.useEffect)((function(){M(s.getElement(),h)}),[h]),(0,n.useImperativeHandle)(t,(function(){return s}),[]),s.getLngLat().lng===m&&s.getLngLat().lat===v||s.setLngLat([m,v]),g&&(u=s.getOffset(),c=g,l=Array.isArray(u)?u[0]:u?u.x:0,f=Array.isArray(u)?u[1]:u?u.y:0,p=Array.isArray(c)?c[0]:c?c.x:0,d=Array.isArray(c)?c[1]:c?c.y:0,l!==p||f!==d)&&s.setOffset(g),s.isDraggable()!==b&&s.setDraggable(b),s.getRotation()!==w&&s.setRotation(w),s.getRotationAlignment()!==C&&s.setRotationAlignment(C),s.getPitchAlignment()!==j&&s.setPitchAlignment(j),s.getPopup()!==E&&s.setPopup(E),(0,P.createPortal)(e.children,s.getElement())}const T=(0,n.memo)((0,n.forwardRef)(j));function k(e){return new Set(e?e.trim().split(/\s+/):[])}function R(e,t){var r=(0,n.useContext)(L),o=r.map,a=r.mapLib,s=(0,n.useMemo)((function(){return document.createElement("div")}),[]),u=(0,n.useRef)({props:e});u.current.props=e;var c=(0,n.useMemo)((function(){var t=Object.assign({},e),r=new a.Popup(t);return r.setLngLat([e.longitude,e.latitude]),r.once("open",(function(e){null==u.current.props.onOpen||u.current.props.onOpen(e)})),r}),[]);if((0,n.useEffect)((function(){var e=function(e){null==u.current.props.onClose||u.current.props.onClose(e)};return c.on("close",e),c.setDOMContent(s).addTo(o.getMap()),function(){c.off("close",e),c.isOpen()&&c.remove()}}),[]),(0,n.useEffect)((function(){M(c.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(function(){return c}),[]),c.isOpen()&&(c.getLngLat().lng===e.longitude&&c.getLngLat().lat===e.latitude||c.setLngLat([e.longitude,e.latitude]),e.offset&&!i(c.options.offset,e.offset)&&c.setOffset(e.offset),c.options.anchor===e.anchor&&c.options.maxWidth===e.maxWidth||(c.options.anchor=e.anchor,c.setMaxWidth(e.maxWidth)),c.options.className!==e.className)){for(var f,p=k(c.options.className),d=k(e.className),m=(0,l.Z)(p);!(f=m()).done;){var v=f.value;d.has(v)||c.removeClassName(v)}for(var g,h=(0,l.Z)(d);!(g=h()).done;){var y=g.value;p.has(y)||c.addClassName(y)}c.options.className=e.className}return(0,P.createPortal)(e.children,s)}const z=(0,n.memo)((0,n.forwardRef)(R));const Z=function(e,t,r,o){var a=(0,n.useContext)(L),i=(0,n.useMemo)((function(){return e(a)}),[]);return(0,n.useEffect)((function(){var e=o||r||t,n="function"==typeof t&&"function"==typeof r?t:null,s="function"==typeof r?r:"function"==typeof t?t:null,u=a.map;return u.hasControl(i)||(u.addControl(i,null==e?void 0:e.position),n&&n(a)),function(){s&&s(a),u.hasControl(i)&&u.removeControl(i)}}),[]),i};function I(e){var t=Z((function(t){return new t.mapLib.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((function(){M(t._controlContainer,e.style)}),[e.style]),null}const A=(0,n.memo)(I);function D(e,t){var r=(0,n.useRef)({props:e}),o=Z((function(t){var n=new t.mapLib.GeolocateControl(e),o=n._setupUI;return n._setupUI=function(e){n._container.hasChildNodes()||o(e)},n.on("geolocate",(function(e){null==r.current.props.onGeolocate||r.current.props.onGeolocate(e)})),n.on("error",(function(e){null==r.current.props.onError||r.current.props.onError(e)})),n.on("outofmaxbounds",(function(e){null==r.current.props.onOutOfMaxBounds||r.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(function(e){null==r.current.props.onTrackUserLocationStart||r.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(function(e){null==r.current.props.onTrackUserLocationEnd||r.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return r.current.props=e,(0,n.useImperativeHandle)(t,(function(){return o}),[]),(0,n.useEffect)((function(){M(o._container,e.style)}),[e.style]),null}const N=(0,n.memo)((0,n.forwardRef)(D));function F(e){var t=Z((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((function(){M(t._container,e.style)}),[e.style]),null}const U=(0,n.memo)(F);function q(e){var t=Z((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position}),r=(0,n.useRef)(e),o=r.current;r.current=e;var a=e.style;return void 0!==e.maxWidth&&e.maxWidth!==o.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==o.unit&&t.setUnit(e.unit),(0,n.useEffect)((function(){M(t._container,a)}),[a]),null}const B=(0,n.memo)(q);function W(e,t){if(!e)throw new Error(t)}var H=0;const V=function(e){var t=(0,n.useContext)(L).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-layer-"+H++}),[]);if((0,n.useEffect)((function(){if(t){var e=function(){return o((function(e){return e+1}))};return t.on("styledata",e),e(),function(){t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]),t&&t.style&&t.getLayer(a))try{!function(e,t,r,n){if(W(r.id===n.id,"layer id changed"),W(r.type===n.type,"layer type changed"),"custom"!==r.type&&"custom"!==n.type){var o=r.layout,a=void 0===o?{}:o,s=r.paint,u=void 0===s?{}:s,c=r.filter,l=r.minzoom,f=r.maxzoom,p=r.beforeId;if(p!==n.beforeId&&e.moveLayer(t,p),a!==n.layout){var d=n.layout||{};for(var m in a)i(a[m],d[m])||e.setLayoutProperty(t,m,a[m]);for(var v in d)a.hasOwnProperty(v)||e.setLayoutProperty(t,v,void 0)}if(u!==n.paint){var g=n.paint||{};for(var h in u)i(u[h],g[h])||e.setPaintProperty(t,h,u[h]);for(var y in g)u.hasOwnProperty(y)||e.setPaintProperty(t,y,void 0)}i(c,n.filter)||e.setFilter(t,c),l===n.minzoom&&f===n.maxzoom||e.setLayerZoomRange(t,l,f)}}(t,a,e,r.current)}catch(s){console.warn(s)}else!function(e,t,r){if(e.style&&e.style._loaded&&(!("source"in r)||e.getSource(r.source))){var n=Object.assign({},r,{id:t});delete n.beforeId,e.addLayer(n,r.beforeId)}}(t,a,e);return r.current=e,null};var G=0;const J=function(e){var t=(0,n.useContext)(L).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-source-"+G++}),[]);(0,n.useEffect)((function(){if(t){var e=function(){return setTimeout((function(){return o((function(e){return e+1}))}),0)};return t.on("styledata",e),e(),function(){if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var r,n=null==(r=t.getStyle())?void 0:r.layers;if(n)for(var o,i=(0,l.Z)(n);!(o=i()).done;){var s=o.value;s.source===a&&t.removeLayer(s.id)}t.removeSource(a)}}}}),[t]);var s=t&&t.style&&t.getSource(a);return s?function(e,t,r){W(t.id===r.id,"source id changed"),W(t.type===r.type,"source type changed");var n="",o=0;for(var a in t)"children"===a||"id"===a||i(r[a],t[a])||(n=a,o++);if(o){var s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else if("setCoordinates"in e&&1===o&&"coordinates"===n)e.setCoordinates(t.coordinates);else if("setUrl"in e)switch(n){case"url":e.setUrl(t.url);break;case"tiles":e.setTiles(t.tiles)}else console.warn("Unable to update prop: "+n)}}(s,e,r.current):s=function(e,t,r){if(e.style&&e.style._loaded){var n=Object.assign({},r);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,a,e),r.current=e,s&&n.Children.map(e.children,(function(e){return e&&(0,n.cloneElement)(e,{source:a})}))||null};var Q=r.e(8539).then(r.t.bind(r,8539,23)),X=n.forwardRef((function(e,t){return C(e,t,Q)})),K=T,Y=z,$=A,ee=U,te=N,re=B,ne=V,oe=J;const ae=X},745:(e,t,r)=>{var n=r(3935);n.createRoot,n.hydrateRoot},1202:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(1002);function o(e){var t=function(e,t){if("object"!==(0,n.Z)(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,t||"default");if("object"!==(0,n.Z)(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===(0,n.Z)(t)?t:String(t)}function a(e,t){for(var r=0;r{"use strict";n.r(t),n.d(t,{default:()=>gn});var s=n(6540),a=n(1003),i=n(9532),o=n(4848);const l=s.createContext(null);function c(e){let{children:t,content:n}=e;const a=function(e){return(0,s.useMemo)((()=>({metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc})),[e])}(n);return(0,o.jsx)(l.Provider,{value:a,children:t})}function r(){const e=(0,s.useContext)(l);if(null===e)throw new i.dV("DocProvider");return e}function d(){var e;const{metadata:t,frontMatter:n,assets:s}=r();return(0,o.jsx)(a.be,{title:t.title,description:t.description,keywords:n.keywords,image:null!=(e=s.image)?e:n.image})}var u=n(4164),m=n(4581),h=n(1312),b=n(8774);function p(e){const{permalink:t,title:n,subLabel:s,isNext:a}=e;return(0,o.jsxs)(b.A,{className:(0,u.A)("pagination-nav__link",a?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[s&&(0,o.jsx)("div",{className:"pagination-nav__sublabel",children:s}),(0,o.jsx)("div",{className:"pagination-nav__label",children:n})]})}function g(e){const{previous:t,next:n}=e;return(0,o.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,h.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,o.jsx)(p,Object.assign({},t,{subLabel:(0,o.jsx)(h.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})})),n&&(0,o.jsx)(p,Object.assign({},n,{subLabel:(0,o.jsx)(h.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0}))]})}function f(){const{metadata:e}=r();return(0,o.jsx)(g,{previous:e.previous,next:e.next})}var j=n(4586),x=n(8295),v=n(7559),N=n(3886),A=n(3025);const C={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,o.jsx)(h.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,o.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,o.jsx)(h.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,o.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function y(e){const t=C[e.versionMetadata.banner];return(0,o.jsx)(t,Object.assign({},e))}function k(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,o.jsx)(h.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,o.jsx)("b",{children:(0,o.jsx)(b.A,{to:n,onClick:s,children:(0,o.jsx)(h.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function L(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:s}}=(0,j.A)(),{pluginId:a}=(0,x.vT)({failfast:!0}),{savePreferredVersionName:i}=(0,N.g1)(a),{latestDocSuggestion:l,latestVersionSuggestion:c}=(0,x.HW)(a),r=null!=l?l:(d=c).docs.find((e=>e.id===d.mainDocId));var d;return(0,o.jsxs)("div",{className:(0,u.A)(t,v.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,o.jsx)("div",{children:(0,o.jsx)(y,{siteTitle:s,versionMetadata:n})}),(0,o.jsx)("div",{className:"margin-top--md",children:(0,o.jsx)(k,{versionLabel:c.label,to:r.path,onClick:()=>i(c.name)})})]})}function _(e){let{className:t}=e;const n=(0,A.r)();return n.banner?(0,o.jsx)(L,{className:t,versionMetadata:n}):null}function B(e){let{className:t}=e;const n=(0,A.r)();return n.badge?(0,o.jsx)("span",{className:(0,u.A)(t,v.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,o.jsx)(h.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}const w={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};function T(e){let{permalink:t,label:n,count:s,description:a}=e;return(0,o.jsxs)(b.A,{href:t,title:a,className:(0,u.A)(w.tag,s?w.tagWithCount:w.tagRegular),children:[n,s&&(0,o.jsx)("span",{children:s})]})}const O={tags:"tags_jXut",tag:"tag_QGVx"};function E(e){let{tags:t}=e;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("b",{children:(0,o.jsx)(h.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,o.jsx)("ul",{className:(0,u.A)(O.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,o.jsx)("li",{className:O.tag,children:(0,o.jsx)(T,Object.assign({},e))},e.permalink)))})]})}var H=n(8587);const M={iconEdit:"iconEdit_Z9Sw"},I=["className"];function S(e){let{className:t}=e,n=(0,H.A)(e,I);return(0,o.jsx)("svg",Object.assign({fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,u.A)(M.iconEdit,t),"aria-hidden":"true"},n,{children:(0,o.jsx)("g",{children:(0,o.jsx)("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"})})}))}function U(e){let{editUrl:t}=e;return(0,o.jsxs)(b.A,{to:t,className:v.G.common.editThisPage,children:[(0,o.jsx)(S,{}),(0,o.jsx)(h.A,{id:"theme.common.editThisPage",description:"The link label to edit the current page",children:"Edit this page"})]})}function V(e){void 0===e&&(e={});const{i18n:{currentLocale:t}}=(0,j.A)(),n=function(){const{i18n:{currentLocale:e,localeConfigs:t}}=(0,j.A)();return t[e].calendar}();return new Intl.DateTimeFormat(t,Object.assign({calendar:n},e))}function R(e){let{lastUpdatedAt:t}=e;const n=new Date(t),s=V({day:"numeric",month:"short",year:"numeric",timeZone:"UTC"}).format(n);return(0,o.jsx)(h.A,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:(0,o.jsx)("b",{children:(0,o.jsx)("time",{dateTime:n.toISOString(),itemProp:"dateModified",children:s})})},children:" on {date}"})}function z(e){let{lastUpdatedBy:t}=e;return(0,o.jsx)(h.A,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:(0,o.jsx)("b",{children:t})},children:" by {user}"})}function P(e){let{lastUpdatedAt:t,lastUpdatedBy:n}=e;return(0,o.jsxs)("span",{className:v.G.common.lastUpdated,children:[(0,o.jsx)(h.A,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:t?(0,o.jsx)(R,{lastUpdatedAt:t}):"",byUser:n?(0,o.jsx)(z,{lastUpdatedBy:n}):""},children:"Last updated{atDate}{byUser}"}),!1]})}const G={lastUpdated:"lastUpdated_JAkA"};function D(e){let{className:t,editUrl:n,lastUpdatedAt:s,lastUpdatedBy:a}=e;return(0,o.jsxs)("div",{className:(0,u.A)("row",t),children:[(0,o.jsx)("div",{className:"col",children:n&&(0,o.jsx)(U,{editUrl:n})}),(0,o.jsx)("div",{className:(0,u.A)("col",G.lastUpdated),children:(s||a)&&(0,o.jsx)(P,{lastUpdatedAt:s,lastUpdatedBy:a})})]})}function F(){const{metadata:e}=r(),{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s,tags:a}=e,i=a.length>0,l=!!(t||n||s);return i||l?(0,o.jsxs)("footer",{className:(0,u.A)(v.G.docs.docFooter,"docusaurus-mt-lg"),children:[i&&(0,o.jsx)("div",{className:(0,u.A)("row margin-top--sm",v.G.docs.docFooterTagsRow),children:(0,o.jsx)("div",{className:"col",children:(0,o.jsx)(E,{tags:a})})}),l&&(0,o.jsx)(D,{className:(0,u.A)("margin-top--sm",v.G.docs.docFooterEditMetaRow),editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s})]}):null}var W=n(1422),q=n(6342);const Z=["parentIndex"];function $(e){const t=e.map((e=>Object.assign({},e,{parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const s=n.slice(2,e.level);e.parentIndex=Math.max(...s),n[e.level]=t}));const s=[];return t.forEach((e=>{const{parentIndex:n}=e,a=(0,H.A)(e,Z);n>=0?t[n].children.push(a):s.push(a)})),s}function J(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:s}=e;return t.flatMap((e=>{const t=J({toc:e.children,minHeadingLevel:n,maxHeadingLevel:s});return function(e){return e.level>=n&&e.level<=s}(e)?[Object.assign({},e,{children:t})]:t}))}function Y(e){const t=e.getBoundingClientRect();return t.top===t.bottom?Y(e.parentNode):t}function K(e,t){var n;let{anchorTopOffset:s}=t;const a=e.find((e=>Y(e).top>=s));if(a){var i;return function(e){return e.top>0&&e.bottom{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function X(e){const t=(0,s.useRef)(void 0),n=Q();(0,s.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:s,linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:o}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(s),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const s=[];for(let a=t;a<=n;a+=1)s.push("h"+a+".anchor");return Array.from(document.querySelectorAll(s.join()))}({minHeadingLevel:i,maxHeadingLevel:o}),c=K(l,{anchorTopOffset:n.current}),r=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===r)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}function ee(e){let{toc:t,className:n,linkClassName:s,isChild:a}=e;return t.length?(0,o.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,o.jsxs)("li",{children:[(0,o.jsx)(b.A,{to:"#"+e.id,className:null!=s?s:void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,o.jsx)(ee,{isChild:!0,toc:e.children,className:n,linkClassName:s})]},e.id)))}):null}const te=s.memo(ee),ne=["toc","className","linkClassName","linkActiveClassName","minHeadingLevel","maxHeadingLevel"];function se(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:a="table-of-contents__link",linkActiveClassName:i,minHeadingLevel:l,maxHeadingLevel:c}=e,r=(0,H.A)(e,ne);const d=(0,q.p)(),u=null!=l?l:d.tableOfContents.minHeadingLevel,m=null!=c?c:d.tableOfContents.maxHeadingLevel,h=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,s.useMemo)((()=>J({toc:$(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:u,maxHeadingLevel:m});return X((0,s.useMemo)((()=>{if(a&&i)return{linkClassName:a,linkActiveClassName:i,minHeadingLevel:u,maxHeadingLevel:m}}),[a,i,u,m])),(0,o.jsx)(te,Object.assign({toc:h,className:n,linkClassName:a},r))}const ae={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"},ie=["collapsed"];function oe(e){let{collapsed:t}=e,n=(0,H.A)(e,ie);return(0,o.jsx)("button",Object.assign({type:"button"},n,{className:(0,u.A)("clean-btn",ae.tocCollapsibleButton,!t&&ae.tocCollapsibleButtonExpanded,n.className),children:(0,o.jsx)(h.A,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})}))}const le={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function ce(e){let{toc:t,className:n,minHeadingLevel:s,maxHeadingLevel:a}=e;const{collapsed:i,toggleCollapsed:l}=(0,W.u)({initialState:!0});return(0,o.jsxs)("div",{className:(0,u.A)(le.tocCollapsible,!i&&le.tocCollapsibleExpanded,n),children:[(0,o.jsx)(oe,{collapsed:i,onClick:l}),(0,o.jsx)(W.N,{lazy:!0,className:le.tocCollapsibleContent,collapsed:i,children:(0,o.jsx)(se,{toc:t,minHeadingLevel:s,maxHeadingLevel:a})})]})}const re={tocMobile:"tocMobile_ITEo"};function de(){const{toc:e,frontMatter:t}=r();return(0,o.jsx)(ce,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:(0,u.A)(v.G.docs.docTocMobile,re.tocMobile)})}const ue={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"},me=["className"],he="table-of-contents__link toc-highlight",be="table-of-contents__link--active";function pe(e){let{className:t}=e,n=(0,H.A)(e,me);return(0,o.jsx)("div",{className:(0,u.A)(ue.tableOfContents,"thin-scrollbar",t),children:(0,o.jsx)(se,Object.assign({},n,{linkClassName:he,linkActiveClassName:be}))})}function ge(){const{toc:e,frontMatter:t}=r();return(0,o.jsx)(pe,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:v.G.docs.docTocDesktop})}var fe=n(1107),je=n(8453),xe=n(5260),ve=n(2303),Ne=n(5293);function Ae(){const{prism:e}=(0,q.p)(),{colorMode:t}=(0,Ne.G)(),n=e.theme,s=e.darkTheme||n;return"dark"===t?s:n}var Ce=n(8634),ye=n(8426),ke=n.n(ye);const Le=(0,Ce.A)(/title=(["'])(.*?)\1/,{quote:1,title:2}),_e=(0,Ce.A)(/\{([\d,-]+)\}/,{range:1}),Be={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},we=Object.assign({},Be,{lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}}),Te=Object.keys(Be);function Oe(e,t){const n=e.map((e=>{const{start:n,end:s}=we[e];return"(?:"+n+"\\s*("+t.flatMap((e=>{var t,n;return[e.line,null==(t=e.block)?void 0:t.start,null==(n=e.block)?void 0:n.end].filter(Boolean)})).join("|")+")\\s*"+s+")"})).join("|");return new RegExp("^\\s*(?:"+n+")\\s*$")}function Ee(e,t){let n=e.replace(/\n$/,"");const{language:s,magicComments:a,metastring:i}=t;if(i&&_e.test(i)){const e=i.match(_e).groups.range;if(0===a.length)throw new Error("A highlight range has been given in code block's metastring (``` "+i+"), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.");const t=a[0].className,s=ke()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(s),code:n}}if(void 0===s)return{lineClassNames:{},code:n};const o=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return Oe(["js","jsBlock"],t);case"jsx":case"tsx":return Oe(["js","jsBlock","jsx"],t);case"html":return Oe(["js","jsBlock","html"],t);case"python":case"py":case"bash":return Oe(["bash"],t);case"markdown":case"md":return Oe(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return Oe(["tex"],t);case"lua":case"haskell":return Oe(["lua"],t);case"sql":return Oe(["lua","jsBlock"],t);case"wasm":return Oe(["wasm"],t);case"vb":case"vba":case"visual-basic":return Oe(["vb","rem"],t);case"vbnet":return Oe(["vbnet","rem"],t);case"batch":return Oe(["rem"],t);case"basic":return Oe(["rem","f90"],t);case"fsharp":return Oe(["js","ml"],t);case"ocaml":case"sml":return Oe(["ml"],t);case"fortran":return Oe(["f90"],t);case"cobol":return Oe(["cobol"],t);default:return Oe(Te,t)}}(s,a),l=n.split("\n"),c=Object.fromEntries(a.map((e=>[e.className,{start:0,range:""}]))),r=Object.fromEntries(a.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),d=Object.fromEntries(a.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),u=Object.fromEntries(a.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let h=0;hvoid 0!==e));r[t]?c[r[t]].range+=h+",":d[t]?c[d[t]].start=h:u[t]&&(c[u[t]].range+=c[u[t]].start+"-"+(h-1)+","),l.splice(h,1)}n=l.join("\n");const m={};return Object.entries(c).forEach((e=>{let[t,{range:n}]=e;ke()(n).forEach((e=>{null!=m[e]||(m[e]=[]),m[e].push(t)}))})),{lineClassNames:m,code:n}}const He="codeBlockContainer_Ckt0",Me=["as"];function Ie(e){let{as:t}=e,n=(0,H.A)(e,Me);const s=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[s,a]=e;const i=t[s];i&&"string"==typeof a&&(n[i]=a)})),n}(Ae());return(0,o.jsx)(t,Object.assign({},n,{style:s,className:(0,u.A)(n.className,He,v.G.common.codeBlock)}))}const Se={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function Ue(e){let{children:t,className:n}=e;return(0,o.jsx)(Ie,{as:"pre",tabIndex:0,className:(0,u.A)(Se.codeBlockStandalone,"thin-scrollbar",n),children:(0,o.jsx)("code",{className:Se.codeBlockLines,children:t})})}const Ve={attributes:!0,characterData:!0,childList:!0,subtree:!0};function Re(e,t){const[n,a]=(0,s.useState)(),o=(0,s.useCallback)((()=>{var t;a(null==(t=e.current)?void 0:t.closest("[role=tabpanel][hidden]"))}),[e,a]);(0,s.useEffect)((()=>{o()}),[o]),function(e,t,n){void 0===n&&(n=Ve);const a=(0,i._q)(t),o=(0,i.Be)(n);(0,s.useEffect)((()=>{const t=new MutationObserver(a);return e&&t.observe(e,o),()=>t.disconnect()}),[e,a,o])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),o())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var ze=n(1765);const Pe="codeLine_lJS_",Ge="codeLineNumber_Tfdd",De="codeLineContent_feaV";function Fe(e){let{line:t,classNames:n,showLineNumbers:s,getLineProps:a,getTokenProps:i}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const l=a({line:t,className:(0,u.A)(n,s&&Pe)}),c=t.map(((e,t)=>(0,o.jsx)("span",Object.assign({},i({token:e})),t)));return(0,o.jsxs)("span",Object.assign({},l,{children:[s?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("span",{className:Ge}),(0,o.jsx)("span",{className:De,children:c})]}):c,(0,o.jsx)("br",{})]}))}function We(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 24 24"},e,{children:(0,o.jsx)("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"})}))}function qe(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 24 24"},e,{children:(0,o.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})}))}const Ze={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function $e(e){let{code:t,className:n}=e;const[a,i]=(0,s.useState)(!1),l=(0,s.useRef)(void 0),c=(0,s.useCallback)((()=>{!function(e,t){let{target:n=document.body}=void 0===t?{}:t;if("string"!=typeof e)throw new TypeError("Expected parameter `text` to be a `string`, got `"+typeof e+"`.");const s=document.createElement("textarea"),a=document.activeElement;s.value=e,s.setAttribute("readonly",""),s.style.contain="strict",s.style.position="absolute",s.style.left="-9999px",s.style.fontSize="12pt";const i=document.getSelection(),o=i.rangeCount>0&&i.getRangeAt(0);n.append(s),s.select(),s.selectionStart=0,s.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch(c){}s.remove(),o&&(i.removeAllRanges(),i.addRange(o)),a&&a.focus()}(t),i(!0),l.current=window.setTimeout((()=>{i(!1)}),1e3)}),[t]);return(0,s.useEffect)((()=>()=>window.clearTimeout(l.current)),[]),(0,o.jsx)("button",{type:"button","aria-label":a?(0,h.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,h.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,h.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,u.A)("clean-btn",n,Ze.copyButton,a&&Ze.copyButtonCopied),onClick:c,children:(0,o.jsxs)("span",{className:Ze.copyButtonIcons,"aria-hidden":"true",children:[(0,o.jsx)(We,{className:Ze.copyButtonIcon}),(0,o.jsx)(qe,{className:Ze.copyButtonSuccessIcon})]})})}function Je(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 24 24"},e,{children:(0,o.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})}))}const Ye="wordWrapButtonIcon_Bwma",Ke="wordWrapButtonEnabled_EoeP";function Qe(e){let{className:t,onClick:n,isEnabled:s}=e;const a=(0,h.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,o.jsx)("button",{type:"button",onClick:n,className:(0,u.A)("clean-btn",t,s&&Ke),"aria-label":a,title:a,children:(0,o.jsx)(Je,{className:Ye,"aria-hidden":"true"})})}function Xe(e){var t;let{children:n,className:a="",metastring:i,title:l,showLineNumbers:c,language:r}=e;const{prism:{defaultLanguage:d,magicComments:m}}=(0,q.p)(),h=function(e){return null==e?void 0:e.toLowerCase()}(null!=(t=null!=r?r:function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return null==t?void 0:t.replace(/language-/,"")}(a))?t:d),b=Ae(),p=function(){const[e,t]=(0,s.useState)(!1),[n,a]=(0,s.useState)(!1),i=(0,s.useRef)(null),o=(0,s.useCallback)((()=>{const n=i.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[i,e]),l=(0,s.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=i.current,n=e>t||i.current.querySelector("code").hasAttribute("style");a(n)}),[i]);return Re(i,l),(0,s.useEffect)((()=>{l()}),[e,l]),(0,s.useEffect)((()=>(window.addEventListener("resize",l,{passive:!0}),()=>{window.removeEventListener("resize",l)})),[l]),{codeBlockRef:i,isEnabled:e,isCodeScrollable:n,toggle:o}}(),g=function(e){var t,n;return null!=(t=null==e||null==(n=e.match(Le))?void 0:n.groups.title)?t:""}(i)||l,{lineClassNames:f,code:j}=Ee(n,{metastring:i,language:h,magicComments:m}),x=null!=c?c:function(e){return Boolean(null==e?void 0:e.includes("showLineNumbers"))}(i);return(0,o.jsxs)(Ie,{as:"div",className:(0,u.A)(a,h&&!a.includes("language-"+h)&&"language-"+h),children:[g&&(0,o.jsx)("div",{className:Se.codeBlockTitle,children:g}),(0,o.jsxs)("div",{className:Se.codeBlockContent,children:[(0,o.jsx)(ze.f4,{theme:b,code:j,language:null!=h?h:"text",children:e=>{let{className:t,style:n,tokens:s,getLineProps:a,getTokenProps:i}=e;return(0,o.jsx)("pre",{tabIndex:0,ref:p.codeBlockRef,className:(0,u.A)(t,Se.codeBlock,"thin-scrollbar"),style:n,children:(0,o.jsx)("code",{className:(0,u.A)(Se.codeBlockLines,x&&Se.codeBlockLinesWithNumbering),children:s.map(((e,t)=>(0,o.jsx)(Fe,{line:e,getLineProps:a,getTokenProps:i,classNames:f[t],showLineNumbers:x},t)))})})}}),(0,o.jsxs)("div",{className:Se.buttonGroup,children:[(p.isEnabled||p.isCodeScrollable)&&(0,o.jsx)(Qe,{className:Se.codeButton,onClick:()=>p.toggle(),isEnabled:p.isEnabled}),(0,o.jsx)($e,{className:Se.codeButton,code:j})]})]})]})}const et=["children"];function tt(e){let{children:t}=e,n=(0,H.A)(e,et);const a=(0,ve.A)(),i=function(e){return s.Children.toArray(e).some((e=>(0,s.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),l="string"==typeof i?Xe:Ue;return(0,o.jsx)(l,Object.assign({},n,{children:i}),String(a))}function nt(e){return(0,o.jsx)("code",Object.assign({},e))}var st=n(3427);const at="details_lb9f",it="isBrowser_bmU9",ot="collapsibleContent_i85q",lt=["summary","children"];function ct(e){return!!e&&("SUMMARY"===e.tagName||ct(e.parentElement))}function rt(e,t){return!!e&&(e===t||rt(e.parentElement,t))}function dt(e){let{summary:t,children:n}=e,a=(0,H.A)(e,lt);(0,st.A)().collectAnchor(a.id);const i=(0,ve.A)(),l=(0,s.useRef)(null),{collapsed:c,setCollapsed:r}=(0,W.u)({initialState:!a.open}),[d,m]=(0,s.useState)(a.open),h=s.isValidElement(t)?t:(0,o.jsx)("summary",{children:null!=t?t:"Details"});return(0,o.jsxs)("details",Object.assign({},a,{ref:l,open:d,"data-collapsed":c,className:(0,u.A)(at,i&&it,a.className),onMouseDown:e=>{ct(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();const t=e.target;ct(t)&&rt(t,l.current)&&(e.preventDefault(),c?(r(!1),m(!0)):r(!0))},children:[h,(0,o.jsx)(W.N,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:e=>{r(e),m(!e)},children:(0,o.jsx)("div",{className:ot,children:n})})]}))}const ut="details_b_Ee";function mt(e){let t=Object.assign({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return(0,o.jsx)(dt,Object.assign({},t,{className:(0,u.A)("alert alert--info",ut,t.className)}))}function ht(e){const t=s.Children.toArray(e.children),n=t.find((e=>s.isValidElement(e)&&"summary"===e.type)),a=(0,o.jsx)(o.Fragment,{children:t.filter((e=>e!==n))});return(0,o.jsx)(mt,Object.assign({},e,{summary:n,children:a}))}function bt(e){return(0,o.jsx)(fe.A,Object.assign({},e))}const pt="containsTaskList_mC6p";function gt(e){if(void 0!==e)return(0,u.A)(e,(null==e?void 0:e.includes("contains-task-list"))&&pt)}const ft="img_ev3q";function jt(e){var t;const{mdxAdmonitionTitle:n,rest:a}=function(e){const t=s.Children.toArray(e),n=t.find((e=>s.isValidElement(e)&&"mdxAdmonitionTitle"===e.type)),a=t.filter((e=>e!==n));return{mdxAdmonitionTitle:null==n?void 0:n.props.children,rest:a.length>0?(0,o.jsx)(o.Fragment,{children:a}):null}}(e.children),i=null!=(t=e.title)?t:n;return Object.assign({},e,i&&{title:i},{children:a})}const xt="admonition_xJq3",vt="admonitionHeading_Gvgb",Nt="admonitionIcon_Rf37",At="admonitionContent_BuS1";function Ct(e){let{type:t,className:n,children:s}=e;return(0,o.jsx)("div",{className:(0,u.A)(v.G.common.admonition,v.G.common.admonitionType(t),xt,n),children:s})}function yt(e){let{icon:t,title:n}=e;return(0,o.jsxs)("div",{className:vt,children:[(0,o.jsx)("span",{className:Nt,children:t}),n]})}function kt(e){let{children:t}=e;return t?(0,o.jsx)("div",{className:At,children:t}):null}function Lt(e){const{type:t,icon:n,title:s,children:a,className:i}=e;return(0,o.jsxs)(Ct,{type:t,className:i,children:[s||n?(0,o.jsx)(yt,{title:s,icon:n}):null,(0,o.jsx)(kt,{children:a})]})}function _t(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 14 16"},e,{children:(0,o.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})}))}const Bt={icon:(0,o.jsx)(_t,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function wt(e){return(0,o.jsx)(Lt,Object.assign({},Bt,e,{className:(0,u.A)("alert alert--secondary",e.className),children:e.children}))}function Tt(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 12 16"},e,{children:(0,o.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})}))}const Ot={icon:(0,o.jsx)(Tt,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function Et(e){return(0,o.jsx)(Lt,Object.assign({},Ot,e,{className:(0,u.A)("alert alert--success",e.className),children:e.children}))}function Ht(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 14 16"},e,{children:(0,o.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})}))}const Mt={icon:(0,o.jsx)(Ht,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function It(e){return(0,o.jsx)(Lt,Object.assign({},Mt,e,{className:(0,u.A)("alert alert--info",e.className),children:e.children}))}function St(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 16 16"},e,{children:(0,o.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})}))}const Ut={icon:(0,o.jsx)(St,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})};function Vt(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 12 16"},e,{children:(0,o.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})}))}const Rt={icon:(0,o.jsx)(Vt,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})};const zt={icon:(0,o.jsx)(St,{}),title:(0,o.jsx)(h.A,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})};const Pt={note:wt,tip:Et,info:It,warning:function(e){return(0,o.jsx)(Lt,Object.assign({},Ut,e,{className:(0,u.A)("alert alert--warning",e.className),children:e.children}))},danger:function(e){return(0,o.jsx)(Lt,Object.assign({},Rt,e,{className:(0,u.A)("alert alert--danger",e.className),children:e.children}))}},Gt={secondary:e=>(0,o.jsx)(wt,Object.assign({title:"secondary"},e)),important:e=>(0,o.jsx)(It,Object.assign({title:"important"},e)),success:e=>(0,o.jsx)(Et,Object.assign({title:"success"},e)),caution:function(e){return(0,o.jsx)(Lt,Object.assign({},zt,e,{className:(0,u.A)("alert alert--warning",e.className),children:e.children}))}},Dt=Object.assign({},Pt,Gt);function Ft(e){const t=jt(e),n=(s=t.type,Dt[s]||(console.warn('No admonition component found for admonition type "'+s+'". Using Info as fallback.'),Dt.info));var s;return(0,o.jsx)(n,Object.assign({},t))}const Wt={Head:xe.A,details:ht,Details:ht,code:function(e){return function(e){return void 0!==e.children&&s.Children.toArray(e.children).every((e=>"string"==typeof e&&!e.includes("\n")))}(e)?(0,o.jsx)(nt,Object.assign({},e)):(0,o.jsx)(tt,Object.assign({},e))},a:function(e){return(0,o.jsx)(b.A,Object.assign({},e))},pre:function(e){return(0,o.jsx)(o.Fragment,{children:e.children})},ul:function(e){return(0,o.jsx)("ul",Object.assign({},e,{className:gt(e.className)}))},li:function(e){return(0,st.A)().collectAnchor(e.id),(0,o.jsx)("li",Object.assign({},e))},img:function(e){return(0,o.jsx)("img",Object.assign({decoding:"async",loading:"lazy"},e,{className:(t=e.className,(0,u.A)(t,ft))}));var t},h1:e=>(0,o.jsx)(bt,Object.assign({as:"h1"},e)),h2:e=>(0,o.jsx)(bt,Object.assign({as:"h2"},e)),h3:e=>(0,o.jsx)(bt,Object.assign({as:"h3"},e)),h4:e=>(0,o.jsx)(bt,Object.assign({as:"h4"},e)),h5:e=>(0,o.jsx)(bt,Object.assign({as:"h5"},e)),h6:e=>(0,o.jsx)(bt,Object.assign({as:"h6"},e)),admonition:Ft,mermaid:()=>null};function qt(e){let{children:t}=e;return(0,o.jsx)(je.x,{components:Wt,children:t})}function Zt(e){let{children:t}=e;const n=function(){const{metadata:e,frontMatter:t,contentTitle:n}=r();return t.hide_title||void 0!==n?null:e.title}();return(0,o.jsxs)("div",{className:(0,u.A)(v.G.docs.docMarkdown,"markdown"),children:[n&&(0,o.jsx)("header",{children:(0,o.jsx)(fe.A,{as:"h1",children:n})}),(0,o.jsx)(qt,{children:t})]})}var $t=n(6972),Jt=n(9169),Yt=n(6025);function Kt(e){return(0,o.jsx)("svg",Object.assign({viewBox:"0 0 24 24"},e,{children:(0,o.jsx)("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"})}))}const Qt={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function Xt(){const e=(0,Yt.Ay)("/");return(0,o.jsx)("li",{className:"breadcrumbs__item",children:(0,o.jsx)(b.A,{"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,o.jsx)(Kt,{className:Qt.breadcrumbHomeIcon})})})}const en={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function tn(e){let{children:t,href:n,isLast:s}=e;const a="breadcrumbs__link";return s?(0,o.jsx)("span",{className:a,itemProp:"name",children:t}):n?(0,o.jsx)(b.A,{className:a,href:n,itemProp:"item",children:(0,o.jsx)("span",{itemProp:"name",children:t})}):(0,o.jsx)("span",{className:a,children:t})}function nn(e){let{children:t,active:n,index:s,addMicrodata:a}=e;return(0,o.jsxs)("li",Object.assign({},a&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},{className:(0,u.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,o.jsx)("meta",{itemProp:"position",content:String(s+1)})]}))}function sn(){const e=(0,$t.OF)(),t=(0,Jt.Dt)();return e?(0,o.jsx)("nav",{className:(0,u.A)(v.G.docs.docBreadcrumbs,en.breadcrumbsContainer),"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,o.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,o.jsx)(Xt,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,o.jsx)(nn,{active:s,index:n,addMicrodata:!!a,children:(0,o.jsx)(tn,{href:a,isLast:s,children:t.label})},n)}))]})}):null}function an(){return(0,o.jsx)(h.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function on(){return(0,o.jsx)(h.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function ln(){return(0,o.jsx)(xe.A,{children:(0,o.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function cn(){return(0,o.jsx)(h.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function rn(){return(0,o.jsx)(h.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}function dn(e){let{className:t}=e;return(0,o.jsx)(Ft,{type:"caution",title:(0,o.jsx)(cn,{}),className:(0,u.A)(t,v.G.common.draftBanner),children:(0,o.jsx)(rn,{})})}function un(e){let{className:t}=e;return(0,o.jsx)(Ft,{type:"caution",title:(0,o.jsx)(an,{}),className:(0,u.A)(t,v.G.common.unlistedBanner),children:(0,o.jsx)(on,{})})}function mn(e){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(ln,{}),(0,o.jsx)(un,Object.assign({},e))]})}function hn(e){let{metadata:t}=e;const{unlisted:n,frontMatter:s}=t;return(0,o.jsxs)(o.Fragment,{children:[(n||s.unlisted)&&(0,o.jsx)(mn,{}),s.draft&&(0,o.jsx)(dn,{})]})}const bn={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function pn(e){let{children:t}=e;const n=function(){const{frontMatter:e,toc:t}=r(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,o.jsx)(de,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,o.jsx)(ge,{})}}(),{metadata:s}=r();return(0,o.jsxs)("div",{className:"row",children:[(0,o.jsxs)("div",{className:(0,u.A)("col",!n.hidden&&bn.docItemCol),children:[(0,o.jsx)(hn,{metadata:s}),(0,o.jsx)(_,{}),(0,o.jsxs)("div",{className:bn.docItemContainer,children:[(0,o.jsxs)("article",{children:[(0,o.jsx)(sn,{}),(0,o.jsx)(B,{}),n.mobile,(0,o.jsx)(Zt,{children:t}),(0,o.jsx)(F,{})]}),(0,o.jsx)(f,{})]})]}),n.desktop&&(0,o.jsx)("div",{className:"col col--3",children:n.desktop})]})}function gn(e){const t="docs-doc-id-"+e.content.metadata.id,n=e.content;return(0,o.jsx)(c,{content:e.content,children:(0,o.jsxs)(a.e3,{className:t,children:[(0,o.jsx)(d,{}),(0,o.jsx)(pn,{children:(0,o.jsx)(n,{})})]})})}},8426:(e,t)=>{function n(e){let t,n=[];for(let s of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(s))n.push(parseInt(s,10));else if(t=s.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,s,a,i]=t;if(s&&i){s=parseInt(s),i=parseInt(i);const e=s{"use strict";n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const a={},i=s.createContext(a);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/17896441.a133d223.js b/assets/js/17896441.a133d223.js
deleted file mode 100644
index 6872edff..00000000
--- a/assets/js/17896441.a133d223.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[7918],{3905:(e,t,n)=>{"use strict";n.d(t,{Zo:()=>u,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=a.createContext({}),s=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.createElement(c.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},p=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,f=d["".concat(c,".").concat(p)]||d[p]||m[p]||o;return n?a.createElement(f,l(l({ref:t},u),{},{components:n})):a.createElement(f,l({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:r,l[1]=i;for(var s=2;s{"use strict";n.r(t),n.d(t,{default:()=>Dt});var a=n(7294),r=n(1944),o=n(9688),l=a.createContext(null);function i(e){var t=e.children,n=function(e){return(0,a.useMemo)((function(){return{metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc}}),[e])}(e.content);return a.createElement(l.Provider,{value:n},t)}function c(){var e=(0,a.useContext)(l);if(null===e)throw new o.i6("DocProvider");return e}function s(){var e,t=c(),n=t.metadata,o=t.frontMatter,l=t.assets;return a.createElement(r.d,{title:n.title,description:n.description,keywords:o.keywords,image:null!=(e=l.image)?e:o.image})}var u=n(6010),d=n(7524),m=n(7462),p=n(5999),f=n(9960);function v(e){var t=e.permalink,n=e.title,r=e.subLabel,o=e.isNext;return a.createElement(f.Z,{className:(0,u.Z)("pagination-nav__link",o?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t},r&&a.createElement("div",{className:"pagination-nav__sublabel"},r),a.createElement("div",{className:"pagination-nav__label"},n))}function h(e){var t=e.previous,n=e.next;return a.createElement("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,p.I)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"})},t&&a.createElement(v,(0,m.Z)({},t,{subLabel:a.createElement(p.Z,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc"},"Previous")})),n&&a.createElement(v,(0,m.Z)({},n,{subLabel:a.createElement(p.Z,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc"},"Next"),isNext:!0})))}function g(){var e=c().metadata;return a.createElement(h,{previous:e.previous,next:e.next})}var b=n(2263),E=n(143),y=n(5281),k=n(373),N=n(4477);var C={unreleased:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(p.Z,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is unreleased documentation for {siteTitle} {versionLabel} version.")},unmaintained:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(p.Z,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.")}};function L(e){var t=C[e.versionMetadata.banner];return a.createElement(t,e)}function T(e){var t=e.versionLabel,n=e.to,r=e.onClick;return a.createElement(p.Z,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:a.createElement("b",null,a.createElement(f.Z,{to:n,onClick:r},a.createElement(p.Z,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label"},"latest version")))}},"For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).")}function Z(e){var t,n=e.className,r=e.versionMetadata,o=(0,b.Z)().siteConfig.title,l=(0,E.gA)({failfast:!0}).pluginId,i=(0,k.J)(l).savePreferredVersionName,c=(0,E.Jo)(l),s=c.latestDocSuggestion,d=c.latestVersionSuggestion,m=null!=s?s:(t=d).docs.find((function(e){return e.id===t.mainDocId}));return a.createElement("div",{className:(0,u.Z)(n,y.k.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert"},a.createElement("div",null,a.createElement(L,{siteTitle:o,versionMetadata:r})),a.createElement("div",{className:"margin-top--md"},a.createElement(T,{versionLabel:d.label,to:m.path,onClick:function(){return i(d.name)}})))}function _(e){var t=e.className,n=(0,N.E)();return n.banner?a.createElement(Z,{className:t,versionMetadata:n}):null}function w(e){var t=e.className,n=(0,N.E)();return n.badge?a.createElement("span",{className:(0,u.Z)(t,y.k.docs.docVersionBadge,"badge badge--secondary")},a.createElement(p.Z,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label}},"Version: {versionLabel}")):null}function x(e){var t=e.lastUpdatedAt,n=e.formattedLastUpdatedAt;return a.createElement(p.Z,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:a.createElement("b",null,a.createElement("time",{dateTime:new Date(1e3*t).toISOString()},n))}}," on {date}")}function B(e){var t=e.lastUpdatedBy;return a.createElement(p.Z,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:a.createElement("b",null,t)}}," by {user}")}function O(e){var t=e.lastUpdatedAt,n=e.formattedLastUpdatedAt,r=e.lastUpdatedBy;return a.createElement("span",{className:y.k.common.lastUpdated},a.createElement(p.Z,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:t&&n?a.createElement(x,{lastUpdatedAt:t,formattedLastUpdatedAt:n}):"",byUser:r?a.createElement(B,{lastUpdatedBy:r}):""}},"Last updated{atDate}{byUser}"),!1)}var H=n(3366);const j={iconEdit:"iconEdit_Z9Sw"};var A=["className"];function I(e){var t=e.className,n=(0,H.Z)(e,A);return a.createElement("svg",(0,m.Z)({fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,u.Z)(j.iconEdit,t),"aria-hidden":"true"},n),a.createElement("g",null,a.createElement("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"})))}function S(e){var t=e.editUrl;return a.createElement("a",{href:t,target:"_blank",rel:"noreferrer noopener",className:y.k.common.editThisPage},a.createElement(I,null),a.createElement(p.Z,{id:"theme.common.editThisPage",description:"The link label to edit the current page"},"Edit this page"))}const M={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};function P(e){var t=e.permalink,n=e.label,r=e.count;return a.createElement(f.Z,{href:t,className:(0,u.Z)(M.tag,r?M.tagWithCount:M.tagRegular)},n,r&&a.createElement("span",null,r))}const U={tags:"tags_jXut",tag:"tag_QGVx"};function z(e){var t=e.tags;return a.createElement(a.Fragment,null,a.createElement("b",null,a.createElement(p.Z,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list"},"Tags:")),a.createElement("ul",{className:(0,u.Z)(U.tags,"padding--none","margin-left--sm")},t.map((function(e){var t=e.label,n=e.permalink;return a.createElement("li",{key:n,className:U.tag},a.createElement(P,{label:t,permalink:n}))}))))}const V={lastUpdated:"lastUpdated_vwxv"};function D(e){return a.createElement("div",{className:(0,u.Z)(y.k.docs.docFooterTagsRow,"row margin-bottom--sm")},a.createElement("div",{className:"col"},a.createElement(z,e)))}function R(e){var t=e.editUrl,n=e.lastUpdatedAt,r=e.lastUpdatedBy,o=e.formattedLastUpdatedAt;return a.createElement("div",{className:(0,u.Z)(y.k.docs.docFooterEditMetaRow,"row")},a.createElement("div",{className:"col"},t&&a.createElement(S,{editUrl:t})),a.createElement("div",{className:(0,u.Z)("col",V.lastUpdated)},(n||r)&&a.createElement(O,{lastUpdatedAt:n,formattedLastUpdatedAt:o,lastUpdatedBy:r})))}function W(){var e=c().metadata,t=e.editUrl,n=e.lastUpdatedAt,r=e.formattedLastUpdatedAt,o=e.lastUpdatedBy,l=e.tags,i=l.length>0,s=!!(t||n||o);return i||s?a.createElement("footer",{className:(0,u.Z)(y.k.docs.docFooter,"docusaurus-mt-lg")},i&&a.createElement(D,{tags:l}),s&&a.createElement(R,{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:o,formattedLastUpdatedAt:r})):null}var F=n(6043),q=n(6668),G=["parentIndex"];function Y(e){var t=e.map((function(e){return Object.assign({},e,{parentIndex:-1,children:[]})})),n=Array(7).fill(-1);t.forEach((function(e,t){var a=n.slice(2,e.level);e.parentIndex=Math.max.apply(Math,a),n[e.level]=t}));var a=[];return t.forEach((function(e){var n=e.parentIndex,r=(0,H.Z)(e,G);n>=0?t[n].children.push(r):a.push(r)})),a}function $(e){var t=e.toc,n=e.minHeadingLevel,a=e.maxHeadingLevel;return t.flatMap((function(e){var t=$({toc:e.children,minHeadingLevel:n,maxHeadingLevel:a});return function(e){return e.level>=n&&e.level<=a}(e)?[Object.assign({},e,{children:t})]:t}))}function J(e){var t=e.getBoundingClientRect();return t.top===t.bottom?J(e.parentNode):t}function Q(e,t){var n,a,r=t.anchorTopOffset,o=e.find((function(e){return J(e).top>=r}));return o?function(e){return e.top>0&&e.bottom0})).map((function(e){return[e-1,[i]]}));return{lineClassNames:Object.fromEntries(c),code:n}}if(void 0===a)return{lineClassNames:{},code:n};for(var s=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return He(["js","jsBlock"],t);case"jsx":case"tsx":return He(["js","jsBlock","jsx"],t);case"html":return He(["js","jsBlock","html"],t);case"python":case"py":case"bash":return He(["bash"],t);case"markdown":case"md":return He(["html","jsx","bash"],t);default:return He(Object.keys(Oe),t)}}(a,r),u=n.split("\n"),d=Object.fromEntries(r.map((function(e){return[e.className,{start:0,range:""}]}))),m=Object.fromEntries(r.filter((function(e){return e.line})).map((function(e){var t=e.className;return[e.line,t]}))),p=Object.fromEntries(r.filter((function(e){return e.block})).map((function(e){var t=e.className;return[e.block.start,t]}))),f=Object.fromEntries(r.filter((function(e){return e.block})).map((function(e){var t=e.className;return[e.block.end,t]}))),v=0;v0&&e[n-1]===t?e:e.concat(t)};function Ye(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var $e=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),Re(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=We({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=We({},n,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=n})),Re(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,o=We({},Ye(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?We({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),Re(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return o[n[0]];var l=a?{display:"inline-block"}:{},i=n.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(i))}})),Re(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,o=e.token,l=We({},Ye(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?We({},l.style,r):r),void 0!==n&&(l.key=n),a&&(l.className+=" "+a),l})),Re(this,"tokenize",(function(e,t,n,a){var r={code:t,grammar:n,language:a,tokens:[]};e.hooks.run("before-tokenize",r);var o=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),o}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],o=0,l=0,i=[],c=[i];l>-1;){for(;(o=a[l]++)0?u:["plain"],s=d):(u=Ge(u,d.type),d.alias&&(u=Ge(u,d.alias)),s=d.content),"string"==typeof s){var m=s.split(Fe),p=m.length;i.push({types:u,content:m[0]});for(var f=1;f0&&l.getRangeAt(0);a.append(r),r.select(),r.selectionStart=0,r.selectionEnd=e.length;var c=!1;try{c=document.execCommand("copy")}catch(s){}r.remove(),i&&(l.removeAllRanges(),l.addRange(i)),o&&o.focus()}(t),l(!0),i.current=window.setTimeout((function(){l(!1)}),1e3)}),[t]);return(0,a.useEffect)((function(){return function(){return window.clearTimeout(i.current)}}),[]),a.createElement("button",{type:"button","aria-label":o?(0,p.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,p.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,p.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,u.Z)("clean-btn",n,tt.copyButton,o&&tt.copyButtonCopied),onClick:c},a.createElement("span",{className:tt.copyButtonIcons,"aria-hidden":"true"},a.createElement(Ke,{className:tt.copyButtonIcon}),a.createElement(et,{className:tt.copyButtonSuccessIcon})))}function at(e){return a.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24"},e),a.createElement("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"}))}const rt={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function ot(e){var t=e.className,n=e.onClick,r=e.isEnabled,o=(0,p.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return a.createElement("button",{type:"button",onClick:n,className:(0,u.Z)("clean-btn",t,r&&rt.wordWrapButtonEnabled),"aria-label":o,title:o},a.createElement(at,{className:rt.wordWrapButtonIcon,"aria-hidden":"true"}))}function lt(e){var t,n,r,o,l,i,c,s,d,p,f,v=e.children,h=e.className,g=void 0===h?"":h,b=e.metastring,E=e.title,y=e.showLineNumbers,k=e.language,N=(0,q.L)().prism,C=N.defaultLanguage,L=N.magicComments,T=null!=(t=null!=k?k:null==(n=g.split(" ").find((function(e){return e.startsWith("language-")})))?void 0:n.replace(/language-/,""))?t:C,Z=Te(),_=(r=(0,a.useState)(!1),o=r[0],l=r[1],i=(0,a.useState)(!1),c=i[0],s=i[1],d=(0,a.useRef)(null),p=(0,a.useCallback)((function(){var e=d.current.querySelector("code");o?e.removeAttribute("style"):(e.style.whiteSpace="pre-wrap",e.style.overflowWrap="anywhere"),l((function(e){return!e}))}),[d,o]),f=(0,a.useCallback)((function(){var e=d.current,t=e.scrollWidth>e.clientWidth||d.current.querySelector("code").hasAttribute("style");s(t)}),[d]),ze(d,f),(0,a.useEffect)((function(){f()}),[o,f]),(0,a.useEffect)((function(){return window.addEventListener("resize",f,{passive:!0}),function(){window.removeEventListener("resize",f)}}),[f]),{codeBlockRef:d,isEnabled:o,isCodeScrollable:c,toggle:p}),w=function(e){var t,n;return null!=(t=null==e||null==(n=e.match(xe))?void 0:n.groups.title)?t:""}(b)||E,x=je(v,{metastring:b,language:T,magicComments:L}),B=x.lineClassNames,O=x.code,H=null!=y?y:function(e){return Boolean(null==e?void 0:e.includes("showLineNumbers"))}(b);return a.createElement(Se,{as:"div",className:(0,u.Z)(g,T&&!g.includes("language-"+T)&&"language-"+T)},w&&a.createElement("div",{className:Me.codeBlockTitle},w),a.createElement("div",{className:Me.codeBlockContent},a.createElement(Je,(0,m.Z)({},De,{theme:Z,code:O,language:null!=T?T:"text"}),(function(e){var t=e.className,n=e.tokens,r=e.getLineProps,o=e.getTokenProps;return a.createElement("pre",{tabIndex:0,ref:_.codeBlockRef,className:(0,u.Z)(t,Me.codeBlock,"thin-scrollbar")},a.createElement("code",{className:(0,u.Z)(Me.codeBlockLines,H&&Me.codeBlockLinesWithNumbering)},n.map((function(e,t){return a.createElement(Xe,{key:t,line:e,getLineProps:r,getTokenProps:o,classNames:B[t],showLineNumbers:H})}))))})),a.createElement("div",{className:Me.buttonGroup},(_.isEnabled||_.isCodeScrollable)&&a.createElement(ot,{className:Me.codeButton,onClick:function(){return _.toggle()},isEnabled:_.isEnabled}),a.createElement(nt,{className:Me.codeButton,code:O}))))}var it=["children"];function ct(e){var t=e.children,n=(0,H.Z)(e,it),r=(0,Ce.Z)(),o=function(e){return a.Children.toArray(e).some((function(e){return(0,a.isValidElement)(e)}))?e:Array.isArray(e)?e.join(""):e}(t),l="string"==typeof o?lt:Pe;return a.createElement(l,(0,m.Z)({key:String(r)},n),o)}const st={details:"details_lb9f",isBrowser:"isBrowser_bmU9",collapsibleContent:"collapsibleContent_i85q"};var ut=["summary","children"];function dt(e){return!!e&&("SUMMARY"===e.tagName||dt(e.parentElement))}function mt(e,t){return!!e&&(e===t||mt(e.parentElement,t))}function pt(e){var t=e.summary,n=e.children,r=(0,H.Z)(e,ut),o=(0,Ce.Z)(),l=(0,a.useRef)(null),i=(0,F.u)({initialState:!r.open}),c=i.collapsed,s=i.setCollapsed,d=(0,a.useState)(r.open),p=d[0],f=d[1],v=a.isValidElement(t)?t:a.createElement("summary",null,null!=t?t:"Details");return a.createElement("details",(0,m.Z)({},r,{ref:l,open:p,"data-collapsed":c,className:(0,u.Z)(st.details,o&&st.isBrowser,r.className),onMouseDown:function(e){dt(e.target)&&e.detail>1&&e.preventDefault()},onClick:function(e){e.stopPropagation();var t=e.target;dt(t)&&mt(t,l.current)&&(e.preventDefault(),c?(s(!1),f(!0)):s(!0))}}),v,a.createElement(F.z,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:function(e){s(e),f(!e)}},a.createElement("div",{className:st.collapsibleContent},n)))}const ft={details:"details_b_Ee"};var vt="alert alert--info";function ht(e){var t=Object.assign({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return a.createElement(pt,(0,m.Z)({},t,{className:(0,u.Z)(vt,ft.details,t.className)}))}function gt(e){return a.createElement(Ee,e)}const bt={containsTaskList:"containsTaskList_mC6p"};const Et={img:"img_ev3q"};const yt="admonition_LlT9",kt="admonitionHeading_tbUL",Nt="admonitionIcon_kALy",Ct="admonitionContent_S0QG";var Lt={note:{infimaClassName:"secondary",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))},label:a.createElement(p.Z,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)"},"note")},tip:{infimaClassName:"success",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)"},"tip")},danger:{infimaClassName:"danger",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))},label:a.createElement(p.Z,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)"},"danger")},info:{infimaClassName:"info",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)"},"info")},caution:{infimaClassName:"warning",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))},label:a.createElement(p.Z,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)"},"caution")}},Tt={secondary:"note",important:"info",success:"tip",warning:"danger"};function Zt(e){var t,n=function(e){var t=a.Children.toArray(e),n=t.find((function(e){var t;return a.isValidElement(e)&&"mdxAdmonitionTitle"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return{mdxAdmonitionTitle:n,rest:r}}(e.children),r=n.mdxAdmonitionTitle,o=n.rest;return Object.assign({},e,{title:null!=(t=e.title)?t:r,children:o})}const _t={head:function(e){var t=a.Children.map(e.children,(function(e){return a.isValidElement(e)?function(e){var t;if(null!=(t=e.props)&&t.mdxType&&e.props.originalType){var n=e.props,r=(n.mdxType,n.originalType,(0,H.Z)(n,Ne));return a.createElement(e.props.originalType,r)}return e}(e):e}));return a.createElement(ke.Z,e,t)},code:function(e){var t=["a","abbr","b","br","button","cite","code","del","dfn","em","i","img","input","ins","kbd","label","object","output","q","ruby","s","small","span","strong","sub","sup","time","u","var","wbr"];return a.Children.toArray(e.children).every((function(e){var n;return"string"==typeof e&&!e.includes("\n")||(0,a.isValidElement)(e)&&t.includes(null==(n=e.props)?void 0:n.mdxType)}))?a.createElement("code",e):a.createElement(ct,e)},a:function(e){return a.createElement(f.Z,e)},pre:function(e){var t;return a.createElement(ct,(0,a.isValidElement)(e.children)&&"code"===(null==(t=e.children.props)?void 0:t.originalType)?e.children.props:Object.assign({},e))},details:function(e){var t=a.Children.toArray(e.children),n=t.find((function(e){var t;return a.isValidElement(e)&&"summary"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return a.createElement(ht,(0,m.Z)({},e,{summary:n}),r)},ul:function(e){return a.createElement("ul",(0,m.Z)({},e,{className:(t=e.className,(0,u.Z)(t,(null==t?void 0:t.includes("contains-task-list"))&&bt.containsTaskList))}));var t},img:function(e){return a.createElement("img",(0,m.Z)({loading:"lazy"},e,{className:(t=e.className,(0,u.Z)(t,Et.img))}));var t},h1:function(e){return a.createElement(gt,(0,m.Z)({as:"h1"},e))},h2:function(e){return a.createElement(gt,(0,m.Z)({as:"h2"},e))},h3:function(e){return a.createElement(gt,(0,m.Z)({as:"h3"},e))},h4:function(e){return a.createElement(gt,(0,m.Z)({as:"h4"},e))},h5:function(e){return a.createElement(gt,(0,m.Z)({as:"h5"},e))},h6:function(e){return a.createElement(gt,(0,m.Z)({as:"h6"},e))},admonition:function(e){var t=Zt(e),n=t.children,r=t.type,o=t.title,l=t.icon,i=function(e){var t,n=null!=(t=Tt[e])?t:e,a=Lt[n];return a||(console.warn('No admonition config found for admonition type "'+n+'". Using Info as fallback.'),Lt.info)}(r),c=null!=o?o:i.label,s=i.iconComponent,d=null!=l?l:a.createElement(s,null);return a.createElement("div",{className:(0,u.Z)(y.k.common.admonition,y.k.common.admonitionType(e.type),"alert","alert--"+i.infimaClassName,yt)},a.createElement("div",{className:kt},a.createElement("span",{className:Nt},d),c),a.createElement("div",{className:Ct},n))},mermaid:function(){return null}};function wt(e){var t=e.children;return a.createElement(ye.Zo,{components:_t},t)}function xt(e){var t,n,r,o,l=e.children,i=(t=c(),n=t.metadata,r=t.frontMatter,o=t.contentTitle,r.hide_title||void 0!==o?null:n.title);return a.createElement("div",{className:(0,u.Z)(y.k.docs.docMarkdown,"markdown")},i&&a.createElement("header",null,a.createElement(Ee,{as:"h1"},i)),a.createElement(wt,null,l))}var Bt=n(3438),Ot=n(8596),Ht=n(4996);function jt(e){return a.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24"},e),a.createElement("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"}))}const At={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function It(){var e=(0,Ht.Z)("/");return a.createElement("li",{className:"breadcrumbs__item"},a.createElement(f.Z,{"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e},a.createElement(jt,{className:At.breadcrumbHomeIcon})))}const St={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function Mt(e){var t=e.children,n=e.href,r="breadcrumbs__link";return e.isLast?a.createElement("span",{className:r,itemProp:"name"},t):n?a.createElement(f.Z,{className:r,href:n,itemProp:"item"},a.createElement("span",{itemProp:"name"},t)):a.createElement("span",{className:r},t)}function Pt(e){var t=e.children,n=e.active,r=e.index,o=e.addMicrodata;return a.createElement("li",(0,m.Z)({},o&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},{className:(0,u.Z)("breadcrumbs__item",{"breadcrumbs__item--active":n})}),t,a.createElement("meta",{itemProp:"position",content:String(r+1)}))}function Ut(){var e=(0,Bt.s1)(),t=(0,Ot.Ns)();return e?a.createElement("nav",{className:(0,u.Z)(y.k.docs.docBreadcrumbs,St.breadcrumbsContainer),"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"})},a.createElement("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList"},t&&a.createElement(It,null),e.map((function(t,n){var r=n===e.length-1;return a.createElement(Pt,{key:n,active:r,index:n,addMicrodata:!!t.href},a.createElement(Mt,{href:t.href,isLast:r},t.label))})))):null}const zt={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function Vt(e){var t,n,r,o,l,i,s=e.children,m=(t=c(),n=t.frontMatter,r=t.toc,o=(0,d.i)(),l=n.hide_table_of_contents,i=!l&&r.length>0,{hidden:l,mobile:i?a.createElement(ue,null):void 0,desktop:!i||"desktop"!==o&&"ssr"!==o?void 0:a.createElement(he,null)});return a.createElement("div",{className:"row"},a.createElement("div",{className:(0,u.Z)("col",!m.hidden&&zt.docItemCol)},a.createElement(_,null),a.createElement("div",{className:zt.docItemContainer},a.createElement("article",null,a.createElement(Ut,null),a.createElement(w,null),m.mobile,a.createElement(xt,null,s),a.createElement(W,null)),a.createElement(g,null))),m.desktop&&a.createElement("div",{className:"col col--3"},m.desktop))}function Dt(e){var t="docs-doc-id-"+e.content.metadata.unversionedId,n=e.content;return a.createElement(i,{content:e.content},a.createElement(r.FG,{className:t},a.createElement(s,null),a.createElement(Vt,null,a.createElement(n,null))))}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>i,q:()=>l});var a=n(7294),r=n(9688),o=a.createContext(null);function l(e){var t=e.children,n=e.version;return a.createElement(o.Provider,{value:n},t)}function i(){var e=(0,a.useContext)(o);if(null===e)throw new r.i6("DocsVersionProvider");return e}},7594:(e,t)=>{function n(e){let t,n=[];for(let a of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(a))n.push(parseInt(a,10));else if(t=a.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,a,r,o]=t;if(a&&o){a=parseInt(a),o=parseInt(o);const e=a{r.r(t),r.d(t,{default:()=>N});var a=r(7855),n=r(4165),l=r(5861),c=r(7294),s=r(2263),u=r(179),o=r(5742),m=r(9960),i=r(5999),h=["zero","one","two","few","many","other"];function p(e){return h.filter((function(t){return e.includes(t)}))}var f={locale:"en",pluralForms:p(["one","other"]),select:function(e){return 1===e?"one":"other"}};function g(){var e=(0,s.Z)().i18n.currentLocale;return(0,c.useMemo)((function(){try{return t=e,r=new Intl.PluralRules(t),{locale:t,pluralForms:p(r.resolvedOptions().pluralCategories),select:function(e){return r.select(e)}}}catch(a){return console.error('Failed to use Intl.PluralRules for locale "'+e+'".\nDocusaurus will fallback to the default (English) implementation.\nError: '+a.message+"\n"),f}var t,r}),[e])}function d(){var e=g();return{selectMessage:function(t,r){return function(e,t,r){var a=e.split("|");if(1===a.length)return a[0];a.length>r.pluralForms.length&&console.error("For locale="+r.locale+", a maximum of "+r.pluralForms.length+" plural forms are expected ("+r.pluralForms.join(",")+"), but the message contains "+a.length+": "+e);var n=r.select(t),l=r.pluralForms.indexOf(n);return a[Math.min(l,a.length-1)]}(r,t,e)}}}var v=r(6010),y=r(6550),E=r(412);const S=function(){var e=(0,y.k6)(),t=(0,y.TH)(),r=(0,s.Z)().siteConfig.baseUrl,a=E.Z.canUseDOM?new URLSearchParams(t.search):null,n=(null==a?void 0:a.get("q"))||"",l=(null==a?void 0:a.get("ctx"))||"",c=(null==a?void 0:a.get("version"))||"",u=function(e){var r=new URLSearchParams(t.search);return e?r.set("q",e):r.delete("q"),r};return{searchValue:n,searchContext:l,searchVersion:c,updateSearchPath:function(t){var r=u(t);e.replace({search:r.toString()})},updateSearchContext:function(r){var a=new URLSearchParams(t.search);a.set("ctx",r),e.replace({search:a.toString()})},generateSearchPageLink:function(e){var t=u(e);return r+"search?"+t.toString()}}};var C=r(22),x=r(8202),I=r(2539),w=r(726),R=r(1073),_=r(311),P=r(3926),b=r(1029);const Z={searchContextInput:"searchContextInput_mXoe",searchQueryInput:"searchQueryInput_CFBF",searchResultItem:"searchResultItem_U687",searchResultItemPath:"searchResultItemPath_uIbk",searchResultItemSummary:"searchResultItemSummary_oZHr",searchQueryColumn:"searchQueryColumn_q7nx",searchContextColumn:"searchContextColumn_oWAF"};function F(){var e,t=(0,s.Z)().siteConfig.baseUrl,r=d().selectMessage,a=S(),u=a.searchValue,m=a.searchContext,h=a.searchVersion,p=a.updateSearchPath,f=a.updateSearchContext,g=(0,c.useState)(u),y=g[0],E=g[1],I=(0,c.useState)(),w=I[0],R=I[1],P=(0,c.useState)(),F=P[0],N=P[1],q=""+t+h,A=(0,c.useMemo)((function(){return y?(0,i.I)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:y}):(0,i.I)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"})}),[y]);(0,c.useEffect)((function(){p(y),w&&(y?w(y,(function(e){N(e)})):N(void 0))}),[y,w]);var T=(0,c.useCallback)((function(e){E(e.target.value)}),[]);return(0,c.useEffect)((function(){u&&u!==y&&E(u)}),[u]),(0,c.useEffect)((function(){function e(){return(e=(0,l.Z)((0,n.Z)().mark((function e(){var t,r,a;return(0,n.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,(0,C.w)(q,m);case 2:t=e.sent,r=t.wrappedIndexes,a=t.zhDictionary,R((function(){return(0,x.v)(r,a,100)}));case 6:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[m,q]),c.createElement(c.Fragment,null,c.createElement(o.Z,null,c.createElement("meta",{property:"robots",content:"noindex, follow"}),c.createElement("title",null,A)),c.createElement("div",{className:"container margin-vert--lg"},c.createElement("h1",null,A),c.createElement("div",{className:"row"},c.createElement("div",{className:(0,v.Z)("col",(e={},e[Z.searchQueryColumn]=Array.isArray(b.Kc),e["col--9"]=Array.isArray(b.Kc),e["col--12"]=!Array.isArray(b.Kc),e))},c.createElement("input",{type:"search",name:"q",className:Z.searchQueryInput,"aria-label":"Search",onChange:T,value:y,autoComplete:"off",autoFocus:!0})),Array.isArray(b.Kc)?c.createElement("div",{className:(0,v.Z)("col","col--3","padding-left--none",Z.searchContextColumn)},c.createElement("select",{name:"search-context",className:Z.searchContextInput,id:"context-selector",value:m,onChange:function(e){return f(e.target.value)}},c.createElement("option",{value:""},b.pQ?(0,i.I)({id:"theme.SearchPage.searchContext.everywhere",message:"everywhere"}):""),b.Kc.map((function(e){return c.createElement("option",{key:e,value:e},e)})))):null),!w&&y&&c.createElement("div",null,c.createElement(_.Z,null)),F&&(F.length>0?c.createElement("p",null,r(F.length,(0,i.I)({id:"theme.SearchPage.documentsFound.plurals",message:"1 document found|{count} documents found",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)'},{count:F.length}))):c.createElement("p",null,(0,i.I)({id:"theme.SearchPage.noResultsText",message:"No documents were found",description:"The paragraph for empty search result"}))),c.createElement("section",null,F&&F.map((function(e){return c.createElement(k,{key:e.document.i,searchResult:e})})))))}function k(e){var t=e.searchResult,r=t.document,n=t.type,l=t.page,s=t.tokens,u=t.metadata,o=0===n,i=2===n,h=(o?r.b:l.b).slice(),p=i?r.s:r.t;o||h.push(l.t);var f="";if(b.vc&&s.length>0){for(var g,d=new URLSearchParams,v=(0,a.Z)(s);!(g=v()).done;){var y=g.value;d.append("_highlight",y)}f="?"+d.toString()}return c.createElement("article",{className:Z.searchResultItem},c.createElement("h2",null,c.createElement(m.Z,{to:r.u+f+(r.h||""),dangerouslySetInnerHTML:{__html:i?(0,I.C)(p,s):(0,w.o)(p,(0,R.m)(u,"t"),s,100)}})),h.length>0&&c.createElement("p",{className:Z.searchResultItemPath},(0,P.e)(h)),i&&c.createElement("p",{className:Z.searchResultItemSummary,dangerouslySetInnerHTML:{__html:(0,w.o)(r.t,(0,R.m)(u,"t"),s,100)}}))}const N=function(){return c.createElement(u.Z,null,c.createElement(F,null))}}}]);
\ No newline at end of file
diff --git a/assets/js/1b252c8c.54702582.js b/assets/js/1b252c8c.54702582.js
new file mode 100644
index 00000000..b0697024
--- /dev/null
+++ b/assets/js/1b252c8c.54702582.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7359],{81:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"whats-new","title":"What\'s new","description":"react-map-gl v8.0","source":"@site/../docs/whats-new.md","sourceDirName":".","slug":"/whats-new","permalink":"/react-map-gl/docs/whats-new","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/whats-new.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Introduction","permalink":"/react-map-gl/docs/"},"next":{"title":"Upgrade Guide","permalink":"/react-map-gl/docs/upgrade-guide"}}');var l=r(4848),s=r(8453);const t={},a="What's new",c={},o=[{value:"react-map-gl v8.0",id:"react-map-gl-v80",level:2},{value:"react-map-gl v7.1",id:"react-map-gl-v71",level:2},{value:"react-map-gl v7.0",id:"react-map-gl-v70",level:2},{value:"react-map-gl v5.3/v6.1",id:"react-map-gl-v53v61",level:2},{value:"Highlights",id:"highlights",level:3},{value:"react-map-gl v6.0",id:"react-map-gl-v60",level:2},{value:"What's Changed",id:"whats-changed",level:3},{value:"react-map-gl v5.2",id:"react-map-gl-v52",level:2},{value:"Highlights",id:"highlights-1",level:3},{value:"react-map-gl v5.1",id:"react-map-gl-v51",level:2},{value:"Highlights",id:"highlights-2",level:3},{value:"react-map-gl v5.0",id:"react-map-gl-v50",level:2},{value:"What's Changed",id:"whats-changed-1",level:3},{value:"react-map-gl v4.1",id:"react-map-gl-v41",level:2},{value:"Highlights",id:"highlights-3",level:3},{value:"react-map-gl v4.0",id:"react-map-gl-v40",level:2},{value:"Highlights",id:"highlights-4",level:3},{value:"react-map-gl v3.3",id:"react-map-gl-v33",level:2},{value:"Highlights",id:"highlights-5",level:3},{value:"react-map-gl v3.2",id:"react-map-gl-v32",level:2},{value:"Highlights",id:"highlights-6",level:3},{value:"react-map-gl v3.1",id:"react-map-gl-v31",level:2},{value:"Highlights",id:"highlights-7",level:3},{value:"react-map-gl v3.0",id:"react-map-gl-v30",level:2},{value:"Highlights",id:"highlights-8",level:3},{value:"Components",id:"components",level:3},{value:"InteractiveMap (New, MapGL replacement)",id:"interactivemap-new-mapgl-replacement",level:4},{value:"StaticMap (New)",id:"staticmap-new",level:4},{value:"Overlays",id:"overlays",level:4},{value:"Property Changes",id:"property-changes",level:3},{value:"Utilities",id:"utilities",level:3},{value:"react-map-gl v2.0",id:"react-map-gl-v20",level:2},{value:"Highlights",id:"highlights-9",level:3},{value:"react-map-gl v1.0",id:"react-map-gl-v10",level:2},{value:"react-map-gl v0.6",id:"react-map-gl-v06",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"whats-new",children:"What's new"})}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v80",children:"react-map-gl v8.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Jan 2025"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["First version to support Mapbox GL JS' official types and MapLibre GL JS v5.\nThis version fully separates the code that support each compatible map library:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"react-map-gl/mapbox"}),": for use with ",(0,l.jsx)(n.code,{children:"mapbox-gl>=3.5.0"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"react-map-gl/maplibre"}),": for use with ",(0,l.jsx)(n.code,{children:"maplibre-gl>=4"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"react-map-gl/mapbox-legacy"}),": for use with ",(0,l.jsx)(n.code,{children:"mapbox-gl"})," v1.x and v2.x and ",(0,l.jsx)(n.code,{children:"@types/mapbox-gl"})]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.li,{children:"As a result, each endpoint now have slightly smaller bundle size and more precise types."}),"\n",(0,l.jsxs)(n.li,{children:["Maplibre wrapper is expected to have better functionality and performance than v7 by utilizing an ",(0,l.jsx)(n.a,{href:"https://github.com/maplibre/maplibre-gl-js/issues/1545",children:"upstream API"})," for the React use case."]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["For a full list of breaking changes, please visit the ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/upgrade-guide#upgrading-to-v80",children:"upgrade guide"}),"."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v71",children:"react-map-gl v7.1"}),"\n",(0,l.jsx)(n.p,{children:"Release date: June 2023"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["To better accommodate the API divergence between Mapbox and Maplibre, this version adds a new endpoint ",(0,l.jsx)(n.code,{children:"react-map-gl/maplibre"}),". The new endpoint exports identical components as ",(0,l.jsx)(n.code,{children:"react-map-gl"}),", but typed for ",(0,l.jsx)(n.code,{children:"maplibre-gl"})," instead. After switching to this new endpoint, ",(0,l.jsx)(n.code,{children:"maplibre-gl"})," users no longer need to install ",(0,l.jsx)(n.code,{children:"mapbox-gl"})," or a placeholder package as dependency. See ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/upgrade-guide",children:"upgrade guide"})," for an example."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"Marker"}),", ",(0,l.jsx)(n.code,{children:"Popup"})," and ",(0,l.jsx)(n.code,{children:"GeolocateControl"})," components now expose the native instance via React ref."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v70",children:"react-map-gl v7.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Feb 4, 2022"}),"\n",(0,l.jsx)(n.p,{children:"v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library"}),"\n",(0,l.jsx)(n.li,{children:"Lightweight: the ESM build size is reduced from 219k to 57k"}),"\n",(0,l.jsxs)(n.li,{children:["Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (",(0,l.jsx)(n.code,{children:"flyTo"}),", ",(0,l.jsx)(n.code,{children:"fitBounds"})," etc.) can now be called directly without breaking the React binding."]}),"\n",(0,l.jsxs)(n.li,{children:["Compatibility: first and third-party plugins! Directly use ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon",children:"mapbox-gl-draw"}),", ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder",children:"mapbox-gl-geocoder"}),", to name a few."]}),"\n",(0,l.jsxs)(n.li,{children:["TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/mapbox/types",children:"imported"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["Visit the ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/upgrade-guide",children:"upgrade guide"})," if you are trying to upgrade from v5 and v6."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v53v61",children:"react-map-gl v5.3/v6.1"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Jan 27, 2020"}),"\n",(0,l.jsx)(n.h3,{id:"highlights",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"TypeScript and Flow typings"})," are now published with the library"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"More controller customizations."})," Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options",children:"interaction options"})," for details."]}),"\n",(0,l.jsxs)(n.li,{children:["A new ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#eventrecognizeroptions",children:"eventRecognizerOptions"})," prop is added for fine-tuning the interaction experience."]}),"\n",(0,l.jsxs)(n.li,{children:["New component: ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/attribution-control.md",children:"AttributionControl"})]}),"\n",(0,l.jsxs)(n.li,{children:["Promoted to official API: ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/map-context.md",children:"MapContext"})]}),"\n",(0,l.jsx)(n.li,{children:"Resolved React error over attempted state update during render"}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GeolocateControl"})," added supports for ",(0,l.jsx)(n.code,{children:"showAccuracyCircle"})]}),"\n",(0,l.jsxs)(n.li,{children:["All controls now support inline styling with a ",(0,l.jsx)(n.code,{children:"style"})," prop"]}),"\n",(0,l.jsx)(n.li,{children:"All components and examples have been rewritten as functional components"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v60",children:"react-map-gl v6.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Dec 16, 2020"}),"\n",(0,l.jsx)(n.h3,{id:"whats-changed",children:"What's Changed"}),"\n",(0,l.jsxs)(n.p,{children:["The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are ",(0,l.jsx)(n.a,{href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0",children:"important changes"})," to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do ",(0,l.jsx)(n.strong,{children:"NOT"})," upgrade to this version, and consider your options discussed in ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/get-started/mapbox-tokens",children:"this document"}),"."]}),"\n",(0,l.jsxs)(n.p,{children:["See ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/upgrade-guide",children:"upgrade guide"})," for a complete list of breaking changes."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v52",children:"react-map-gl v5.2"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Jan 6, 2020"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-1",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Components"}),": ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/docs/api-reference/scale-control.md",children:(0,l.jsx)(n.code,{children:"ScaleControl"})})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"NavigationControl"}),": new ",(0,l.jsx)(n.code,{children:"label"})," prop"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"GeolocateControl"}),": new ",(0,l.jsx)(n.code,{children:"label"}),", ",(0,l.jsx)(n.code,{children:"onGeolocate"}),", ",(0,l.jsx)(n.code,{children:"auto"})," props"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Export"}),": ",(0,l.jsx)(n.code,{children:"WebMercatorViewport"})," is re-exported from the ",(0,l.jsx)(n.code,{children:"viewport-mercator-project"})," library for ease of use. It's recommended to import it from ",(0,l.jsx)(n.code,{children:"react-map-gl"})," instead to avoid future dependency change."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Example"}),": ",(0,l.jsx)(n.a,{href:"https://visgl.github.io/react-map-gl/examples/clusters",children:"Clusters"})]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v51",children:"react-map-gl v5.1"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Oct 30, 2019"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-2",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Components"}),": ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/layer.md",children:(0,l.jsx)(n.code,{children:"Layer"})})," and ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/source.md",children:(0,l.jsx)(n.code,{children:"Source"})})," have been added to provide better React parity with the ",(0,l.jsx)(n.code,{children:"Mapbox GL JS"})," API."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Viewport transition"}),": ",(0,l.jsx)(n.code,{children:"transitionDuration"})," can be set to ",(0,l.jsx)(n.code,{children:"'auto'"})," when using ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/fly-to-interpolator.md",children:(0,l.jsx)(n.code,{children:"FlyToInterpolator"})}),"."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Example"}),": Add an ",(0,l.jsx)(n.a,{href:"https://visgl.github.io/react-map-gl/examples/draw-polygon",children:"example"})," with drawing library ",(0,l.jsx)(n.a,{href:"https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw",children:"react-map-gl-draw"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v50",children:"react-map-gl v5.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: May 31, 2019"}),"\n",(0,l.jsx)(n.h3,{id:"whats-changed-1",children:"What's Changed"}),"\n",(0,l.jsxs)(n.p,{children:["The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's ",(0,l.jsx)(n.a,{href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0",children:"changelog"})," and ",(0,l.jsx)(n.a,{href:"https://blog.mapbox.com/new-pricing-46b7c26166e7",children:"blog post"}),"."]}),"\n",(0,l.jsxs)(n.p,{children:["Alongside Mapbox GL JS's new milestone, we have relaxed the ",(0,l.jsx)(n.code,{children:"mapbox-gl"})," dependency from locking minor release (",(0,l.jsx)(n.code,{children:"~0.53.0"}),") to major release (",(0,l.jsx)(n.code,{children:"^1.0.0"}),"). This will allow developers to upgrade faster without waiting for a new release from react-map-gl."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v41",children:"react-map-gl v4.1"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Mar 14, 2019"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-3",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Components"}),": ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/fullscreen-control.md",children:(0,l.jsx)(n.code,{children:"FullscreenControl"})}),", ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/geolocate-control.md",children:(0,l.jsx)(n.code,{children:"GeolocateControl"})})," have been added to provide better React parity with the ",(0,l.jsx)(n.code,{children:"Mapbox GL JS"})," API."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New callback props"})," ",(0,l.jsx)(n.code,{children:"InteractiveMap"})," supports more callbacks:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onNativeClick"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v40",children:"react-map-gl v4.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: Nov 5, 2018"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-4",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Relative dimensions"})," Both ",(0,l.jsx)(n.code,{children:"InteractiveMap"})," and ",(0,l.jsx)(n.code,{children:"StaticMap"})," now support CSS strings supplied to map ",(0,l.jsx)(n.code,{children:"width"})," and ",(0,l.jsx)(n.code,{children:"height"})," props. New ",(0,l.jsx)(n.code,{children:"onResize"})," callback is fired when the map resizes."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"React 16"})," Upgrade to React 16.3 context and ref patterns"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Babel 7"})," Upgrade build system to Babel 7, better support for tree-shaking"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Style diffing"})," Now use Mapbox's native style diffing. Immutable is no longer required."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Draggable Markers"})," ",(0,l.jsx)(n.code,{children:"Marker"})," component now supports a new prop ",(0,l.jsx)(n.code,{children:"draggable"}),", along with callbacks ",(0,l.jsx)(n.code,{children:"onDragStart"}),", ",(0,l.jsx)(n.code,{children:"onDrag"}),", and ",(0,l.jsx)(n.code,{children:"onDragEnd"}),"."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"3d Popups"})," ",(0,l.jsx)(n.code,{children:"Popup"})," component now supports a new prop ",(0,l.jsx)(n.code,{children:"sortByDepth"})," to enable proper occlusion when multiple popups are used in a tilted map."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Interaction states"})," ",(0,l.jsx)(n.code,{children:"onViewportChange"})," is now called with richer descriptors of the user interaction, including ",(0,l.jsx)(n.code,{children:"isPanning"}),", ",(0,l.jsx)(n.code,{children:"isZooming"})," and ",(0,l.jsx)(n.code,{children:"isRotating"}),"."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Interactive layers"})," Dropped the requirement for the deprecated ",(0,l.jsx)(n.code,{children:"interactive"})," property on the layer styles. Use the ",(0,l.jsx)(n.code,{children:"interactiveLayerIds"})," prop to specify which layers are clickable."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New callback props"})," ",(0,l.jsx)(n.code,{children:"InteractiveMap"})," supports more callbacks:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onDblClick"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseDown"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseMove"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseUp"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onTouchStart"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onTouchMove"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onTouchEnd"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseEnter"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseLeave"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onWheel"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"onMouseOut"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["See ",(0,l.jsx)(n.a,{href:"/react-map-gl/docs/upgrade-guide",children:"upgrade guide"})," for breaking changes."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v33",children:"react-map-gl v3.3"}),"\n",(0,l.jsx)(n.p,{children:"Release date: July, 2018"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-5",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsxs)(n.strong,{children:["New ",(0,l.jsx)(n.code,{children:"viewState"})," Property"]}),": Makes it possible to specify all map state properties (",(0,l.jsx)(n.code,{children:"longitude"}),", ",(0,l.jsx)(n.code,{children:"latitude"}),", ",(0,l.jsx)(n.code,{children:"zoom"}),", ",(0,l.jsx)(n.code,{children:"bearing"})," and ",(0,l.jsx)(n.code,{children:"pitch"}),") as a single property."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsxs)(n.strong,{children:["New ",(0,l.jsx)(n.code,{children:"onViewStateChange"})," callback"]}),": An alternative callback that matches the new ",(0,l.jsx)(n.code,{children:"viewState"})," prop."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v32",children:"react-map-gl v3.2"}),"\n",(0,l.jsx)(n.p,{children:"Realease date: January, 2018"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-6",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Viewport transition"}),": feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Better parity of Mapbox interaction"}),": navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Support for Map Reuse (experimental)"}),": A new property ",(0,l.jsx)(n.code,{children:"reuseMaps"})," is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.strong,{children:"mapbox-gl 0.42.2"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New props"})," of the InteractiveMap component:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Map creation: ",(0,l.jsx)(n.code,{children:"transformRequest"}),", ",(0,l.jsx)(n.code,{children:"reuseMaps"})]}),"\n",(0,l.jsxs)(n.li,{children:["Interaction: ",(0,l.jsx)(n.code,{children:"touchZoom"}),", ",(0,l.jsx)(n.code,{children:"touchRotate"})]}),"\n",(0,l.jsxs)(n.li,{children:["Transition: ",(0,l.jsx)(n.code,{children:"transitionDuration"}),", ",(0,l.jsx)(n.code,{children:"transitionInterpolator"}),", ",(0,l.jsx)(n.code,{children:"transitionEasing"}),", ",(0,l.jsx)(n.code,{children:"transitionInterruption"}),", ",(0,l.jsx)(n.code,{children:"onTransitionStart"}),", ",(0,l.jsx)(n.code,{children:"onTransitionInterrupt"}),", ",(0,l.jsx)(n.code,{children:"onTransitionEnd"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v31",children:"react-map-gl v3.1"}),"\n",(0,l.jsx)(n.p,{children:"Release date: October 19, 2017"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-7",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Event handling"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Support right mouse drag to rotate"}),"\n",(0,l.jsx)(n.li,{children:"Support keyboard navigation"}),"\n",(0,l.jsx)(n.li,{children:"Allow controls and overlays to block map interactions"}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"React 16"})," - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at ",(0,l.jsx)(n.code,{children:">=15.4.x"}),"."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.strong,{children:"mapbox-gl v0.40.1"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"No Token warning"}),": react-map-gl now renders an HTML message if no mapbox token is supplied."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v30",children:"react-map-gl v3.0"}),"\n",(0,l.jsx)(n.p,{children:"Release date: July 27th, 2017"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-8",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Latest Mapbox GL JS"}),": Bumps ",(0,l.jsx)(n.code,{children:"Mapbox GL JS"})," to ",(0,l.jsx)(n.a,{href:"https://github.com/mapbox/mapbox-gl-js/releases",children:"0.38"}),"."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Multi-Touch Support"}),": Full support for multi-touch gestures such as pinch-to-zoom and rotate."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Components"}),": The ",(0,l.jsx)(n.code,{children:"MapGL"})," component has been split into ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md",children:(0,l.jsx)(n.code,{children:"StaticMap"})})," and ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md",children:(0,l.jsx)(n.code,{children:"InteractiveMap"})})," (the default). Also, ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/popup.md",children:(0,l.jsx)(n.code,{children:"Popup"})}),", ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/marker.md",children:(0,l.jsx)(n.code,{children:"Marker"})}),", ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/navigation-control.md",children:(0,l.jsx)(n.code,{children:"NavigationControl"})})," have been added to provide better React parity with the ",(0,l.jsx)(n.code,{children:"Mapbox GL JS"})," API."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Improved Overlay Components"}),": Supplying viewport props (",(0,l.jsx)(n.code,{children:"width"})," ",(0,l.jsx)(n.code,{children:"height"})," ",(0,l.jsx)(n.code,{children:"zoom"})," ",(0,l.jsx)(n.code,{children:"longitude"})," and ",(0,l.jsx)(n.code,{children:"latitude"}),") are no longer required if you render ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/svg-overlay.md",children:(0,l.jsx)(n.code,{children:"SVGOverlay"})}),", ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/canvas-overlay.md",children:(0,l.jsx)(n.code,{children:"CanvasOverlay"})})," or ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/html-overlay.md",children:(0,l.jsx)(n.code,{children:"HTMLOverlay"})})," as a child of the map. Perspective mode is now supported in all overlays."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New Props"}),": ",(0,l.jsx)(n.code,{children:"maxPitch"}),", ",(0,l.jsx)(n.code,{children:"minPitch"}),", ",(0,l.jsx)(n.code,{children:"dragPan"}),", ",(0,l.jsx)(n.code,{children:"doubleClickZoom"}),", ",(0,l.jsx)(n.code,{children:"touchZoomRotate"}),",\n",(0,l.jsx)(n.code,{children:"scrollZoom"})," are now provided to allow granular control of map interactivity."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Documentation"}),": Significantly expanded and linked with our other geospatial frameworks."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Examples"}),": New stand-alone examples to get you started instantly with the new features."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Event Handling"}),": New event handling architecture that enables full customization of event handling (experimental)."]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"components",children:"Components"}),"\n",(0,l.jsx)(n.h4,{id:"interactivemap-new-mapgl-replacement",children:(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md",children:"InteractiveMap (New, MapGL replacement)"})}),"\n",(0,l.jsxs)(n.p,{children:["This is a wrapper on top of ",(0,l.jsx)(n.code,{children:"StaticMap"}),". It takes all the props of ",(0,l.jsx)(n.code,{children:"StaticMap"})," and additional ones such as ",(0,l.jsx)(n.code,{children:"onViewportChange"}),", ",(0,l.jsx)(n.code,{children:"scrollZoom"}),", ",(0,l.jsx)(n.code,{children:"dragRotate"}),", etc. to control interactivity on the map. See ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/interactive-map.js",children:"Source Code"})," for more information."]}),"\n",(0,l.jsx)(n.h4,{id:"staticmap-new",children:(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md",children:"StaticMap (New)"})}),"\n",(0,l.jsxs)(n.p,{children:["This is the React wrapper around ",(0,l.jsx)(n.code,{children:"Mapbox GL JS"})," and takes in viewport properties such as ",(0,l.jsx)(n.code,{children:"width"}),", ",(0,l.jsx)(n.code,{children:"height"}),", ",(0,l.jsx)(n.code,{children:"latitude"}),", ",(0,l.jsx)(n.code,{children:"longitude"}),". Style diffing and updating logic also live here. See ",(0,l.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/static-map.js",children:"Source Code"})," for more information."]}),"\n",(0,l.jsx)(n.h4,{id:"overlays",children:"Overlays"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Three overlays (",(0,l.jsx)(n.code,{children:"ScatterplotOverlay"}),", ",(0,l.jsx)(n.code,{children:"DraggablePointsOverlay"}),", ",(0,l.jsx)(n.code,{children:"ChoroplethOverlay"}),"), have been moved out of the library and are now only provided as examples."]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"property-changes",children:"Property Changes"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Property Names"})," - some prop names have been modernized, the old ones will still work for now with a warning."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Internal Properties"})," such as ",(0,l.jsx)(n.code,{children:"isHovering"}),", ",(0,l.jsx)(n.code,{children:"isDragging"}),", ",(0,l.jsx)(n.code,{children:"startDragLngLat"})," have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past."]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"utilities",children:"Utilities"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"fitBounds"}),": ",(0,l.jsx)(n.code,{children:"fitBounds"})," has been moved to another repository and has been rewritten to provide a more logical interface."]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["For more information, see the ",(0,l.jsx)(n.code,{children:"Upgrade Guide"}),"."]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v20",children:"react-map-gl v2.0"}),"\n",(0,l.jsx)(n.p,{children:"Date: Jan 17, 2017"}),"\n",(0,l.jsx)(n.h3,{id:"highlights-9",children:"Highlights"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Latest mapbox-gl"}),": Bump ",(0,l.jsx)(n.code,{children:"mapbox-gl"})," to v0.31.0"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"new maxZoom prop"})," - Add ",(0,l.jsx)(n.code,{children:"maxZoom"})," prop and defaults to ",(0,l.jsx)(n.code,{children:"20"})]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"New onLoad prop"})," - Add ",(0,l.jsx)(n.code,{children:"onLoad"})," event handler"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"new onClick prop"})," - Add ",(0,l.jsx)(n.code,{children:"onClick"})," prop handler (#140)"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v10",children:"react-map-gl v1.0"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Perspective Mode"})," - Now supports ",(0,l.jsx)(n.code,{children:"bearing"})," and ",(0,l.jsx)(n.code,{children:"pitch"})," properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Support for ES6 imports"})," - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"react-map-gl-v06",children:"react-map-gl v0.6"}),"\n",(0,l.jsx)(n.p,{children:"Initial public version"})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>t,x:()=>a});var i=r(6540);const l={},s=i.createContext(l);function t(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/1b252c8c.60747423.js b/assets/js/1b252c8c.60747423.js
deleted file mode 100644
index 00fdd056..00000000
--- a/assets/js/1b252c8c.60747423.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5116],{3905:(e,t,a)=>{a.d(t,{Zo:()=>s,kt:()=>h});var n=a(7294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function r(e){for(var t=1;t=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var p=n.createContext({}),m=function(e){var t=n.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):r(r({},t),e)),a},s=function(e){var t=m(e.components);return n.createElement(p.Provider,{value:t},e.children)},d="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,l=e.originalType,p=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=m(a),g=i,h=d["".concat(p,".").concat(g)]||d[g]||c[g]||l;return a?n.createElement(h,r(r({ref:t},s),{},{components:a})):n.createElement(h,r({ref:t},s))}));function h(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var l=a.length,r=new Array(l);r[0]=g;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[d]="string"==typeof e?e:i,r[1]=o;for(var m=2;m{a.r(t),a.d(t,{assets:()=>s,contentTitle:()=>p,default:()=>h,frontMatter:()=>o,metadata:()=>m,toc:()=>d});var n=a(7462),i=a(3366),l=(a(7294),a(3905)),r=["components"],o={},p="What's new",m={unversionedId:"whats-new",id:"whats-new",title:"What's new",description:"react-map-gl v7.1",source:"@site/../docs/whats-new.md",sourceDirName:".",slug:"/whats-new",permalink:"/react-map-gl/docs/whats-new",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/whats-new.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Introduction",permalink:"/react-map-gl/docs/"},next:{title:"Upgrade Guide",permalink:"/react-map-gl/docs/upgrade-guide"}},s={},d=[{value:"react-map-gl v7.1",id:"react-map-gl-v71",level:2},{value:"react-map-gl v7.0",id:"react-map-gl-v70",level:2},{value:"react-map-gl v5.3/v6.1",id:"react-map-gl-v53v61",level:2},{value:"Highlights",id:"highlights",level:3},{value:"react-map-gl v6.0",id:"react-map-gl-v60",level:2},{value:"What's Changed",id:"whats-changed",level:3},{value:"react-map-gl v5.2",id:"react-map-gl-v52",level:2},{value:"Highlights",id:"highlights-1",level:3},{value:"react-map-gl v5.1",id:"react-map-gl-v51",level:2},{value:"Highlights",id:"highlights-2",level:3},{value:"react-map-gl v5.0",id:"react-map-gl-v50",level:2},{value:"What's Changed",id:"whats-changed-1",level:3},{value:"react-map-gl v4.1",id:"react-map-gl-v41",level:2},{value:"Highlights",id:"highlights-3",level:3},{value:"react-map-gl v4.0",id:"react-map-gl-v40",level:2},{value:"Highlights",id:"highlights-4",level:3},{value:"react-map-gl v3.3",id:"react-map-gl-v33",level:2},{value:"Highlights",id:"highlights-5",level:3},{value:"react-map-gl v3.2",id:"react-map-gl-v32",level:2},{value:"Highlights",id:"highlights-6",level:3},{value:"react-map-gl v3.1",id:"react-map-gl-v31",level:2},{value:"Highlights",id:"highlights-7",level:3},{value:"react-map-gl v3.0",id:"react-map-gl-v30",level:2},{value:"Highlights",id:"highlights-8",level:3},{value:"Components",id:"components",level:3},{value:"InteractiveMap (New, MapGL replacement)",id:"interactivemap-new-mapgl-replacement",level:4},{value:"StaticMap (New)",id:"staticmap-new",level:4},{value:"Overlays",id:"overlays",level:4},{value:"Property Changes",id:"property-changes",level:3},{value:"Utilities",id:"utilities",level:3},{value:"react-map-gl v2.0",id:"react-map-gl-v20",level:2},{value:"Highlights",id:"highlights-9",level:3},{value:"react-map-gl v1.0",id:"react-map-gl-v10",level:2},{value:"react-map-gl v0.6",id:"react-map-gl-v06",level:2}],c={toc:d},g="wrapper";function h(e){var t=e.components,a=(0,i.Z)(e,r);return(0,l.kt)(g,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"whats-new"},"What's new"),(0,l.kt)("h2",{id:"react-map-gl-v71"},"react-map-gl v7.1"),(0,l.kt)("p",null,"Release date: June 30 2023"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"To better accommodate the API divergence between Mapbox and Maplibre, this version adds a new endpoint ",(0,l.kt)("inlineCode",{parentName:"li"},"react-map-gl/maplibre"),". The new endpoint exports identical components as ",(0,l.kt)("inlineCode",{parentName:"li"},"react-map-gl"),", but typed for ",(0,l.kt)("inlineCode",{parentName:"li"},"maplibre-gl")," instead. After switching to this new endpoint, ",(0,l.kt)("inlineCode",{parentName:"li"},"maplibre-gl")," users no longer need to install ",(0,l.kt)("inlineCode",{parentName:"li"},"mapbox-gl")," or a placeholder package as dependency. See ",(0,l.kt)("a",{parentName:"li",href:"/react-map-gl/docs/upgrade-guide"},"upgrade guide")," for an example."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"Marker"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"Popup")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"GeolocateControl")," components now expose the native instance via React ref.")),(0,l.kt)("h2",{id:"react-map-gl-v70"},"react-map-gl v7.0"),(0,l.kt)("p",null,"Release date: Feb 4, 2022"),(0,l.kt)("p",null,"v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library"),(0,l.kt)("li",{parentName:"ul"},"Lightweight: the ESM build size is reduced from 219k to 57k"),(0,l.kt)("li",{parentName:"ul"},"Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (",(0,l.kt)("inlineCode",{parentName:"li"},"flyTo"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"fitBounds")," etc.) can now be called directly without breaking the React binding."),(0,l.kt)("li",{parentName:"ul"},"Compatibility: first and third-party plugins! Directly use ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon"},"mapbox-gl-draw"),", ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder"},"mapbox-gl-geocoder"),", to name a few."),(0,l.kt)("li",{parentName:"ul"},"TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be ",(0,l.kt)("a",{parentName:"li",href:"/react-map-gl/docs/api-reference/types"},"imported"),".")),(0,l.kt)("p",null,"Visit the ",(0,l.kt)("a",{parentName:"p",href:"/react-map-gl/docs/upgrade-guide"},"upgrade guide")," if you are trying to upgrade from v5 and v6."),(0,l.kt)("h2",{id:"react-map-gl-v53v61"},"react-map-gl v5.3/v6.1"),(0,l.kt)("p",null,"Release date: Jan 27, 2020"),(0,l.kt)("h3",{id:"highlights"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"TypeScript and Flow typings")," are now published with the library"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"More controller customizations.")," Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options"},"interaction options")," for details."),(0,l.kt)("li",{parentName:"ul"},"A new ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#eventrecognizeroptions"},"eventRecognizerOptions")," prop is added for fine-tuning the interaction experience."),(0,l.kt)("li",{parentName:"ul"},"New component: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/attribution-control.md"},"AttributionControl")),(0,l.kt)("li",{parentName:"ul"},"Promoted to official API: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/map-context.md"},"MapContext")),(0,l.kt)("li",{parentName:"ul"},"Resolved React error over attempted state update during render"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"GeolocateControl")," added supports for ",(0,l.kt)("inlineCode",{parentName:"li"},"showAccuracyCircle")),(0,l.kt)("li",{parentName:"ul"},"All controls now support inline styling with a ",(0,l.kt)("inlineCode",{parentName:"li"},"style")," prop"),(0,l.kt)("li",{parentName:"ul"},"All components and examples have been rewritten as functional components")),(0,l.kt)("h2",{id:"react-map-gl-v60"},"react-map-gl v6.0"),(0,l.kt)("p",null,"Release date: Dec 16, 2020"),(0,l.kt)("h3",{id:"whats-changed"},"What's Changed"),(0,l.kt)("p",null,"The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are ",(0,l.kt)("a",{parentName:"p",href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0"},"important changes")," to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do ",(0,l.kt)("strong",{parentName:"p"},"NOT")," upgrade to this version, and consider your options discussed in ",(0,l.kt)("a",{parentName:"p",href:"/react-map-gl/docs/get-started/mapbox-tokens"},"this document"),"."),(0,l.kt)("p",null,"See ",(0,l.kt)("a",{parentName:"p",href:"/react-map-gl/docs/upgrade-guide"},"upgrade guide")," for a complete list of breaking changes."),(0,l.kt)("h2",{id:"react-map-gl-v52"},"react-map-gl v5.2"),(0,l.kt)("p",null,"Release date: Jan 6, 2020"),(0,l.kt)("h3",{id:"highlights-1"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Components"),": ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/5.2-release/docs/api-reference/scale-control.md"},(0,l.kt)("inlineCode",{parentName:"a"},"ScaleControl"))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"NavigationControl"),": new ",(0,l.kt)("inlineCode",{parentName:"li"},"label")," prop"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"GeolocateControl"),": new ",(0,l.kt)("inlineCode",{parentName:"li"},"label"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"onGeolocate"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"auto")," props"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Export"),": ",(0,l.kt)("inlineCode",{parentName:"li"},"WebMercatorViewport")," is re-exported from the ",(0,l.kt)("inlineCode",{parentName:"li"},"viewport-mercator-project")," library for ease of use. It's recommended to import it from ",(0,l.kt)("inlineCode",{parentName:"li"},"react-map-gl")," instead to avoid future dependency change."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Example"),": ",(0,l.kt)("a",{parentName:"li",href:"https://visgl.github.io/react-map-gl/examples/clusters"},"Clusters"))),(0,l.kt)("h2",{id:"react-map-gl-v51"},"react-map-gl v5.1"),(0,l.kt)("p",null,"Release date: Oct 30, 2019"),(0,l.kt)("h3",{id:"highlights-2"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Components"),": ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/layer.md"},(0,l.kt)("inlineCode",{parentName:"a"},"Layer"))," and ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/source.md"},(0,l.kt)("inlineCode",{parentName:"a"},"Source"))," have been added to provide better React parity with the ",(0,l.kt)("inlineCode",{parentName:"li"},"Mapbox GL JS")," API."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Viewport transition"),": ",(0,l.kt)("inlineCode",{parentName:"li"},"transitionDuration")," can be set to ",(0,l.kt)("inlineCode",{parentName:"li"},"'auto'")," when using ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/5.1-release/docs/components/fly-to-interpolator.md"},(0,l.kt)("inlineCode",{parentName:"a"},"FlyToInterpolator")),"."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Example"),": Add an ",(0,l.kt)("a",{parentName:"li",href:"https://visgl.github.io/react-map-gl/examples/draw-polygon"},"example")," with drawing library ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw"},"react-map-gl-draw"),".")),(0,l.kt)("h2",{id:"react-map-gl-v50"},"react-map-gl v5.0"),(0,l.kt)("p",null,"Release date: May 31, 2019"),(0,l.kt)("h3",{id:"whats-changed-1"},"What's Changed"),(0,l.kt)("p",null,"The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's ",(0,l.kt)("a",{parentName:"p",href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0"},"changelog")," and ",(0,l.kt)("a",{parentName:"p",href:"https://blog.mapbox.com/new-pricing-46b7c26166e7"},"blog post"),"."),(0,l.kt)("p",null,"Alongside Mapbox GL JS's new milestone, we have relaxed the ",(0,l.kt)("inlineCode",{parentName:"p"},"mapbox-gl")," dependency from locking minor release (",(0,l.kt)("inlineCode",{parentName:"p"},"~0.53.0"),") to major release (",(0,l.kt)("inlineCode",{parentName:"p"},"^1.0.0"),"). This will allow developers to upgrade faster without waiting for a new release from react-map-gl."),(0,l.kt)("h2",{id:"react-map-gl-v41"},"react-map-gl v4.1"),(0,l.kt)("p",null,"Release date: Mar 14, 2019"),(0,l.kt)("h3",{id:"highlights-3"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Components"),": ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/fullscreen-control.md"},(0,l.kt)("inlineCode",{parentName:"a"},"FullscreenControl")),", ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/4.1-release/docs/components/geolocate-control.md"},(0,l.kt)("inlineCode",{parentName:"a"},"GeolocateControl"))," have been added to provide better React parity with the ",(0,l.kt)("inlineCode",{parentName:"li"},"Mapbox GL JS")," API."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New callback props")," ",(0,l.kt)("inlineCode",{parentName:"li"},"InteractiveMap")," supports more callbacks:",(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onNativeClick"))))),(0,l.kt)("h2",{id:"react-map-gl-v40"},"react-map-gl v4.0"),(0,l.kt)("p",null,"Release date: Nov 5, 2018"),(0,l.kt)("h3",{id:"highlights-4"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Relative dimensions")," Both ",(0,l.kt)("inlineCode",{parentName:"li"},"InteractiveMap")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"StaticMap")," now support CSS strings supplied to map ",(0,l.kt)("inlineCode",{parentName:"li"},"width")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"height")," props. New ",(0,l.kt)("inlineCode",{parentName:"li"},"onResize")," callback is fired when the map resizes."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"React 16")," Upgrade to React 16.3 context and ref patterns"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Babel 7")," Upgrade build system to Babel 7, better support for tree-shaking"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Style diffing")," Now use Mapbox's native style diffing. Immutable is no longer required."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Draggable Markers")," ",(0,l.kt)("inlineCode",{parentName:"li"},"Marker")," component now supports a new prop ",(0,l.kt)("inlineCode",{parentName:"li"},"draggable"),", along with callbacks ",(0,l.kt)("inlineCode",{parentName:"li"},"onDragStart"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"onDrag"),", and ",(0,l.kt)("inlineCode",{parentName:"li"},"onDragEnd"),"."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"3d Popups")," ",(0,l.kt)("inlineCode",{parentName:"li"},"Popup")," component now supports a new prop ",(0,l.kt)("inlineCode",{parentName:"li"},"sortByDepth")," to enable proper occlusion when multiple popups are used in a tilted map."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Interaction states")," ",(0,l.kt)("inlineCode",{parentName:"li"},"onViewportChange")," is now called with richer descriptors of the user interaction, including ",(0,l.kt)("inlineCode",{parentName:"li"},"isPanning"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"isZooming")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"isRotating"),"."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Interactive layers")," Dropped the requirement for the deprecated ",(0,l.kt)("inlineCode",{parentName:"li"},"interactive")," property on the layer styles. Use the ",(0,l.kt)("inlineCode",{parentName:"li"},"interactiveLayerIds")," prop to specify which layers are clickable."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New callback props")," ",(0,l.kt)("inlineCode",{parentName:"li"},"InteractiveMap")," supports more callbacks:",(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onDblClick")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseDown")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseMove")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseUp")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onTouchStart")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onTouchMove")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onTouchEnd")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseEnter")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseLeave")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onWheel")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onMouseOut"))))),(0,l.kt)("p",null,"See ",(0,l.kt)("a",{parentName:"p",href:"/react-map-gl/docs/upgrade-guide"},"upgrade guide")," for breaking changes."),(0,l.kt)("h2",{id:"react-map-gl-v33"},"react-map-gl v3.3"),(0,l.kt)("p",null,"Release date: July, 2018"),(0,l.kt)("h3",{id:"highlights-5"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New ",(0,l.kt)("inlineCode",{parentName:"strong"},"viewState")," Property"),": Makes it possible to specify all map state properties (",(0,l.kt)("inlineCode",{parentName:"li"},"longitude"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"latitude"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"zoom"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"bearing")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"pitch"),") as a single property."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New ",(0,l.kt)("inlineCode",{parentName:"strong"},"onViewStateChange")," callback"),": An alternative callback that matches the new ",(0,l.kt)("inlineCode",{parentName:"li"},"viewState")," prop.")),(0,l.kt)("h2",{id:"react-map-gl-v32"},"react-map-gl v3.2"),(0,l.kt)("p",null,"Realease date: January, 2018"),(0,l.kt)("h3",{id:"highlights-6"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Viewport transition"),": feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Better parity of Mapbox interaction"),": navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Support for Map Reuse (experimental)"),": A new property ",(0,l.kt)("inlineCode",{parentName:"li"},"reuseMaps")," is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"mapbox-gl 0.42.2")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New props")," of the InteractiveMap component:",(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Map creation: ",(0,l.kt)("inlineCode",{parentName:"li"},"transformRequest"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"reuseMaps")),(0,l.kt)("li",{parentName:"ul"},"Interaction: ",(0,l.kt)("inlineCode",{parentName:"li"},"touchZoom"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"touchRotate")),(0,l.kt)("li",{parentName:"ul"},"Transition: ",(0,l.kt)("inlineCode",{parentName:"li"},"transitionDuration"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"transitionInterpolator"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"transitionEasing"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"transitionInterruption"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"onTransitionStart"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"onTransitionInterrupt"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"onTransitionEnd"))))),(0,l.kt)("h2",{id:"react-map-gl-v31"},"react-map-gl v3.1"),(0,l.kt)("p",null,"Release date: October 19, 2017"),(0,l.kt)("h3",{id:"highlights-7"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Event handling"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Support right mouse drag to rotate"),(0,l.kt)("li",{parentName:"ul"},"Support keyboard navigation"),(0,l.kt)("li",{parentName:"ul"},"Allow controls and overlays to block map interactions"))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"React 16")," - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at ",(0,l.kt)("inlineCode",{parentName:"li"},">=15.4.x"),"."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"mapbox-gl v0.40.1")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"No Token warning"),": react-map-gl now renders an HTML message if no mapbox token is supplied.")),(0,l.kt)("h2",{id:"react-map-gl-v30"},"react-map-gl v3.0"),(0,l.kt)("p",null,"Release date: July 27th, 2017"),(0,l.kt)("h3",{id:"highlights-8"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Latest Mapbox GL JS"),": Bumps ",(0,l.kt)("inlineCode",{parentName:"li"},"Mapbox GL JS")," to ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/mapbox/mapbox-gl-js/releases"},"0.38"),"."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Multi-Touch Support"),": Full support for multi-touch gestures such as pinch-to-zoom and rotate."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Components"),": The ",(0,l.kt)("inlineCode",{parentName:"li"},"MapGL")," component has been split into ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md"},(0,l.kt)("inlineCode",{parentName:"a"},"StaticMap"))," and ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md"},(0,l.kt)("inlineCode",{parentName:"a"},"InteractiveMap"))," (the default). Also, ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/popup.md"},(0,l.kt)("inlineCode",{parentName:"a"},"Popup")),", ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/marker.md"},(0,l.kt)("inlineCode",{parentName:"a"},"Marker")),", ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/navigation-control.md"},(0,l.kt)("inlineCode",{parentName:"a"},"NavigationControl"))," have been added to provide better React parity with the ",(0,l.kt)("inlineCode",{parentName:"li"},"Mapbox GL JS")," API."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Improved Overlay Components"),": Supplying viewport props (",(0,l.kt)("inlineCode",{parentName:"li"},"width")," ",(0,l.kt)("inlineCode",{parentName:"li"},"height")," ",(0,l.kt)("inlineCode",{parentName:"li"},"zoom")," ",(0,l.kt)("inlineCode",{parentName:"li"},"longitude")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"latitude"),") are no longer required if you render ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/svg-overlay.md"},(0,l.kt)("inlineCode",{parentName:"a"},"SVGOverlay")),", ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/canvas-overlay.md"},(0,l.kt)("inlineCode",{parentName:"a"},"CanvasOverlay"))," or ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/overlays/html-overlay.md"},(0,l.kt)("inlineCode",{parentName:"a"},"HTMLOverlay"))," as a child of the map. Perspective mode is now supported in all overlays."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New Props"),": ",(0,l.kt)("inlineCode",{parentName:"li"},"maxPitch"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"minPitch"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"dragPan"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"doubleClickZoom"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"touchZoomRotate"),",\n",(0,l.kt)("inlineCode",{parentName:"li"},"scrollZoom")," are now provided to allow granular control of map interactivity."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Documentation"),": Significantly expanded and linked with our other geospatial frameworks."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Examples"),": New stand-alone examples to get you started instantly with the new features."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Event Handling"),": New event handling architecture that enables full customization of event handling (experimental).")),(0,l.kt)("h3",{id:"components"},"Components"),(0,l.kt)("h4",{id:"interactivemap-new-mapgl-replacement"},(0,l.kt)("a",{parentName:"h4",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/interactive-map.md"},"InteractiveMap (New, MapGL replacement)")),(0,l.kt)("p",null,"This is a wrapper on top of ",(0,l.kt)("inlineCode",{parentName:"p"},"StaticMap"),". It takes all the props of ",(0,l.kt)("inlineCode",{parentName:"p"},"StaticMap")," and additional ones such as ",(0,l.kt)("inlineCode",{parentName:"p"},"onViewportChange"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"scrollZoom"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"dragRotate"),", etc. to control interactivity on the map. See ",(0,l.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/interactive-map.js"},"Source Code")," for more information."),(0,l.kt)("h4",{id:"staticmap-new"},(0,l.kt)("a",{parentName:"h4",href:"https://github.com/visgl/react-map-gl/tree/3.0-release/docs/components/static-map.md"},"StaticMap (New)")),(0,l.kt)("p",null,"This is the React wrapper around ",(0,l.kt)("inlineCode",{parentName:"p"},"Mapbox GL JS")," and takes in viewport properties such as ",(0,l.kt)("inlineCode",{parentName:"p"},"width"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"height"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"latitude"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"longitude"),". Style diffing and updating logic also live here. See ",(0,l.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/static-map.js"},"Source Code")," for more information."),(0,l.kt)("h4",{id:"overlays"},"Overlays"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Three overlays (",(0,l.kt)("inlineCode",{parentName:"li"},"ScatterplotOverlay"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"DraggablePointsOverlay"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"ChoroplethOverlay"),"), have been moved out of the library and are now only provided as examples.")),(0,l.kt)("h3",{id:"property-changes"},"Property Changes"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Property Names")," - some prop names have been modernized, the old ones will still work for now with a warning."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Internal Properties")," such as ",(0,l.kt)("inlineCode",{parentName:"li"},"isHovering"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"isDragging"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"startDragLngLat")," have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past.")),(0,l.kt)("h3",{id:"utilities"},"Utilities"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"fitBounds"),": ",(0,l.kt)("inlineCode",{parentName:"li"},"fitBounds")," has been moved to another repository and has been rewritten to provide a more logical interface.")),(0,l.kt)("p",null,"For more information, see the ",(0,l.kt)("inlineCode",{parentName:"p"},"Upgrade Guide"),"."),(0,l.kt)("h2",{id:"react-map-gl-v20"},"react-map-gl v2.0"),(0,l.kt)("p",null,"Date: Jan 17, 2017"),(0,l.kt)("h3",{id:"highlights-9"},"Highlights"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Latest mapbox-gl"),": Bump ",(0,l.kt)("inlineCode",{parentName:"li"},"mapbox-gl")," to v0.31.0"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"new maxZoom prop")," - Add ",(0,l.kt)("inlineCode",{parentName:"li"},"maxZoom")," prop and defaults to ",(0,l.kt)("inlineCode",{parentName:"li"},"20")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"New onLoad prop")," - Add ",(0,l.kt)("inlineCode",{parentName:"li"},"onLoad")," event handler"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"new onClick prop")," - Add ",(0,l.kt)("inlineCode",{parentName:"li"},"onClick")," prop handler (#140)")),(0,l.kt)("h2",{id:"react-map-gl-v10"},"react-map-gl v1.0"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Perspective Mode")," - Now supports ",(0,l.kt)("inlineCode",{parentName:"li"},"bearing")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"pitch")," properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Support for ES6 imports")," - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'.")),(0,l.kt)("h2",{id:"react-map-gl-v06"},"react-map-gl v0.6"),(0,l.kt)("p",null,"Initial public version"))}h.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/1be78505.55891a32.js b/assets/js/1be78505.55891a32.js
deleted file mode 100644
index fef30135..00000000
--- a/assets/js/1be78505.55891a32.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[9514,4972],{9963:(e,t,n)=>{n.r(t),n.d(t,{default:()=>Ie});var a=n(7294),r=n(6010),l=n(1944),o=n(5281),i=n(3320),c=n(3438),d=n(4477),s=n(1116),m=n(179),u=n(5999),b=n(2466),p=n(5936);const h={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};function v(){var e=function(e){var t=e.threshold,n=(0,a.useState)(!1),r=n[0],l=n[1],o=(0,a.useRef)(!1),i=(0,b.Ct)(),c=i.startScroll,d=i.cancelScroll;return(0,b.RF)((function(e,n){var a=e.scrollY,r=null==n?void 0:n.scrollY;r&&(o.current?o.current=!1:a>=r?(d(),l(!1)):a{n.r(t),n.d(t,{default:()=>i});var a=n(7294),r=n(5999),l=n(1944),o=n(179);function i(){return a.createElement(a.Fragment,null,a.createElement(l.d,{title:(0,r.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(o.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(r.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}},4477:(e,t,n)=>{n.d(t,{E:()=>i,q:()=>o});var a=n(7294),r=n(9688),l=a.createContext(null);function o(e){var t=e.children,n=e.version;return a.createElement(l.Provider,{value:n},t)}function i(){var e=(0,a.useContext)(l);if(null===e)throw new r.i6("DocsVersionProvider");return e}}}]);
\ No newline at end of file
diff --git a/assets/js/1d10ec36.be821c21.js b/assets/js/1d10ec36.be821c21.js
new file mode 100644
index 00000000..bacd2074
--- /dev/null
+++ b/assets/js/1d10ec36.be821c21.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7628],{1864:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>g,contentTitle:()=>h,default:()=>b,frontMatter:()=>m,metadata:()=>o,toc:()=>y});const o=JSON.parse('{"id":"maplibre/geojson","title":"GeoJSON","description":"","source":"@site/src/examples/maplibre/geojson.mdx","sourceDirName":"maplibre","slug":"/maplibre/geojson","permalink":"/react-map-gl/examples/maplibre/geojson","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"GeoJSON Animation","permalink":"/react-map-gl/examples/maplibre/geojson-animation"},"next":{"title":"Heatmap","permalink":"/react-map-gl/examples/maplibre/heatmap"}}');var r=n(4848),s=n(8453),a=n(6540),i=(n(5338),n(5490));function l(e){const{year:t}=e;return(0,r.jsxs)("div",{className:"control-panel",children:[(0,r.jsx)("h3",{children:"Interactive GeoJSON"}),(0,r.jsxs)("p",{children:["Map showing median household income by state in year ",(0,r.jsx)("b",{children:t}),". Hover over a state to see details."]}),(0,r.jsxs)("p",{children:["Data source: ",(0,r.jsx)("a",{href:"www.census.gov",children:"US Census Bureau"})]}),(0,r.jsx)("div",{className:"source-link",children:(0,r.jsx)("a",{href:"https://github.com/visgl/react-maplibre/tree/1.0-release/examples/geojson",target:"_new",children:"View Code \u2197"})}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{className:"input",children:[(0,r.jsx)("label",{children:"Year"}),(0,r.jsx)("input",{type:"range",value:t,min:1995,max:2015,step:1,onChange:t=>e.onChange(t.target.value)})]},"year")]})}const c=a.memo(l),u={id:"data",type:"fill",paint:{"fill-color":{type:"interval",property:"percentile",stops:[[0,"#3288bd"],[1,"#66c2a5"],[2,"#abdda4"],[3,"#e6f598"],[4,"#ffffbf"],[5,"#fee08b"],[6,"#fdae61"],[7,"#f46d43"],[8,"#d53e4f"]]},"fill-opacity":.8}};var p=n(6561),d=n(7982);function f(){const[e,t]=(0,a.useState)(2015),[n,o]=(0,a.useState)(null),[s,l]=(0,a.useState)(null);(0,a.useEffect)((()=>{fetch("https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/us-income.geojson").then((e=>e.json())).then((e=>o(e))).catch((e=>console.error("Could not load data",e)))}),[]);const f=(0,a.useCallback)((e=>{const{features:t,point:{x:n,y:o}}=e,r=t&&t[0];l(r&&{feature:r,x:n,y:o})}),[]),m=(0,a.useMemo)((()=>n&&function(e,t){const{features:n}=e,o=(0,d.A)().domain(n.map(t)).range((0,p.A)(9));return{type:"FeatureCollection",features:n.map((e=>{const n=t(e),r=Object.assign({},e.properties,{value:n,percentile:o(n)});return Object.assign({},e,{properties:r})}))}}(n,(t=>t.properties.income[e]))),[n,e]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(i.T5,{initialViewState:{latitude:40,longitude:-100,zoom:3},mapStyle:"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",interactiveLayerIds:["data"],onMouseMove:f,children:[(0,r.jsx)(i.kL,{type:"geojson",data:m,children:(0,r.jsx)(i.Wd,Object.assign({},u))}),s&&(0,r.jsxs)("div",{className:"tooltip",style:{left:s.x,top:s.y},children:[(0,r.jsxs)("div",{children:["State: ",s.feature.properties.name]}),(0,r.jsxs)("div",{children:["Median Household Income: ",s.feature.properties.value]}),(0,r.jsxs)("div",{children:["Percentile: ",s.feature.properties.percentile/8*100]})]})]}),(0,r.jsx)(c,{year:e,onChange:e=>t(e)})]})}const m={},h="GeoJSON",g={},y=[];function v(e){const t={h1:"h1",header:"header",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"geojson",children:"GeoJSON"})}),"\n","\n",(0,r.jsx)(f,{})]})}function b(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}},5490:(e,t,n)=>{n.d(t,{T3:()=>N,tG:()=>z,Wd:()=>G,T5:()=>C,pH:()=>M,ov:()=>A,zD:()=>P,g0:()=>U,kL:()=>Z,jG:()=>F,Ay:()=>C,VI:()=>k});var o=n(6540),r=n(4848);const s=o.createContext(null);function a(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let n=0;n{let n=null;"interactive"in e&&(n=Object.assign({},e),delete n.interactive);const o=t[e.ref];if(o){n=n||Object.assign({},e),delete n.ref;for(const e of c)e in o&&(n[e]=o[e])}return n||e}));return Object.assign({},e,{layers:n})}const p={version:8,sources:{},layers:[]},d={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},f={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},m={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},h=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],g=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class y{constructor(e,t,n){this._map=null,this._internalUpdate=!1,this._hoveredFeatures=null,this._propsedCameraUpdate=null,this._styleComponents={},this._onEvent=e=>{const t=this.props[m[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onCameraEvent=e=>{if(this._internalUpdate)return;e.viewState=this._propsedCameraUpdate||i(this._map.transform);const t=this.props[f[e.type]];t&&t(e)},this._onCameraUpdate=e=>this._internalUpdate?e:(this._propsedCameraUpdate=i(e),l(e,this.props)),this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[d[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._MapClass=e,this.props=t,this._initialize(n)}get map(){return this._map}setProps(e){const t=this.props;this.props=e;const n=this._updateSettings(e,t),o=this._updateSize(e),r=this._updateViewState(e);this._updateStyle(e,t),this._updateStyleComponents(e),this._updateHandlers(e,t),(n||o||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const n=y.savedMaps.pop();if(!n)return null;const o=n.map,r=o.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);o._container=t;const s=o._resizeObserver;s&&(s.disconnect(),s.observe(t)),n.setProps(Object.assign({},e,{styleDiffing:!1})),o.resize();const{initialViewState:a}=e;return a&&(a.bounds?o.fitBounds(a.bounds,Object.assign({},a.fitBoundsOptions,{duration:0})):n._updateViewState(a)),o.isStyleLoaded()?o.fire("load"):o.once("style.load",(()=>o.fire("load"))),o._update(),n}_initialize(e){const{props:t}=this,{mapStyle:n=p}=t,o=Object.assign({},t,t.initialViewState,{container:e,style:u(n)}),r=o.initialViewState||o.viewState||o;if(Object.assign(o,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(o);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),s.transformCameraUpdate=this._onCameraUpdate,s.on("style.load",(()=>{this._styleComponents={light:s.getLight(),sky:s.getSky(),projection:null==s.getProjection?void 0:s.getProjection(),terrain:s.getTerrain()},this._updateStyleComponents(this.props)})),s.on("sourcedata",(()=>{this._updateStyleComponents(this.props)}));for(const a in d)s.on(a,this._onPointerEvent);for(const a in f)s.on(a,this._onCameraEvent);for(const a in m)s.on(a,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),y.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e){const t=this._map,n=t.transform;if(!t.isMoving()){const o=l(n,e);if(Object.keys(o).length>0)return this._internalUpdate=!0,t.jumpTo(o),this._internalUpdate=!1,!0}return!1}_updateSettings(e,t){const n=this._map;let o=!1;for(const r of h)if(r in e&&!a(e[r],t[r])){o=!0;const t=n["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(n,e[r])}return o}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=p,styleDiffing:n=!0}=e,o={diff:n};"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(u(t),o)}}_updateStyleComponents(e){let{light:t,projection:n,sky:o,terrain:r}=e;const s=this._map,i=this._styleComponents;var l;s.style._loaded&&(t&&!a(t,i.light)&&(i.light=t,s.setLight(t)),n&&!a(n,i.projection)&&n!==(null==(l=i.projection)?void 0:l.type)&&(i.projection="string"==typeof n?{type:n}:n,null==s.setProjection||s.setProjection(i.projection)),o&&!a(o,i.sky)&&(i.sky=o,s.setSky(o)),void 0===r||a(r,i.terrain)||r&&!s.getSource(r.source)||(i.terrain=r,s.setTerrain(r)))}_updateHandlers(e,t){const n=this._map;for(const s of g){var o,r;const i=null==(o=e[s])||o;a(i,null==(r=t[s])||r)||(i?n[s].enable(i):n[s].disable())}}_queryRenderedFeatures(e){const t=this._map,{interactiveLayerIds:n=[]}=this.props;try{return t.queryRenderedFeatures(e,{layers:n.filter(t.getLayer.bind(t))})}catch(o){return[]}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var n;const t=e.type,o=(null==(n=this._hoveredFeatures)?void 0:n.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}}y.savedMaps=[];const v=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,n={getMap:()=>t};for(const o of function(e){const t=new Set;let n=e;for(;n;){for(const o of Object.getOwnPropertyNames(n))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);n=Object.getPrototypeOf(n)}return Array.from(t)}(t))o in n||v.includes(o)||(n[o]=t[o].bind(t));return n}const x="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;const _=o.createContext(null);function j(e,t){const a=(0,o.useContext)(s),[i,l]=(0,o.useState)(null),c=(0,o.useRef)(),{current:u}=(0,o.useRef)({mapLib:null,map:null});(0,o.useEffect)((()=>{const t=e.mapLib;let o,r=!0;return Promise.resolve(t||n.e(6443).then(n.t.bind(n,6443,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const n="Map"in t?t:t.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){const{RTLTextPlugin:n,maxParallelImageRequests:o,workerCount:r,workerUrl:s}=t;if(n&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()){const{pluginUrl:t,lazy:o=!0}="string"==typeof n?{pluginUrl:n}:n;e.setRTLTextPlugin(t,(e=>{e&&console.error(e)}),o)}void 0!==o&&e.setMaxParallelImageRequests(o),void 0!==r&&e.setWorkerCount(r),void 0!==s&&e.setWorkerUrl(s)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(o=y.reuse(e,c.current)),o||(o=new y(n.Map,e,c.current)),u.map=b(o),u.mapLib=n,l(o),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:n}=e;n?n({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),()=>{r=!1,o&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),x((()=>{i&&i.setProps(e)})),(0,o.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,o.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:c,style:p,children:i&&(0,r.jsx)(_.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const C=o.forwardRef(j);var S=n(961);const L=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function w(e,t){if(!e||!t)return;const n=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!L.test(o)?n[o]=e+"px":n[o]=e}}const M=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(_),s=(0,o.useRef)({props:e});s.current.props=e;const a=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const n=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(n);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(a.addTo(n.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:l,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:f=0,rotationAlignment:m="auto",pitchAlignment:h="auto"}=e;return(0,o.useEffect)((()=>{w(a.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===l||a.setLngLat([i,l]),c&&!function(e,t){const n=Array.isArray(e)?e[0]:e?e.x:0,o=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return n===r&&o===s}(a.getOffset(),c)&&a.setOffset(c),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==f&&a.setRotation(f),a.getRotationAlignment()!==m&&a.setRotationAlignment(m),a.getPitchAlignment()!==h&&a.setPitchAlignment(h),a.getPopup()!==d&&a.setPopup(d),(0,S.createPortal)(e.children,a.getElement())})));function E(e){return new Set(e?e.trim().split(/\s+/):[])}const P=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(_),s=(0,o.useMemo)((()=>document.createElement("div")),[]),i=(0,o.useRef)({props:e});i.current.props=e;const l=(0,o.useMemo)((()=>{const t=Object.assign({},e),n=new r.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),n}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(n.getMap()),()=>{l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,o.useEffect)((()=>{w(l.getElement(),e.style)}),[e.style]),(0,o.useImperativeHandle)(t,(()=>l),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!a(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){const t=E(l.options.className),n=E(e.className);for(const e of t)n.has(e)||l.removeClassName(e);for(const e of n)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,S.createPortal)(e.children,s)})));function k(e,t,n,r){const s=(0,o.useContext)(_),a=(0,o.useMemo)((()=>e(s)),[]);return(0,o.useEffect)((()=>{const e=r||n||t,o="function"==typeof t&&"function"==typeof n?t:null,i="function"==typeof n?n:"function"==typeof t?t:null,{map:l}=s;return l.hasControl(a)||(l.addControl(a,null==e?void 0:e.position),o&&o(s)),()=>{i&&i(s),l.hasControl(a)&&l.removeControl(a)}}),[]),a}function O(e){const t=k((t=>{let{mapLib:n}=t;return new n.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{w(t._controlContainer,e.style)}),[e.style]),null}const N=(0,o.memo)(O);function R(e,t){const n=(0,o.useRef)({props:e}),r=k((t=>{let{mapLib:o}=t;const r=new o.GeolocateControl(e),s=r._setupUI;return r._setupUI=()=>{r._container.hasChildNodes()||s()},r.on("geolocate",(e=>{null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(e=>{null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,o.useImperativeHandle)(t,(()=>r),[]),(0,o.useEffect)((()=>{w(r._container,e.style)}),[e.style]),null}const z=(0,o.memo)((0,o.forwardRef)(R));function T(e){const t=k((t=>{let{mapLib:n}=t;return new n.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{w(t._container,e.style)}),[e.style]),null}const A=(0,o.memo)(T);function I(e){const t=k((t=>{let{mapLib:n}=t;return new n.ScaleControl(e)}),{position:e.position}),n=(0,o.useRef)(e),r=n.current;n.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,o.useEffect)((()=>{w(t._container,s)}),[s]),null}const U=(0,o.memo)(I);function D(e){const t=k((t=>{let{mapLib:n}=t;return new n.TerrainControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{w(t._container,e.style)}),[e.style]),null}const F=(0,o.memo)(D);function W(e,t){if(!e)throw new Error(t)}let H=0;function Z(e){const t=(0,o.useContext)(_).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-source-"+H++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var n;const e=null==(n=t.getStyle())?void 0:n.layers;if(e)for(const n of e)n.source===s&&t.removeLayer(n.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,n){W(t.id===n.id,"source id changed"),W(t.type===n.type,"source type changed");let o="",r=0;for(const i in t)"children"===i||"id"===i||a(n[i],t[i])||(o=i,r++);if(!r)return;const s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(o){case"coordinates":null==e.setCoordinates||e.setCoordinates(t.coordinates);break;case"url":null==e.setUrl||e.setUrl(t.url);break;case"tiles":null==e.setTiles||e.setTiles(t.tiles);break;default:console.warn("Unable to update prop: "+o)}}(i,e,n.current):i=function(e,t,n){if(e.style&&e.style._loaded){const o=Object.assign({},n);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,s,e),n.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:s})))||null}let B=0;function G(e){const t=(0,o.useContext)(_).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-layer-"+B++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,n,o){if(W(n.id===o.id,"layer id changed"),W(n.type===o.type,"layer type changed"),"custom"===n.type||"custom"===o.type)return;const{layout:r={},paint:s={},filter:i,minzoom:l,maxzoom:c,beforeId:u}=n;if(u!==o.beforeId&&e.moveLayer(t,u),r!==o.layout){const n=o.layout||{};for(const o in r)a(r[o],n[o])||e.setLayoutProperty(t,o,r[o]);for(const o in n)r.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(s!==o.paint){const n=o.paint||{};for(const o in s)a(s[o],n[o])||e.setPaintProperty(t,o,s[o]);for(const o in n)s.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}a(i,o.filter)||e.setFilter(t,i),l===o.minzoom&&c===o.maxzoom||e.setLayerZoomRange(t,l,c)}(t,s,e,n.current)}catch(i){console.warn(i)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){const o=Object.assign({},n,{id:t});delete o.beforeId,e.addLayer(o,n.beforeId)}}(t,s,e);return n.current=e,null}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function a(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:t},e.children)}},6561:(e,t,n)=>{function o(e,t,n){e=+e,t=+t,n=(r=arguments.length)<2?(t=e,e=0,1):r<3?1:+n;for(var o=-1,r=0|Math.max(0,Math.ceil((t-e)/n)),s=new Array(r);++oo})},7982:(e,t,n)=>{function o(e){return null===e?NaN:+e}function r(e,t,n=o){if((r=e.length)&&!isNaN(t=+t)){if(t<=0||r<2)return+n(e[0],0,e);if(t>=1)return+n(e[r-1],r-1,e);var r,s=(r-1)*t,a=Math.floor(s),i=+n(e[a],a,e);return i+(+n(e[a+1],a+1,e)-i)*(s-a)}}function s(e,t){return null==e||null==t?NaN:et?1:e>=t?0:NaN}function a(e,t){return null==e||null==t?NaN:te?1:t>=e?0:NaN}function i(e){let t,n,o;function r(e,o,r=0,s=e.length){if(r>>1;n(e[t],o)<0?r=t+1:s=t}while(rs(e(t),n),o=(t,n)=>e(t)-n):(t=e===s||e===a?e:l,n=e,o=e),{left:r,center:function(e,t,n=0,s=e.length){const a=r(e,t,n,s-1);return a>n&&o(e[a-1],t)>-o(e[a],t)?a-1:a},right:function(e,o,r=0,s=e.length){if(r>>1;n(e[t],o)<=0?r=t+1:s=t}while(rf});const c=i(s),u=c.right,p=(c.left,i(o).center,u);function d(e,t){switch(arguments.length){case 0:break;case 1:this.range(e);break;default:this.range(t).domain(e)}return this}function f(){var e,t=[],n=[],o=[];function a(){var e=0,s=Math.max(1,n.length);for(o=new Array(s-1);++e0?o[r-1]:t[0],r{i.d(t,{A:()=>a});i(6540);var n=i(4164),o=i(1312),s=i(1107),r=i(4848);function a(e){let{className:t}=e;return(0,r.jsx)("main",{className:(0,n.A)("container margin-vert--xl",t),children:(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,r.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,r.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}},2237:(e,t,i)=>{i.r(t),i.d(t,{default:()=>l});i(6540);var n=i(1312),o=i(1003),s=i(4207),r=i(3363),a=i(4848);function l(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.be,{title:e}),(0,a.jsx)(s.A,{children:(0,a.jsx)(r.A,{})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/232a0b40.b9ab4920.js b/assets/js/232a0b40.b9ab4920.js
deleted file mode 100644
index cb2bd6b4..00000000
--- a/assets/js/232a0b40.b9ab4920.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5326],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),c=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=c(e.components);return n.createElement(u.Provider,{value:t},e.children)},f="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},p=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,u=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),f=c(r),p=o,m=f["".concat(u,".").concat(p)]||f[p]||d[p]||a;return r?n.createElement(m,i(i({ref:t},l),{},{components:r})):n.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=p;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s[f]="string"==typeof e?e:o,i[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>y,contentTitle:()=>g,default:()=>S,frontMatter:()=>v,metadata:()=>h,toc:()=>b});var n=r(7462),o=r(3366),a=r(7294),i=r(3905),s=(r(745),r(945));function u(e){var t=(0,a.useCallback)((function(t){e.onModeChange(t.target.value)}),[e.onModeChange]);return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Side by Side"),a.createElement("p",null,"Synchronize two maps."),a.createElement("div",null,a.createElement("label",null,"Mode: "),a.createElement("select",{value:e.mode,onChange:t},a.createElement("option",{value:"side-by-side"},"Side by side"),a.createElement("option",{value:"split-screen"},"Split screen"))),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/side-by-side",target:"_new"},"View Code \u2197")))}const c=a.memo(u);var l="",f={position:"absolute",width:"50%",height:"100%"},d={position:"absolute",left:"50%",width:"50%",height:"100%"};function p(){var e=(0,a.useState)({longitude:-122.43,latitude:37.78,zoom:12,pitch:30}),t=e[0],r=e[1],o=(0,a.useState)("side-by-side"),i=o[0],u=o[1],p=(0,a.useState)("left"),m=p[0],v=p[1],g=(0,a.useCallback)((function(){return v("left")}),[]),h=(0,a.useCallback)((function(){return v("right")}),[]),y=(0,a.useCallback)((function(e){return r(e.viewState)}),[]),b="undefined"==typeof window?100:window.innerWidth,_=(0,a.useMemo)((function(){return{left:"split-screen"===i?b/2:0,top:0,right:0,bottom:0}}),[b,i]),E=(0,a.useMemo)((function(){return{right:"split-screen"===i?b/2:0,top:0,left:0,bottom:0}}),[b,i]);return a.createElement(a.Fragment,null,a.createElement("div",{style:{position:"relative",height:"100%"}},a.createElement(s.ZP,(0,n.Z)({id:"left-map"},t,{padding:_,onMoveStart:g,onMove:"left"===m&&y,style:f,mapStyle:"mapbox://styles/mapbox/light-v9",mapboxAccessToken:l})),a.createElement(s.ZP,(0,n.Z)({id:"right-map"},t,{padding:E,onMoveStart:h,onMove:"right"===m&&y,style:d,mapStyle:"mapbox://styles/mapbox/dark-v9",mapboxAccessToken:l}))),a.createElement(c,{mode:i,onModeChange:u}))}var m=["components"],v={},g="Side by Side",h={unversionedId:"side-by-side",id:"side-by-side",title:"Side by Side",description:"",source:"@site/src/examples/side-by-side.mdx",sourceDirName:".",slug:"/side-by-side",permalink:"/react-map-gl/examples/side-by-side",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar",previous:{title:"Geocoder",permalink:"/react-map-gl/examples/geocoder"}},y={},b=[],_={toc:b},E="wrapper";function S(e){var t=e.components,r=(0,o.Z)(e,m);return(0,i.kt)(E,(0,n.Z)({},_,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"side-by-side"},"Side by Side"),(0,i.kt)(p,{mdxType:"App"}))}S.isMDXComponent=!0},945:(e,t,r)=>{r.d(t,{ot:()=>$,$j:()=>te,mh:()=>ne,D5:()=>X,Jx:()=>K,Pv:()=>ee,GI:()=>Y,jf:()=>re,Hw:()=>oe,ZP:()=>ae,PE:()=>Z});var n=r(7294),o=n.createContext(null);var a=r(1202);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var r=0;r0;)r.appendChild(a.childNodes[0]);o._container=r;var i=o._resizeObserver;i&&(i.disconnect(),i.observe(r)),n.setProps(Object.assign({},t,{styleDiffing:!1})),o.resize();var s=t.initialViewState;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),o._update(),n},t._initialize=function(e){var t=this,r=this.props,n=r.mapStyle,o=void 0===n?p:n,a=Object.assign({},r,r.initialViewState,{accessToken:r.mapboxAccessToken||_()||null,container:e,style:d(o)}),i=a.initialViewState||a.viewState||a;if(Object.assign(a,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),r.gl){var u=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=u,r.gl}}var c=new this._MapClass(a);i.padding&&c.setPadding(i.padding),r.cursor&&(c.getCanvas().style.cursor=r.cursor),this._createShadowTransform(c);var l=c._render;c._render=function(e){t._inRender=!0,l.call(c,e),t._inRender=!1};var f=c._renderTaskQueue.run;c._renderTaskQueue.run=function(e){f.call(c._renderTaskQueue,e),t._onBeforeRepaint()},c.on("render",(function(){return t._onAfterRepaint()}));var h=c.fire;for(var y in c.fire=this._fireEvent.bind(this,h),c.on("resize",(function(){t._renderTransform.resize(c.transform.width,c.transform.height)})),c.on("styledata",(function(){t._updateStyleComponents(t.props,{}),s(c.transform,t._renderTransform)})),c.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),m)c.on(y,this._onPointerEvent);for(var b in v)c.on(b,this._onCameraEvent);for(var E in g)c.on(E,this._onEvent);this._map=c},t.recycle=function(){var t=this.map.getContainer().querySelector("[mapboxgl-children]");null==t||t.remove(),e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._createShadowTransform=function(e){var t,r,n=(t=e.transform,(r=t.clone()).pixelsToGLUnits=t.pixelsToGLUnits,r);e.painter.transform=n,this._renderTransform=n},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=r.isMoving();s&&(n.cameraElevationReference="sea");var l=c(n,Object.assign({},u(r.transform),e));if(s&&(n.cameraElevationReference="ground"),l&&t){var f=this._deferredEvents;f.move=!0,f.zoom||(f.zoom=o!==n.zoom),f.rotate||(f.rotate=i!==n.bearing),f.pitch||(f.pitch=a!==n.pitch)}return s||c(r.transform,e),l},t._updateSettings=function(e,t){for(var r=this._map,n=!1,o=0,a=h;o0,a=this._queryRenderedFeatures(e.point),i=a.length>0;!i&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,i&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=n}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in v&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;t.transform=this._renderTransform,this._onAfterRepaint=function(){s(e._renderTransform,n),t.transform=n}},(0,a.Z)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function _(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}b.savedMaps=[];var E=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function S(e){if(!e)return null;for(var t,r=e.map,n={getMap:function(){return r},getCenter:function(){return e.transform.center},getZoom:function(){return e.transform.zoom},getBearing:function(){return e.transform.bearing},getPitch:function(){return e.transform.pitch},getPadding:function(){return e.transform.padding},getBounds:function(){return e.transform.getBounds()},project:function(t){var n=r.transform;r.transform=e.transform;var o=r.project(t);return r.transform=n,o},unproject:function(t){var n=r.transform;r.transform=e.transform;var o=r.unproject(t);return r.transform=n,o},queryTerrainElevation:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryTerrainElevation(t,n);return r.transform=o,a},queryRenderedFeatures:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryRenderedFeatures(t,n);return r.transform=o,a}},o=(0,l.Z)(function(e){var t=new Set,r=e;for(;r;){for(var n,o=(0,l.Z)(Object.getOwnPropertyNames(r));!(n=o()).done;){var a=n.value;"_"!==a[0]&&"function"==typeof e[a]&&"fire"!==a&&"setEventedParent"!==a&&t.add(a)}r=Object.getPrototypeOf(r)}return Array.from(t)}(r));!(t=o()).done;){var a=t.value;a in n||E.includes(a)||(n[a]=r[a].bind(r))}return n}const w="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;var x=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];var C=n.createContext(null);function L(e,t,r){var a=(0,n.useContext)(o),i=(0,n.useState)(null),s=i[0],u=i[1],c=(0,n.useRef)(),f=(0,n.useRef)({mapLib:null,map:null}).current;(0,n.useEffect)((function(){var t,n=e.mapLib,o=!0;return Promise.resolve(n||r).then((function(r){if(o){if(!r)throw new Error("Invalid mapLib");var n="Map"in r?r:r.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(var r,n=(0,l.Z)(x);!(r=n()).done;){var o=r.value;o in t&&(e[o]=t[o])}var a=t.RTLTextPlugin,i=void 0===a?"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js":a;i&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(i,(function(e){e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(t=b.reuse(e,c.current)),t||(t=new b(n.Map,e,c.current)),f.map=S(t),f.mapLib=n,u(t),null==a||a.onMapMount(f.map,e.id)}})).catch((function(t){var r=e.onError;r?r({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),function(){o=!1,t&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?t.recycle():t.destroy())}}),[]),w((function(){s&&s.setProps(e)})),(0,n.useImperativeHandle)(t,(function(){return f.map}),[s]);var d=(0,n.useMemo)((function(){return Object.assign({position:"relative",width:"100%",height:"100%"},e.style)}),[e.style]);return n.createElement("div",{id:e.id,ref:c,style:d},s&&n.createElement(C.Provider,{value:f},n.createElement("div",{"mapboxgl-children":"",style:{height:"100%"}},e.children)))}var P=r(3935),M=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function O(e,t){if(e&&t){var r=e.style;for(var n in t){var o=t[n];Number.isFinite(o)&&!M.test(n)?r[n]=o+"px":r[n]=o}}}function T(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,i=(0,n.useRef)({props:e});i.current.props=e;var s=(0,n.useMemo)((function(){var t=!1;n.Children.forEach(e.children,(function(e){e&&(t=!0)}));var r=Object.assign({},e,{element:t?document.createElement("div"):null}),o=new a.Marker(r);return o.setLngLat([e.longitude,e.latitude]),o.getElement().addEventListener("click",(function(e){null==i.current.props.onClick||i.current.props.onClick({type:"click",target:o,originalEvent:e})})),o.on("dragstart",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragStart||i.current.props.onDragStart(t)})),o.on("drag",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDrag||i.current.props.onDrag(t)})),o.on("dragend",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragEnd||i.current.props.onDragEnd(t)})),o}),[]);(0,n.useEffect)((function(){return s.addTo(o.getMap()),function(){s.remove()}}),[]);var u,c,l,f,d,p,m=e.longitude,v=e.latitude,g=e.offset,h=e.style,y=e.draggable,b=void 0!==y&&y,_=e.popup,E=void 0===_?null:_,S=e.rotation,w=void 0===S?0:S,x=e.rotationAlignment,L=void 0===x?"auto":x,M=e.pitchAlignment,T=void 0===M?"auto":M;return(0,n.useEffect)((function(){O(s.getElement(),h)}),[h]),(0,n.useImperativeHandle)(t,(function(){return s}),[]),s.getLngLat().lng===m&&s.getLngLat().lat===v||s.setLngLat([m,v]),g&&(u=s.getOffset(),c=g,l=Array.isArray(u)?u[0]:u?u.x:0,f=Array.isArray(u)?u[1]:u?u.y:0,d=Array.isArray(c)?c[0]:c?c.x:0,p=Array.isArray(c)?c[1]:c?c.y:0,l!==d||f!==p)&&s.setOffset(g),s.isDraggable()!==b&&s.setDraggable(b),s.getRotation()!==w&&s.setRotation(w),s.getRotationAlignment()!==L&&s.setRotationAlignment(L),s.getPitchAlignment()!==T&&s.setPitchAlignment(T),s.getPopup()!==E&&s.setPopup(E),(0,P.createPortal)(e.children,s.getElement())}const j=(0,n.memo)((0,n.forwardRef)(T));function k(e){return new Set(e?e.trim().split(/\s+/):[])}function R(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,s=(0,n.useMemo)((function(){return document.createElement("div")}),[]),u=(0,n.useRef)({props:e});u.current.props=e;var c=(0,n.useMemo)((function(){var t=Object.assign({},e),r=new a.Popup(t);return r.setLngLat([e.longitude,e.latitude]),r.once("open",(function(e){null==u.current.props.onOpen||u.current.props.onOpen(e)})),r}),[]);if((0,n.useEffect)((function(){var e=function(e){null==u.current.props.onClose||u.current.props.onClose(e)};return c.on("close",e),c.setDOMContent(s).addTo(o.getMap()),function(){c.off("close",e),c.isOpen()&&c.remove()}}),[]),(0,n.useEffect)((function(){O(c.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(function(){return c}),[]),c.isOpen()&&(c.getLngLat().lng===e.longitude&&c.getLngLat().lat===e.latitude||c.setLngLat([e.longitude,e.latitude]),e.offset&&!i(c.options.offset,e.offset)&&c.setOffset(e.offset),c.options.anchor===e.anchor&&c.options.maxWidth===e.maxWidth||(c.options.anchor=e.anchor,c.setMaxWidth(e.maxWidth)),c.options.className!==e.className)){for(var f,d=k(c.options.className),p=k(e.className),m=(0,l.Z)(d);!(f=m()).done;){var v=f.value;p.has(v)||c.removeClassName(v)}for(var g,h=(0,l.Z)(p);!(g=h()).done;){var y=g.value;d.has(y)||c.addClassName(y)}c.options.className=e.className}return(0,P.createPortal)(e.children,s)}const z=(0,n.memo)((0,n.forwardRef)(R));const Z=function(e,t,r,o){var a=(0,n.useContext)(C),i=(0,n.useMemo)((function(){return e(a)}),[]);return(0,n.useEffect)((function(){var e=o||r||t,n="function"==typeof t&&"function"==typeof r?t:null,s="function"==typeof r?r:"function"==typeof t?t:null,u=a.map;return u.hasControl(i)||(u.addControl(i,null==e?void 0:e.position),n&&n(a)),function(){s&&s(a),u.hasControl(i)&&u.removeControl(i)}}),[]),i};function I(e){var t=Z((function(t){return new t.mapLib.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((function(){O(t._controlContainer,e.style)}),[e.style]),null}const A=(0,n.memo)(I);function D(e,t){var r=(0,n.useRef)({props:e}),o=Z((function(t){var n=new t.mapLib.GeolocateControl(e),o=n._setupUI;return n._setupUI=function(e){n._container.hasChildNodes()||o(e)},n.on("geolocate",(function(e){null==r.current.props.onGeolocate||r.current.props.onGeolocate(e)})),n.on("error",(function(e){null==r.current.props.onError||r.current.props.onError(e)})),n.on("outofmaxbounds",(function(e){null==r.current.props.onOutOfMaxBounds||r.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(function(e){null==r.current.props.onTrackUserLocationStart||r.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(function(e){null==r.current.props.onTrackUserLocationEnd||r.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return r.current.props=e,(0,n.useImperativeHandle)(t,(function(){return o}),[]),(0,n.useEffect)((function(){O(o._container,e.style)}),[e.style]),null}const N=(0,n.memo)((0,n.forwardRef)(D));function F(e){var t=Z((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((function(){O(t._container,e.style)}),[e.style]),null}const U=(0,n.memo)(F);function W(e){var t=Z((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position}),r=(0,n.useRef)(e),o=r.current;r.current=e;var a=e.style;return void 0!==e.maxWidth&&e.maxWidth!==o.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==o.unit&&t.setUnit(e.unit),(0,n.useEffect)((function(){O(t._container,a)}),[a]),null}const B=(0,n.memo)(W);function H(e,t){if(!e)throw new Error(t)}var q=0;const V=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-layer-"+q++}),[]);if((0,n.useEffect)((function(){if(t){var e=function(){return o((function(e){return e+1}))};return t.on("styledata",e),e(),function(){t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]),t&&t.style&&t.getLayer(a))try{!function(e,t,r,n){if(H(r.id===n.id,"layer id changed"),H(r.type===n.type,"layer type changed"),"custom"!==r.type&&"custom"!==n.type){var o=r.layout,a=void 0===o?{}:o,s=r.paint,u=void 0===s?{}:s,c=r.filter,l=r.minzoom,f=r.maxzoom,d=r.beforeId;if(d!==n.beforeId&&e.moveLayer(t,d),a!==n.layout){var p=n.layout||{};for(var m in a)i(a[m],p[m])||e.setLayoutProperty(t,m,a[m]);for(var v in p)a.hasOwnProperty(v)||e.setLayoutProperty(t,v,void 0)}if(u!==n.paint){var g=n.paint||{};for(var h in u)i(u[h],g[h])||e.setPaintProperty(t,h,u[h]);for(var y in g)u.hasOwnProperty(y)||e.setPaintProperty(t,y,void 0)}i(c,n.filter)||e.setFilter(t,c),l===n.minzoom&&f===n.maxzoom||e.setLayerZoomRange(t,l,f)}}(t,a,e,r.current)}catch(s){console.warn(s)}else!function(e,t,r){if(e.style&&e.style._loaded&&(!("source"in r)||e.getSource(r.source))){var n=Object.assign({},r,{id:t});delete n.beforeId,e.addLayer(n,r.beforeId)}}(t,a,e);return r.current=e,null};var G=0;const J=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-source-"+G++}),[]);(0,n.useEffect)((function(){if(t){var e=function(){return setTimeout((function(){return o((function(e){return e+1}))}),0)};return t.on("styledata",e),e(),function(){if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var r,n=null==(r=t.getStyle())?void 0:r.layers;if(n)for(var o,i=(0,l.Z)(n);!(o=i()).done;){var s=o.value;s.source===a&&t.removeLayer(s.id)}t.removeSource(a)}}}}),[t]);var s=t&&t.style&&t.getSource(a);return s?function(e,t,r){H(t.id===r.id,"source id changed"),H(t.type===r.type,"source type changed");var n="",o=0;for(var a in t)"children"===a||"id"===a||i(r[a],t[a])||(n=a,o++);if(o){var s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else if("setCoordinates"in e&&1===o&&"coordinates"===n)e.setCoordinates(t.coordinates);else if("setUrl"in e)switch(n){case"url":e.setUrl(t.url);break;case"tiles":e.setTiles(t.tiles)}else console.warn("Unable to update prop: "+n)}}(s,e,r.current):s=function(e,t,r){if(e.style&&e.style._loaded){var n=Object.assign({},r);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,a,e),r.current=e,s&&n.Children.map(e.children,(function(e){return e&&(0,n.cloneElement)(e,{source:a})}))||null};var Q=r.e(8539).then(r.t.bind(r,8539,23)),X=n.forwardRef((function(e,t){return L(e,t,Q)})),K=j,Y=z,$=A,ee=U,te=N,re=B,ne=V,oe=J;const ae=X},745:(e,t,r)=>{var n=r(3935);n.createRoot,n.hydrateRoot},1202:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(1002);function o(e){var t=function(e,t){if("object"!==(0,n.Z)(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,t||"default");if("object"!==(0,n.Z)(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===(0,n.Z)(t)?t:String(t)}function a(e,t){for(var r=0;r{o.r(t),o.d(t,{assets:()=>g,contentTitle:()=>y,default:()=>v,frontMatter:()=>h,metadata:()=>r,toc:()=>b});const r=JSON.parse('{"id":"mapbox/zoom-to-bounds","title":"Zoom to Bounds","description":"","source":"@site/src/examples/mapbox/zoom-to-bounds.mdx","sourceDirName":"mapbox","slug":"/mapbox/zoom-to-bounds","permalink":"/react-map-gl/examples/mapbox/zoom-to-bounds","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Camera Transition","permalink":"/react-map-gl/examples/mapbox/viewport-animation"},"next":{"title":"Clusters","permalink":"/react-map-gl/examples/maplibre/clusters"}}');var n=o(4848),a=o(8453),i=o(6540),s=(o(5338),o(2198)),l=o(5917);function c(){return(0,n.jsxs)("div",{className:"control-panel",children:[(0,n.jsx)("h3",{children:"Zoom to Bounding Box"}),(0,n.jsx)("p",{children:"Click on a San Fransisco Neighborhood to zoom in."}),(0,n.jsx)("div",{className:"source-link",children:(0,n.jsx)("a",{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/zoom-to-bounds",target:"_new",children:"View Code \u2197"})})]})}const u=i.memo(c);var p=o(2868);const d=Object.assign({},p,{sources:Object.assign({},p.sources,{"sf-neighborhoods":{type:"geojson",data:"https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/feature-example-sf.json"}}),layers:[...p.layers,{id:"sf-neighborhoods-fill",source:"sf-neighborhoods",type:"fill",paint:{"fill-outline-color":"#0040c8","fill-color":"#fff","fill-opacity":0}},{id:"sf-neighborhoods-outline",source:"sf-neighborhoods",type:"line",paint:{"line-width":2,"line-color":"#0080ef"}}]}),m="";function f(){const e=(0,i.useRef)();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.Ay,{ref:e,initialViewState:{latitude:37.78,longitude:-122.4,zoom:11},mapStyle:d,interactiveLayerIds:["sf-neighborhoods-fill"],onClick:t=>{const o=t.features[0];if(o){const[t,r,n,a]=(0,l.A)(o);e.current.fitBounds([[t,r],[n,a]],{padding:40,duration:1e3})}},mapboxAccessToken:m}),(0,n.jsx)(u,{})]})}const h={},y="Zoom to Bounds",g={},b=[];function x(e){const t={h1:"h1",header:"header",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"zoom-to-bounds",children:"Zoom to Bounds"})}),"\n","\n",(0,n.jsx)(f,{})]})}function v(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(x,{...e})}):x(e)}},2198:(e,t,o)=>{o.d(t,{T3:()=>A,tG:()=>B,Wd:()=>q,T5:()=>E,pH:()=>z,ov:()=>N,zD:()=>T,g0:()=>Z,kL:()=>$,Ay:()=>E,VI:()=>R});var r=o(6540),n=o(4848);const a=r.createContext(null);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let o=0;o{let o=null;"interactive"in e&&(o=Object.assign({},e),delete o.interactive);const r=t[e.ref];if(r){o=o||Object.assign({},e),delete o.ref;for(const e of u)e in r&&(o[e]=r[e])}return o||e}));return Object.assign({},e,{layers:o})}const d={version:8,sources:{},layers:[]},m={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},f={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},h={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},y=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],g=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class b{constructor(e,t,o){this._map=null,this._internalUpdate=!1,this._inRender=!1,this._hoveredFeatures=null,this._deferredEvents={move:!1,zoom:!1,pitch:!1,rotate:!1},this._onEvent=e=>{const t=this.props[h[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[m[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._onCameraEvent=e=>{if(!this._internalUpdate){const t=this.props[f[e.type]];t&&t(e)}e.type in this._deferredEvents&&(this._deferredEvents[e.type]=!1)},this._MapClass=e,this.props=t,this._initialize(o)}get map(){return this._map}get transform(){return this._renderTransform}setProps(e){const t=this.props;this.props=e;const o=this._updateSettings(e,t);o&&this._createShadowTransform(this._map);const r=this._updateSize(e),n=this._updateViewState(e,!0);this._updateStyle(e,t),this._updateStyleComponents(e,t),this._updateHandlers(e,t),(o||r||n&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const o=b.savedMaps.pop();if(!o)return null;const r=o.map,n=r.getContainer();for(t.className=n.className;n.childNodes.length>0;)t.appendChild(n.childNodes[0]);r._container=t,o.setProps(Object.assign({},e,{styleDiffing:!1})),r.resize();const{initialViewState:a}=e;return a&&(a.bounds?r.fitBounds(a.bounds,Object.assign({},a.fitBoundsOptions,{duration:0})):o._updateViewState(a,!1)),r.isStyleLoaded()?r.fire("load"):r.once("styledata",(()=>r.fire("load"))),r._update(),o}_initialize(e){const{props:t}=this,{mapStyle:o=d}=t,r=Object.assign({},t,t.initialViewState,{accessToken:t.mapboxAccessToken||x()||null,container:e,style:p(o)}),n=r.initialViewState||r.viewState||r;if(Object.assign(r,{center:[n.longitude||0,n.latitude||0],zoom:n.zoom||0,pitch:n.pitch||0,bearing:n.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const a=new this._MapClass(r);n.padding&&a.setPadding(n.padding),t.cursor&&(a.getCanvas().style.cursor=t.cursor),this._createShadowTransform(a);const i=a._render;a._render=e=>{this._inRender=!0,i.call(a,e),this._inRender=!1};const l=a._renderTaskQueue.run;a._renderTaskQueue.run=e=>{l.call(a._renderTaskQueue,e),this._onBeforeRepaint()},a.on("render",(()=>this._onAfterRepaint()));const c=a.fire;a.fire=this._fireEvent.bind(this,c),a.on("resize",(()=>{this._renderTransform.resize(a.transform.width,a.transform.height)})),a.on("styledata",(()=>{this._updateStyleComponents(this.props,{}),s(a.transform,this._renderTransform)})),a.on("sourcedata",(()=>this._updateStyleComponents(this.props,{})));for(const s in m)a.on(s,this._onPointerEvent);for(const s in f)a.on(s,this._onCameraEvent);for(const s in h)a.on(s,this._onEvent);this._map=a}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),b.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_createShadowTransform(e){const t=function(e){const t=e.clone();return t.pixelsToGLUnits=e.pixelsToGLUnits,t}(e.transform);e.painter.transform=t,this._renderTransform=t}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e,t){if(this._internalUpdate)return!1;const o=this._map,r=this._renderTransform,{zoom:n,pitch:a,bearing:i}=r,s=o.isMoving();s&&(r.cameraElevationReference="sea");const u=c(r,Object.assign({},l(o.transform),e));if(s&&(r.cameraElevationReference="ground"),u&&t){const e=this._deferredEvents;e.move=!0,e.zoom||(e.zoom=n!==r.zoom),e.rotate||(e.rotate=i!==r.bearing),e.pitch||(e.pitch=a!==r.pitch)}return s||c(o.transform,e),u}_updateSettings(e,t){const o=this._map;let r=!1;for(const n of y)if(n in e&&!i(e[n],t[n])){r=!0;const t=o["set"+n[0].toUpperCase()+n.slice(1)];null==t||t.call(o,e[n])}return r}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=d,styleDiffing:o=!0}=e,r={diff:o};return"localIdeographFontFamily"in e&&(r.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(p(t),r),!0}return!1}_updateStyleComponents(e,t){const o=this._map;let r=!1;return o.isStyleLoaded()&&("light"in e&&o.setLight&&!i(e.light,t.light)&&(r=!0,o.setLight(e.light)),"fog"in e&&o.setFog&&!i(e.fog,t.fog)&&(r=!0,o.setFog(e.fog)),"terrain"in e&&o.setTerrain&&!i(e.terrain,t.terrain)&&(e.terrain&&!o.getSource(e.terrain.source)||(r=!0,o.setTerrain(e.terrain)))),r}_updateHandlers(e,t){const o=this._map;let r=!1;for(const s of g){var n,a;const l=null==(n=e[s])||n;i(l,null==(a=t[s])||a)||(r=!0,l?o[s].enable(l):o[s].disable())}return r}_queryRenderedFeatures(e){const t=this._map,o=t.transform,{interactiveLayerIds:r=[]}=this.props;try{return t.transform=this._renderTransform,t.queryRenderedFeatures(e,{layers:r.filter(t.getLayer.bind(t))})}catch(n){return[]}finally{t.transform=o}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var o;const t=e.type,r=(null==(o=this._hoveredFeatures)?void 0:o.length)>0,n=this._queryRenderedFeatures(e.point),a=n.length>0;!a&&r&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,a&&!r&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}_fireEvent(e,t,o){const r=this._map,n=r.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in f&&("object"==typeof t&&(t.viewState=l(n)),this._map.isMoving())?(r.transform=this._renderTransform,e.call(r,t,o),r.transform=n,r):(e.call(r,t,o),r)}_onBeforeRepaint(){const e=this._map;this._internalUpdate=!0;for(const o in this._deferredEvents)this._deferredEvents[o]&&e.fire(o);this._internalUpdate=!1;const t=this._map.transform;e.transform=this._renderTransform,this._onAfterRepaint=()=>{s(this._renderTransform,t),e.transform=t}}}function x(){let e=null;if("undefined"!=typeof location){const t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(t){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(o){}return e}b.savedMaps=[];const v=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function _(e){if(!e)return null;const t=e.map,o={getMap:()=>t,getCenter:()=>e.transform.center,getZoom:()=>e.transform.zoom,getBearing:()=>e.transform.bearing,getPitch:()=>e.transform.pitch,getPadding:()=>e.transform.padding,getBounds:()=>e.transform.getBounds(),project:o=>{const r=t.transform;t.transform=e.transform;const n=t.project(o);return t.transform=r,n},unproject:o=>{const r=t.transform;t.transform=e.transform;const n=t.unproject(o);return t.transform=r,n},queryTerrainElevation:(o,r)=>{const n=t.transform;t.transform=e.transform;const a=t.queryTerrainElevation(o,r);return t.transform=n,a},queryRenderedFeatures:(o,r)=>{const n=t.transform;t.transform=e.transform;const a=t.queryRenderedFeatures(o,r);return t.transform=n,a}};for(const r of function(e){const t=new Set;let o=e;for(;o;){for(const r of Object.getOwnPropertyNames(o))"_"!==r[0]&&"function"==typeof e[r]&&"fire"!==r&&"setEventedParent"!==r&&t.add(r);o=Object.getPrototypeOf(o)}return Array.from(t)}(t))r in o||v.includes(r)||(o[r]=t[r].bind(t));return o}const w="undefined"!=typeof document?r.useLayoutEffect:r.useEffect,S=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];const L=r.createContext(null);function j(e,t){const i=(0,r.useContext)(a),[s,l]=(0,r.useState)(null),c=(0,r.useRef)(),{current:u}=(0,r.useRef)({mapLib:null,map:null});(0,r.useEffect)((()=>{const t=e.mapLib;let r,n=!0;return Promise.resolve(t||o.e(842).then(o.t.bind(o,842,23))).then((t=>{if(!n)return;if(!t)throw new Error("Invalid mapLib");const o="Map"in t?t:t.default;if(!o.Map)throw new Error("Invalid mapLib");if(function(e,t){for(const r of S)r in t&&(e[r]=t[r]);const{RTLTextPlugin:o="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;o&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(o,(e=>{e&&console.error(e)}),!0)}(o,e),o.supported&&!o.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(r=b.reuse(e,c.current)),r||(r=new b(o.Map,e,c.current)),u.map=_(r),u.mapLib=o,l(r),null==i||i.onMapMount(u.map,e.id)})).catch((t=>{const{onError:o}=e;o?o({type:"error",target:null,error:t}):console.error(t)})),()=>{n=!1,r&&(null==i||i.onMapUnmount(e.id),e.reuseMaps?r.recycle():r.destroy())}}),[]),w((()=>{s&&s.setProps(e)})),(0,r.useImperativeHandle)(t,(()=>u.map),[s]);const p=(0,r.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,n.jsx)("div",{id:e.id,ref:c,style:p,children:s&&(0,n.jsx)(L.Provider,{value:u,children:(0,n.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const E=r.forwardRef(j);var C=o(961);const k=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(!e||!t)return;const o=e.style;for(const r in t){const e=t[r];Number.isFinite(e)&&!k.test(r)?o[r]=e+"px":o[r]=e}}const z=(0,r.memo)((0,r.forwardRef)(((e,t)=>{const{map:o,mapLib:n}=(0,r.useContext)(L),a=(0,r.useRef)({props:e});a.current.props=e;const i=(0,r.useMemo)((()=>{let t=!1;r.Children.forEach(e.children,(e=>{e&&(t=!0)}));const o=Object.assign({},e,{element:t?document.createElement("div"):null}),s=new n.Marker(o);return s.setLngLat([e.longitude,e.latitude]),s.getElement().addEventListener("click",(e=>{null==a.current.props.onClick||a.current.props.onClick({type:"click",target:s,originalEvent:e})})),s.on("dragstart",(e=>{const t=e;t.lngLat=i.getLngLat(),null==a.current.props.onDragStart||a.current.props.onDragStart(t)})),s.on("drag",(e=>{const t=e;t.lngLat=i.getLngLat(),null==a.current.props.onDrag||a.current.props.onDrag(t)})),s.on("dragend",(e=>{const t=e;t.lngLat=i.getLngLat(),null==a.current.props.onDragEnd||a.current.props.onDragEnd(t)})),s}),[]);(0,r.useEffect)((()=>(i.addTo(o.getMap()),()=>{i.remove()})),[]);const{longitude:s,latitude:l,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:f="auto",pitchAlignment:h="auto"}=e;return(0,r.useEffect)((()=>{M(i.getElement(),u)}),[u]),(0,r.useImperativeHandle)(t,(()=>i),[]),i.getLngLat().lng===s&&i.getLngLat().lat===l||i.setLngLat([s,l]),c&&!function(e,t){const o=Array.isArray(e)?e[0]:e?e.x:0,r=Array.isArray(e)?e[1]:e?e.y:0,n=Array.isArray(t)?t[0]:t?t.x:0,a=Array.isArray(t)?t[1]:t?t.y:0;return o===n&&r===a}(i.getOffset(),c)&&i.setOffset(c),i.isDraggable()!==p&&i.setDraggable(p),i.getRotation()!==m&&i.setRotation(m),i.getRotationAlignment()!==f&&i.setRotationAlignment(f),i.getPitchAlignment()!==h&&i.setPitchAlignment(h),i.getPopup()!==d&&i.setPopup(d),(0,C.createPortal)(e.children,i.getElement())})));function P(e){return new Set(e?e.trim().split(/\s+/):[])}const T=(0,r.memo)((0,r.forwardRef)(((e,t)=>{const{map:o,mapLib:n}=(0,r.useContext)(L),a=(0,r.useMemo)((()=>document.createElement("div")),[]),s=(0,r.useRef)({props:e});s.current.props=e;const l=(0,r.useMemo)((()=>{const t=Object.assign({},e),o=new n.Popup(t);return o.setLngLat([e.longitude,e.latitude]),o.once("open",(e=>{null==s.current.props.onOpen||s.current.props.onOpen(e)})),o}),[]);if((0,r.useEffect)((()=>{const e=e=>{null==s.current.props.onClose||s.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(a).addTo(o.getMap()),()=>{l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,r.useEffect)((()=>{M(l.getElement(),e.style)}),[e.style]),(0,r.useImperativeHandle)(t,(()=>l),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!i(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){const t=P(l.options.className),o=P(e.className);for(const e of t)o.has(e)||l.removeClassName(e);for(const e of o)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,C.createPortal)(e.children,a)})));function R(e,t,o,n){const a=(0,r.useContext)(L),i=(0,r.useMemo)((()=>e(a)),[]);return(0,r.useEffect)((()=>{const e=n||o||t,r="function"==typeof t&&"function"==typeof o?t:null,s="function"==typeof o?o:"function"==typeof t?t:null,{map:l}=a;return l.hasControl(i)||(l.addControl(i,null==e?void 0:e.position),r&&r(a)),()=>{s&&s(a),l.hasControl(i)&&l.removeControl(i)}}),[]),i}function O(e){const t=R((t=>{let{mapLib:o}=t;return new o.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,r.useEffect)((()=>{M(t._controlContainer,e.style)}),[e.style]),null}const A=(0,r.memo)(O);function I(e,t){const o=(0,r.useRef)({props:e}),n=R((t=>{let{mapLib:r}=t;const n=new r.GeolocateControl(e),a=n._setupUI.bind(n);return n._setupUI=e=>{n._container.hasChildNodes()||a(e)},n.on("geolocate",(e=>{null==o.current.props.onGeolocate||o.current.props.onGeolocate(e)})),n.on("error",(e=>{null==o.current.props.onError||o.current.props.onError(e)})),n.on("outofmaxbounds",(e=>{null==o.current.props.onOutOfMaxBounds||o.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(e=>{null==o.current.props.onTrackUserLocationStart||o.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(e=>{null==o.current.props.onTrackUserLocationEnd||o.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return o.current.props=e,(0,r.useImperativeHandle)(t,(()=>n),[]),(0,r.useEffect)((()=>{M(n._container,e.style)}),[e.style]),null}const B=(0,r.memo)((0,r.forwardRef)(I));function F(e){const t=R((t=>{let{mapLib:o}=t;return new o.NavigationControl(e)}),{position:e.position});return(0,r.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const N=(0,r.memo)(F);function U(e){const t=R((t=>{let{mapLib:o}=t;return new o.ScaleControl(e)}),{position:e.position}),o=(0,r.useRef)(e),n=o.current;o.current=e;const{style:a}=e;return void 0!==e.maxWidth&&e.maxWidth!==n.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==n.unit&&t.setUnit(e.unit),(0,r.useEffect)((()=>{M(t._container,a)}),[a]),null}const Z=(0,r.memo)(U);function D(e,t){if(!e)throw new Error(t)}let W=0;function $(e){const t=(0,r.useContext)(L).map.getMap(),o=(0,r.useRef)(e),[,n]=(0,r.useState)(0),a=(0,r.useMemo)((()=>e.id||"jsx-source-"+W++),[]);(0,r.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>n((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var o;const e=null==(o=t.getStyle())?void 0:o.layers;if(e)for(const o of e)o.source===a&&t.removeLayer(o.id);t.removeSource(a)}}}}),[t]);let s=t&&t.style&&t.getSource(a);return s?function(e,t,o){D(t.id===o.id,"source id changed"),D(t.type===o.type,"source type changed");let r="",n=0;for(const s in t)"children"===s||"id"===s||i(o[s],t[s])||(r=s,n++);if(!n)return;const a=t.type;"geojson"===a?e.setData(t.data):"image"===a?e.updateImage({url:t.url,coordinates:t.coordinates}):"setCoordinates"in e&&1===n&&"coordinates"===r?e.setCoordinates(t.coordinates):"setUrl"in e&&"url"===r?e.setUrl(t.url):"setTiles"in e&&"tiles"===r?e.setTiles(t.tiles):console.warn("Unable to update prop: "+r)}(s,e,o.current):s=function(e,t,o){if(e.style&&e.style._loaded){const r=Object.assign({},o);return delete r.id,delete r.children,e.addSource(t,r),e.getSource(t)}return null}(t,a,e),o.current=e,s&&r.Children.map(e.children,(e=>e&&(0,r.cloneElement)(e,{source:a})))||null}let H=0;function q(e){const t=(0,r.useContext)(L).map.getMap(),o=(0,r.useRef)(e),[,n]=(0,r.useState)(0),a=(0,r.useMemo)((()=>e.id||"jsx-layer-"+H++),[]);(0,r.useEffect)((()=>{if(t){const e=()=>n((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]);if(t&&t.style&&t.getLayer(a))try{!function(e,t,o,r){if(D(o.id===r.id,"layer id changed"),D(o.type===r.type,"layer type changed"),"custom"===o.type||"custom"===r.type)return;const{layout:n={},paint:a={},filter:s,minzoom:l,maxzoom:c,beforeId:u}=o;if(u!==r.beforeId&&e.moveLayer(t,u),n!==r.layout){const o=r.layout||{};for(const r in n)i(n[r],o[r])||e.setLayoutProperty(t,r,n[r]);for(const r in o)n.hasOwnProperty(r)||e.setLayoutProperty(t,r,void 0)}if(a!==r.paint){const o=r.paint||{};for(const r in a)i(a[r],o[r])||e.setPaintProperty(t,r,a[r]);for(const r in o)a.hasOwnProperty(r)||e.setPaintProperty(t,r,void 0)}i(s,r.filter)||e.setFilter(t,s),l===r.minzoom&&c===r.maxzoom||e.setLayerZoomRange(t,l,c)}(t,a,e,o.current)}catch(s){console.warn(s)}else!function(e,t,o){if(e.style&&e.style._loaded&&(!("source"in o)||e.getSource(o.source))){const r=Object.assign({},o,{id:t});delete r.beforeId,e.addLayer(r,o.beforeId)}}(t,a,e);return o.current=e,null}},5917:(e,t,o)=>{o.d(t,{A:()=>a});var r=o(2820);function n(e){var t=[1/0,1/0,-1/0,-1/0];return(0,r.Fh)(e,(function(e){t[0]>e[0]&&(t[0]=e[0]),t[1]>e[1]&&(t[1]=e[1]),t[2]{e.exports=JSON.parse('{"version":8,"name":"Basic","metadata":{"mapbox:autocomposite":true},"sources":{"mapbox":{"url":"mapbox://mapbox.mapbox-streets-v7","type":"vector"}},"sprite":"mapbox://sprites/mapbox/basic-v8","glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","paint":{"background-color":"#dedede"},"interactive":true},{"id":"landuse_overlay_national_park","type":"fill","source":"mapbox","source-layer":"landuse_overlay","filter":["==","class","national_park"],"paint":{"fill-color":"#d2edae","fill-opacity":0.75},"interactive":true},{"id":"landuse_park","type":"fill","source":"mapbox","source-layer":"landuse","filter":["==","class","park"],"paint":{"fill-color":"#d2edae"},"interactive":true},{"id":"waterway","type":"line","source":"mapbox","source-layer":"waterway","filter":["all",["==","$type","LineString"],["in","class","river","canal"]],"paint":{"line-color":"#a0cfdf","line-width":{"base":1.4,"stops":[[8,0.5],[20,15]]}},"interactive":true},{"id":"water","type":"fill","source":"mapbox","source-layer":"water","paint":{"fill-color":"#a0cfdf"},"interactive":true},{"id":"building","type":"fill","source":"mapbox","source-layer":"building","paint":{"fill-color":"#d6d6d6"},"interactive":true},{"interactive":true,"layout":{"line-cap":"butt","line-join":"miter"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway_link","street","street_limited","service","track","pedestrian","path","link"],["==","structure","tunnel"]]],"type":"line","source":"mapbox","id":"tunnel_minor","paint":{"line-color":"#efefef","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]},"line-dasharray":[0.36,0.18]},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"butt","line-join":"miter"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway","primary","secondary","tertiary","trunk"],["==","structure","tunnel"]]],"type":"line","source":"mapbox","id":"tunnel_major","paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]},"line-dasharray":[0.28,0.14]},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"round","line-join":"round"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway_link","street","street_limited","service","track","pedestrian","path","link"],["in","structure","none","ford"]]],"type":"line","source":"mapbox","id":"road_minor","paint":{"line-color":"#efefef","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"round","line-join":"round"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway","primary","secondary","tertiary","trunk"],["in","structure","none","ford"]]],"type":"line","source":"mapbox","id":"road_major","paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"butt","line-join":"miter"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway_link","street","street_limited","service","track","pedestrian","path","link"],["==","structure","bridge"]]],"type":"line","source":"mapbox","id":"bridge_minor case","paint":{"line-color":"#dedede","line-width":{"base":1.6,"stops":[[12,0.5],[20,10]]},"line-gap-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"butt","line-join":"miter"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway","primary","secondary","tertiary","trunk"],["==","structure","bridge"]]],"type":"line","source":"mapbox","id":"bridge_major case","paint":{"line-color":"#dedede","line-width":{"base":1.6,"stops":[[12,0.5],[20,10]]},"line-gap-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"round","line-join":"round"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway_link","street","street_limited","service","track","pedestrian","path","link"],["==","structure","bridge"]]],"type":"line","source":"mapbox","id":"bridge_minor","paint":{"line-color":"#efefef","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"round","line-join":"round"},"filter":["all",["==","$type","LineString"],["all",["in","class","motorway","primary","secondary","tertiary","trunk"],["==","structure","bridge"]]],"type":"line","source":"mapbox","id":"bridge_major","paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]}},"source-layer":"road"},{"interactive":true,"layout":{"line-cap":"round","line-join":"round"},"filter":["all",["==","$type","LineString"],["all",["<=","admin_level",2],["==","maritime",0]]],"type":"line","source":"mapbox","id":"admin_country","paint":{"line-color":"#8b8a8a","line-width":{"base":1.3,"stops":[[3,0.5],[22,15]]}},"source-layer":"admin"},{"interactive":true,"minzoom":5,"layout":{"icon-image":"{maki}-11","text-offset":[0,0.5],"text-field":"{name_en}","text-font":["Open Sans Semibold","Arial Unicode MS Bold"],"text-max-width":8,"text-anchor":"top","text-size":11,"icon-size":1},"filter":["all",["==","$type","Point"],["all",["==","scalerank",1],["==","localrank",1]]],"type":"symbol","source":"mapbox","id":"poi_label","paint":{"text-color":"#666","text-halo-width":1,"text-halo-color":"rgba(255,255,255,0.75)","text-halo-blur":1},"source-layer":"poi_label"},{"interactive":true,"layout":{"symbol-placement":"line","text-field":"{name_en}","text-font":["Open Sans Semibold","Arial Unicode MS Bold"],"text-transform":"uppercase","text-letter-spacing":0.1,"text-size":{"base":1.4,"stops":[[10,8],[20,14]]}},"filter":["all",["==","$type","LineString"],["in","class","motorway","primary","secondary","tertiary","trunk"]],"type":"symbol","source":"mapbox","id":"road_major_label","paint":{"text-color":"#666","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":2},"source-layer":"road_label"},{"interactive":true,"minzoom":8,"layout":{"text-field":"{name_en}","text-font":["Open Sans Semibold","Arial Unicode MS Bold"],"text-max-width":6,"text-size":{"stops":[[6,12],[12,16]]}},"filter":["all",["==","$type","Point"],["in","type","town","village","hamlet","suburb","neighbourhood","island"]],"type":"symbol","source":"mapbox","id":"place_label_other","paint":{"text-color":"#666","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":1,"text-halo-blur":1},"source-layer":"place_label"},{"interactive":true,"layout":{"text-field":"{name_en}","text-font":["Open Sans Bold","Arial Unicode MS Bold"],"text-max-width":10,"text-size":{"stops":[[3,12],[8,16]]}},"maxzoom":16,"filter":["all",["==","$type","Point"],["==","type","city"]],"type":"symbol","source":"mapbox","id":"place_label_city","paint":{"text-color":"#666","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":1,"text-halo-blur":1},"source-layer":"place_label"},{"interactive":true,"layout":{"text-field":"{name_en}","text-font":["Open Sans Regular","Arial Unicode MS Regular"],"text-max-width":10,"text-size":{"stops":[[3,14],[8,22]]}},"maxzoom":12,"filter":["==","$type","Point"],"type":"symbol","source":"mapbox","id":"country_label","paint":{"text-color":"#666","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":1,"text-halo-blur":1},"source-layer":"country_label"}]}')}}]);
\ No newline at end of file
diff --git a/assets/js/2632493b.a4835898.js b/assets/js/2632493b.a4835898.js
deleted file mode 100644
index 9d3a9406..00000000
--- a/assets/js/2632493b.a4835898.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[2134],{8093:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>E,contentTitle:()=>_,default:()=>C,frontMatter:()=>y,metadata:()=>b,toc:()=>w});var n=r(7462),o=r(3366),a=r(7294),i=r(3905),s=r(7855),u=(r(745),r(945)),l=r(1307),c=r.n(l);function f(e){return(0,u.PE)((function(){return new(c())(e)}),(function(t){var r=t.map;r.on("draw.create",e.onCreate),r.on("draw.update",e.onUpdate),r.on("draw.delete",e.onDelete)}),(function(t){var r=t.map;r.off("draw.create",e.onCreate),r.off("draw.update",e.onUpdate),r.off("draw.delete",e.onDelete)}),{position:e.position}),null}f.defaultProps={onCreate:function(){},onUpdate:function(){},onDelete:function(){}};var d=r(1256);function p(e){for(var t,r=0,n=(0,s.Z)(e.polygons);!(t=n()).done;){var o=t.value;r+=(0,d.Z)(o)}return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Draw Polygon"),r>0&&a.createElement("p",null,Math.round(100*r)/100," ",a.createElement("br",null),"square meters"),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/draw-polygon",target:"_new"},"View Code \u2197")))}const m=a.memo(p);var v="";function g(){var e=(0,a.useState)({}),t=e[0],r=e[1],n=(0,a.useCallback)((function(e){r((function(t){for(var r,n=Object.assign({},t),o=(0,s.Z)(e.features);!(r=o()).done;){var a=r.value;n[a.id]=a}return n}))}),[]),o=(0,a.useCallback)((function(e){r((function(t){for(var r,n=Object.assign({},t),o=(0,s.Z)(e.features);!(r=o()).done;){delete n[r.value.id]}return n}))}),[]);return a.createElement(a.Fragment,null,a.createElement(u.ZP,{initialViewState:{longitude:-91.874,latitude:42.76,zoom:12},mapStyle:"mapbox://styles/mapbox/satellite-v9",mapboxAccessToken:v},a.createElement(f,{position:"top-left",displayControlsDefault:!1,controls:{polygon:!0,trash:!0},defaultMode:"draw_polygon",onCreate:n,onUpdate:n,onDelete:o})),a.createElement(m,{polygons:Object.values(t)}))}var h=["components"],y={},_="Draw Polygon",b={unversionedId:"draw-polygon",id:"draw-polygon",title:"Draw Polygon",description:"",source:"@site/src/examples/draw-polygon.mdx",sourceDirName:".",slug:"/draw-polygon",permalink:"/react-map-gl/examples/draw-polygon",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar",previous:{title:"Heatmap",permalink:"/react-map-gl/examples/heatmap"},next:{title:"Terrain",permalink:"/react-map-gl/examples/terrain"}},E={},w=[],x={toc:w},L="wrapper";function C(e){var t=e.components,r=(0,o.Z)(e,h);return(0,i.kt)(L,(0,n.Z)({},x,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"draw-polygon"},"Draw Polygon"),(0,i.kt)(g,{mdxType:"App"}))}C.isMDXComponent=!0},945:(e,t,r)=>{r.d(t,{ot:()=>$,$j:()=>te,mh:()=>ne,D5:()=>X,Jx:()=>K,Pv:()=>ee,GI:()=>Y,jf:()=>re,Hw:()=>oe,ZP:()=>ae,PE:()=>Z});var n=r(7294),o=n.createContext(null);var a=r(1202);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var r=0;r0;)r.appendChild(a.childNodes[0]);o._container=r;var i=o._resizeObserver;i&&(i.disconnect(),i.observe(r)),n.setProps(Object.assign({},t,{styleDiffing:!1})),o.resize();var s=t.initialViewState;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),o._update(),n},t._initialize=function(e){var t=this,r=this.props,n=r.mapStyle,o=void 0===n?p:n,a=Object.assign({},r,r.initialViewState,{accessToken:r.mapboxAccessToken||b()||null,container:e,style:d(o)}),i=a.initialViewState||a.viewState||a;if(Object.assign(a,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),r.gl){var u=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=u,r.gl}}var l=new this._MapClass(a);i.padding&&l.setPadding(i.padding),r.cursor&&(l.getCanvas().style.cursor=r.cursor),this._createShadowTransform(l);var c=l._render;l._render=function(e){t._inRender=!0,c.call(l,e),t._inRender=!1};var f=l._renderTaskQueue.run;l._renderTaskQueue.run=function(e){f.call(l._renderTaskQueue,e),t._onBeforeRepaint()},l.on("render",(function(){return t._onAfterRepaint()}));var h=l.fire;for(var y in l.fire=this._fireEvent.bind(this,h),l.on("resize",(function(){t._renderTransform.resize(l.transform.width,l.transform.height)})),l.on("styledata",(function(){t._updateStyleComponents(t.props,{}),s(l.transform,t._renderTransform)})),l.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),m)l.on(y,this._onPointerEvent);for(var _ in v)l.on(_,this._onCameraEvent);for(var E in g)l.on(E,this._onEvent);this._map=l},t.recycle=function(){var t=this.map.getContainer().querySelector("[mapboxgl-children]");null==t||t.remove(),e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._createShadowTransform=function(e){var t,r,n=(t=e.transform,(r=t.clone()).pixelsToGLUnits=t.pixelsToGLUnits,r);e.painter.transform=n,this._renderTransform=n},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=r.isMoving();s&&(n.cameraElevationReference="sea");var c=l(n,Object.assign({},u(r.transform),e));if(s&&(n.cameraElevationReference="ground"),c&&t){var f=this._deferredEvents;f.move=!0,f.zoom||(f.zoom=o!==n.zoom),f.rotate||(f.rotate=i!==n.bearing),f.pitch||(f.pitch=a!==n.pitch)}return s||l(r.transform,e),c},t._updateSettings=function(e,t){for(var r=this._map,n=!1,o=0,a=h;o0,a=this._queryRenderedFeatures(e.point),i=a.length>0;!i&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,i&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=n}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in v&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;t.transform=this._renderTransform,this._onAfterRepaint=function(){s(e._renderTransform,n),t.transform=n}},(0,a.Z)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function b(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}_.savedMaps=[];var E=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function w(e){if(!e)return null;for(var t,r=e.map,n={getMap:function(){return r},getCenter:function(){return e.transform.center},getZoom:function(){return e.transform.zoom},getBearing:function(){return e.transform.bearing},getPitch:function(){return e.transform.pitch},getPadding:function(){return e.transform.padding},getBounds:function(){return e.transform.getBounds()},project:function(t){var n=r.transform;r.transform=e.transform;var o=r.project(t);return r.transform=n,o},unproject:function(t){var n=r.transform;r.transform=e.transform;var o=r.unproject(t);return r.transform=n,o},queryTerrainElevation:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryTerrainElevation(t,n);return r.transform=o,a},queryRenderedFeatures:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryRenderedFeatures(t,n);return r.transform=o,a}},o=(0,c.Z)(function(e){var t=new Set,r=e;for(;r;){for(var n,o=(0,c.Z)(Object.getOwnPropertyNames(r));!(n=o()).done;){var a=n.value;"_"!==a[0]&&"function"==typeof e[a]&&"fire"!==a&&"setEventedParent"!==a&&t.add(a)}r=Object.getPrototypeOf(r)}return Array.from(t)}(r));!(t=o()).done;){var a=t.value;a in n||E.includes(a)||(n[a]=r[a].bind(r))}return n}const x="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;var L=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];var C=n.createContext(null);function S(e,t,r){var a=(0,n.useContext)(o),i=(0,n.useState)(null),s=i[0],u=i[1],l=(0,n.useRef)(),f=(0,n.useRef)({mapLib:null,map:null}).current;(0,n.useEffect)((function(){var t,n=e.mapLib,o=!0;return Promise.resolve(n||r).then((function(r){if(o){if(!r)throw new Error("Invalid mapLib");var n="Map"in r?r:r.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(var r,n=(0,c.Z)(L);!(r=n()).done;){var o=r.value;o in t&&(e[o]=t[o])}var a=t.RTLTextPlugin,i=void 0===a?"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js":a;i&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(i,(function(e){e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(t=_.reuse(e,l.current)),t||(t=new _(n.Map,e,l.current)),f.map=w(t),f.mapLib=n,u(t),null==a||a.onMapMount(f.map,e.id)}})).catch((function(t){var r=e.onError;r?r({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),function(){o=!1,t&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?t.recycle():t.destroy())}}),[]),x((function(){s&&s.setProps(e)})),(0,n.useImperativeHandle)(t,(function(){return f.map}),[s]);var d=(0,n.useMemo)((function(){return Object.assign({position:"relative",width:"100%",height:"100%"},e.style)}),[e.style]);return n.createElement("div",{id:e.id,ref:l,style:d},s&&n.createElement(C.Provider,{value:f},n.createElement("div",{"mapboxgl-children":"",style:{height:"100%"}},e.children)))}var M=r(3935),P=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function T(e,t){if(e&&t){var r=e.style;for(var n in t){var o=t[n];Number.isFinite(o)&&!P.test(n)?r[n]=o+"px":r[n]=o}}}function R(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,i=(0,n.useRef)({props:e});i.current.props=e;var s=(0,n.useMemo)((function(){var t=!1;n.Children.forEach(e.children,(function(e){e&&(t=!0)}));var r=Object.assign({},e,{element:t?document.createElement("div"):null}),o=new a.Marker(r);return o.setLngLat([e.longitude,e.latitude]),o.getElement().addEventListener("click",(function(e){null==i.current.props.onClick||i.current.props.onClick({type:"click",target:o,originalEvent:e})})),o.on("dragstart",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragStart||i.current.props.onDragStart(t)})),o.on("drag",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDrag||i.current.props.onDrag(t)})),o.on("dragend",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragEnd||i.current.props.onDragEnd(t)})),o}),[]);(0,n.useEffect)((function(){return s.addTo(o.getMap()),function(){s.remove()}}),[]);var u,l,c,f,d,p,m=e.longitude,v=e.latitude,g=e.offset,h=e.style,y=e.draggable,_=void 0!==y&&y,b=e.popup,E=void 0===b?null:b,w=e.rotation,x=void 0===w?0:w,L=e.rotationAlignment,S=void 0===L?"auto":L,P=e.pitchAlignment,R=void 0===P?"auto":P;return(0,n.useEffect)((function(){T(s.getElement(),h)}),[h]),(0,n.useImperativeHandle)(t,(function(){return s}),[]),s.getLngLat().lng===m&&s.getLngLat().lat===v||s.setLngLat([m,v]),g&&(u=s.getOffset(),l=g,c=Array.isArray(u)?u[0]:u?u.x:0,f=Array.isArray(u)?u[1]:u?u.y:0,d=Array.isArray(l)?l[0]:l?l.x:0,p=Array.isArray(l)?l[1]:l?l.y:0,c!==d||f!==p)&&s.setOffset(g),s.isDraggable()!==_&&s.setDraggable(_),s.getRotation()!==x&&s.setRotation(x),s.getRotationAlignment()!==S&&s.setRotationAlignment(S),s.getPitchAlignment()!==R&&s.setPitchAlignment(R),s.getPopup()!==E&&s.setPopup(E),(0,M.createPortal)(e.children,s.getElement())}const k=(0,n.memo)((0,n.forwardRef)(R));function j(e){return new Set(e?e.trim().split(/\s+/):[])}function z(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,s=(0,n.useMemo)((function(){return document.createElement("div")}),[]),u=(0,n.useRef)({props:e});u.current.props=e;var l=(0,n.useMemo)((function(){var t=Object.assign({},e),r=new a.Popup(t);return r.setLngLat([e.longitude,e.latitude]),r.once("open",(function(e){null==u.current.props.onOpen||u.current.props.onOpen(e)})),r}),[]);if((0,n.useEffect)((function(){var e=function(e){null==u.current.props.onClose||u.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(o.getMap()),function(){l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,n.useEffect)((function(){T(l.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(function(){return l}),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!i(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){for(var f,d=j(l.options.className),p=j(e.className),m=(0,c.Z)(d);!(f=m()).done;){var v=f.value;p.has(v)||l.removeClassName(v)}for(var g,h=(0,c.Z)(p);!(g=h()).done;){var y=g.value;d.has(y)||l.addClassName(y)}l.options.className=e.className}return(0,M.createPortal)(e.children,s)}const O=(0,n.memo)((0,n.forwardRef)(z));const Z=function(e,t,r,o){var a=(0,n.useContext)(C),i=(0,n.useMemo)((function(){return e(a)}),[]);return(0,n.useEffect)((function(){var e=o||r||t,n="function"==typeof t&&"function"==typeof r?t:null,s="function"==typeof r?r:"function"==typeof t?t:null,u=a.map;return u.hasControl(i)||(u.addControl(i,null==e?void 0:e.position),n&&n(a)),function(){s&&s(a),u.hasControl(i)&&u.removeControl(i)}}),[]),i};function D(e){var t=Z((function(t){return new t.mapLib.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((function(){T(t._controlContainer,e.style)}),[e.style]),null}const I=(0,n.memo)(D);function A(e,t){var r=(0,n.useRef)({props:e}),o=Z((function(t){var n=new t.mapLib.GeolocateControl(e),o=n._setupUI;return n._setupUI=function(e){n._container.hasChildNodes()||o(e)},n.on("geolocate",(function(e){null==r.current.props.onGeolocate||r.current.props.onGeolocate(e)})),n.on("error",(function(e){null==r.current.props.onError||r.current.props.onError(e)})),n.on("outofmaxbounds",(function(e){null==r.current.props.onOutOfMaxBounds||r.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(function(e){null==r.current.props.onTrackUserLocationStart||r.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(function(e){null==r.current.props.onTrackUserLocationEnd||r.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return r.current.props=e,(0,n.useImperativeHandle)(t,(function(){return o}),[]),(0,n.useEffect)((function(){T(o._container,e.style)}),[e.style]),null}const U=(0,n.memo)((0,n.forwardRef)(A));function F(e){var t=Z((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((function(){T(t._container,e.style)}),[e.style]),null}const N=(0,n.memo)(F);function B(e){var t=Z((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position}),r=(0,n.useRef)(e),o=r.current;r.current=e;var a=e.style;return void 0!==e.maxWidth&&e.maxWidth!==o.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==o.unit&&t.setUnit(e.unit),(0,n.useEffect)((function(){T(t._container,a)}),[a]),null}const W=(0,n.memo)(B);function H(e,t){if(!e)throw new Error(t)}var q=0;const V=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-layer-"+q++}),[]);if((0,n.useEffect)((function(){if(t){var e=function(){return o((function(e){return e+1}))};return t.on("styledata",e),e(),function(){t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]),t&&t.style&&t.getLayer(a))try{!function(e,t,r,n){if(H(r.id===n.id,"layer id changed"),H(r.type===n.type,"layer type changed"),"custom"!==r.type&&"custom"!==n.type){var o=r.layout,a=void 0===o?{}:o,s=r.paint,u=void 0===s?{}:s,l=r.filter,c=r.minzoom,f=r.maxzoom,d=r.beforeId;if(d!==n.beforeId&&e.moveLayer(t,d),a!==n.layout){var p=n.layout||{};for(var m in a)i(a[m],p[m])||e.setLayoutProperty(t,m,a[m]);for(var v in p)a.hasOwnProperty(v)||e.setLayoutProperty(t,v,void 0)}if(u!==n.paint){var g=n.paint||{};for(var h in u)i(u[h],g[h])||e.setPaintProperty(t,h,u[h]);for(var y in g)u.hasOwnProperty(y)||e.setPaintProperty(t,y,void 0)}i(l,n.filter)||e.setFilter(t,l),c===n.minzoom&&f===n.maxzoom||e.setLayerZoomRange(t,c,f)}}(t,a,e,r.current)}catch(s){console.warn(s)}else!function(e,t,r){if(e.style&&e.style._loaded&&(!("source"in r)||e.getSource(r.source))){var n=Object.assign({},r,{id:t});delete n.beforeId,e.addLayer(n,r.beforeId)}}(t,a,e);return r.current=e,null};var G=0;const J=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-source-"+G++}),[]);(0,n.useEffect)((function(){if(t){var e=function(){return setTimeout((function(){return o((function(e){return e+1}))}),0)};return t.on("styledata",e),e(),function(){if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var r,n=null==(r=t.getStyle())?void 0:r.layers;if(n)for(var o,i=(0,c.Z)(n);!(o=i()).done;){var s=o.value;s.source===a&&t.removeLayer(s.id)}t.removeSource(a)}}}}),[t]);var s=t&&t.style&&t.getSource(a);return s?function(e,t,r){H(t.id===r.id,"source id changed"),H(t.type===r.type,"source type changed");var n="",o=0;for(var a in t)"children"===a||"id"===a||i(r[a],t[a])||(n=a,o++);if(o){var s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else if("setCoordinates"in e&&1===o&&"coordinates"===n)e.setCoordinates(t.coordinates);else if("setUrl"in e)switch(n){case"url":e.setUrl(t.url);break;case"tiles":e.setTiles(t.tiles)}else console.warn("Unable to update prop: "+n)}}(s,e,r.current):s=function(e,t,r){if(e.style&&e.style._loaded){var n=Object.assign({},r);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,a,e),r.current=e,s&&n.Children.map(e.children,(function(e){return e&&(0,n.cloneElement)(e,{source:a})}))||null};var Q=r.e(8539).then(r.t.bind(r,8539,23)),X=n.forwardRef((function(e,t){return S(e,t,Q)})),K=k,Y=O,$=I,ee=N,te=U,re=W,ne=V,oe=J;const ae=X}}]);
\ No newline at end of file
diff --git a/assets/js/275961e3.3a5a94f0.js b/assets/js/275961e3.3a5a94f0.js
deleted file mode 100644
index 3f57eb78..00000000
--- a/assets/js/275961e3.3a5a94f0.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[7944],{3905:(e,t,a)=>{a.d(t,{Zo:()=>u,kt:()=>f});var r=a(7294);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function p(e){for(var t=1;t=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var l=r.createContext({}),s=function(e){var t=r.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):p(p({},t),e)),a},u=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,o=e.mdxType,n=e.originalType,l=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),c=s(a),d=o,f=c["".concat(l,".").concat(d)]||c[d]||m[d]||n;return a?r.createElement(f,p(p({ref:t},u),{},{components:a})):r.createElement(f,p({ref:t},u))}));function f(e,t){var a=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=a.length,p=new Array(n);p[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[c]="string"==typeof e?e:o,p[1]=i;for(var s=2;s{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var r=a(7462),o=a(3366),n=(a(7294),a(3905)),p=["components"],i={},l="About Mapbox Tokens",s={unversionedId:"get-started/mapbox-tokens",id:"get-started/mapbox-tokens",title:"About Mapbox Tokens",description:"react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.",source:"@site/../docs/get-started/mapbox-tokens.md",sourceDirName:"get-started",slug:"/get-started/mapbox-tokens",permalink:"/react-map-gl/docs/get-started/mapbox-tokens",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/mapbox-tokens.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Get Started",permalink:"/react-map-gl/docs/get-started/"},next:{title:"State Management",permalink:"/react-map-gl/docs/get-started/state-management"}},u={},c=[{value:"Display Maps Without A Mapbox Token",id:"display-maps-without-a-mapbox-token",level:2}],m={toc:c},d="wrapper";function f(e){var t=e.components,a=(0,o.Z)(e,p);return(0,n.kt)(d,(0,r.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"about-mapbox-tokens"},"About Mapbox Tokens"),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"react-map-gl")," itself is open source and free. It provides a React wrapper for ",(0,n.kt)("inlineCode",{parentName:"p"},"mapbox-gl")," or derived projects.\nDepending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0"},"mapbox-gl@>=2.0.0")," and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"mapbox-gl@1.x")," or ",(0,n.kt)("a",{parentName:"li",href:"https://github.com/maplibre/maplibre-gl-js"},"maplibre-gl"),' - requires an access token only if you load the map styles and tiles from Mapbox\'s data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.')),(0,n.kt)("p",null,"To get a Mapbox token, you will need to register on ",(0,n.kt)("a",{parentName:"p",href:"https://www.mapbox.com"},"their website"),". The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded."),(0,n.kt)("p",null,"There are several ways to provide a token to your app, as showcased in some of the example folders:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Provide a ",(0,n.kt)("inlineCode",{parentName:"li"},"mapboxAccessToken")," prop to the map component"),(0,n.kt)("li",{parentName:"ul"},"Set the ",(0,n.kt)("inlineCode",{parentName:"li"},"MapboxAccessToken")," environment variable (or set ",(0,n.kt)("inlineCode",{parentName:"li"},"REACT_APP_MAPBOX_ACCESS_TOKEN")," if you are using Create React App)"),(0,n.kt)("li",{parentName:"ul"},"Provide it in the URL, e.g ",(0,n.kt)("inlineCode",{parentName:"li"},"?access_token=TOKEN"))),(0,n.kt)("p",null,"We recommend using an environment variable to minimize leaking risks. See ",(0,n.kt)("a",{parentName:"p",href:"/react-map-gl/docs/get-started/tips-and-tricks#securing-mapbox-token"},"securing Mapbox token")," for examples."),(0,n.kt)("h2",{id:"display-maps-without-a-mapbox-token"},"Display Maps Without A Mapbox Token"),(0,n.kt)("p",null,"It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Stay on ",(0,n.kt)("inlineCode",{parentName:"li"},"mapbox-gl@1.x"),". react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox."),(0,n.kt)("li",{parentName:"ul"},"Use a community fork of mapbox-gl, for example ",(0,n.kt)("a",{parentName:"li",href:"https://www.npmjs.com/package/maplibre-gl"},"maplibre-gl"),". See ",(0,n.kt)("a",{parentName:"li",href:"/react-map-gl/docs/get-started/"},"Get Started")," for how to configure your project.")),(0,n.kt)("p",null,"To use your own map service, you will need a custom Mapbox GL style that points to your own ",(0,n.kt)("a",{parentName:"p",href:"https://www.mapbox.com/mapbox-gl-js/style-spec/"},"vector tile source"),", and pass it to ",(0,n.kt)("inlineCode",{parentName:"p"},"Map")," using the ",(0,n.kt)("inlineCode",{parentName:"p"},"mapStyle")," prop. This custom style must match the schema of your tile source."),(0,n.kt)("p",null,"Open source tile schemas include:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://tilezen.readthedocs.io/en/latest/layers/"},"TileZen schema")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://openmaptiles.org/schema/"},"OpenMapTiles schema "))),(0,n.kt)("p",null,"Some useful resources for creating your own map service:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://www.mapbox.com/developers/vector-tiles/"},"Mapbox Vector Tile Spec")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/mapbox/awesome-vector-tiles"},"Open source tools"))),(0,n.kt)("p",null,"If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to ",(0,n.kt)("inlineCode",{parentName:"p"},"Map")," using the ",(0,n.kt)("inlineCode",{parentName:"p"},"transformRequest")," prop."),(0,n.kt)("p",null,"An example function:"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-ts"},"const transformRequest = (url, resourceType) => {\n if (resourceType === 'Tile' && url.match('yourTileSource.com')) {\n return {\n url: url,\n headers: { 'Authorization': 'Bearer ' + yourAuthToken }\n }\n }\n}\n")))}f.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/275961e3.918a1d54.js b/assets/js/275961e3.918a1d54.js
new file mode 100644
index 00000000..c672b904
--- /dev/null
+++ b/assets/js/275961e3.918a1d54.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6559],{2624:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"get-started/mapbox-tokens","title":"About Mapbox Tokens","description":"react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl, maplibre-gl or compatible projects.","source":"@site/../docs/get-started/mapbox-tokens.md","sourceDirName":"get-started","slug":"/get-started/mapbox-tokens","permalink":"/react-map-gl/docs/get-started/mapbox-tokens","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/mapbox-tokens.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Get Started","permalink":"/react-map-gl/docs/get-started/"},"next":{"title":"State Management","permalink":"/react-map-gl/docs/get-started/state-management"}}');var r=s(4848),n=s(8453);const a={},i="About Mapbox Tokens",l={},c=[{value:"Display Maps Without A Mapbox Token",id:"display-maps-without-a-mapbox-token",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,n.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"about-mapbox-tokens",children:"About Mapbox Tokens"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"react-map-gl"})," itself is open source and free. It provides a React wrapper for ",(0,r.jsx)(t.code,{children:"mapbox-gl"}),", ",(0,r.jsx)(t.code,{children:"maplibre-gl"})," or compatible projects.\nDepending on which base map library you use, you may need a Mapbox token. You will need a Mapbox token if you use:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0",children:"mapbox-gl@>=2.0.0"})," - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"mapbox-gl@1.x"}),' - requires an access token only if you load the map styles and tiles from Mapbox\'s data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.']}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["To get a Mapbox token, you will need to register on ",(0,r.jsx)(t.a,{href:"https://www.mapbox.com",children:"the Mapbox website"}),". The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded."]}),"\n",(0,r.jsx)(t.p,{children:"There are several ways to provide a token to your app, as showcased in some of the example folders:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Provide a ",(0,r.jsx)(t.code,{children:"mapboxAccessToken"})," prop to the map component"]}),"\n",(0,r.jsxs)(t.li,{children:["Set the ",(0,r.jsx)(t.code,{children:"MapboxAccessToken"})," environment variable (or set ",(0,r.jsx)(t.code,{children:"REACT_APP_MAPBOX_ACCESS_TOKEN"})," if you are using Create React App)"]}),"\n",(0,r.jsxs)(t.li,{children:["Provide it in the URL, e.g ",(0,r.jsx)(t.code,{children:"?access_token=TOKEN"})]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["We recommend using an environment variable to minimize leaking risks. See ",(0,r.jsx)(t.a,{href:"/react-map-gl/docs/get-started/tips-and-tricks#securing-mapbox-token",children:"securing Mapbox token"})," for examples."]}),"\n",(0,r.jsx)(t.h2,{id:"display-maps-without-a-mapbox-token",children:"Display Maps Without A Mapbox Token"}),"\n",(0,r.jsxs)(t.p,{children:["It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using ",(0,r.jsx)(t.code,{children:"mapbox-gl"})," v2.0 and above. The options are:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Use ",(0,r.jsx)(t.a,{href:"https://maplibre.org/maplibre-gl-js/docs/",children:"maplibre-gl"}),". See ",(0,r.jsx)(t.a,{href:"/react-map-gl/docs/get-started/",children:"Get Started"})," for how to configure your project."]}),"\n",(0,r.jsxs)(t.li,{children:["Stay on ",(0,r.jsx)(t.code,{children:"mapbox-gl@1.x"}),". react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["To use your own map service, you will need a custom map style that points to your own ",(0,r.jsx)(t.a,{href:"https://maplibre.org/maplibre-style-spec/sources/",children:"tile source"}),", and pass it to ",(0,r.jsx)(t.code,{children:"Map"})," using the ",(0,r.jsx)(t.code,{children:"mapStyle"})," prop."]}),"\n",(0,r.jsx)(t.p,{children:"Some alternative map data providers include:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://www.maptiler.com",children:"MapTiler"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://docs.aws.amazon.com/location/latest/developerguide/map-concepts.html",children:"Amazon Location Service"})}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Useful resources for creating your own map tiles and service:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://maplibre.org/martin/introduction.html",children:"Martin Tile Server"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://openmaptiles.org",children:"OpenMapTiles"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/mapbox/vector-tile-spec",children:"Mapbox Vector Tile Spec"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/protomaps/PMTiles",children:"PMTiles"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/mapbox/awesome-vector-tiles",children:"List of open source tools"})}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to ",(0,r.jsx)(t.code,{children:"Map"})," using the ",(0,r.jsx)(t.code,{children:"transformRequest"})," prop."]}),"\n",(0,r.jsx)(t.p,{children:"An example function:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"const transformRequest = (url, resourceType) => {\n if (resourceType === 'Tile' && url.match('yourTileSource.com')) {\n return {\n url: url,\n headers: { 'Authorization': 'Bearer ' + yourAuthToken }\n }\n }\n}\n"})})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>a,x:()=>i});var o=s(6540);const r={},n=o.createContext(r);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/2b604174.3aafd5d4.js b/assets/js/2b604174.3aafd5d4.js
deleted file mode 100644
index 1be9c103..00000000
--- a/assets/js/2b604174.3aafd5d4.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5186],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),l=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,u=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=l(n),m=o,f=p["".concat(u,".").concat(m)]||p[m]||d[m]||a;return n?r.createElement(f,i(i({ref:t},c),{},{components:n})):r.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=m;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s[p]="string"==typeof e?e:o,i[1]=s;for(var l=2;l{n.r(t),n.d(t,{assets:()=>b,contentTitle:()=>y,default:()=>E,frontMatter:()=>h,metadata:()=>_,toc:()=>w});var r=n(7462),o=n(3366),a=n(7294),i=n(3905),s=(n(745),n(945));function u(){return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Marker, Popup, NavigationControl and FullscreenControl "),a.createElement("p",null,"Map showing top 20 most populated cities of the United States. Click on a marker to learn more."),a.createElement("p",null,"Data source:"," ",a.createElement("a",{href:"https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population"},"Wikipedia")),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/controls",target:"_new"},"View Code \u2197")))}const l=a.memo(u);var c={cursor:"pointer",fill:"#d00",stroke:"none"};function p(e){var t=e.size,n=void 0===t?20:t;return a.createElement("svg",{height:n,viewBox:"0 0 24 24",style:c},a.createElement("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n C20.1,15.8,20.2,15.8,20.2,15.7z"}))}const d=a.memo(p);var m=n(7971),f="";function g(){var e=(0,a.useState)(null),t=e[0],n=e[1],r=(0,a.useMemo)((function(){return m.map((function(e,t){return a.createElement(s.Jx,{key:"marker-"+t,longitude:e.longitude,latitude:e.latitude,anchor:"bottom",onClick:function(t){t.originalEvent.stopPropagation(),n(e)}},a.createElement(d,null))}))}),[]);return a.createElement(a.Fragment,null,a.createElement(s.ZP,{initialViewState:{latitude:40,longitude:-100,zoom:3.5,bearing:0,pitch:0},mapStyle:"mapbox://styles/mapbox/dark-v9",mapboxAccessToken:f},a.createElement(s.$j,{position:"top-left"}),a.createElement(s.ot,{position:"top-left"}),a.createElement(s.Pv,{position:"top-left"}),a.createElement(s.jf,null),r,t&&a.createElement(s.GI,{anchor:"top",longitude:Number(t.longitude),latitude:Number(t.latitude),onClose:function(){return n(null)}},a.createElement("div",null,t.city,", ",t.state," |"," ",a.createElement("a",{target:"_new",href:"http://en.wikipedia.org/w/index.php?title=Special:Search&search="+t.city+", "+t.state},"Wikipedia")),a.createElement("img",{width:"100%",src:t.image}))),a.createElement(l,null))}var v=["components"],h={},y="Markers, Popups and Controls",_={unversionedId:"controls",id:"controls",title:"Markers, Popups and Controls",description:"",source:"@site/src/examples/controls.mdx",sourceDirName:".",slug:"/controls",permalink:"/react-map-gl/examples/controls",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar",previous:{title:"Dynamic Styling",permalink:"/react-map-gl/examples/layers"},next:{title:"Custom Cursor",permalink:"/react-map-gl/examples/custom-cursor"}},b={},w=[],k={toc:w},x="wrapper";function E(e){var t=e.components,n=(0,o.Z)(e,v);return(0,i.kt)(x,(0,r.Z)({},k,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"markers-popups-and-controls"},"Markers, Popups and Controls"),(0,i.kt)(g,{mdxType:"App"}))}E.isMDXComponent=!0},945:(e,t,n)=>{n.d(t,{ot:()=>K,$j:()=>te,mh:()=>re,D5:()=>X,Jx:()=>Y,Pv:()=>ee,GI:()=>$,jf:()=>ne,Hw:()=>oe,ZP:()=>ae,PE:()=>z});var r=n(7294),o=r.createContext(null);var a=n(1202);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var n=0;n0;)n.appendChild(a.childNodes[0]);o._container=n;var i=o._resizeObserver;i&&(i.disconnect(),i.observe(n)),r.setProps(Object.assign({},t,{styleDiffing:!1})),o.resize();var s=t.initialViewState;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):r._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),o._update(),r},t._initialize=function(e){var t=this,n=this.props,r=n.mapStyle,o=void 0===r?m:r,a=Object.assign({},n,n.initialViewState,{accessToken:n.mapboxAccessToken||b()||null,container:e,style:d(o)}),i=a.initialViewState||a.viewState||a;if(Object.assign(a,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),n.gl){var u=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=u,n.gl}}var l=new this._MapClass(a);i.padding&&l.setPadding(i.padding),n.cursor&&(l.getCanvas().style.cursor=n.cursor),this._createShadowTransform(l);var c=l._render;l._render=function(e){t._inRender=!0,c.call(l,e),t._inRender=!1};var p=l._renderTaskQueue.run;l._renderTaskQueue.run=function(e){p.call(l._renderTaskQueue,e),t._onBeforeRepaint()},l.on("render",(function(){return t._onAfterRepaint()}));var h=l.fire;for(var y in l.fire=this._fireEvent.bind(this,h),l.on("resize",(function(){t._renderTransform.resize(l.transform.width,l.transform.height)})),l.on("styledata",(function(){t._updateStyleComponents(t.props,{}),s(l.transform,t._renderTransform)})),l.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),f)l.on(y,this._onPointerEvent);for(var _ in g)l.on(_,this._onCameraEvent);for(var w in v)l.on(w,this._onEvent);this._map=l},t.recycle=function(){var t=this.map.getContainer().querySelector("[mapboxgl-children]");null==t||t.remove(),e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._createShadowTransform=function(e){var t,n,r=(t=e.transform,(n=t.clone()).pixelsToGLUnits=t.pixelsToGLUnits,n);e.painter.transform=r,this._renderTransform=r},t._updateSize=function(e){var t=e.viewState;if(t){var n=this._map;if(t.width!==n.transform.width||t.height!==n.transform.height)return n.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var n=this._map,r=this._renderTransform,o=r.zoom,a=r.pitch,i=r.bearing,s=n.isMoving();s&&(r.cameraElevationReference="sea");var c=l(r,Object.assign({},u(n.transform),e));if(s&&(r.cameraElevationReference="ground"),c&&t){var p=this._deferredEvents;p.move=!0,p.zoom||(p.zoom=o!==r.zoom),p.rotate||(p.rotate=i!==r.bearing),p.pitch||(p.pitch=a!==r.pitch)}return s||l(n.transform,e),c},t._updateSettings=function(e,t){for(var n=this._map,r=!1,o=0,a=h;o0,a=this._queryRenderedFeatures(e.point),i=a.length>0;!i&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,i&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=r}else this._hoveredFeatures=null},t._fireEvent=function(e,t,n){var r=this._map,o=r.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in g&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(r.transform=this._renderTransform,e.call(r,t,n),r.transform=o,r):(e.call(r,t,n),r)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var n in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[n]&&t.fire(n);this._internalUpdate=!1;var r=this._map.transform;t.transform=this._renderTransform,this._onAfterRepaint=function(){s(e._renderTransform,r),t.transform=r}},(0,a.Z)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function b(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(n){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(r){}return e}_.savedMaps=[];var w=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function k(e){if(!e)return null;for(var t,n=e.map,r={getMap:function(){return n},getCenter:function(){return e.transform.center},getZoom:function(){return e.transform.zoom},getBearing:function(){return e.transform.bearing},getPitch:function(){return e.transform.pitch},getPadding:function(){return e.transform.padding},getBounds:function(){return e.transform.getBounds()},project:function(t){var r=n.transform;n.transform=e.transform;var o=n.project(t);return n.transform=r,o},unproject:function(t){var r=n.transform;n.transform=e.transform;var o=n.unproject(t);return n.transform=r,o},queryTerrainElevation:function(t,r){var o=n.transform;n.transform=e.transform;var a=n.queryTerrainElevation(t,r);return n.transform=o,a},queryRenderedFeatures:function(t,r){var o=n.transform;n.transform=e.transform;var a=n.queryRenderedFeatures(t,r);return n.transform=o,a}},o=(0,c.Z)(function(e){var t=new Set,n=e;for(;n;){for(var r,o=(0,c.Z)(Object.getOwnPropertyNames(n));!(r=o()).done;){var a=r.value;"_"!==a[0]&&"function"==typeof e[a]&&"fire"!==a&&"setEventedParent"!==a&&t.add(a)}n=Object.getPrototypeOf(n)}return Array.from(t)}(n));!(t=o()).done;){var a=t.value;a in r||w.includes(a)||(r[a]=n[a].bind(n))}return r}const x="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;var E=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];var S=r.createContext(null);function C(e,t,n){var a=(0,r.useContext)(o),i=(0,r.useState)(null),s=i[0],u=i[1],l=(0,r.useRef)(),p=(0,r.useRef)({mapLib:null,map:null}).current;(0,r.useEffect)((function(){var t,r=e.mapLib,o=!0;return Promise.resolve(r||n).then((function(n){if(o){if(!n)throw new Error("Invalid mapLib");var r="Map"in n?n:n.default;if(!r.Map)throw new Error("Invalid mapLib");if(function(e,t){for(var n,r=(0,c.Z)(E);!(n=r()).done;){var o=n.value;o in t&&(e[o]=t[o])}var a=t.RTLTextPlugin,i=void 0===a?"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js":a;i&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(i,(function(e){e&&console.error(e)}),!0)}(r,e),r.supported&&!r.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(t=_.reuse(e,l.current)),t||(t=new _(r.Map,e,l.current)),p.map=k(t),p.mapLib=r,u(t),null==a||a.onMapMount(p.map,e.id)}})).catch((function(t){var n=e.onError;n?n({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),function(){o=!1,t&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?t.recycle():t.destroy())}}),[]),x((function(){s&&s.setProps(e)})),(0,r.useImperativeHandle)(t,(function(){return p.map}),[s]);var d=(0,r.useMemo)((function(){return Object.assign({position:"relative",width:"100%",height:"100%"},e.style)}),[e.style]);return r.createElement("div",{id:e.id,ref:l,style:d},s&&r.createElement(S.Provider,{value:p},r.createElement("div",{"mapboxgl-children":"",style:{height:"100%"}},e.children)))}var P=n(3935),j=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function L(e,t){if(e&&t){var n=e.style;for(var r in t){var o=t[r];Number.isFinite(o)&&!j.test(r)?n[r]=o+"px":n[r]=o}}}function M(e,t){var n=(0,r.useContext)(S),o=n.map,a=n.mapLib,i=(0,r.useRef)({props:e});i.current.props=e;var s=(0,r.useMemo)((function(){var t=!1;r.Children.forEach(e.children,(function(e){e&&(t=!0)}));var n=Object.assign({},e,{element:t?document.createElement("div"):null}),o=new a.Marker(n);return o.setLngLat([e.longitude,e.latitude]),o.getElement().addEventListener("click",(function(e){null==i.current.props.onClick||i.current.props.onClick({type:"click",target:o,originalEvent:e})})),o.on("dragstart",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragStart||i.current.props.onDragStart(t)})),o.on("drag",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDrag||i.current.props.onDrag(t)})),o.on("dragend",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragEnd||i.current.props.onDragEnd(t)})),o}),[]);(0,r.useEffect)((function(){return s.addTo(o.getMap()),function(){s.remove()}}),[]);var u,l,c,p,d,m,f=e.longitude,g=e.latitude,v=e.offset,h=e.style,y=e.draggable,_=void 0!==y&&y,b=e.popup,w=void 0===b?null:b,k=e.rotation,x=void 0===k?0:k,E=e.rotationAlignment,C=void 0===E?"auto":E,j=e.pitchAlignment,M=void 0===j?"auto":j;return(0,r.useEffect)((function(){L(s.getElement(),h)}),[h]),(0,r.useImperativeHandle)(t,(function(){return s}),[]),s.getLngLat().lng===f&&s.getLngLat().lat===g||s.setLngLat([f,g]),v&&(u=s.getOffset(),l=v,c=Array.isArray(u)?u[0]:u?u.x:0,p=Array.isArray(u)?u[1]:u?u.y:0,d=Array.isArray(l)?l[0]:l?l.x:0,m=Array.isArray(l)?l[1]:l?l.y:0,c!==d||p!==m)&&s.setOffset(v),s.isDraggable()!==_&&s.setDraggable(_),s.getRotation()!==x&&s.setRotation(x),s.getRotationAlignment()!==C&&s.setRotationAlignment(C),s.getPitchAlignment()!==M&&s.setPitchAlignment(M),s.getPopup()!==w&&s.setPopup(w),(0,P.createPortal)(e.children,s.getElement())}const T=(0,r.memo)((0,r.forwardRef)(M));function O(e){return new Set(e?e.trim().split(/\s+/):[])}function R(e,t){var n=(0,r.useContext)(S),o=n.map,a=n.mapLib,s=(0,r.useMemo)((function(){return document.createElement("div")}),[]),u=(0,r.useRef)({props:e});u.current.props=e;var l=(0,r.useMemo)((function(){var t=Object.assign({},e),n=new a.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(function(e){null==u.current.props.onOpen||u.current.props.onOpen(e)})),n}),[]);if((0,r.useEffect)((function(){var e=function(e){null==u.current.props.onClose||u.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(o.getMap()),function(){l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,r.useEffect)((function(){L(l.getElement(),e.style)}),[e.style]),(0,r.useImperativeHandle)(t,(function(){return l}),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!i(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){for(var p,d=O(l.options.className),m=O(e.className),f=(0,c.Z)(d);!(p=f()).done;){var g=p.value;m.has(g)||l.removeClassName(g)}for(var v,h=(0,c.Z)(m);!(v=h()).done;){var y=v.value;d.has(y)||l.addClassName(y)}l.options.className=e.className}return(0,P.createPortal)(e.children,s)}const D=(0,r.memo)((0,r.forwardRef)(R));const z=function(e,t,n,o){var a=(0,r.useContext)(S),i=(0,r.useMemo)((function(){return e(a)}),[]);return(0,r.useEffect)((function(){var e=o||n||t,r="function"==typeof t&&"function"==typeof n?t:null,s="function"==typeof n?n:"function"==typeof t?t:null,u=a.map;return u.hasControl(i)||(u.addControl(i,null==e?void 0:e.position),r&&r(a)),function(){s&&s(a),u.hasControl(i)&&u.removeControl(i)}}),[]),i};function A(e){var t=z((function(t){return new t.mapLib.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,r.useEffect)((function(){L(t._controlContainer,e.style)}),[e.style]),null}const N=(0,r.memo)(A);function I(e,t){var n=(0,r.useRef)({props:e}),o=z((function(t){var r=new t.mapLib.GeolocateControl(e),o=r._setupUI;return r._setupUI=function(e){r._container.hasChildNodes()||o(e)},r.on("geolocate",(function(e){null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(function(e){null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(function(e){null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(function(e){null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(function(e){null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,r.useImperativeHandle)(t,(function(){return o}),[]),(0,r.useEffect)((function(){L(o._container,e.style)}),[e.style]),null}const Z=(0,r.memo)((0,r.forwardRef)(I));function F(e){var t=z((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return(0,r.useEffect)((function(){L(t._container,e.style)}),[e.style]),null}const U=(0,r.memo)(F);function W(e){var t=z((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position}),n=(0,r.useRef)(e),o=n.current;n.current=e;var a=e.style;return void 0!==e.maxWidth&&e.maxWidth!==o.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==o.unit&&t.setUnit(e.unit),(0,r.useEffect)((function(){L(t._container,a)}),[a]),null}const J=(0,r.memo)(W);function G(e,t){if(!e)throw new Error(t)}var B=0;const H=function(e){var t=(0,r.useContext)(S).map.getMap(),n=(0,r.useRef)(e),o=(0,r.useState)(0)[1],a=(0,r.useMemo)((function(){return e.id||"jsx-layer-"+B++}),[]);if((0,r.useEffect)((function(){if(t){var e=function(){return o((function(e){return e+1}))};return t.on("styledata",e),e(),function(){t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]),t&&t.style&&t.getLayer(a))try{!function(e,t,n,r){if(G(n.id===r.id,"layer id changed"),G(n.type===r.type,"layer type changed"),"custom"!==n.type&&"custom"!==r.type){var o=n.layout,a=void 0===o?{}:o,s=n.paint,u=void 0===s?{}:s,l=n.filter,c=n.minzoom,p=n.maxzoom,d=n.beforeId;if(d!==r.beforeId&&e.moveLayer(t,d),a!==r.layout){var m=r.layout||{};for(var f in a)i(a[f],m[f])||e.setLayoutProperty(t,f,a[f]);for(var g in m)a.hasOwnProperty(g)||e.setLayoutProperty(t,g,void 0)}if(u!==r.paint){var v=r.paint||{};for(var h in u)i(u[h],v[h])||e.setPaintProperty(t,h,u[h]);for(var y in v)u.hasOwnProperty(y)||e.setPaintProperty(t,y,void 0)}i(l,r.filter)||e.setFilter(t,l),c===r.minzoom&&p===r.maxzoom||e.setLayerZoomRange(t,c,p)}}(t,a,e,n.current)}catch(s){console.warn(s)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){var r=Object.assign({},n,{id:t});delete r.beforeId,e.addLayer(r,n.beforeId)}}(t,a,e);return n.current=e,null};var V=0;const q=function(e){var t=(0,r.useContext)(S).map.getMap(),n=(0,r.useRef)(e),o=(0,r.useState)(0)[1],a=(0,r.useMemo)((function(){return e.id||"jsx-source-"+V++}),[]);(0,r.useEffect)((function(){if(t){var e=function(){return setTimeout((function(){return o((function(e){return e+1}))}),0)};return t.on("styledata",e),e(),function(){if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var n,r=null==(n=t.getStyle())?void 0:n.layers;if(r)for(var o,i=(0,c.Z)(r);!(o=i()).done;){var s=o.value;s.source===a&&t.removeLayer(s.id)}t.removeSource(a)}}}}),[t]);var s=t&&t.style&&t.getSource(a);return s?function(e,t,n){G(t.id===n.id,"source id changed"),G(t.type===n.type,"source type changed");var r="",o=0;for(var a in t)"children"===a||"id"===a||i(n[a],t[a])||(r=a,o++);if(o){var s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else if("setCoordinates"in e&&1===o&&"coordinates"===r)e.setCoordinates(t.coordinates);else if("setUrl"in e)switch(r){case"url":e.setUrl(t.url);break;case"tiles":e.setTiles(t.tiles)}else console.warn("Unable to update prop: "+r)}}(s,e,n.current):s=function(e,t,n){if(e.style&&e.style._loaded){var r=Object.assign({},n);return delete r.id,delete r.children,e.addSource(t,r),e.getSource(t)}return null}(t,a,e),n.current=e,s&&r.Children.map(e.children,(function(e){return e&&(0,r.cloneElement)(e,{source:a})}))||null};var Q=n.e(8539).then(n.t.bind(n,8539,23)),X=r.forwardRef((function(e,t){return C(e,t,Q)})),Y=T,$=D,K=N,ee=U,te=Z,ne=J,re=H,oe=q;const ae=X},745:(e,t,n)=>{var r=n(3935);r.createRoot,r.hydrateRoot},1202:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(1002);function o(e){var t=function(e,t){if("object"!==(0,r.Z)(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==(0,r.Z)(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===(0,r.Z)(t)?t:String(t)}function a(e,t){for(var n=0;n{e.exports=JSON.parse('[{"city":"New York","population":"8,175,133","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Above_Gotham.jpg/240px-Above_Gotham.jpg","state":"New York","latitude":40.6643,"longitude":-73.9385},{"city":"Los Angeles","population":"3,792,621","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/LA_Skyline_Mountains2.jpg/240px-LA_Skyline_Mountains2.jpg","state":"California","latitude":34.0194,"longitude":-118.4108},{"city":"Chicago","population":"2,695,598","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/2008-06-10_3000x1000_chicago_skyline.jpg/240px-2008-06-10_3000x1000_chicago_skyline.jpg","state":"Illinois","latitude":41.8376,"longitude":-87.6818},{"city":"Houston","population":"2,100,263","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg/240px-Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg","state":"Texas","latitude":29.7805,"longitude":-95.3863},{"city":"Phoenix","population":"1,445,632","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Downtown_Phoenix_Aerial_Looking_Northeast.jpg/207px-Downtown_Phoenix_Aerial_Looking_Northeast.jpg","state":"Arizona","latitude":33.5722,"longitude":-112.088},{"city":"Philadelphia","population":"1,526,006","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Philly_skyline.jpg/240px-Philly_skyline.jpg","state":"Pennsylvania","latitude":40.0094,"longitude":-75.1333},{"city":"San Antonio","population":"1,327,407","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Downtown_San_Antonio_View.JPG/240px-Downtown_San_Antonio_View.JPG","state":"Texas","latitude":29.4724,"longitude":-98.5251},{"city":"San Diego","population":"1,307,402","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg/240px-US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg","state":"California","latitude":32.8153,"longitude":-117.135},{"city":"Dallas","population":"1,197,816","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Dallas_skyline_daytime.jpg/240px-Dallas_skyline_daytime.jpg","state":"Texas","latitude":32.7757,"longitude":-96.7967},{"city":"San Jose","population":"945,942","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Downtown_San_Jose_skyline.PNG/240px-Downtown_San_Jose_skyline.PNG","state":"California","latitude":37.2969,"longitude":-121.8193},{"city":"Austin","population":"790,390","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Austin2012-12-01.JPG/240px-Austin2012-12-01.JPG","state":"Texas","latitude":30.3072,"longitude":-97.756},{"city":"Jacksonville","population":"821,784","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg/240px-Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg","state":"Florida","latitude":30.337,"longitude":-81.6613},{"city":"San Francisco","population":"805,235","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/San_Francisco_skyline_from_Coit_Tower.jpg/240px-San_Francisco_skyline_from_Coit_Tower.jpg","state":"California","latitude":37.7751,"longitude":-122.4193},{"city":"Columbus","population":"787,033","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Columbus-ohio-skyline-panorama.jpg/240px-Columbus-ohio-skyline-panorama.jpg","state":"Ohio","latitude":39.9848,"longitude":-82.985},{"city":"Indianapolis","population":"820,445","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Downtown_indy_from_parking_garage_zoom.JPG/213px-Downtown_indy_from_parking_garage_zoom.JPG","state":"Indiana","latitude":39.7767,"longitude":-86.1459},{"city":"Fort Worth","population":"741,206","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/d/db/FortWorthTexasSkylineW.jpg/240px-FortWorthTexasSkylineW.jpg","state":"Texas","latitude":32.7795,"longitude":-97.3463},{"city":"Charlotte","population":"731,424","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Charlotte_skyline45647.jpg/222px-Charlotte_skyline45647.jpg","state":"North Carolina","latitude":35.2087,"longitude":-80.8307},{"city":"Seattle","population":"608,660","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/SeattleI5Skyline.jpg/240px-SeattleI5Skyline.jpg","state":"Washington","latitude":47.6205,"longitude":-122.3509},{"city":"Denver","population":"600,158","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/DenverCP.JPG/240px-DenverCP.JPG","state":"Colorado","latitude":39.7618,"longitude":-104.8806},{"city":"El Paso","population":"649,121","image":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Downtown_El_Paso_at_sunset.jpeg/240px-Downtown_El_Paso_at_sunset.jpeg","state":"Texas","latitude":31.8484,"longitude":-106.427}]')}}]);
\ No newline at end of file
diff --git a/assets/js/2da7f285.20093421.js b/assets/js/2da7f285.20093421.js
deleted file mode 100644
index ad86a003..00000000
--- a/assets/js/2da7f285.20093421.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5504],{3905:(e,t,a)=>{a.d(t,{Zo:()=>s,kt:()=>k});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function o(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=r.createContext({}),u=function(e){var t=r.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},s=function(e){var t=u(e.components);return r.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,l=e.originalType,p=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),c=u(a),d=n,k=c["".concat(p,".").concat(d)]||c[d]||m[d]||l;return a?r.createElement(k,o(o({ref:t},s),{},{components:a})):r.createElement(k,o({ref:t},s))}));function k(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=a.length,o=new Array(l);o[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[c]="string"==typeof e?e:n,o[1]=i;for(var u=2;u{a.d(t,{Z:()=>o});var r=a(7294),n=a(6010);const l={tabItem:"tabItem_Ymn6"};function o(e){var t=e.children,a=e.hidden,o=e.className;return r.createElement("div",{role:"tabpanel",className:(0,n.Z)(l.tabItem,o),hidden:a},t)}},4866:(e,t,a)=>{a.d(t,{Z:()=>N});var r=a(7462),n=a(7294),l=a(6010),o=a(2466),i=a(6550),p=a(1980),u=a(7392),s=a(12);function c(e){return function(e){var t,a;return null!=(t=null==(a=n.Children.map(e,(function(e){if(!e||(0,n.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:a.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function m(e){var t=e.values,a=e.children;return(0,n.useMemo)((function(){var e=null!=t?t:c(a);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,a])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function k(e){var t=e.queryString,a=void 0!==t&&t,r=e.groupId,l=(0,i.k6)(),o=function(e){var t=e.queryString,a=void 0!==t&&t,r=e.groupId;if("string"==typeof a)return a;if(!1===a)return null;if(!0===a&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:a,groupId:r});return[(0,p._X)(o),(0,n.useCallback)((function(e){if(o){var t=new URLSearchParams(l.location.search);t.set(o,e),l.replace(Object.assign({},l.location,{search:t.toString()}))}}),[o,l])]}function f(e){var t,a,r,l,o=e.defaultValue,i=e.queryString,p=void 0!==i&&i,u=e.groupId,c=m(e),f=(0,n.useState)((function(){return function(e){var t,a=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(a){if(!d({value:a,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}var n=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:o,tabValues:c})})),g=f[0],v=f[1],h=k({queryString:p,groupId:u}),b=h[0],y=h[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),a=(0,s.Nk)(t),r=a[0],l=a[1],[r,(0,n.useCallback)((function(e){t&&l.set(e)}),[t,l])]),C=N[0],M=N[1],w=function(){var e=null!=b?b:C;return d({value:e,tabValues:c})?e:null}();return(0,n.useLayoutEffect)((function(){w&&v(w)}),[w]),{selectedValue:g,selectValue:(0,n.useCallback)((function(e){if(!d({value:e,tabValues:c}))throw new Error("Can't select invalid tab value="+e);v(e),y(e),M(e)}),[y,M,c]),tabValues:c}}var g=a(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function h(e){var t=e.className,a=e.block,i=e.selectedValue,p=e.selectValue,u=e.tabValues,s=[],c=(0,o.o5)().blockElementScrollPositionUntilNextRender,m=function(e){var t=e.currentTarget,a=s.indexOf(t),r=u[a].value;r!==i&&(c(t),p(r))},d=function(e){var t,a=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":var r,n=s.indexOf(e.currentTarget)+1;a=null!=(r=s[n])?r:s[0];break;case"ArrowLeft":var l,o=s.indexOf(e.currentTarget)-1;a=null!=(l=s[o])?l:s[s.length-1]}null==(t=a)||t.focus()};return n.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.Z)("tabs",{"tabs--block":a},t)},u.map((function(e){var t=e.value,a=e.label,o=e.attributes;return n.createElement("li",(0,r.Z)({role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,key:t,ref:function(e){return s.push(e)},onKeyDown:d,onClick:m},o,{className:(0,l.Z)("tabs__item",v.tabItem,null==o?void 0:o.className,{"tabs__item--active":i===t})}),null!=a?a:t)})))}function b(e){var t=e.lazy,a=e.children,r=e.selectedValue,l=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){var o=l.find((function(e){return e.props.value===r}));return o?(0,n.cloneElement)(o,{className:"margin-top--md"}):null}return n.createElement("div",{className:"margin-top--md"},l.map((function(e,t){return(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function y(e){var t=f(e);return n.createElement("div",{className:(0,l.Z)("tabs-container",v.tabList)},n.createElement(h,(0,r.Z)({},e,t)),n.createElement(b,(0,r.Z)({},e,t)))}function N(e){var t=(0,g.Z)();return n.createElement(y,(0,r.Z)({key:String(t)},e))}},323:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>g,frontMatter:()=>u,metadata:()=>c,toc:()=>d});var r=a(7462),n=a(3366),l=(a(7294),a(3905)),o=a(4866),i=a(5162),p=["components"],u={},s="Marker",c={unversionedId:"api-reference/marker",id:"api-reference/marker",title:"Marker",description:"React component that wraps the base library's Marker class (Mapbox | Maplibre).",source:"@site/../docs/api-reference/marker.md",sourceDirName:"api-reference",slug:"/api-reference/marker",permalink:"/react-map-gl/docs/api-reference/marker",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/marker.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"MapProvider",permalink:"/react-map-gl/docs/api-reference/map-provider"},next:{title:"NavigationControl",permalink:"/react-map-gl/docs/api-reference/navigation-control"}},m={},d=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"draggable: boolean",id:"draggable",level:4},{value:"latitude: number",id:"latitude",level:4},{value:"longitude: number",id:"longitude",level:4},{value:"offset: PointLike",id:"offset",level:4},{value:"pitchAlignment: 'map' | 'viewport' | 'auto'",id:"pitchalignment",level:4},{value:"popup: Popup | null",id:"popup",level:4},{value:"rotation: number",id:"rotation",level:4},{value:"rotationAlignment: 'map' | 'viewport' | 'auto'",id:"rotationalignment",level:4},{value:"style: CSSProperties",id:"style",level:4},{value:"Callbacks",id:"callbacks",level:3},{value:"onClick: (evt: MapEvent) => void",id:"onclick",level:4},{value:"onDragStart: (evt: MarkerDragEvent) => void",id:"ondragstart",level:4},{value:"onDrag: (evt: MarkerDragEvent) => void",id:"ondrag",level:4},{value:"onDragEnd: (evt: MarkerDragEvent) => void",id:"ondragend",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"Methods",id:"methods",level:2},{value:"Source",id:"source",level:2}],k={toc:d},f="wrapper";function g(e){var t=e.components,a=(0,n.Z)(e,p);return(0,l.kt)(f,(0,r.Z)({},k,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"marker"},"Marker"),(0,l.kt)("p",null,"React component that wraps the base library's ",(0,l.kt)("inlineCode",{parentName:"p"},"Marker")," class (",(0,l.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker"},"Mapbox")," | ",(0,l.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker"},"Maplibre"),")."),(0,l.kt)(o.Z,{groupId:"map-library",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},'import * as React from \'react\';\nimport Map, {Marker} from \'react-map-gl\';\n\nfunction App() {\n return \n \n \n ;\n}\n'))),(0,l.kt)(i.Z,{value:"maplibre",label:"Maplibre",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},'import * as React from \'react\';\nimport Map, {Marker} from \'react-map-gl/maplibre\';\n\nfunction App() {\n return \n \n \n ;\n}\n')))),(0,l.kt)("p",null,"If ",(0,l.kt)("inlineCode",{parentName:"p"},"Marker")," is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used."),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"reactive-properties"},"Reactive Properties"),(0,l.kt)("h4",{id:"draggable"},(0,l.kt)("inlineCode",{parentName:"h4"},"draggable"),": boolean"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"If ",(0,l.kt)("inlineCode",{parentName:"p"},"true"),", the marker is able to be dragged to a new position on the map."),(0,l.kt)("h4",{id:"latitude"},(0,l.kt)("inlineCode",{parentName:"h4"},"latitude"),": number"),(0,l.kt)("p",null,"Required. The latitude of the anchor location."),(0,l.kt)("h4",{id:"longitude"},(0,l.kt)("inlineCode",{parentName:"h4"},"longitude"),": number"),(0,l.kt)("p",null,"Required. The longitude of the anchor location."),(0,l.kt)("h4",{id:"offset"},(0,l.kt)("inlineCode",{parentName:"h4"},"offset"),": ",(0,l.kt)("a",{parentName:"h4",href:"/react-map-gl/docs/api-reference/types#pointlike"},"PointLike")),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"The offset in pixels as a ",(0,l.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike"},"PointLike")," object to apply relative to the element's center. Negatives indicate left and up."),(0,l.kt)("h4",{id:"pitchalignment"},(0,l.kt)("inlineCode",{parentName:"h4"},"pitchAlignment"),": 'map' | 'viewport' | 'auto'"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"'auto'")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"map")," aligns the ",(0,l.kt)("inlineCode",{parentName:"li"},"Marker")," to the plane of the map."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"viewport")," aligns the ",(0,l.kt)("inlineCode",{parentName:"li"},"Marker")," to the plane of the viewport."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"auto")," automatically matches the value of ",(0,l.kt)("inlineCode",{parentName:"li"},"rotationAlignment"),".")),(0,l.kt)("h4",{id:"popup"},(0,l.kt)("inlineCode",{parentName:"h4"},"popup"),": Popup | null"),(0,l.kt)("p",null,"An instance of the ",(0,l.kt)("inlineCode",{parentName:"p"},"Popup")," class (",(0,l.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup"},"Mapbox")," | ",(0,l.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js-docs/api/markers/#popup"},"Maplibre"),") to attach to this marker. If undefined or null, any popup set on this Marker instance is unset."),(0,l.kt)("h4",{id:"rotation"},(0,l.kt)("inlineCode",{parentName:"h4"},"rotation"),": number"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"0")),(0,l.kt)("p",null,"The rotation angle of the marker in degrees, relative to its ",(0,l.kt)("inlineCode",{parentName:"p"},"rotationAlignment")," setting. A positive value will rotate the marker clockwise."),(0,l.kt)("h4",{id:"rotationalignment"},(0,l.kt)("inlineCode",{parentName:"h4"},"rotationAlignment"),": 'map' | 'viewport' | 'auto'"),(0,l.kt)("p",null,"Default: ",(0,l.kt)("inlineCode",{parentName:"p"},"'auto'")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"map")," aligns the ",(0,l.kt)("inlineCode",{parentName:"li"},"Marker"),"'s rotation relative to the map, maintaining a bearing as the map rotates."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"viewport")," aligns the ",(0,l.kt)("inlineCode",{parentName:"li"},"Marker"),"'s rotation relative to the viewport, agnostic to map rotations."),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"auto")," is equivalent to ",(0,l.kt)("inlineCode",{parentName:"li"},"viewport"),".")),(0,l.kt)("h4",{id:"style"},(0,l.kt)("inlineCode",{parentName:"h4"},"style"),": CSSProperties"),(0,l.kt)("p",null,"CSS style override that applies to the marker's container."),(0,l.kt)("h3",{id:"callbacks"},"Callbacks"),(0,l.kt)("h4",{id:"onclick"},(0,l.kt)("inlineCode",{parentName:"h4"},"onClick"),": (evt: ",(0,l.kt)("a",{parentName:"h4",href:"/react-map-gl/docs/api-reference/types#mapevent"},"MapEvent"),") => void"),(0,l.kt)("p",null,"Called when the marker is clicked on."),(0,l.kt)("h4",{id:"ondragstart"},(0,l.kt)("inlineCode",{parentName:"h4"},"onDragStart"),": (evt: ",(0,l.kt)("a",{parentName:"h4",href:"/react-map-gl/docs/api-reference/types#markerdragevent"},"MarkerDragEvent"),") => void"),(0,l.kt)("p",null,"Called when dragging starts, if ",(0,l.kt)("inlineCode",{parentName:"p"},"draggable")," is ",(0,l.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,l.kt)("h4",{id:"ondrag"},(0,l.kt)("inlineCode",{parentName:"h4"},"onDrag"),": (evt: ",(0,l.kt)("a",{parentName:"h4",href:"/react-map-gl/docs/api-reference/types#markerdragevent"},"MarkerDragEvent"),") => void"),(0,l.kt)("p",null,"Called while dragging, if ",(0,l.kt)("inlineCode",{parentName:"p"},"draggable")," is ",(0,l.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,l.kt)("h4",{id:"ondragend"},(0,l.kt)("inlineCode",{parentName:"h4"},"onDragEnd"),": (evt: ",(0,l.kt)("a",{parentName:"h4",href:"/react-map-gl/docs/api-reference/types#markerdragevent"},"MarkerDragEvent"),") => void"),(0,l.kt)("p",null,"Called when dragging ends, if ",(0,l.kt)("inlineCode",{parentName:"p"},"draggable")," is ",(0,l.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,l.kt)("h3",{id:"other-properties"},"Other Properties"),(0,l.kt)("p",null,"The properties in this section are not reactive. They are only used when the component first mounts."),(0,l.kt)("p",null,"Any options supported by the ",(0,l.kt)("inlineCode",{parentName:"p"},"Marker")," class (",(0,l.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker"},"Mapbox")," | ",(0,l.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker"},"Maplibre"),"), such as"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"anchor")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"color")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"scale")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"clickTolerance"))),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("p",null,"The underlying native ",(0,l.kt)("inlineCode",{parentName:"p"},"Marker")," instance is accessible via a ",(0,l.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs"},"React ref")," hook.\nYou may use it to call any imperative methods:"),(0,l.kt)(o.Z,{groupId:"map-library",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {useRef, useMemo, useCallback} from 'react';\nimport Map, {Marker} from 'react-map-gl';\nimport mapboxgl from 'mapbox-gl';\n\nfunction App() {\n const markerRef = useRef();\n\n const popup = useMemo(() => {\n return mapboxgl.Popup().setText('Hello world!');\n }, [])\n\n const togglePopup = useCallback(() => {\n markerRef.current?.togglePopup();\n }, []);\n\n return <>\n \n \n Toggle popup \n ;\n}\n"))),(0,l.kt)(i.Z,{value:"maplibre",label:"Maplibre",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {useRef, useMemo, useCallback} from 'react';\nimport Map, {Marker} from 'react-map-gl/maplibre';\nimport maplibregl from 'maplibre-gl';\n\nfunction App() {\n const markerRef = useRef();\n\n const popup = useMemo(() => {\n return maplibregl.Popup().setText('Hello world!');\n }, [])\n\n const togglePopup = useCallback(() => {\n markerRef.current?.togglePopup();\n }, []);\n\n return <>\n \n \n Toggle popup \n ;\n}\n")))),(0,l.kt)("h2",{id:"source"},"Source"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.1-release/src/components/marker.ts"},"marker.ts")))}g.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/2fcc0790.2fa2fbf7.js b/assets/js/2fcc0790.2fa2fbf7.js
deleted file mode 100644
index b3988588..00000000
--- a/assets/js/2fcc0790.2fa2fbf7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[811],{3905:(e,t,a)=>{a.d(t,{Zo:()=>p,kt:()=>g});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function i(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var s=r.createContext({}),c=function(e){var t=r.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(a),d=n,g=u["".concat(s,".").concat(d)]||u[d]||m[d]||o;return a?r.createElement(g,i(i({ref:t},p),{},{components:a})):r.createElement(g,i({ref:t},p))}));function g(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:n,i[1]=l;for(var c=2;c{a.r(t),a.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>g,frontMatter:()=>l,metadata:()=>c,toc:()=>u});var r=a(7462),n=a(3366),o=(a(7294),a(3905)),i=["components"],l={},s="Adding Custom Data",c={unversionedId:"get-started/adding-custom-data",id:"get-started/adding-custom-data",title:"Adding Custom Data",description:"Native Mapbox Layers",source:"@site/../docs/get-started/adding-custom-data.md",sourceDirName:"get-started",slug:"/get-started/adding-custom-data",permalink:"/react-map-gl/docs/get-started/adding-custom-data",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/adding-custom-data.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"State Management",permalink:"/react-map-gl/docs/get-started/state-management"},next:{title:"Tips and Tricks",permalink:"/react-map-gl/docs/get-started/tips-and-tricks"}},p={},u=[{value:"Native Mapbox Layers",id:"native-mapbox-layers",level:2},{value:"Custom Overlays",id:"custom-overlays",level:2},{value:"Other vis.gl Libraries",id:"other-visgl-libraries",level:2}],m={toc:u},d="wrapper";function g(e){var t=e.components,a=(0,n.Z)(e,i);return(0,o.kt)(d,(0,r.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"adding-custom-data"},"Adding Custom Data"),(0,o.kt)("h2",{id:"native-mapbox-layers"},"Native Mapbox Layers"),(0,o.kt)("p",null,"You can inject data and mapbox native layers using the ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/source"},"Source")," and ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/layer"},"Layer")," components:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport Map, {Source, Layer} from 'react-map-gl';\nimport type {CircleLayer} from 'react-map-gl';\nimport type {FeatureCollection} from 'geojson';\n\nconst geojson: FeatureCollection = {\n type: 'FeatureCollection',\n features: [\n {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}\n ]\n};\n\nconst layerStyle: CircleLayer = {\n id: 'point',\n type: 'circle',\n paint: {\n 'circle-radius': 10,\n 'circle-color': '#007cbf'\n }\n};\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n")),(0,o.kt)("p",null,"For details about data sources and layer configuration, check out the ",(0,o.kt)("a",{parentName:"p",href:"https://www.mapbox.com/mapbox-gl-js/style-spec"},"Mapbox style specification"),"."),(0,o.kt)("p",null,"For dynamically updating data sources and layers, check out the ",(0,o.kt)("a",{parentName:"p",href:"http://visgl.github.io/react-map-gl/examples/geojson"},"GeoJSON")," and ",(0,o.kt)("a",{parentName:"p",href:"http://visgl.github.io/react-map-gl/examples/geojson-animation"},"GeoJSON animation")," examples."),(0,o.kt)("h2",{id:"custom-overlays"},"Custom Overlays"),(0,o.kt)("p",null,"You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling ",(0,o.kt)("inlineCode",{parentName:"p"},"map.project()")," you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/custom-overlay"},"here"),"."),(0,o.kt)("h2",{id:"other-visgl-libraries"},"Other vis.gl Libraries"),(0,o.kt)("p",null,"For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the ",(0,o.kt)("a",{parentName:"p",href:"https://www.github.com/visgl"},"vis.gl")," ecosystem, a suite of high-performance data visualization tools for the Web."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://deck.gl"},"deck.gl")," - WebGL-powered framework for the visualization of large datasets."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://loaders.gl"},"loaders.gl")," - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://nebula.gl"},"nebula.gl")," - 3D-enabled GeoJSON editing based on deck.gl and React.")))}g.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/2fcc0790.fa86accf.js b/assets/js/2fcc0790.fa86accf.js
new file mode 100644
index 00000000..53174ac1
--- /dev/null
+++ b/assets/js/2fcc0790.fa86accf.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6917],{5735:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"get-started/adding-custom-data","title":"Adding Custom Data","description":"Native Mapbox Layers","source":"@site/../docs/get-started/adding-custom-data.md","sourceDirName":"get-started","slug":"/get-started/adding-custom-data","permalink":"/react-map-gl/docs/get-started/adding-custom-data","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/adding-custom-data.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"State Management","permalink":"/react-map-gl/docs/get-started/state-management"},"next":{"title":"Tips and Tricks","permalink":"/react-map-gl/docs/get-started/tips-and-tricks"}}');var n=t(4848),s=t(8453);const o={},i="Adding Custom Data",l={},c=[{value:"Native Mapbox Layers",id:"native-mapbox-layers",level:2},{value:"Custom Overlays",id:"custom-overlays",level:2},{value:"Other vis.gl Libraries",id:"other-visgl-libraries",level:2}];function d(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.header,{children:(0,n.jsx)(a.h1,{id:"adding-custom-data",children:"Adding Custom Data"})}),"\n",(0,n.jsx)(a.h2,{id:"native-mapbox-layers",children:"Native Mapbox Layers"}),"\n",(0,n.jsxs)(a.p,{children:["You can inject data and mapbox native layers using the ",(0,n.jsx)(a.a,{href:"/react-map-gl/docs/api-reference/mapbox/source",children:"Source"})," and ",(0,n.jsx)(a.a,{href:"/react-map-gl/docs/api-reference/mapbox/layer",children:"Layer"})," components:"]}),"\n",(0,n.jsx)(a.pre,{children:(0,n.jsx)(a.code,{className:"language-tsx",children:"import * as React from 'react';\nimport Map, {Source, Layer} from 'react-map-gl/maplibre';\nimport type {CircleLayer} from 'react-map-gl/maplibre';\nimport type {FeatureCollection} from 'geojson';\n\nconst geojson: FeatureCollection = {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [-122.4, 37.8]\n },\n properties: {title: '915 Front Street, San Francisco, California'}\n }\n ]\n};\n\nconst layerStyle: CircleLayer = {\n id: 'point',\n type: 'circle',\n paint: {\n 'circle-radius': 10,\n 'circle-color': '#007cbf'\n }\n};\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsxs)(a.p,{children:["For details about data sources and layer configuration, check out the ",(0,n.jsx)(a.a,{href:"https://www.mapbox.com/mapbox-gl-js/style-spec",children:"Mapbox style specification"}),"."]}),"\n",(0,n.jsxs)(a.p,{children:["For dynamically updating data sources and layers, check out the ",(0,n.jsx)(a.a,{href:"http://visgl.github.io/react-map-gl/examples/geojson",children:"GeoJSON"})," and ",(0,n.jsx)(a.a,{href:"http://visgl.github.io/react-map-gl/examples/geojson-animation",children:"GeoJSON animation"})," examples."]}),"\n",(0,n.jsx)(a.h2,{id:"custom-overlays",children:"Custom Overlays"}),"\n",(0,n.jsxs)(a.p,{children:["You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling ",(0,n.jsx)(a.code,{children:"map.project()"})," you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example ",(0,n.jsx)(a.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay",children:"here"}),"."]}),"\n",(0,n.jsx)(a.h2,{id:"other-visgl-libraries",children:"Other vis.gl Libraries"}),"\n",(0,n.jsxs)(a.p,{children:["For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the ",(0,n.jsx)(a.a,{href:"https://www.github.com/visgl",children:"vis.gl"})," ecosystem, a suite of high-performance data visualization tools for the Web."]}),"\n",(0,n.jsxs)(a.ul,{children:["\n",(0,n.jsxs)(a.li,{children:[(0,n.jsx)(a.a,{href:"https://deck.gl",children:"deck.gl"})," - WebGL-powered framework for the visualization of large datasets."]}),"\n",(0,n.jsxs)(a.li,{children:[(0,n.jsx)(a.a,{href:"https://loaders.gl",children:"loaders.gl"})," - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data."]}),"\n",(0,n.jsxs)(a.li,{children:[(0,n.jsx)(a.a,{href:"https://nebula.gl",children:"nebula.gl"})," - 3D-enabled GeoJSON editing based on deck.gl and React."]}),"\n"]})]})}function p(e={}){const{wrapper:a}={...(0,s.R)(),...e.components};return a?(0,n.jsx)(a,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},8453:(e,a,t)=>{t.d(a,{R:()=>o,x:()=>i});var r=t(6540);const n={},s=r.createContext(n);function o(e){const a=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function i(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),r.createElement(s.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3220.b365ff01.js b/assets/js/3220.b365ff01.js
deleted file mode 100644
index 90892ac2..00000000
--- a/assets/js/3220.b365ff01.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[3220],{3905:(e,a,f)=>{f.d(a,{Zo:()=>o,kt:()=>h});var t=f(7294);function r(e,a,f){return a in e?Object.defineProperty(e,a,{value:f,enumerable:!0,configurable:!0,writable:!0}):e[a]=f,e}function c(e,a){var f=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),f.push.apply(f,t)}return f}function n(e){for(var a=1;a=0||(r[f]=e[f]);return r}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,f)&&(r[f]=e[f])}return r}var i=t.createContext({}),b=function(e){var a=t.useContext(i),f=a;return e&&(f="function"==typeof e?e(a):n(n({},a),e)),f},o=function(e){var a=b(e.components);return t.createElement(i.Provider,{value:a},e.children)},u="mdxType",s={inlineCode:"code",wrapper:function(e){var a=e.children;return t.createElement(t.Fragment,{},a)}},l=t.forwardRef((function(e,a){var f=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,o=d(e,["components","mdxType","originalType","parentName"]),u=b(f),l=r,h=u["".concat(i,".").concat(l)]||u[l]||s[l]||c;return f?t.createElement(h,n(n({ref:a},o),{},{components:f})):t.createElement(h,n({ref:a},o))}));function h(e,a){var f=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var c=f.length,n=new Array(c);n[0]=l;var d={};for(var i in a)hasOwnProperty.call(a,i)&&(d[i]=a[i]);d.originalType=e,d[u]="string"==typeof e?e:r,n[1]=d;for(var b=2;b{function t(e,a){return ea?1:e>=a?0:NaN}f.d(a,{j2:()=>t,b4:()=>d,VR:()=>o,w6:()=>u});var r,c,n=(1===(r=t).length&&(c=r,r=function(e,a){return t(c(e),a)}),{left:function(e,a,f,t){for(null==f&&(f=0),null==t&&(t=e.length);f>>1;r(e[c],a)<0?f=c+1:t=c}return f},right:function(e,a,f,t){for(null==f&&(f=0),null==t&&(t=e.length);f>>1;r(e[c],a)>0?t=c:f=c+1}return f}});const d=n.right;var i=Array.prototype;i.slice,i.map,Math.sqrt(50),Math.sqrt(10),Math.sqrt(2);function b(e){return null===e?NaN:+e}function o(e,a,f){if(null==f&&(f=b),t=e.length){if((a=+a)<=0||t<2)return+f(e[0],0,e);if(a>=1)return+f(e[t-1],t-1,e);var t,r=(t-1)*a,c=Math.floor(r),n=+f(e[c],c,e);return n+(+f(e[c+1],c+1,e)-n)*(r-c)}}function u(e,a,f){e=+e,a=+a,f=(r=arguments.length)<2?(a=e,e=0,1):r<3?1:+f;for(var t=-1,r=0|Math.max(0,Math.ceil((a-e)/f)),c=new Array(r);++t{f.d(a,{FT:()=>s});var t=f(685),r="$";function c(){}function n(e,a){var f=new c;if(e instanceof c)e.each((function(e,a){f.set(a,e)}));else if(Array.isArray(e)){var t,r=-1,n=e.length;if(null==a)for(;++r0?f[r-1]:e[0],r>8&15|a>>4&240,a>>4&15|240&a,(15&a)<<4|15&a,1):8===f?A(a>>24&255,a>>16&255,a>>8&255,(255&a)/255):4===f?A(a>>12&15|a>>8&240,a>>8&15|a>>4&240,a>>4&15|240&a,((15&a)<<4|15&a)/255):null):(a=M.exec(e))?new H(a[1],a[2],a[3],1):(a=x.exec(e))?new H(255*a[1]/100,255*a[2]/100,255*a[3]/100,1):(a=O.exec(e))?A(a[1],a[2],a[3],a[4]):(a=j.exec(e))?A(255*a[1]/100,255*a[2]/100,255*a[3]/100,a[4]):(a=E.exec(e))?z(a[1],a[2]/100,a[3]/100,1):(a=P.exec(e))?z(a[1],a[2]/100,a[3]/100,a[4]):q.hasOwnProperty(e)?$(q[e]):"transparent"===e?new H(NaN,NaN,NaN,0):null}function $(e){return new H(e>>16&255,e>>8&255,255&e,1)}function A(e,a,f,t){return t<=0&&(e=a=f=NaN),new H(e,a,f,t)}function C(e){return e instanceof g||(e=T(e)),e?new H((e=e.rgb()).r,e.g,e.b,e.opacity):new H}function H(e,a,f,t){this.r=+e,this.g=+a,this.b=+f,this.opacity=+t}function _(){return"#"+Z(this.r)+Z(this.g)+Z(this.b)}function D(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"rgb(":"rgba(")+Math.max(0,Math.min(255,Math.round(this.r)||0))+", "+Math.max(0,Math.min(255,Math.round(this.g)||0))+", "+Math.max(0,Math.min(255,Math.round(this.b)||0))+(1===e?")":", "+e+")")}function Z(e){return((e=Math.max(0,Math.min(255,Math.round(e)||0)))<16?"0":"")+e.toString(16)}function z(e,a,f,t){return t<=0?e=a=f=NaN:f<=0||f>=1?e=a=NaN:a<=0&&(e=NaN),new F(e,a,f,t)}function I(e){if(e instanceof F)return new F(e.h,e.s,e.l,e.opacity);if(e instanceof g||(e=T(e)),!e)return new F;if(e instanceof F)return e;var a=(e=e.rgb()).r/255,f=e.g/255,t=e.b/255,r=Math.min(a,f,t),c=Math.max(a,f,t),n=NaN,d=c-r,i=(c+r)/2;return d?(n=a===c?(f-t)/d+6*(f0&&i<1?0:n,new F(n,d,i,e.opacity)}function F(e,a,f,t){this.h=+e,this.s=+a,this.l=+f,this.opacity=+t}function V(e,a,f){return 255*(e<60?a+(f-a)*e/60:e<180?f:e<240?a+(f-a)*(240-e)/60:a)}h(g,T,{copy:function(e){return Object.assign(new this.constructor,this,e)},displayable:function(){return this.rgb().displayable()},hex:R,formatHex:R,formatHsl:function(){return I(this).formatHsl()},formatRgb:S,toString:S}),h(H,(function(e,a,f,t){return 1===arguments.length?C(e):new H(e,a,f,null==t?1:t)}),p(g,{brighter:function(e){return e=null==e?m:Math.pow(m,e),new H(this.r*e,this.g*e,this.b*e,this.opacity)},darker:function(e){return e=null==e?y:Math.pow(y,e),new H(this.r*e,this.g*e,this.b*e,this.opacity)},rgb:function(){return this},displayable:function(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:_,formatHex:_,formatRgb:D,toString:D})),h(F,(function(e,a,f,t){return 1===arguments.length?I(e):new F(e,a,f,null==t?1:t)}),p(g,{brighter:function(e){return e=null==e?m:Math.pow(m,e),new F(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?y:Math.pow(y,e),new F(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=this.h%360+360*(this.h<0),a=isNaN(e)||isNaN(this.s)?0:this.s,f=this.l,t=f+(f<.5?f:1-f)*a,r=2*f-t;return new H(V(e>=240?e-240:e+120,r,t),V(e,r,t),V(e<120?e+240:e-120,r,t),this.opacity)},displayable:function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl:function(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"hsl(":"hsla(")+(this.h||0)+", "+100*(this.s||0)+"%, "+100*(this.l||0)+"%"+(1===e?")":", "+e+")")}}));var L=Math.PI/180,X=180/Math.PI,B=-.14861,G=1.78277,J=-.29227,K=-.90649,Q=1.97294,U=Q*K,W=Q*G,Y=G*J-K*B;function ee(e,a,f,t){return 1===arguments.length?function(e){if(e instanceof ae)return new ae(e.h,e.s,e.l,e.opacity);e instanceof H||(e=C(e));var a=e.r/255,f=e.g/255,t=e.b/255,r=(Y*t+U*a-W*f)/(Y+U-W),c=t-r,n=(Q*(f-r)-J*c)/K,d=Math.sqrt(n*n+c*c)/(Q*r*(1-r)),i=d?Math.atan2(n,c)*X-120:NaN;return new ae(i<0?i+360:i,d,r,e.opacity)}(e):new ae(e,a,f,null==t?1:t)}function ae(e,a,f,t){this.h=+e,this.s=+a,this.l=+f,this.opacity=+t}function fe(e){return function(){return e}}function te(e,a){return function(f){return e+f*a}}function re(e,a){var f=a-e;return f?te(e,f):fe(isNaN(e)?a:e)}function ce(e){return function a(f){function t(a,t){var r=e((a=ee(a)).h,(t=ee(t)).h),c=re(a.s,t.s),n=re(a.l,t.l),d=re(a.opacity,t.opacity);return function(e){return a.h=r(e),a.s=c(e),a.l=n(Math.pow(e,f)),a.opacity=d(e),a+""}}return f=+f,t.gamma=a,t}(1)}h(ae,ee,p(g,{brighter:function(e){return e=null==e?m:Math.pow(m,e),new ae(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?y:Math.pow(y,e),new ae(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=isNaN(this.h)?0:(this.h+120)*L,a=+this.l,f=isNaN(this.s)?0:this.s*a*(1-a),t=Math.cos(e),r=Math.sin(e);return new H(255*(a+f*(B*t+G*r)),255*(a+f*(J*t+K*r)),255*(a+f*(Q*t)),this.opacity)}}));ce((function(e,a){var f=a-e;return f?te(e,f>180||f<-180?f-360*Math.round(f/360):f):fe(isNaN(e)?a:e)}));var ne=ce(re);ne(ee(300,.5,0),ee(-240,.5,1));ne(ee(-100,.75,.35),ee(80,1.5,.8)),ne(ee(260,.75,.35),ee(80,1.5,.8)),ee();function de(e){var a=e.length;return function(f){return e[Math.max(0,Math.min(a-1,Math.floor(f*a)))]}}de(l("44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725"));de(l("00000401000501010601010802010902020b02020d03030f03031204041405041606051806051a07061c08071e0907200a08220b09240c09260d0a290e0b2b100b2d110c2f120d31130d34140e36150e38160f3b180f3d19103f1a10421c10441d11471e114920114b21114e22115024125325125527125829115a2a115c2c115f2d11612f116331116533106734106936106b38106c390f6e3b0f703d0f713f0f72400f74420f75440f764510774710784910784a10794c117a4e117b4f127b51127c52137c54137d56147d57157e59157e5a167e5c167f5d177f5f187f601880621980641a80651a80671b80681c816a1c816b1d816d1d816e1e81701f81721f817320817521817621817822817922827b23827c23827e24828025828125818326818426818627818827818928818b29818c29818e2a81902a81912b81932b80942c80962c80982d80992d809b2e7f9c2e7f9e2f7fa02f7fa1307ea3307ea5317ea6317da8327daa337dab337cad347cae347bb0357bb2357bb3367ab5367ab73779b83779ba3878bc3978bd3977bf3a77c03a76c23b75c43c75c53c74c73d73c83e73ca3e72cc3f71cd4071cf4070d0416fd2426fd3436ed5446dd6456cd8456cd9466bdb476adc4869de4968df4a68e04c67e24d66e34e65e44f64e55064e75263e85362e95462ea5661eb5760ec5860ed5a5fee5b5eef5d5ef05f5ef1605df2625df2645cf3655cf4675cf4695cf56b5cf66c5cf66e5cf7705cf7725cf8745cf8765cf9785df9795df97b5dfa7d5efa7f5efa815ffb835ffb8560fb8761fc8961fc8a62fc8c63fc8e64fc9065fd9266fd9467fd9668fd9869fd9a6afd9b6bfe9d6cfe9f6dfea16efea36ffea571fea772fea973feaa74feac76feae77feb078feb27afeb47bfeb67cfeb77efeb97ffebb81febd82febf84fec185fec287fec488fec68afec88cfeca8dfecc8ffecd90fecf92fed194fed395fed597fed799fed89afdda9cfddc9efddea0fde0a1fde2a3fde3a5fde5a7fde7a9fde9aafdebacfcecaefceeb0fcf0b2fcf2b4fcf4b6fcf6b8fcf7b9fcf9bbfcfbbdfcfdbf")),de(l("00000401000501010601010802010a02020c02020e03021004031204031405041706041907051b08051d09061f0a07220b07240c08260d08290e092b10092d110a30120a32140b34150b37160b39180c3c190c3e1b0c411c0c431e0c451f0c48210c4a230c4c240c4f260c51280b53290b552b0b572d0b592f0a5b310a5c320a5e340a5f3609613809623909633b09643d09653e0966400a67420a68440a68450a69470b6a490b6a4a0c6b4c0c6b4d0d6c4f0d6c510e6c520e6d540f6d550f6d57106e59106e5a116e5c126e5d126e5f136e61136e62146e64156e65156e67166e69166e6a176e6c186e6d186e6f196e71196e721a6e741a6e751b6e771c6d781c6d7a1d6d7c1d6d7d1e6d7f1e6c801f6c82206c84206b85216b87216b88226a8a226a8c23698d23698f24699025689225689326679526679727669827669a28659b29649d29649f2a63a02a63a22b62a32c61a52c60a62d60a82e5fa92e5eab2f5ead305dae305cb0315bb1325ab3325ab43359b63458b73557b93556ba3655bc3754bd3853bf3952c03a51c13a50c33b4fc43c4ec63d4dc73e4cc83f4bca404acb4149cc4248ce4347cf4446d04545d24644d34743d44842d54a41d74b3fd84c3ed94d3dda4e3cdb503bdd513ade5238df5337e05536e15635e25734e35933e45a31e55c30e65d2fe75e2ee8602de9612bea632aeb6429eb6628ec6726ed6925ee6a24ef6c23ef6e21f06f20f1711ff1731df2741cf3761bf37819f47918f57b17f57d15f67e14f68013f78212f78410f8850ff8870ef8890cf98b0bf98c0af98e09fa9008fa9207fa9407fb9606fb9706fb9906fb9b06fb9d07fc9f07fca108fca309fca50afca60cfca80dfcaa0ffcac11fcae12fcb014fcb216fcb418fbb61afbb81dfbba1ffbbc21fbbe23fac026fac228fac42afac62df9c72ff9c932f9cb35f8cd37f8cf3af7d13df7d340f6d543f6d746f5d949f5db4cf4dd4ff4df53f4e156f3e35af3e55df2e661f2e865f2ea69f1ec6df1ed71f1ef75f1f179f2f27df2f482f3f586f3f68af4f88ef5f992f6fa96f8fb9af9fc9dfafda1fcffa4")),de(l("0d088710078813078916078a19068c1b068d1d068e20068f2206902406912605912805922a05932c05942e05952f059631059733059735049837049938049a3a049a3c049b3e049c3f049c41049d43039e44039e46039f48039f4903a04b03a14c02a14e02a25002a25102a35302a35502a45601a45801a45901a55b01a55c01a65e01a66001a66100a76300a76400a76600a76700a86900a86a00a86c00a86e00a86f00a87100a87201a87401a87501a87701a87801a87a02a87b02a87d03a87e03a88004a88104a78305a78405a78606a68707a68808a68a09a58b0aa58d0ba58e0ca48f0da4910ea3920fa39410a29511a19613a19814a099159f9a169f9c179e9d189d9e199da01a9ca11b9ba21d9aa31e9aa51f99a62098a72197a82296aa2395ab2494ac2694ad2793ae2892b02991b12a90b22b8fb32c8eb42e8db52f8cb6308bb7318ab83289ba3388bb3488bc3587bd3786be3885bf3984c03a83c13b82c23c81c33d80c43e7fc5407ec6417dc7427cc8437bc9447aca457acb4679cc4778cc4977cd4a76ce4b75cf4c74d04d73d14e72d24f71d35171d45270d5536fd5546ed6556dd7566cd8576bd9586ada5a6ada5b69db5c68dc5d67dd5e66de5f65de6164df6263e06363e16462e26561e26660e3685fe4695ee56a5de56b5de66c5ce76e5be76f5ae87059e97158e97257ea7457eb7556eb7655ec7754ed7953ed7a52ee7b51ef7c51ef7e50f07f4ff0804ef1814df1834cf2844bf3854bf3874af48849f48948f58b47f58c46f68d45f68f44f79044f79143f79342f89441f89540f9973ff9983ef99a3efa9b3dfa9c3cfa9e3bfb9f3afba139fba238fca338fca537fca636fca835fca934fdab33fdac33fdae32fdaf31fdb130fdb22ffdb42ffdb52efeb72dfeb82cfeba2cfebb2bfebd2afebe2afec029fdc229fdc328fdc527fdc627fdc827fdca26fdcb26fccd25fcce25fcd025fcd225fbd324fbd524fbd724fad824fada24f9dc24f9dd25f8df25f8e125f7e225f7e425f6e626f6e826f5e926f5eb27f4ed27f3ee27f3f027f2f227f1f426f1f525f0f724f0f921"))},745:(e,a,f)=>{var t=f(3935);t.createRoot,t.hydrateRoot},1202:(e,a,f)=>{f.d(a,{Z:()=>n});var t=f(1002);function r(e){var a=function(e,a){if("object"!==(0,t.Z)(e)||null===e)return e;var f=e[Symbol.toPrimitive];if(void 0!==f){var r=f.call(e,a||"default");if("object"!==(0,t.Z)(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===a?String:Number)(e)}(e,"string");return"symbol"===(0,t.Z)(a)?a:String(a)}function c(e,a){for(var f=0;f{t.r(r),t.d(r,{assets:()=>i,contentTitle:()=>c,default:()=>d,frontMatter:()=>s,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"api-reference/mapbox/fullscreen-control","title":"FullscreenControl","description":"React component that wraps mapbox-gl\'s FullscreenControl class.","source":"@site/../docs/api-reference/mapbox/fullscreen-control.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/fullscreen-control","permalink":"/react-map-gl/docs/api-reference/mapbox/fullscreen-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/fullscreen-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"AttributionControl","permalink":"/react-map-gl/docs/api-reference/mapbox/attribution-control"},"next":{"title":"GeolocateControl","permalink":"/react-map-gl/docs/api-reference/mapbox/geolocate-control"}}');var n=t(4848),l=t(8453);const s={},c="FullscreenControl",i={},a=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"containerId: string",id:"containerid",level:4},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.header,{children:(0,n.jsx)(r.h1,{id:"fullscreencontrol",children:"FullscreenControl"})}),"\n",(0,n.jsxs)(r.p,{children:["React component that wraps mapbox-gl's ",(0,n.jsx)(r.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol",children:"FullscreenControl"})," class."]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport Map, {FullscreenControl} from 'react-map-gl/mapbox';\r\nimport 'mapbox-gl/dist/mapbox-gl.css';\r\n\r\nfunction App() {\r\n return \"\r\n initialViewState={{\r\n longitude: -100,\r\n latitude: 40,\r\n zoom: 3.5\r\n }}\r\n mapStyle=\"mapbox://styles/mapbox/streets-v9\"\r\n >\r\n =0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var u=a.createContext({}),s=function(e){var t=a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=s(e.components);return a.createElement(u.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,u=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),c=s(r),m=n,f=c["".concat(u,".").concat(m)]||c[m]||d[m]||o;return r?a.createElement(f,l(l({ref:t},p),{},{components:r})):a.createElement(f,l({ref:t},p))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=m;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i[c]="string"==typeof e?e:n,l[1]=i;for(var s=2;s{r.d(t,{Z:()=>l});var a=r(7294),n=r(6010);const o={tabItem:"tabItem_Ymn6"};function l(e){var t=e.children,r=e.hidden,l=e.className;return a.createElement("div",{role:"tabpanel",className:(0,n.Z)(o.tabItem,l),hidden:r},t)}},4866:(e,t,r)=>{r.d(t,{Z:()=>w});var a=r(7462),n=r(7294),o=r(6010),l=r(2466),i=r(6550),u=r(1980),s=r(7392),p=r(12);function c(e){return function(e){var t,r;return null!=(t=null==(r=n.Children.map(e,(function(e){if(!e||(0,n.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:r.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function d(e){var t=e.values,r=e.children;return(0,n.useMemo)((function(){var e=null!=t?t:c(r);return function(e){var t=(0,s.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,r])}function m(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function f(e){var t=e.queryString,r=void 0!==t&&t,a=e.groupId,o=(0,i.k6)(),l=function(e){var t=e.queryString,r=void 0!==t&&t,a=e.groupId;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:r,groupId:a});return[(0,u._X)(l),(0,n.useCallback)((function(e){if(l){var t=new URLSearchParams(o.location.search);t.set(l,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[l,o])]}function y(e){var t,r,a,o,l=e.defaultValue,i=e.queryString,u=void 0!==i&&i,s=e.groupId,c=d(e),y=(0,n.useState)((function(){return function(e){var t,r=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(r){if(!m({value:r,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+r+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return r}var n=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:l,tabValues:c})})),b=y[0],h=y[1],v=f({queryString:u,groupId:s}),g=v[0],k=v[1],w=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:s}.groupId),r=(0,p.Nk)(t),a=r[0],o=r[1],[a,(0,n.useCallback)((function(e){t&&o.set(e)}),[t,o])]),N=w[0],T=w[1],x=function(){var e=null!=g?g:N;return m({value:e,tabValues:c})?e:null}();return(0,n.useLayoutEffect)((function(){x&&h(x)}),[x]),{selectedValue:b,selectValue:(0,n.useCallback)((function(e){if(!m({value:e,tabValues:c}))throw new Error("Can't select invalid tab value="+e);h(e),k(e),T(e)}),[k,T,c]),tabValues:c}}var b=r(2389);const h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function v(e){var t=e.className,r=e.block,i=e.selectedValue,u=e.selectValue,s=e.tabValues,p=[],c=(0,l.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,r=p.indexOf(t),a=s[r].value;a!==i&&(c(t),u(a))},m=function(e){var t,r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var a,n=p.indexOf(e.currentTarget)+1;r=null!=(a=p[n])?a:p[0];break;case"ArrowLeft":var o,l=p.indexOf(e.currentTarget)-1;r=null!=(o=p[l])?o:p[p.length-1]}null==(t=r)||t.focus()};return n.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":r},t)},s.map((function(e){var t=e.value,r=e.label,l=e.attributes;return n.createElement("li",(0,a.Z)({role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,key:t,ref:function(e){return p.push(e)},onKeyDown:m,onClick:d},l,{className:(0,o.Z)("tabs__item",h.tabItem,null==l?void 0:l.className,{"tabs__item--active":i===t})}),null!=r?r:t)})))}function g(e){var t=e.lazy,r=e.children,a=e.selectedValue,o=(Array.isArray(r)?r:[r]).filter(Boolean);if(t){var l=o.find((function(e){return e.props.value===a}));return l?(0,n.cloneElement)(l,{className:"margin-top--md"}):null}return n.createElement("div",{className:"margin-top--md"},o.map((function(e,t){return(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function k(e){var t=y(e);return n.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},n.createElement(v,(0,a.Z)({},e,t)),n.createElement(g,(0,a.Z)({},e,t)))}function w(e){var t=(0,b.Z)();return n.createElement(k,(0,a.Z)({key:String(t)},e))}},8908:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>b,frontMatter:()=>s,metadata:()=>c,toc:()=>m});var a=r(7462),n=r(3366),o=(r(7294),r(3905)),l=r(4866),i=r(5162),u=["components"],s={},p="Layer",c={unversionedId:"api-reference/layer",id:"api-reference/layer",title:"Layer",description:"This component allows apps to create a map layer using React.",source:"@site/../docs/api-reference/layer.md",sourceDirName:"api-reference",slug:"/api-reference/layer",permalink:"/react-map-gl/docs/api-reference/layer",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/layer.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"GeolocateControl",permalink:"/react-map-gl/docs/api-reference/geolocate-control"},next:{title:"MapProvider",permalink:"/react-map-gl/docs/api-reference/map-provider"}},d={},m=[{value:"Properties",id:"properties",level:2},{value:"Identity Properties",id:"identity-properties",level:3},{value:"id: string",id:"id",level:4},{value:"type: string",id:"type",level:4},{value:"Options",id:"options",level:3},{value:"beforeId: string",id:"beforeid",level:4},{value:"source: string",id:"source",level:4},{value:"Source",id:"source",level:2}],f={toc:m},y="wrapper";function b(e){var t=e.components,r=(0,n.Z)(e,u);return(0,o.kt)(y,(0,a.Z)({},f,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"layer"},"Layer"),(0,o.kt)("p",null,"This component allows apps to create a ",(0,o.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers"},"map layer")," using React."),(0,o.kt)(l.Z,{groupId:"map-library",mdxType:"Tabs"},(0,o.kt)(i.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport Map, {Layer} from 'react-map-gl';\nimport type {FillLayer} from 'react-map-gl';\n\nconst parkLayer: FillLayer = {\n id: 'landuse_park',\n type: 'fill',\n source: 'mapbox',\n 'source-layer': 'landuse',\n filter: ['==', 'class', 'park'],\n paint: {\n 'fill-color': '#4E3FC8'\n }\n};\n\nfunction App() {\n return \"\n initialViewState={{\n longitude: -122.4,\n latitude: 37.8,\n zoom: 14\n }}\n mapStyle=\"mapbox://styles/mapbox/streets-v9\"\n >\n \n ")," is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's ",(0,o.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/lists-and-keys.html#keys"},"key prop")," to give each element a stable identity."),(0,o.kt)("h4",{id:"id"},(0,o.kt)("inlineCode",{parentName:"h4"},"id"),": string"),(0,o.kt)("p",null,"Unique identifier of the layer. If not provided, a default id will be assigned."),(0,o.kt)("h4",{id:"type"},(0,o.kt)("inlineCode",{parentName:"h4"},"type"),": string"),(0,o.kt)("p",null,"Required. Type of the layer."),(0,o.kt)("h3",{id:"options"},"Options"),(0,o.kt)("h4",{id:"beforeid"},(0,o.kt)("inlineCode",{parentName:"h4"},"beforeId"),": string"),(0,o.kt)("p",null,"The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL."),(0,o.kt)("p",null,"Note that layers are added by the order that they mount. They are ",(0,o.kt)("em",{parentName:"p"},"NOT")," reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate ",(0,o.kt)("inlineCode",{parentName:"p"},"beforeId")," for consistent behavior."),(0,o.kt)("h4",{id:"source"},(0,o.kt)("inlineCode",{parentName:"h4"},"source"),": string"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"source")," is required by some layer types in the Mapbox style specification. If ",(0,o.kt)("inlineCode",{parentName:"p"},"")," is used as the immediate child of a ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/source"},"Source")," component, this prop will be overwritten by the id of the parent source. If the ",(0,o.kt)("inlineCode",{parentName:"p"},"{let o=null;"interactive"in e&&(o=Object.assign({},e),delete o.interactive);const n=t[e.ref];if(n){o=o||Object.assign({},e),delete o.ref;for(const e of c)e in n&&(o[e]=n[e])}return o||e}));return Object.assign({},e,{layers:o})}const p={version:8,sources:{},layers:[]},d={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},m={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},f={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},h=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],g=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class y{constructor(e,t,o){this._map=null,this._internalUpdate=!1,this._hoveredFeatures=null,this._propsedCameraUpdate=null,this._styleComponents={},this._onEvent=e=>{const t=this.props[f[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onCameraEvent=e=>{if(this._internalUpdate)return;e.viewState=this._propsedCameraUpdate||i(this._map.transform);const t=this.props[m[e.type]];t&&t(e)},this._onCameraUpdate=e=>this._internalUpdate?e:(this._propsedCameraUpdate=i(e),l(e,this.props)),this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[d[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._MapClass=e,this.props=t,this._initialize(o)}get map(){return this._map}setProps(e){const t=this.props;this.props=e;const o=this._updateSettings(e,t),n=this._updateSize(e),r=this._updateViewState(e);this._updateStyle(e,t),this._updateStyleComponents(e),this._updateHandlers(e,t),(o||n||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const o=y.savedMaps.pop();if(!o)return null;const n=o.map,r=n.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);n._container=t;const s=n._resizeObserver;s&&(s.disconnect(),s.observe(t)),o.setProps(Object.assign({},e,{styleDiffing:!1})),n.resize();const{initialViewState:a}=e;return a&&(a.bounds?n.fitBounds(a.bounds,Object.assign({},a.fitBoundsOptions,{duration:0})):o._updateViewState(a)),n.isStyleLoaded()?n.fire("load"):n.once("style.load",(()=>n.fire("load"))),n._update(),o}_initialize(e){const{props:t}=this,{mapStyle:o=p}=t,n=Object.assign({},t,t.initialViewState,{container:e,style:u(o)}),r=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(n);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),s.transformCameraUpdate=this._onCameraUpdate,s.on("style.load",(()=>{this._styleComponents={light:s.getLight(),sky:s.getSky(),projection:null==s.getProjection?void 0:s.getProjection(),terrain:s.getTerrain()},this._updateStyleComponents(this.props)})),s.on("sourcedata",(()=>{this._updateStyleComponents(this.props)}));for(const a in d)s.on(a,this._onPointerEvent);for(const a in m)s.on(a,this._onCameraEvent);for(const a in f)s.on(a,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),y.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e){const t=this._map,o=t.transform;if(!t.isMoving()){const n=l(o,e);if(Object.keys(n).length>0)return this._internalUpdate=!0,t.jumpTo(n),this._internalUpdate=!1,!0}return!1}_updateSettings(e,t){const o=this._map;let n=!1;for(const r of h)if(r in e&&!a(e[r],t[r])){n=!0;const t=o["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(o,e[r])}return n}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=p,styleDiffing:o=!0}=e,n={diff:o};"localIdeographFontFamily"in e&&(n.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(u(t),n)}}_updateStyleComponents(e){let{light:t,projection:o,sky:n,terrain:r}=e;const s=this._map,i=this._styleComponents;var l;s.style._loaded&&(t&&!a(t,i.light)&&(i.light=t,s.setLight(t)),o&&!a(o,i.projection)&&o!==(null==(l=i.projection)?void 0:l.type)&&(i.projection="string"==typeof o?{type:o}:o,null==s.setProjection||s.setProjection(i.projection)),n&&!a(n,i.sky)&&(i.sky=n,s.setSky(n)),void 0===r||a(r,i.terrain)||r&&!s.getSource(r.source)||(i.terrain=r,s.setTerrain(r)))}_updateHandlers(e,t){const o=this._map;for(const s of g){var n,r;const i=null==(n=e[s])||n;a(i,null==(r=t[s])||r)||(i?o[s].enable(i):o[s].disable())}}_queryRenderedFeatures(e){const t=this._map,{interactiveLayerIds:o=[]}=this.props;try{return t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(n){return[]}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var o;const t=e.type,n=(null==(o=this._hoveredFeatures)?void 0:o.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&n&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!n&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}}y.savedMaps=[];const v=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,o={getMap:()=>t};for(const n of function(e){const t=new Set;let o=e;for(;o;){for(const n of Object.getOwnPropertyNames(o))"_"!==n[0]&&"function"==typeof e[n]&&"fire"!==n&&"setEventedParent"!==n&&t.add(n);o=Object.getPrototypeOf(o)}return Array.from(t)}(t))n in o||v.includes(n)||(o[n]=t[n].bind(t));return o}const _="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;const x=n.createContext(null);function C(e,t){const a=(0,n.useContext)(s),[i,l]=(0,n.useState)(null),c=(0,n.useRef)(),{current:u}=(0,n.useRef)({mapLib:null,map:null});(0,n.useEffect)((()=>{const t=e.mapLib;let n,r=!0;return Promise.resolve(t||o.e(6443).then(o.t.bind(o,6443,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const o="Map"in t?t:t.default;if(!o.Map)throw new Error("Invalid mapLib");if(function(e,t){const{RTLTextPlugin:o,maxParallelImageRequests:n,workerCount:r,workerUrl:s}=t;if(o&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()){const{pluginUrl:t,lazy:n=!0}="string"==typeof o?{pluginUrl:o}:o;e.setRTLTextPlugin(t,(e=>{e&&console.error(e)}),n)}void 0!==n&&e.setMaxParallelImageRequests(n),void 0!==r&&e.setWorkerCount(r),void 0!==s&&e.setWorkerUrl(s)}(o,e),o.supported&&!o.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(n=y.reuse(e,c.current)),n||(n=new y(o.Map,e,c.current)),u.map=b(n),u.mapLib=o,l(n),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:o}=e;o?o({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),()=>{r=!1,n&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?n.recycle():n.destroy())}}),[]),_((()=>{i&&i.setProps(e)})),(0,n.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,n.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:c,style:p,children:i&&(0,r.jsx)(x.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const L=n.forwardRef(C);var S=o(961);const j=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(!e||!t)return;const o=e.style;for(const n in t){const e=t[n];Number.isFinite(e)&&!j.test(n)?o[n]=e+"px":o[n]=e}}const w=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:r}=(0,n.useContext)(x),s=(0,n.useRef)({props:e});s.current.props=e;const a=(0,n.useMemo)((()=>{let t=!1;n.Children.forEach(e.children,(e=>{e&&(t=!0)}));const o=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(o);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,n.useEffect)((()=>(a.addTo(o.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:l,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:f="auto",pitchAlignment:h="auto"}=e;return(0,n.useEffect)((()=>{M(a.getElement(),u)}),[u]),(0,n.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===l||a.setLngLat([i,l]),c&&!function(e,t){const o=Array.isArray(e)?e[0]:e?e.x:0,n=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return o===r&&n===s}(a.getOffset(),c)&&a.setOffset(c),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==m&&a.setRotation(m),a.getRotationAlignment()!==f&&a.setRotationAlignment(f),a.getPitchAlignment()!==h&&a.setPitchAlignment(h),a.getPopup()!==d&&a.setPopup(d),(0,S.createPortal)(e.children,a.getElement())})));function E(e){return new Set(e?e.trim().split(/\s+/):[])}const P=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:r}=(0,n.useContext)(x),s=(0,n.useMemo)((()=>document.createElement("div")),[]),i=(0,n.useRef)({props:e});i.current.props=e;const l=(0,n.useMemo)((()=>{const t=Object.assign({},e),o=new r.Popup(t);return o.setLngLat([e.longitude,e.latitude]),o.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),o}),[]);if((0,n.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(o.getMap()),()=>{l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,n.useEffect)((()=>{M(l.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(()=>l),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!a(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){const t=E(l.options.className),o=E(e.className);for(const e of t)o.has(e)||l.removeClassName(e);for(const e of o)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,S.createPortal)(e.children,s)})));function k(e,t,o,r){const s=(0,n.useContext)(x),a=(0,n.useMemo)((()=>e(s)),[]);return(0,n.useEffect)((()=>{const e=r||o||t,n="function"==typeof t&&"function"==typeof o?t:null,i="function"==typeof o?o:"function"==typeof t?t:null,{map:l}=s;return l.hasControl(a)||(l.addControl(a,null==e?void 0:e.position),n&&n(s)),()=>{i&&i(s),l.hasControl(a)&&l.removeControl(a)}}),[]),a}function O(e){const t=k((t=>{let{mapLib:o}=t;return new o.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((()=>{M(t._controlContainer,e.style)}),[e.style]),null}const R=(0,n.memo)(O);function z(e,t){const o=(0,n.useRef)({props:e}),r=k((t=>{let{mapLib:n}=t;const r=new n.GeolocateControl(e),s=r._setupUI;return r._setupUI=()=>{r._container.hasChildNodes()||s()},r.on("geolocate",(e=>{null==o.current.props.onGeolocate||o.current.props.onGeolocate(e)})),r.on("error",(e=>{null==o.current.props.onError||o.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==o.current.props.onOutOfMaxBounds||o.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==o.current.props.onTrackUserLocationStart||o.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==o.current.props.onTrackUserLocationEnd||o.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return o.current.props=e,(0,n.useImperativeHandle)(t,(()=>r),[]),(0,n.useEffect)((()=>{M(r._container,e.style)}),[e.style]),null}const T=(0,n.memo)((0,n.forwardRef)(z));function U(e){const t=k((t=>{let{mapLib:o}=t;return new o.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const I=(0,n.memo)(U);function A(e){const t=k((t=>{let{mapLib:o}=t;return new o.ScaleControl(e)}),{position:e.position}),o=(0,n.useRef)(e),r=o.current;o.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,n.useEffect)((()=>{M(t._container,s)}),[s]),null}const D=(0,n.memo)(A);function F(e){const t=k((t=>{let{mapLib:o}=t;return new o.TerrainControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const N=(0,n.memo)(F);function W(e,t){if(!e)throw new Error(t)}let Z=0;function q(e){const t=(0,n.useContext)(x).map.getMap(),o=(0,n.useRef)(e),[,r]=(0,n.useState)(0),s=(0,n.useMemo)((()=>e.id||"jsx-source-"+Z++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var o;const e=null==(o=t.getStyle())?void 0:o.layers;if(e)for(const o of e)o.source===s&&t.removeLayer(o.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,o){W(t.id===o.id,"source id changed"),W(t.type===o.type,"source type changed");let n="",r=0;for(const i in t)"children"===i||"id"===i||a(o[i],t[i])||(n=i,r++);if(!r)return;const s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(n){case"coordinates":null==e.setCoordinates||e.setCoordinates(t.coordinates);break;case"url":null==e.setUrl||e.setUrl(t.url);break;case"tiles":null==e.setTiles||e.setTiles(t.tiles);break;default:console.warn("Unable to update prop: "+n)}}(i,e,o.current):i=function(e,t,o){if(e.style&&e.style._loaded){const n=Object.assign({},o);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,s,e),o.current=e,i&&n.Children.map(e.children,(e=>e&&(0,n.cloneElement)(e,{source:s})))||null}let H=0;function B(e){const t=(0,n.useContext)(x).map.getMap(),o=(0,n.useRef)(e),[,r]=(0,n.useState)(0),s=(0,n.useMemo)((()=>e.id||"jsx-layer-"+H++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,o,n){if(W(o.id===n.id,"layer id changed"),W(o.type===n.type,"layer type changed"),"custom"===o.type||"custom"===n.type)return;const{layout:r={},paint:s={},filter:i,minzoom:l,maxzoom:c,beforeId:u}=o;if(u!==n.beforeId&&e.moveLayer(t,u),r!==n.layout){const o=n.layout||{};for(const n in r)a(r[n],o[n])||e.setLayoutProperty(t,n,r[n]);for(const n in o)r.hasOwnProperty(n)||e.setLayoutProperty(t,n,void 0)}if(s!==n.paint){const o=n.paint||{};for(const n in s)a(s[n],o[n])||e.setPaintProperty(t,n,s[n]);for(const n in o)s.hasOwnProperty(n)||e.setPaintProperty(t,n,void 0)}a(i,n.filter)||e.setFilter(t,i),l===n.minzoom&&c===n.maxzoom||e.setLayerZoomRange(t,l,c)}(t,s,e,o.current)}catch(i){console.warn(i)}else!function(e,t,o){if(e.style&&e.style._loaded&&(!("source"in o)||e.getSource(o.source))){const n=Object.assign({},o,{id:t});delete n.beforeId,e.addLayer(n,o.beforeId)}}(t,s,e);return o.current=e,null}},8453:(e,t,o)=>{o.d(t,{R:()=>a,x:()=>i});var n=o(6540);const r={},s=n.createContext(r);function a(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3897572f.db3858fd.js b/assets/js/3897572f.db3858fd.js
new file mode 100644
index 00000000..3365018d
--- /dev/null
+++ b/assets/js/3897572f.db3858fd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3886],{9285:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>i,metadata:()=>n,toc:()=>a});const n=JSON.parse('{"id":"api-reference/maplibre/fullscreen-control","title":"FullscreenControl","description":"React component that wraps maplibre-gl\'s FullscreenControl class.","source":"@site/../docs/api-reference/maplibre/fullscreen-control.md","sourceDirName":"api-reference/maplibre","slug":"/api-reference/maplibre/fullscreen-control","permalink":"/react-map-gl/docs/api-reference/maplibre/fullscreen-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/maplibre/fullscreen-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"AttributionControl","permalink":"/react-map-gl/docs/api-reference/maplibre/attribution-control"},"next":{"title":"GeolocateControl","permalink":"/react-map-gl/docs/api-reference/maplibre/geolocate-control"}}');var o=t(4848),l=t(8453);const i={},s="FullscreenControl",c={},a=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"containerId: string",id:"containerid",level:4},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"fullscreencontrol",children:"FullscreenControl"})}),"\n",(0,o.jsxs)(r.p,{children:["React component that wraps maplibre-gl's ",(0,o.jsx)(r.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/FullscreenControl/",children:"FullscreenControl"})," class."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {Map, FullscreenControl} from 'react-map-gl/maplibre';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\n\r\nfunction App() {\r\n return \r\n \n \n );\n}\n\nfunction NavigateButton() {\n const {current: map} = useMap();\n\n const onClick = () => {\n map.flyTo({center: [-122.4, 37.8]});\n };\n\n return Go ;\n}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["When used with the ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/mapbox/map-provider",children:"MapProvider"}),", this hook can also reference maps that are rendered outside of the current component's direct render tree as long as both trees are part of the current ",(0,a.jsx)(n.code,{children:""}),"."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:'import {MapProvider, Map, useMap} from \'react-map-gl/mapbox\';\n\nfunction Root() {\n // Note: `useMap` will not work in , only children of can use `useMap`\n\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {myMapA, myMapB} = useMap();\n\n const onClick = () => {\n myMapA.flyTo({center: [-122.4, 37.8]});\n myMapB.flyTo({center: [-74, 40.7]});\n };\n\n return Go ;\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["See a full example ",(0,a.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/hook",children:"here"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"signature",children:"Signature"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"useMap(): {current?: MapRef, [id: string]: MapRef}"})}),"\n",(0,a.jsxs)(n.p,{children:["The hook returns an object that contains all mounted maps under the closest ",(0,a.jsx)(n.code,{children:"MapProvider"}),". The keys are each map's ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/mapbox/map#id",children:"id"})," and the values are the ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#mapref",children:"MapRef"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["If the hook is used inside a decendent of a ",(0,a.jsx)(n.code,{children:"Map"})," component, the returned object additionally contains a ",(0,a.jsx)(n.code,{children:"current"})," field that references the containing map."]}),"\n",(0,a.jsx)(n.h2,{id:"source",children:"Source"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-map.tsx",children:"use-map.tsx"})})]})}function l(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>s,x:()=>c});var t=r(6540);const a={},o=t.createContext(a);function s(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/38d649ee.9127bd6e.js b/assets/js/38d649ee.9127bd6e.js
deleted file mode 100644
index 28353100..00000000
--- a/assets/js/38d649ee.9127bd6e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[4681],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function p(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=o.createContext({}),s=function(e){var t=o.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},c=function(e){var t=s(e.components);return o.createElement(i.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},f=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=s(n),f=r,d=m["".concat(i,".").concat(f)]||m[f]||u[f]||a;return n?o.createElement(d,p(p({ref:t},c),{},{components:n})):o.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=f;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[m]="string"==typeof e?e:r,p[1]=l;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),p=["components"],l={},i="useControl",s={unversionedId:"api-reference/use-control",id:"api-reference/use-control",title:"useControl",description:"The useControl hook is used to create React wrappers for custom map controls.",source:"@site/../docs/api-reference/use-control.md",sourceDirName:"api-reference",slug:"/api-reference/use-control",permalink:"/react-map-gl/docs/api-reference/use-control",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/use-control.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Source",permalink:"/react-map-gl/docs/api-reference/source"},next:{title:"useMap",permalink:"/react-map-gl/docs/api-reference/use-map"}},c={},m=[{value:"Signature",id:"signature",level:2},{value:"Source",id:"source",level:2}],u={toc:m},f="wrapper";function d(e){var t=e.components,n=(0,r.Z)(e,p);return(0,a.kt)(f,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"usecontrol"},"useControl"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"useControl")," hook is used to create React wrappers for custom map controls."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport Map, {useControl} from 'react-map-gl';\n\nfunction DrawControl(props: DrawControlProps) {\n useControl(() => new MapboxDraw(props), {\n position: props.position\n });\n\n return null;\n}\n\nfunction App() {\n return (\n \n (\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n\nuseControl(\n onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,\n onAdd: ({map: MapRef, mapLib: mapboxgl}) => void,\n onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,\n options?: {\n position?: ControlPosition;\n }\n): T\n")),(0,a.kt)("p",null,"The hook creates an ",(0,a.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol"},"IControl")," instance, adds it to the map when it's available, and removes it upon unmount."),(0,a.kt)("p",null,"Parameters:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"onCreate"),": ({map: MapRef, mapLib: mapboxgl}) => ",(0,a.kt)("a",{parentName:"li",href:"/react-map-gl/docs/api-reference/types#icontrol"},"IControl")," - called to create an instance of the control."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"onAdd"),": ({map: MapRef, mapLib: mapboxgl}) => void - called when the control has been added to the map."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"onRemove"),": ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed from the map."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"options"),": object",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"position"),": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map")))),(0,a.kt)("p",null,"Returns:"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/types#icontrol"},"IControl")," - the control instance from ",(0,a.kt)("inlineCode",{parentName:"p"},"onCreate"),"."),(0,a.kt)("h2",{id:"source"},"Source"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.1-release/src/components/use-control.ts"},"use-control.ts")))}d.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/39a77820.3089b34b.js b/assets/js/39a77820.3089b34b.js
new file mode 100644
index 00000000..c0da8d8d
--- /dev/null
+++ b/assets/js/39a77820.3089b34b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9096],{5817:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>b,contentTitle:()=>v,default:()=>C,frontMatter:()=>y,metadata:()=>o,toc:()=>x});const o=JSON.parse('{"id":"maplibre/draggable-markers","title":"Draggable Marker","description":"","source":"@site/src/examples/maplibre/draggable-markers.mdx","sourceDirName":"maplibre","slug":"/maplibre/draggable-markers","permalink":"/react-map-gl/examples/maplibre/draggable-markers","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Custom Cursor","permalink":"/react-map-gl/examples/maplibre/custom-cursor"},"next":{"title":"Draw Polygon","permalink":"/react-map-gl/examples/maplibre/draw-polygon"}}');var r=n(4848),s=n(8453),a=n(6540),i=(n(5338),n(5490));const l=["onDragStart","onDrag","onDragEnd"];function c(e){return(Math.round(1e5*e)/1e5).toFixed(5)}function u(e){return(0,r.jsxs)("div",{className:"control-panel",children:[(0,r.jsx)("h3",{children:"Draggable Marker"}),(0,r.jsx)("p",{children:"Try dragging the marker to another location."}),(0,r.jsx)("div",{children:l.map((t=>{const{events:n={}}=e,o=n[t];return(0,r.jsxs)("div",{children:[(0,r.jsxs)("strong",{children:[t,":"]})," ",o?c(o.lng)+", "+c(o.lat):(0,r.jsx)("em",{children:"null"})]},t)}))}),(0,r.jsx)("div",{className:"source-link",children:(0,r.jsx)("a",{href:"https://github.com/visgl/react-maplibre/tree/1.0-release/examples/draggable-markers",target:"_new",children:"View Code \u2197"})})]})}const p=a.memo(u),d={fill:"#d00",stroke:"none"};function m(e){const{size:t=20}=e;return(0,r.jsx)("svg",{height:t,viewBox:"0 0 24 24",style:d,children:(0,r.jsx)("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n C20.1,15.8,20.2,15.8,20.2,15.7z"})})}const g=a.memo(m),f={latitude:40,longitude:-100,zoom:3.5};function h(){const[e,t]=(0,a.useState)({latitude:40,longitude:-100}),[n,o]=(0,a.useState)({}),s=(0,a.useCallback)((e=>{o((t=>Object.assign({},t,{onDragStart:e.lngLat})))}),[]),l=(0,a.useCallback)((e=>{o((t=>Object.assign({},t,{onDrag:e.lngLat}))),t({longitude:e.lngLat.lng,latitude:e.lngLat.lat})}),[]),c=(0,a.useCallback)((e=>{o((t=>Object.assign({},t,{onDragEnd:e.lngLat})))}),[]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(i.T5,{initialViewState:f,mapStyle:"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",children:[(0,r.jsx)(i.pH,{longitude:e.longitude,latitude:e.latitude,anchor:"bottom",draggable:!0,onDragStart:s,onDrag:l,onDragEnd:c,children:(0,r.jsx)(g,{size:20})}),(0,r.jsx)(i.ov,{position:"top-left"})]}),(0,r.jsx)(p,{events:n})]})}const y={},v="Draggable Marker",b={},x=[];function _(e){const t={h1:"h1",header:"header",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"draggable-marker",children:"Draggable Marker"})}),"\n","\n",(0,r.jsx)(h,{})]})}function C(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(_,{...e})}):_(e)}},5490:(e,t,n)=>{n.d(t,{T3:()=>R,tG:()=>D,Wd:()=>V,T5:()=>L,pH:()=>E,ov:()=>U,zD:()=>k,g0:()=>F,kL:()=>H,jG:()=>N,Ay:()=>L,VI:()=>P});var o=n(6540),r=n(4848);const s=o.createContext(null);function a(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let n=0;n{let n=null;"interactive"in e&&(n=Object.assign({},e),delete n.interactive);const o=t[e.ref];if(o){n=n||Object.assign({},e),delete n.ref;for(const e of c)e in o&&(n[e]=o[e])}return n||e}));return Object.assign({},e,{layers:n})}const p={version:8,sources:{},layers:[]},d={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},m={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},g={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},f=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],h=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class y{constructor(e,t,n){this._map=null,this._internalUpdate=!1,this._hoveredFeatures=null,this._propsedCameraUpdate=null,this._styleComponents={},this._onEvent=e=>{const t=this.props[g[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onCameraEvent=e=>{if(this._internalUpdate)return;e.viewState=this._propsedCameraUpdate||i(this._map.transform);const t=this.props[m[e.type]];t&&t(e)},this._onCameraUpdate=e=>this._internalUpdate?e:(this._propsedCameraUpdate=i(e),l(e,this.props)),this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[d[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._MapClass=e,this.props=t,this._initialize(n)}get map(){return this._map}setProps(e){const t=this.props;this.props=e;const n=this._updateSettings(e,t),o=this._updateSize(e),r=this._updateViewState(e);this._updateStyle(e,t),this._updateStyleComponents(e),this._updateHandlers(e,t),(n||o||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const n=y.savedMaps.pop();if(!n)return null;const o=n.map,r=o.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);o._container=t;const s=o._resizeObserver;s&&(s.disconnect(),s.observe(t)),n.setProps(Object.assign({},e,{styleDiffing:!1})),o.resize();const{initialViewState:a}=e;return a&&(a.bounds?o.fitBounds(a.bounds,Object.assign({},a.fitBoundsOptions,{duration:0})):n._updateViewState(a)),o.isStyleLoaded()?o.fire("load"):o.once("style.load",(()=>o.fire("load"))),o._update(),n}_initialize(e){const{props:t}=this,{mapStyle:n=p}=t,o=Object.assign({},t,t.initialViewState,{container:e,style:u(n)}),r=o.initialViewState||o.viewState||o;if(Object.assign(o,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(o);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),s.transformCameraUpdate=this._onCameraUpdate,s.on("style.load",(()=>{this._styleComponents={light:s.getLight(),sky:s.getSky(),projection:null==s.getProjection?void 0:s.getProjection(),terrain:s.getTerrain()},this._updateStyleComponents(this.props)})),s.on("sourcedata",(()=>{this._updateStyleComponents(this.props)}));for(const a in d)s.on(a,this._onPointerEvent);for(const a in m)s.on(a,this._onCameraEvent);for(const a in g)s.on(a,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),y.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e){const t=this._map,n=t.transform;if(!t.isMoving()){const o=l(n,e);if(Object.keys(o).length>0)return this._internalUpdate=!0,t.jumpTo(o),this._internalUpdate=!1,!0}return!1}_updateSettings(e,t){const n=this._map;let o=!1;for(const r of f)if(r in e&&!a(e[r],t[r])){o=!0;const t=n["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(n,e[r])}return o}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=p,styleDiffing:n=!0}=e,o={diff:n};"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(u(t),o)}}_updateStyleComponents(e){let{light:t,projection:n,sky:o,terrain:r}=e;const s=this._map,i=this._styleComponents;var l;s.style._loaded&&(t&&!a(t,i.light)&&(i.light=t,s.setLight(t)),n&&!a(n,i.projection)&&n!==(null==(l=i.projection)?void 0:l.type)&&(i.projection="string"==typeof n?{type:n}:n,null==s.setProjection||s.setProjection(i.projection)),o&&!a(o,i.sky)&&(i.sky=o,s.setSky(o)),void 0===r||a(r,i.terrain)||r&&!s.getSource(r.source)||(i.terrain=r,s.setTerrain(r)))}_updateHandlers(e,t){const n=this._map;for(const s of h){var o,r;const i=null==(o=e[s])||o;a(i,null==(r=t[s])||r)||(i?n[s].enable(i):n[s].disable())}}_queryRenderedFeatures(e){const t=this._map,{interactiveLayerIds:n=[]}=this.props;try{return t.queryRenderedFeatures(e,{layers:n.filter(t.getLayer.bind(t))})}catch(o){return[]}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var n;const t=e.type,o=(null==(n=this._hoveredFeatures)?void 0:n.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}}y.savedMaps=[];const v=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,n={getMap:()=>t};for(const o of function(e){const t=new Set;let n=e;for(;n;){for(const o of Object.getOwnPropertyNames(n))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);n=Object.getPrototypeOf(n)}return Array.from(t)}(t))o in n||v.includes(o)||(n[o]=t[o].bind(t));return n}const x="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;const _=o.createContext(null);function C(e,t){const a=(0,o.useContext)(s),[i,l]=(0,o.useState)(null),c=(0,o.useRef)(),{current:u}=(0,o.useRef)({mapLib:null,map:null});(0,o.useEffect)((()=>{const t=e.mapLib;let o,r=!0;return Promise.resolve(t||n.e(6443).then(n.t.bind(n,6443,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const n="Map"in t?t:t.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){const{RTLTextPlugin:n,maxParallelImageRequests:o,workerCount:r,workerUrl:s}=t;if(n&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()){const{pluginUrl:t,lazy:o=!0}="string"==typeof n?{pluginUrl:n}:n;e.setRTLTextPlugin(t,(e=>{e&&console.error(e)}),o)}void 0!==o&&e.setMaxParallelImageRequests(o),void 0!==r&&e.setWorkerCount(r),void 0!==s&&e.setWorkerUrl(s)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(o=y.reuse(e,c.current)),o||(o=new y(n.Map,e,c.current)),u.map=b(o),u.mapLib=n,l(o),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:n}=e;n?n({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),()=>{r=!1,o&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),x((()=>{i&&i.setProps(e)})),(0,o.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,o.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:c,style:p,children:i&&(0,r.jsx)(_.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const L=o.forwardRef(C);var S=n(961);const j=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(!e||!t)return;const n=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!j.test(o)?n[o]=e+"px":n[o]=e}}const E=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(_),s=(0,o.useRef)({props:e});s.current.props=e;const a=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const n=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(n);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(a.addTo(n.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:l,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:g="auto",pitchAlignment:f="auto"}=e;return(0,o.useEffect)((()=>{M(a.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===l||a.setLngLat([i,l]),c&&!function(e,t){const n=Array.isArray(e)?e[0]:e?e.x:0,o=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return n===r&&o===s}(a.getOffset(),c)&&a.setOffset(c),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==m&&a.setRotation(m),a.getRotationAlignment()!==g&&a.setRotationAlignment(g),a.getPitchAlignment()!==f&&a.setPitchAlignment(f),a.getPopup()!==d&&a.setPopup(d),(0,S.createPortal)(e.children,a.getElement())})));function w(e){return new Set(e?e.trim().split(/\s+/):[])}const k=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(_),s=(0,o.useMemo)((()=>document.createElement("div")),[]),i=(0,o.useRef)({props:e});i.current.props=e;const l=(0,o.useMemo)((()=>{const t=Object.assign({},e),n=new r.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),n}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(n.getMap()),()=>{l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,o.useEffect)((()=>{M(l.getElement(),e.style)}),[e.style]),(0,o.useImperativeHandle)(t,(()=>l),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!a(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){const t=w(l.options.className),n=w(e.className);for(const e of t)n.has(e)||l.removeClassName(e);for(const e of n)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,S.createPortal)(e.children,s)})));function P(e,t,n,r){const s=(0,o.useContext)(_),a=(0,o.useMemo)((()=>e(s)),[]);return(0,o.useEffect)((()=>{const e=r||n||t,o="function"==typeof t&&"function"==typeof n?t:null,i="function"==typeof n?n:"function"==typeof t?t:null,{map:l}=s;return l.hasControl(a)||(l.addControl(a,null==e?void 0:e.position),o&&o(s)),()=>{i&&i(s),l.hasControl(a)&&l.removeControl(a)}}),[]),a}function O(e){const t=P((t=>{let{mapLib:n}=t;return new n.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{M(t._controlContainer,e.style)}),[e.style]),null}const R=(0,o.memo)(O);function z(e,t){const n=(0,o.useRef)({props:e}),r=P((t=>{let{mapLib:o}=t;const r=new o.GeolocateControl(e),s=r._setupUI;return r._setupUI=()=>{r._container.hasChildNodes()||s()},r.on("geolocate",(e=>{null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(e=>{null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,o.useImperativeHandle)(t,(()=>r),[]),(0,o.useEffect)((()=>{M(r._container,e.style)}),[e.style]),null}const D=(0,o.memo)((0,o.forwardRef)(z));function T(e){const t=P((t=>{let{mapLib:n}=t;return new n.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const U=(0,o.memo)(T);function I(e){const t=P((t=>{let{mapLib:n}=t;return new n.ScaleControl(e)}),{position:e.position}),n=(0,o.useRef)(e),r=n.current;n.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,o.useEffect)((()=>{M(t._container,s)}),[s]),null}const F=(0,o.memo)(I);function A(e){const t=P((t=>{let{mapLib:n}=t;return new n.TerrainControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const N=(0,o.memo)(A);function W(e,t){if(!e)throw new Error(t)}let Z=0;function H(e){const t=(0,o.useContext)(_).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-source-"+Z++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var n;const e=null==(n=t.getStyle())?void 0:n.layers;if(e)for(const n of e)n.source===s&&t.removeLayer(n.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,n){W(t.id===n.id,"source id changed"),W(t.type===n.type,"source type changed");let o="",r=0;for(const i in t)"children"===i||"id"===i||a(n[i],t[i])||(o=i,r++);if(!r)return;const s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(o){case"coordinates":null==e.setCoordinates||e.setCoordinates(t.coordinates);break;case"url":null==e.setUrl||e.setUrl(t.url);break;case"tiles":null==e.setTiles||e.setTiles(t.tiles);break;default:console.warn("Unable to update prop: "+o)}}(i,e,n.current):i=function(e,t,n){if(e.style&&e.style._loaded){const o=Object.assign({},n);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,s,e),n.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:s})))||null}let B=0;function V(e){const t=(0,o.useContext)(_).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-layer-"+B++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,n,o){if(W(n.id===o.id,"layer id changed"),W(n.type===o.type,"layer type changed"),"custom"===n.type||"custom"===o.type)return;const{layout:r={},paint:s={},filter:i,minzoom:l,maxzoom:c,beforeId:u}=n;if(u!==o.beforeId&&e.moveLayer(t,u),r!==o.layout){const n=o.layout||{};for(const o in r)a(r[o],n[o])||e.setLayoutProperty(t,o,r[o]);for(const o in n)r.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(s!==o.paint){const n=o.paint||{};for(const o in s)a(s[o],n[o])||e.setPaintProperty(t,o,s[o]);for(const o in n)s.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}a(i,o.filter)||e.setFilter(t,i),l===o.minzoom&&c===o.maxzoom||e.setLayerZoomRange(t,l,c)}(t,s,e,n.current)}catch(i){console.warn(i)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){const o=Object.assign({},n,{id:t});delete o.beforeId,e.addLayer(o,n.beforeId)}}(t,s,e);return n.current=e,null}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function a(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3a4d92a3.1c8eb99e.js b/assets/js/3a4d92a3.1c8eb99e.js
deleted file mode 100644
index 45c2dd9b..00000000
--- a/assets/js/3a4d92a3.1c8eb99e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[1341],{5700:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>_,contentTitle:()=>h,default:()=>S,frontMatter:()=>g,metadata:()=>y,toc:()=>b});var n=r(7462),o=r(3366),a=r(7294),i=r(3905),s=(r(745),r(945));function u(e){var t=e.year;return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Interactive GeoJSON"),a.createElement("p",null,"Map showing median household income by state in year ",a.createElement("b",null,t),". Hover over a state to see details."),a.createElement("p",null,"Data source: ",a.createElement("a",{href:"www.census.gov"},"US Census Bureau")),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/geojson",target:"_new"},"View Code \u2197")),a.createElement("hr",null),a.createElement("div",{key:"year",className:"input"},a.createElement("label",null,"Year"),a.createElement("input",{type:"range",value:t,min:1995,max:2015,step:1,onChange:function(t){return e.onChange(t.target.value)}})))}const l=a.memo(u);var c={id:"data",type:"fill",paint:{"fill-color":{property:"percentile",stops:[[0,"#3288bd"],[1,"#66c2a5"],[2,"#abdda4"],[3,"#e6f598"],[4,"#ffffbf"],[5,"#fee08b"],[6,"#fdae61"],[7,"#f46d43"],[8,"#d53e4f"]]},"fill-opacity":.8}},f=r(685),p=r(5256);var d="";function m(){var e=(0,a.useState)(2015),t=e[0],r=e[1],n=(0,a.useState)(null),o=n[0],i=n[1],u=(0,a.useState)(null),m=u[0],v=u[1];(0,a.useEffect)((function(){fetch("https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/us-income.geojson").then((function(e){return e.json()})).then((function(e){return i(e)})).catch((function(e){return console.error("Could not load data",e)}))}),[]);var g=(0,a.useCallback)((function(e){var t=e.features,r=e.point,n=r.x,o=r.y,a=t&&t[0];v(a&&{feature:a,x:n,y:o})}),[]),h=(0,a.useMemo)((function(){return o&&(e=function(e){return e.properties.income[t]},r=o.features,n=(0,p.FT)().domain(r.map(e)).range((0,f.w6)(9)),{type:"FeatureCollection",features:r.map((function(t){var r=e(t),o=Object.assign({},t.properties,{value:r,percentile:n(r)});return Object.assign({},t,{properties:o})}))});var e,r,n}),[o,t]);return a.createElement(a.Fragment,null,a.createElement(s.ZP,{initialViewState:{latitude:40,longitude:-100,zoom:3},mapStyle:"mapbox://styles/mapbox/light-v9",mapboxAccessToken:d,interactiveLayerIds:["data"],onMouseMove:g},a.createElement(s.Hw,{type:"geojson",data:h},a.createElement(s.mh,c)),m&&a.createElement("div",{className:"tooltip",style:{left:m.x,top:m.y}},a.createElement("div",null,"State: ",m.feature.properties.name),a.createElement("div",null,"Median Household Income: ",m.feature.properties.value),a.createElement("div",null,"Percentile: ",m.feature.properties.percentile/8*100))),a.createElement(l,{year:t,onChange:function(e){return r(e)}}))}var v=["components"],g={},h="GeoJSON",y={unversionedId:"geojson",id:"geojson",title:"GeoJSON",description:"",source:"@site/src/examples/geojson.mdx",sourceDirName:".",slug:"/geojson",permalink:"/react-map-gl/examples/geojson",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar",previous:{title:"Draggable Marker",permalink:"/react-map-gl/examples/draggable-markers"},next:{title:"GeoJSON Animation",permalink:"/react-map-gl/examples/geojson-animation"}},_={},b=[],E={toc:b},x="wrapper";function S(e){var t=e.components,r=(0,o.Z)(e,v);return(0,i.kt)(x,(0,n.Z)({},E,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"geojson"},"GeoJSON"),(0,i.kt)(m,{mdxType:"App"}))}S.isMDXComponent=!0},945:(e,t,r)=>{r.d(t,{ot:()=>$,$j:()=>te,mh:()=>ne,D5:()=>X,Jx:()=>Y,Pv:()=>ee,GI:()=>K,jf:()=>re,Hw:()=>oe,ZP:()=>ae,PE:()=>I});var n=r(7294),o=n.createContext(null);var a=r(1202);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var r=0;r0;)r.appendChild(a.childNodes[0]);o._container=r;var i=o._resizeObserver;i&&(i.disconnect(),i.observe(r)),n.setProps(Object.assign({},t,{styleDiffing:!1})),o.resize();var s=t.initialViewState;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),o._update(),n},t._initialize=function(e){var t=this,r=this.props,n=r.mapStyle,o=void 0===n?d:n,a=Object.assign({},r,r.initialViewState,{accessToken:r.mapboxAccessToken||b()||null,container:e,style:p(o)}),i=a.initialViewState||a.viewState||a;if(Object.assign(a,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),r.gl){var u=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=u,r.gl}}var l=new this._MapClass(a);i.padding&&l.setPadding(i.padding),r.cursor&&(l.getCanvas().style.cursor=r.cursor),this._createShadowTransform(l);var c=l._render;l._render=function(e){t._inRender=!0,c.call(l,e),t._inRender=!1};var f=l._renderTaskQueue.run;l._renderTaskQueue.run=function(e){f.call(l._renderTaskQueue,e),t._onBeforeRepaint()},l.on("render",(function(){return t._onAfterRepaint()}));var h=l.fire;for(var y in l.fire=this._fireEvent.bind(this,h),l.on("resize",(function(){t._renderTransform.resize(l.transform.width,l.transform.height)})),l.on("styledata",(function(){t._updateStyleComponents(t.props,{}),s(l.transform,t._renderTransform)})),l.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),m)l.on(y,this._onPointerEvent);for(var _ in v)l.on(_,this._onCameraEvent);for(var E in g)l.on(E,this._onEvent);this._map=l},t.recycle=function(){var t=this.map.getContainer().querySelector("[mapboxgl-children]");null==t||t.remove(),e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._createShadowTransform=function(e){var t,r,n=(t=e.transform,(r=t.clone()).pixelsToGLUnits=t.pixelsToGLUnits,r);e.painter.transform=n,this._renderTransform=n},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=r.isMoving();s&&(n.cameraElevationReference="sea");var c=l(n,Object.assign({},u(r.transform),e));if(s&&(n.cameraElevationReference="ground"),c&&t){var f=this._deferredEvents;f.move=!0,f.zoom||(f.zoom=o!==n.zoom),f.rotate||(f.rotate=i!==n.bearing),f.pitch||(f.pitch=a!==n.pitch)}return s||l(r.transform,e),c},t._updateSettings=function(e,t){for(var r=this._map,n=!1,o=0,a=h;o0,a=this._queryRenderedFeatures(e.point),i=a.length>0;!i&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,i&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=n}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in v&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;t.transform=this._renderTransform,this._onAfterRepaint=function(){s(e._renderTransform,n),t.transform=n}},(0,a.Z)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function b(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}_.savedMaps=[];var E=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function x(e){if(!e)return null;for(var t,r=e.map,n={getMap:function(){return r},getCenter:function(){return e.transform.center},getZoom:function(){return e.transform.zoom},getBearing:function(){return e.transform.bearing},getPitch:function(){return e.transform.pitch},getPadding:function(){return e.transform.padding},getBounds:function(){return e.transform.getBounds()},project:function(t){var n=r.transform;r.transform=e.transform;var o=r.project(t);return r.transform=n,o},unproject:function(t){var n=r.transform;r.transform=e.transform;var o=r.unproject(t);return r.transform=n,o},queryTerrainElevation:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryTerrainElevation(t,n);return r.transform=o,a},queryRenderedFeatures:function(t,n){var o=r.transform;r.transform=e.transform;var a=r.queryRenderedFeatures(t,n);return r.transform=o,a}},o=(0,c.Z)(function(e){var t=new Set,r=e;for(;r;){for(var n,o=(0,c.Z)(Object.getOwnPropertyNames(r));!(n=o()).done;){var a=n.value;"_"!==a[0]&&"function"==typeof e[a]&&"fire"!==a&&"setEventedParent"!==a&&t.add(a)}r=Object.getPrototypeOf(r)}return Array.from(t)}(r));!(t=o()).done;){var a=t.value;a in n||E.includes(a)||(n[a]=r[a].bind(r))}return n}const S="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;var L=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];var C=n.createContext(null);function w(e,t,r){var a=(0,n.useContext)(o),i=(0,n.useState)(null),s=i[0],u=i[1],l=(0,n.useRef)(),f=(0,n.useRef)({mapLib:null,map:null}).current;(0,n.useEffect)((function(){var t,n=e.mapLib,o=!0;return Promise.resolve(n||r).then((function(r){if(o){if(!r)throw new Error("Invalid mapLib");var n="Map"in r?r:r.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(var r,n=(0,c.Z)(L);!(r=n()).done;){var o=r.value;o in t&&(e[o]=t[o])}var a=t.RTLTextPlugin,i=void 0===a?"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js":a;i&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(i,(function(e){e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(t=_.reuse(e,l.current)),t||(t=new _(n.Map,e,l.current)),f.map=x(t),f.mapLib=n,u(t),null==a||a.onMapMount(f.map,e.id)}})).catch((function(t){var r=e.onError;r?r({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),function(){o=!1,t&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?t.recycle():t.destroy())}}),[]),S((function(){s&&s.setProps(e)})),(0,n.useImperativeHandle)(t,(function(){return f.map}),[s]);var p=(0,n.useMemo)((function(){return Object.assign({position:"relative",width:"100%",height:"100%"},e.style)}),[e.style]);return n.createElement("div",{id:e.id,ref:l,style:p},s&&n.createElement(C.Provider,{value:f},n.createElement("div",{"mapboxgl-children":"",style:{height:"100%"}},e.children)))}var M=r(3935),P=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function j(e,t){if(e&&t){var r=e.style;for(var n in t){var o=t[n];Number.isFinite(o)&&!P.test(n)?r[n]=o+"px":r[n]=o}}}function T(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,i=(0,n.useRef)({props:e});i.current.props=e;var s=(0,n.useMemo)((function(){var t=!1;n.Children.forEach(e.children,(function(e){e&&(t=!0)}));var r=Object.assign({},e,{element:t?document.createElement("div"):null}),o=new a.Marker(r);return o.setLngLat([e.longitude,e.latitude]),o.getElement().addEventListener("click",(function(e){null==i.current.props.onClick||i.current.props.onClick({type:"click",target:o,originalEvent:e})})),o.on("dragstart",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragStart||i.current.props.onDragStart(t)})),o.on("drag",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDrag||i.current.props.onDrag(t)})),o.on("dragend",(function(e){var t=e;t.lngLat=s.getLngLat(),null==i.current.props.onDragEnd||i.current.props.onDragEnd(t)})),o}),[]);(0,n.useEffect)((function(){return s.addTo(o.getMap()),function(){s.remove()}}),[]);var u,l,c,f,p,d,m=e.longitude,v=e.latitude,g=e.offset,h=e.style,y=e.draggable,_=void 0!==y&&y,b=e.popup,E=void 0===b?null:b,x=e.rotation,S=void 0===x?0:x,L=e.rotationAlignment,w=void 0===L?"auto":L,P=e.pitchAlignment,T=void 0===P?"auto":P;return(0,n.useEffect)((function(){j(s.getElement(),h)}),[h]),(0,n.useImperativeHandle)(t,(function(){return s}),[]),s.getLngLat().lng===m&&s.getLngLat().lat===v||s.setLngLat([m,v]),g&&(u=s.getOffset(),l=g,c=Array.isArray(u)?u[0]:u?u.x:0,f=Array.isArray(u)?u[1]:u?u.y:0,p=Array.isArray(l)?l[0]:l?l.x:0,d=Array.isArray(l)?l[1]:l?l.y:0,c!==p||f!==d)&&s.setOffset(g),s.isDraggable()!==_&&s.setDraggable(_),s.getRotation()!==S&&s.setRotation(S),s.getRotationAlignment()!==w&&s.setRotationAlignment(w),s.getPitchAlignment()!==T&&s.setPitchAlignment(T),s.getPopup()!==E&&s.setPopup(E),(0,M.createPortal)(e.children,s.getElement())}const R=(0,n.memo)((0,n.forwardRef)(T));function k(e){return new Set(e?e.trim().split(/\s+/):[])}function O(e,t){var r=(0,n.useContext)(C),o=r.map,a=r.mapLib,s=(0,n.useMemo)((function(){return document.createElement("div")}),[]),u=(0,n.useRef)({props:e});u.current.props=e;var l=(0,n.useMemo)((function(){var t=Object.assign({},e),r=new a.Popup(t);return r.setLngLat([e.longitude,e.latitude]),r.once("open",(function(e){null==u.current.props.onOpen||u.current.props.onOpen(e)})),r}),[]);if((0,n.useEffect)((function(){var e=function(e){null==u.current.props.onClose||u.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(s).addTo(o.getMap()),function(){l.off("close",e),l.isOpen()&&l.remove()}}),[]),(0,n.useEffect)((function(){j(l.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(function(){return l}),[]),l.isOpen()&&(l.getLngLat().lng===e.longitude&&l.getLngLat().lat===e.latitude||l.setLngLat([e.longitude,e.latitude]),e.offset&&!i(l.options.offset,e.offset)&&l.setOffset(e.offset),l.options.anchor===e.anchor&&l.options.maxWidth===e.maxWidth||(l.options.anchor=e.anchor,l.setMaxWidth(e.maxWidth)),l.options.className!==e.className)){for(var f,p=k(l.options.className),d=k(e.className),m=(0,c.Z)(p);!(f=m()).done;){var v=f.value;d.has(v)||l.removeClassName(v)}for(var g,h=(0,c.Z)(d);!(g=h()).done;){var y=g.value;p.has(y)||l.addClassName(y)}l.options.className=e.className}return(0,M.createPortal)(e.children,s)}const z=(0,n.memo)((0,n.forwardRef)(O));const I=function(e,t,r,o){var a=(0,n.useContext)(C),i=(0,n.useMemo)((function(){return e(a)}),[]);return(0,n.useEffect)((function(){var e=o||r||t,n="function"==typeof t&&"function"==typeof r?t:null,s="function"==typeof r?r:"function"==typeof t?t:null,u=a.map;return u.hasControl(i)||(u.addControl(i,null==e?void 0:e.position),n&&n(a)),function(){s&&s(a),u.hasControl(i)&&u.removeControl(i)}}),[]),i};function A(e){var t=I((function(t){return new t.mapLib.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((function(){j(t._controlContainer,e.style)}),[e.style]),null}const Z=(0,n.memo)(A);function N(e,t){var r=(0,n.useRef)({props:e}),o=I((function(t){var n=new t.mapLib.GeolocateControl(e),o=n._setupUI;return n._setupUI=function(e){n._container.hasChildNodes()||o(e)},n.on("geolocate",(function(e){null==r.current.props.onGeolocate||r.current.props.onGeolocate(e)})),n.on("error",(function(e){null==r.current.props.onError||r.current.props.onError(e)})),n.on("outofmaxbounds",(function(e){null==r.current.props.onOutOfMaxBounds||r.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(function(e){null==r.current.props.onTrackUserLocationStart||r.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(function(e){null==r.current.props.onTrackUserLocationEnd||r.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return r.current.props=e,(0,n.useImperativeHandle)(t,(function(){return o}),[]),(0,n.useEffect)((function(){j(o._container,e.style)}),[e.style]),null}const F=(0,n.memo)((0,n.forwardRef)(N));function D(e){var t=I((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((function(){j(t._container,e.style)}),[e.style]),null}const U=(0,n.memo)(D);function B(e){var t=I((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position}),r=(0,n.useRef)(e),o=r.current;r.current=e;var a=e.style;return void 0!==e.maxWidth&&e.maxWidth!==o.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==o.unit&&t.setUnit(e.unit),(0,n.useEffect)((function(){j(t._container,a)}),[a]),null}const H=(0,n.memo)(B);function W(e,t){if(!e)throw new Error(t)}var G=0;const q=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-layer-"+G++}),[]);if((0,n.useEffect)((function(){if(t){var e=function(){return o((function(e){return e+1}))};return t.on("styledata",e),e(),function(){t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}}),[t]),t&&t.style&&t.getLayer(a))try{!function(e,t,r,n){if(W(r.id===n.id,"layer id changed"),W(r.type===n.type,"layer type changed"),"custom"!==r.type&&"custom"!==n.type){var o=r.layout,a=void 0===o?{}:o,s=r.paint,u=void 0===s?{}:s,l=r.filter,c=r.minzoom,f=r.maxzoom,p=r.beforeId;if(p!==n.beforeId&&e.moveLayer(t,p),a!==n.layout){var d=n.layout||{};for(var m in a)i(a[m],d[m])||e.setLayoutProperty(t,m,a[m]);for(var v in d)a.hasOwnProperty(v)||e.setLayoutProperty(t,v,void 0)}if(u!==n.paint){var g=n.paint||{};for(var h in u)i(u[h],g[h])||e.setPaintProperty(t,h,u[h]);for(var y in g)u.hasOwnProperty(y)||e.setPaintProperty(t,y,void 0)}i(l,n.filter)||e.setFilter(t,l),c===n.minzoom&&f===n.maxzoom||e.setLayerZoomRange(t,c,f)}}(t,a,e,r.current)}catch(s){console.warn(s)}else!function(e,t,r){if(e.style&&e.style._loaded&&(!("source"in r)||e.getSource(r.source))){var n=Object.assign({},r,{id:t});delete n.beforeId,e.addLayer(n,r.beforeId)}}(t,a,e);return r.current=e,null};var J=0;const V=function(e){var t=(0,n.useContext)(C).map.getMap(),r=(0,n.useRef)(e),o=(0,n.useState)(0)[1],a=(0,n.useMemo)((function(){return e.id||"jsx-source-"+J++}),[]);(0,n.useEffect)((function(){if(t){var e=function(){return setTimeout((function(){return o((function(e){return e+1}))}),0)};return t.on("styledata",e),e(),function(){if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(a)){var r,n=null==(r=t.getStyle())?void 0:r.layers;if(n)for(var o,i=(0,c.Z)(n);!(o=i()).done;){var s=o.value;s.source===a&&t.removeLayer(s.id)}t.removeSource(a)}}}}),[t]);var s=t&&t.style&&t.getSource(a);return s?function(e,t,r){W(t.id===r.id,"source id changed"),W(t.type===r.type,"source type changed");var n="",o=0;for(var a in t)"children"===a||"id"===a||i(r[a],t[a])||(n=a,o++);if(o){var s=t.type;if("geojson"===s)e.setData(t.data);else if("image"===s)e.updateImage({url:t.url,coordinates:t.coordinates});else if("setCoordinates"in e&&1===o&&"coordinates"===n)e.setCoordinates(t.coordinates);else if("setUrl"in e)switch(n){case"url":e.setUrl(t.url);break;case"tiles":e.setTiles(t.tiles)}else console.warn("Unable to update prop: "+n)}}(s,e,r.current):s=function(e,t,r){if(e.style&&e.style._loaded){var n=Object.assign({},r);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,a,e),r.current=e,s&&n.Children.map(e.children,(function(e){return e&&(0,n.cloneElement)(e,{source:a})}))||null};var Q=r.e(8539).then(r.t.bind(r,8539,23)),X=n.forwardRef((function(e,t){return w(e,t,Q)})),Y=R,K=z,$=Z,ee=U,te=F,re=H,ne=q,oe=V;const ae=X}}]);
\ No newline at end of file
diff --git a/assets/js/3b516b76.38e01a56.js b/assets/js/3b516b76.38e01a56.js
new file mode 100644
index 00000000..10739b89
--- /dev/null
+++ b/assets/js/3b516b76.38e01a56.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[369],{6933:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>a,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"api-reference/mapbox/navigation-control","title":"NavigationControl","description":"React component that wraps mapbox-gl\'s NavigationControl class.","source":"@site/../docs/api-reference/mapbox/navigation-control.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/navigation-control","permalink":"/react-map-gl/docs/api-reference/mapbox/navigation-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/navigation-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Marker","permalink":"/react-map-gl/docs/api-reference/mapbox/marker"},"next":{"title":"Popup","permalink":"/react-map-gl/docs/api-reference/mapbox/popup"}}');var n=o(4848),i=o(8453);const a={},s="NavigationControl",c={},l=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"navigationcontrol",children:"NavigationControl"})}),"\n",(0,n.jsxs)(t.p,{children:["React component that wraps mapbox-gl's ",(0,n.jsx)(t.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol",children:"NavigationControl"})," class."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport Map, {NavigationControl} from 'react-map-gl/mapbox';\r\nimport 'mapbox-gl/dist/mapbox-gl.css';\r\n\r\nfunction App() {\r\n return \"\r\n initialViewState={{\r\n longitude: -100,\r\n latitude: 40,\r\n zoom: 3.5\r\n }}\r\n mapStyle=\"mapbox://styles/mapbox/streets-v9\"\r\n >\r\n =0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=n.createContext({}),s=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},c=function(e){var t=s(e.components);return n.createElement(u.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},b=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,u=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),p=s(r),b=a,f=p["".concat(u,".").concat(b)]||p[b]||m[b]||o;return r?n.createElement(f,l(l({ref:t},c),{},{components:r})):n.createElement(f,l({ref:t},c))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=b;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i[p]="string"==typeof e?e:a,l[1]=i;for(var s=2;s{r.d(t,{Z:()=>l});var n=r(7294),a=r(6010);const o={tabItem:"tabItem_Ymn6"};function l(e){var t=e.children,r=e.hidden,l=e.className;return n.createElement("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,l),hidden:r},t)}},4866:(e,t,r)=>{r.d(t,{Z:()=>w});var n=r(7462),a=r(7294),o=r(6010),l=r(2466),i=r(6550),u=r(1980),s=r(7392),c=r(12);function p(e){return function(e){var t,r;return null!=(t=null==(r=a.Children.map(e,(function(e){if(!e||(0,a.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:r.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function m(e){var t=e.values,r=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:p(r);return function(e){var t=(0,s.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,r])}function b(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function f(e){var t=e.queryString,r=void 0!==t&&t,n=e.groupId,o=(0,i.k6)(),l=function(e){var t=e.queryString,r=void 0!==t&&t,n=e.groupId;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:r,groupId:n});return[(0,u._X)(l),(0,a.useCallback)((function(e){if(l){var t=new URLSearchParams(o.location.search);t.set(l,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[l,o])]}function d(e){var t,r,n,o,l=e.defaultValue,i=e.queryString,u=void 0!==i&&i,s=e.groupId,p=m(e),d=(0,a.useState)((function(){return function(e){var t,r=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(r){if(!b({value:r,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+r+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return r}var a=null!=(t=n.find((function(e){return e.default})))?t:n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:l,tabValues:p})})),v=d[0],h=d[1],g=f({queryString:u,groupId:s}),y=g[0],k=g[1],w=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:s}.groupId),r=(0,c.Nk)(t),n=r[0],o=r[1],[n,(0,a.useCallback)((function(e){t&&o.set(e)}),[t,o])]),C=w[0],x=w[1],N=function(){var e=null!=y?y:C;return b({value:e,tabValues:p})?e:null}();return(0,a.useLayoutEffect)((function(){N&&h(N)}),[N]),{selectedValue:v,selectValue:(0,a.useCallback)((function(e){if(!b({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);h(e),k(e),x(e)}),[k,x,p]),tabValues:p}}var v=r(2389);const h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,r=e.block,i=e.selectedValue,u=e.selectValue,s=e.tabValues,c=[],p=(0,l.o5)().blockElementScrollPositionUntilNextRender,m=function(e){var t=e.currentTarget,r=c.indexOf(t),n=s[r].value;n!==i&&(p(t),u(n))},b=function(e){var t,r=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":var n,a=c.indexOf(e.currentTarget)+1;r=null!=(n=c[a])?n:c[0];break;case"ArrowLeft":var o,l=c.indexOf(e.currentTarget)-1;r=null!=(o=c[l])?o:c[c.length-1]}null==(t=r)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":r},t)},s.map((function(e){var t=e.value,r=e.label,l=e.attributes;return a.createElement("li",(0,n.Z)({role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,key:t,ref:function(e){return c.push(e)},onKeyDown:b,onClick:m},l,{className:(0,o.Z)("tabs__item",h.tabItem,null==l?void 0:l.className,{"tabs__item--active":i===t})}),null!=r?r:t)})))}function y(e){var t=e.lazy,r=e.children,n=e.selectedValue,o=(Array.isArray(r)?r:[r]).filter(Boolean);if(t){var l=o.find((function(e){return e.props.value===n}));return l?(0,a.cloneElement)(l,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},o.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==n})})))}function k(e){var t=d(e);return a.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},a.createElement(g,(0,n.Z)({},e,t)),a.createElement(y,(0,n.Z)({},e,t)))}function w(e){var t=(0,v.Z)();return a.createElement(k,(0,n.Z)({key:String(t)},e))}},3999:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>m,contentTitle:()=>c,default:()=>v,frontMatter:()=>s,metadata:()=>p,toc:()=>b});var n=r(7462),a=r(3366),o=(r(7294),r(3905)),l=r(4866),i=r(5162),u=["components"],s={},c="AttributionControl",p={unversionedId:"api-reference/attribution-control",id:"api-reference/attribution-control",title:"AttributionControl",description:"React component that wraps the base library's AttributionControl class (Mapbox | Maplibre).",source:"@site/../docs/api-reference/attribution-control.md",sourceDirName:"api-reference",slug:"/api-reference/attribution-control",permalink:"/react-map-gl/docs/api-reference/attribution-control",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/attribution-control.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"default (Map)",permalink:"/react-map-gl/docs/api-reference/map"},next:{title:"FullscreenControl",permalink:"/react-map-gl/docs/api-reference/fullscreen-control"}},m={},b=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}],f={toc:b},d="wrapper";function v(e){var t=e.components,r=(0,a.Z)(e,u);return(0,o.kt)(d,(0,n.Z)({},f,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"attributioncontrol"},"AttributionControl"),(0,o.kt)("p",null,"React component that wraps the base library's ",(0,o.kt)("inlineCode",{parentName:"p"},"AttributionControl")," class (",(0,o.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol"},"Mapbox")," | ",(0,o.kt)("a",{parentName:"p",href:"https://maplibre.org/maplibre-gl-js-docs/api/markers/#attributioncontrol"},"Maplibre"),")."),(0,o.kt)(l.Z,{groupId:"map-library",mdxType:"Tabs"},(0,o.kt)(i.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},'import * as React from \'react\';\nimport Map, {AttributionControl} from \'react-map-gl\';\n\nfunction App() {\n return \n \n {let n=null;"interactive"in e&&(n=Object.assign({},e),delete n.interactive);const o=t[e.ref];if(o){n=n||Object.assign({},e),delete n.ref;for(const e of u)e in o&&(n[e]=o[e])}return n||e}));return Object.assign({},e,{layers:n})}const d={version:8,sources:{},layers:[]},m={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},f={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},h={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},g=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],y=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class v{constructor(e,t,n){this._map=null,this._internalUpdate=!1,this._inRender=!1,this._hoveredFeatures=null,this._deferredEvents={move:!1,zoom:!1,pitch:!1,rotate:!1},this._onEvent=e=>{const t=this.props[h[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[m[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._onCameraEvent=e=>{if(!this._internalUpdate){const t=this.props[f[e.type]];t&&t(e)}e.type in this._deferredEvents&&(this._deferredEvents[e.type]=!1)},this._MapClass=e,this.props=t,this._initialize(n)}get map(){return this._map}get transform(){return this._renderTransform}setProps(e){const t=this.props;this.props=e;const n=this._updateSettings(e,t);n&&this._createShadowTransform(this._map);const o=this._updateSize(e),r=this._updateViewState(e,!0);this._updateStyle(e,t),this._updateStyleComponents(e,t),this._updateHandlers(e,t),(n||o||r&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const n=v.savedMaps.pop();if(!n)return null;const o=n.map,r=o.getContainer();for(t.className=r.className;r.childNodes.length>0;)t.appendChild(r.childNodes[0]);o._container=t,n.setProps(Object.assign({},e,{styleDiffing:!1})),o.resize();const{initialViewState:s}=e;return s&&(s.bounds?o.fitBounds(s.bounds,Object.assign({},s.fitBoundsOptions,{duration:0})):n._updateViewState(s,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(()=>o.fire("load"))),o._update(),n}_initialize(e){const{props:t}=this,{mapStyle:n=d}=t,o=Object.assign({},t,t.initialViewState,{accessToken:t.mapboxAccessToken||_()||null,container:e,style:p(n)}),r=o.initialViewState||o.viewState||o;if(Object.assign(o,{center:[r.longitude||0,r.latitude||0],zoom:r.zoom||0,pitch:r.pitch||0,bearing:r.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const s=new this._MapClass(o);r.padding&&s.setPadding(r.padding),t.cursor&&(s.getCanvas().style.cursor=t.cursor),this._createShadowTransform(s);const a=s._render;s._render=e=>{this._inRender=!0,a.call(s,e),this._inRender=!1};const c=s._renderTaskQueue.run;s._renderTaskQueue.run=e=>{c.call(s._renderTaskQueue,e),this._onBeforeRepaint()},s.on("render",(()=>this._onAfterRepaint()));const l=s.fire;s.fire=this._fireEvent.bind(this,l),s.on("resize",(()=>{this._renderTransform.resize(s.transform.width,s.transform.height)})),s.on("styledata",(()=>{this._updateStyleComponents(this.props,{}),i(s.transform,this._renderTransform)})),s.on("sourcedata",(()=>this._updateStyleComponents(this.props,{})));for(const i in m)s.on(i,this._onPointerEvent);for(const i in f)s.on(i,this._onCameraEvent);for(const i in h)s.on(i,this._onEvent);this._map=s}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),v.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_createShadowTransform(e){const t=function(e){const t=e.clone();return t.pixelsToGLUnits=e.pixelsToGLUnits,t}(e.transform);e.painter.transform=t,this._renderTransform=t}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e,t){if(this._internalUpdate)return!1;const n=this._map,o=this._renderTransform,{zoom:r,pitch:s,bearing:a}=o,i=n.isMoving();i&&(o.cameraElevationReference="sea");const u=l(o,Object.assign({},c(n.transform),e));if(i&&(o.cameraElevationReference="ground"),u&&t){const e=this._deferredEvents;e.move=!0,e.zoom||(e.zoom=r!==o.zoom),e.rotate||(e.rotate=a!==o.bearing),e.pitch||(e.pitch=s!==o.pitch)}return i||l(n.transform,e),u}_updateSettings(e,t){const n=this._map;let o=!1;for(const r of g)if(r in e&&!a(e[r],t[r])){o=!0;const t=n["set"+r[0].toUpperCase()+r.slice(1)];null==t||t.call(n,e[r])}return o}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=d,styleDiffing:n=!0}=e,o={diff:n};return"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(p(t),o),!0}return!1}_updateStyleComponents(e,t){const n=this._map;let o=!1;return n.isStyleLoaded()&&("light"in e&&n.setLight&&!a(e.light,t.light)&&(o=!0,n.setLight(e.light)),"fog"in e&&n.setFog&&!a(e.fog,t.fog)&&(o=!0,n.setFog(e.fog)),"terrain"in e&&n.setTerrain&&!a(e.terrain,t.terrain)&&(e.terrain&&!n.getSource(e.terrain.source)||(o=!0,n.setTerrain(e.terrain)))),o}_updateHandlers(e,t){const n=this._map;let o=!1;for(const i of y){var r,s;const c=null==(r=e[i])||r;a(c,null==(s=t[i])||s)||(o=!0,c?n[i].enable(c):n[i].disable())}return o}_queryRenderedFeatures(e){const t=this._map,n=t.transform,{interactiveLayerIds:o=[]}=this.props;try{return t.transform=this._renderTransform,t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(r){return[]}finally{t.transform=n}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var n;const t=e.type,o=(null==(n=this._hoveredFeatures)?void 0:n.length)>0,r=this._queryRenderedFeatures(e.point),s=r.length>0;!s&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=r,s&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}_fireEvent(e,t,n){const o=this._map,r=o.transform,s="string"==typeof t?t:t.type;return"move"===s&&this._updateViewState(this.props,!1),s in f&&("object"==typeof t&&(t.viewState=c(r)),this._map.isMoving())?(o.transform=this._renderTransform,e.call(o,t,n),o.transform=r,o):(e.call(o,t,n),o)}_onBeforeRepaint(){const e=this._map;this._internalUpdate=!0;for(const n in this._deferredEvents)this._deferredEvents[n]&&e.fire(n);this._internalUpdate=!1;const t=this._map.transform;e.transform=this._renderTransform,this._onAfterRepaint=()=>{i(this._renderTransform,t),e.transform=t}}}function _(){let e=null;if("undefined"!=typeof location){const t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(t){}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}v.savedMaps=[];const x=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,n={getMap:()=>t,getCenter:()=>e.transform.center,getZoom:()=>e.transform.zoom,getBearing:()=>e.transform.bearing,getPitch:()=>e.transform.pitch,getPadding:()=>e.transform.padding,getBounds:()=>e.transform.getBounds(),project:n=>{const o=t.transform;t.transform=e.transform;const r=t.project(n);return t.transform=o,r},unproject:n=>{const o=t.transform;t.transform=e.transform;const r=t.unproject(n);return t.transform=o,r},queryTerrainElevation:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryTerrainElevation(n,o);return t.transform=r,s},queryRenderedFeatures:(n,o)=>{const r=t.transform;t.transform=e.transform;const s=t.queryRenderedFeatures(n,o);return t.transform=r,s}};for(const o of function(e){const t=new Set;let n=e;for(;n;){for(const o of Object.getOwnPropertyNames(n))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);n=Object.getPrototypeOf(n)}return Array.from(t)}(t))o in n||x.includes(o)||(n[o]=t[o].bind(t));return n}const L="undefined"!=typeof document?o.useLayoutEffect:o.useEffect,S=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];const E=o.createContext(null);function C(e,t){const a=(0,o.useContext)(s),[i,c]=(0,o.useState)(null),l=(0,o.useRef)(),{current:u}=(0,o.useRef)({mapLib:null,map:null});(0,o.useEffect)((()=>{const t=e.mapLib;let o,r=!0;return Promise.resolve(t||n.e(842).then(n.t.bind(n,842,23))).then((t=>{if(!r)return;if(!t)throw new Error("Invalid mapLib");const n="Map"in t?t:t.default;if(!n.Map)throw new Error("Invalid mapLib");if(function(e,t){for(const o of S)o in t&&(e[o]=t[o]);const{RTLTextPlugin:n="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;n&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(n,(e=>{e&&console.error(e)}),!0)}(n,e),n.supported&&!n.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(o=v.reuse(e,l.current)),o||(o=new v(n.Map,e,l.current)),u.map=b(o),u.mapLib=n,c(o),null==a||a.onMapMount(u.map,e.id)})).catch((t=>{const{onError:n}=e;n?n({type:"error",target:null,error:t}):console.error(t)})),()=>{r=!1,o&&(null==a||a.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),L((()=>{i&&i.setProps(e)})),(0,o.useImperativeHandle)(t,(()=>u.map),[i]);const p=(0,o.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,r.jsx)("div",{id:e.id,ref:l,style:p,children:i&&(0,r.jsx)(E.Provider,{value:u,children:(0,r.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const w=o.forwardRef(C);var M=n(961);const j=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function P(e,t){if(!e||!t)return;const n=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!j.test(o)?n[o]=e+"px":n[o]=e}}const T=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(E),s=(0,o.useRef)({props:e});s.current.props=e;const a=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const n=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new r.Marker(n);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==s.current.props.onClick||s.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragStart||s.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDrag||s.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=a.getLngLat(),null==s.current.props.onDragEnd||s.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(a.addTo(n.getMap()),()=>{a.remove()})),[]);const{longitude:i,latitude:c,offset:l,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:f="auto",pitchAlignment:h="auto"}=e;return(0,o.useEffect)((()=>{P(a.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>a),[]),a.getLngLat().lng===i&&a.getLngLat().lat===c||a.setLngLat([i,c]),l&&!function(e,t){const n=Array.isArray(e)?e[0]:e?e.x:0,o=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,s=Array.isArray(t)?t[1]:t?t.y:0;return n===r&&o===s}(a.getOffset(),l)&&a.setOffset(l),a.isDraggable()!==p&&a.setDraggable(p),a.getRotation()!==m&&a.setRotation(m),a.getRotationAlignment()!==f&&a.setRotationAlignment(f),a.getPitchAlignment()!==h&&a.setPitchAlignment(h),a.getPopup()!==d&&a.setPopup(d),(0,M.createPortal)(e.children,a.getElement())})));function R(e){return new Set(e?e.trim().split(/\s+/):[])}const k=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:n,mapLib:r}=(0,o.useContext)(E),s=(0,o.useMemo)((()=>document.createElement("div")),[]),i=(0,o.useRef)({props:e});i.current.props=e;const c=(0,o.useMemo)((()=>{const t=Object.assign({},e),n=new r.Popup(t);return n.setLngLat([e.longitude,e.latitude]),n.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),n}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return c.on("close",e),c.setDOMContent(s).addTo(n.getMap()),()=>{c.off("close",e),c.isOpen()&&c.remove()}}),[]),(0,o.useEffect)((()=>{P(c.getElement(),e.style)}),[e.style]),(0,o.useImperativeHandle)(t,(()=>c),[]),c.isOpen()&&(c.getLngLat().lng===e.longitude&&c.getLngLat().lat===e.latitude||c.setLngLat([e.longitude,e.latitude]),e.offset&&!a(c.options.offset,e.offset)&&c.setOffset(e.offset),c.options.anchor===e.anchor&&c.options.maxWidth===e.maxWidth||(c.options.anchor=e.anchor,c.setMaxWidth(e.maxWidth)),c.options.className!==e.className)){const t=R(c.options.className),n=R(e.className);for(const e of t)n.has(e)||c.removeClassName(e);for(const e of n)t.has(e)||c.addClassName(e);c.options.className=e.className}return(0,M.createPortal)(e.children,s)})));function z(e,t,n,r){const s=(0,o.useContext)(E),a=(0,o.useMemo)((()=>e(s)),[]);return(0,o.useEffect)((()=>{const e=r||n||t,o="function"==typeof t&&"function"==typeof n?t:null,i="function"==typeof n?n:"function"==typeof t?t:null,{map:c}=s;return c.hasControl(a)||(c.addControl(a,null==e?void 0:e.position),o&&o(s)),()=>{i&&i(s),c.hasControl(a)&&c.removeControl(a)}}),[]),a}function O(e){const t=z((t=>{let{mapLib:n}=t;return new n.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{P(t._controlContainer,e.style)}),[e.style]),null}const A=(0,o.memo)(O);function I(e,t){const n=(0,o.useRef)({props:e}),r=z((t=>{let{mapLib:o}=t;const r=new o.GeolocateControl(e),s=r._setupUI.bind(r);return r._setupUI=e=>{r._container.hasChildNodes()||s(e)},r.on("geolocate",(e=>{null==n.current.props.onGeolocate||n.current.props.onGeolocate(e)})),r.on("error",(e=>{null==n.current.props.onError||n.current.props.onError(e)})),r.on("outofmaxbounds",(e=>{null==n.current.props.onOutOfMaxBounds||n.current.props.onOutOfMaxBounds(e)})),r.on("trackuserlocationstart",(e=>{null==n.current.props.onTrackUserLocationStart||n.current.props.onTrackUserLocationStart(e)})),r.on("trackuserlocationend",(e=>{null==n.current.props.onTrackUserLocationEnd||n.current.props.onTrackUserLocationEnd(e)})),r}),{position:e.position});return n.current.props=e,(0,o.useImperativeHandle)(t,(()=>r),[]),(0,o.useEffect)((()=>{P(r._container,e.style)}),[e.style]),null}const F=(0,o.memo)((0,o.forwardRef)(I));function N(e){const t=z((t=>{let{mapLib:n}=t;return new n.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{P(t._container,e.style)}),[e.style]),null}const D=(0,o.memo)(N);function U(e){const t=z((t=>{let{mapLib:n}=t;return new n.ScaleControl(e)}),{position:e.position}),n=(0,o.useRef)(e),r=n.current;n.current=e;const{style:s}=e;return void 0!==e.maxWidth&&e.maxWidth!==r.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==r.unit&&t.setUnit(e.unit),(0,o.useEffect)((()=>{P(t._container,s)}),[s]),null}const Z=(0,o.memo)(U);function W(e,t){if(!e)throw new Error(t)}let B=0;function H(e){const t=(0,o.useContext)(E).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-source-"+B++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>r((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(s)){var n;const e=null==(n=t.getStyle())?void 0:n.layers;if(e)for(const n of e)n.source===s&&t.removeLayer(n.id);t.removeSource(s)}}}}),[t]);let i=t&&t.style&&t.getSource(s);return i?function(e,t,n){W(t.id===n.id,"source id changed"),W(t.type===n.type,"source type changed");let o="",r=0;for(const i in t)"children"===i||"id"===i||a(n[i],t[i])||(o=i,r++);if(!r)return;const s=t.type;"geojson"===s?e.setData(t.data):"image"===s?e.updateImage({url:t.url,coordinates:t.coordinates}):"setCoordinates"in e&&1===r&&"coordinates"===o?e.setCoordinates(t.coordinates):"setUrl"in e&&"url"===o?e.setUrl(t.url):"setTiles"in e&&"tiles"===o?e.setTiles(t.tiles):console.warn("Unable to update prop: "+o)}(i,e,n.current):i=function(e,t,n){if(e.style&&e.style._loaded){const o=Object.assign({},n);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,s,e),n.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:s})))||null}let q=0;function V(e){const t=(0,o.useContext)(E).map.getMap(),n=(0,o.useRef)(e),[,r]=(0,o.useState)(0),s=(0,o.useMemo)((()=>e.id||"jsx-layer-"+q++),[]);(0,o.useEffect)((()=>{if(t){const e=()=>r((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(s)&&t.removeLayer(s)}}}),[t]);if(t&&t.style&&t.getLayer(s))try{!function(e,t,n,o){if(W(n.id===o.id,"layer id changed"),W(n.type===o.type,"layer type changed"),"custom"===n.type||"custom"===o.type)return;const{layout:r={},paint:s={},filter:i,minzoom:c,maxzoom:l,beforeId:u}=n;if(u!==o.beforeId&&e.moveLayer(t,u),r!==o.layout){const n=o.layout||{};for(const o in r)a(r[o],n[o])||e.setLayoutProperty(t,o,r[o]);for(const o in n)r.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(s!==o.paint){const n=o.paint||{};for(const o in s)a(s[o],n[o])||e.setPaintProperty(t,o,s[o]);for(const o in n)s.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}a(i,o.filter)||e.setFilter(t,i),c===o.minzoom&&l===o.maxzoom||e.setLayerZoomRange(t,c,l)}(t,s,e,n.current)}catch(i){console.warn(i)}else!function(e,t,n){if(e.style&&e.style._loaded&&(!("source"in n)||e.getSource(n.source))){const o=Object.assign({},n,{id:t});delete o.beforeId,e.addLayer(o,n.beforeId)}}(t,s,e);return n.current=e,null}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function a(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4129389b.2d7776b0.js b/assets/js/4129389b.2d7776b0.js
new file mode 100644
index 00000000..5113d4e8
--- /dev/null
+++ b/assets/js/4129389b.2d7776b0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7597],{7472:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>i,contentTitle:()=>o,default:()=>d,frontMatter:()=>c,metadata:()=>t,toc:()=>p});const t=JSON.parse('{"id":"api-reference/maplibre/use-map","title":"useMap","description":"The useMap hook allows a custom component to reference the Map that contains it.","source":"@site/../docs/api-reference/maplibre/use-map.md","sourceDirName":"api-reference/maplibre","slug":"/api-reference/maplibre/use-map","permalink":"/react-map-gl/docs/api-reference/maplibre/use-map","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/maplibre/use-map.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"useControl","permalink":"/react-map-gl/docs/api-reference/maplibre/use-control"},"next":{"title":"Types","permalink":"/react-map-gl/docs/api-reference/maplibre/types"}}');var a=r(4848),s=r(8453);const c={},o="useMap",i={},p=[{value:"Signature",id:"signature",level:2},{value:"Source",id:"source",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"usemap",children:"useMap"})}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"useMap"})," hook allows a custom component to reference the ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/maplibre/map",children:"Map"})," that contains it."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import {Map, useMap} from 'react-map-gl/maplibre';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {current: map} = useMap();\n\n const onClick = () => {\n map.flyTo({center: [-122.4, 37.8]});\n };\n\n return Go ;\n}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["When used with the ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/maplibre/map-provider",children:"MapProvider"}),", this hook can also reference maps that are rendered outside of the current component's direct render tree."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:'import {MapProvider, Map, useMap} from \'react-map-gl/maplibre\';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {myMapA, myMapB} = useMap();\n\n const onClick = () => {\n myMapA.flyTo({center: [-122.4, 37.8]});\n myMapB.flyTo({center: [-74, 40.7]});\n };\n\n return Go ;\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["See a full example ",(0,a.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/master/examples/get-started/hook",children:"here"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"signature",children:"Signature"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"useMap(): {current?: MapRef, [id: string]: MapRef}"})}),"\n",(0,a.jsxs)(n.p,{children:["The hook returns an object that contains all mounted maps under the closest ",(0,a.jsx)(n.code,{children:"MapProvider"}),". The keys are each map's ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/maplibre/map#id",children:"id"})," and the values are the ",(0,a.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/maplibre/types#mapref",children:"MapRef"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["If the hook is used inside a decendent of a ",(0,a.jsx)(n.code,{children:"Map"})," component, the returned object also contains a ",(0,a.jsx)(n.code,{children:"current"})," field that references the containing map."]}),"\n",(0,a.jsx)(n.h2,{id:"source",children:"Source"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://github.com/visgl/react-map-gl/tree/master/modules/maplibre/src/components/use-map.tsx",children:"use-map.tsx"})})]})}function d(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>c,x:()=>o});var t=r(6540);const a={},s=t.createContext(a);function c(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:c(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/43b8766d.ee5c1594.js b/assets/js/43b8766d.ee5c1594.js
deleted file mode 100644
index 6f83dc9e..00000000
--- a/assets/js/43b8766d.ee5c1594.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[4692],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),c=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):u(u({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(i.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=c(n),f=a,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||o;return n?r.createElement(d,u(u({ref:t},p),{},{components:n})):r.createElement(d,u({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,u=new Array(o);u[0]=f;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[s]="string"==typeof e?e:a,u[1]=l;for(var c=2;c{n.d(t,{Z:()=>u});var r=n(7294),a=n(6010);const o={tabItem:"tabItem_Ymn6"};function u(e){var t=e.children,n=e.hidden,u=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,u),hidden:n},t)}},4866:(e,t,n)=>{n.d(t,{Z:()=>M});var r=n(7462),a=n(7294),o=n(6010),u=n(2466),l=n(6550),i=n(1980),c=n(7392),p=n(12);function s(e){return function(e){var t,n;return null!=(t=null==(n=a.Children.map(e,(function(e){if(!e||(0,a.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:n.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function m(e){var t=e.values,n=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:s(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function f(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function d(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,o=(0,l.k6)(),u=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,i._X)(u),(0,a.useCallback)((function(e){if(u){var t=new URLSearchParams(o.location.search);t.set(u,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[u,o])]}function b(e){var t,n,r,o,u=e.defaultValue,l=e.queryString,i=void 0!==l&&l,c=e.groupId,s=m(e),b=(0,a.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!f({value:n,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:u,tabValues:s})})),v=b[0],h=b[1],g=d({queryString:i,groupId:c}),y=g[0],k=g[1],M=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,p.Nk)(t),r=n[0],o=n[1],[r,(0,a.useCallback)((function(e){t&&o.set(e)}),[t,o])]),T=M[0],N=M[1],w=function(){var e=null!=y?y:T;return f({value:e,tabValues:s})?e:null}();return(0,a.useLayoutEffect)((function(){w&&h(w)}),[w]),{selectedValue:v,selectValue:(0,a.useCallback)((function(e){if(!f({value:e,tabValues:s}))throw new Error("Can't select invalid tab value="+e);h(e),k(e),N(e)}),[k,N,s]),tabValues:s}}var v=n(2389);const h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,l=e.selectedValue,i=e.selectValue,c=e.tabValues,p=[],s=(0,u.o5)().blockElementScrollPositionUntilNextRender,m=function(e){var t=e.currentTarget,n=p.indexOf(t),r=c[n].value;r!==l&&(s(t),i(r))},f=function(e){var t,n=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":var r,a=p.indexOf(e.currentTarget)+1;n=null!=(r=p[a])?r:p[0];break;case"ArrowLeft":var o,u=p.indexOf(e.currentTarget)-1;n=null!=(o=p[u])?o:p[p.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,u=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return p.push(e)},onKeyDown:f,onClick:m},u,{className:(0,o.Z)("tabs__item",h.tabItem,null==u?void 0:u.className,{"tabs__item--active":l===t})}),null!=n?n:t)})))}function y(e){var t=e.lazy,n=e.children,r=e.selectedValue,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){var u=o.find((function(e){return e.props.value===r}));return u?(0,a.cloneElement)(u,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},o.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function k(e){var t=b(e);return a.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},a.createElement(g,(0,r.Z)({},e,t)),a.createElement(y,(0,r.Z)({},e,t)))}function M(e){var t=(0,v.Z)();return a.createElement(k,(0,r.Z)({key:String(t)},e))}},9522:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>p,default:()=>v,frontMatter:()=>c,metadata:()=>s,toc:()=>f});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),u=n(4866),l=n(5162),i=["components"],c={},p="useMap",s={unversionedId:"api-reference/use-map",id:"api-reference/use-map",title:"useMap",description:"The useMap hook allows a custom component to reference the Map that contains it.",source:"@site/../docs/api-reference/use-map.md",sourceDirName:"api-reference",slug:"/api-reference/use-map",permalink:"/react-map-gl/docs/api-reference/use-map",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/use-map.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"useControl",permalink:"/react-map-gl/docs/api-reference/use-control"},next:{title:"Types",permalink:"/react-map-gl/docs/api-reference/types"}},m={},f=[{value:"Signature",id:"signature",level:2},{value:"Source",id:"source",level:2}],d={toc:f},b="wrapper";function v(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(b,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"usemap"},"useMap"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"useMap")," hook allows a custom component to reference the ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/map"},"Map")," that contains it."),(0,o.kt)(u.Z,{groupId:"map-library",mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {Map, useMap} from 'react-map-gl';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {current: map} = useMap();\n\n const onClick = () => {\n map.flyTo({center: [-122.4, 37.8]});\n };\n\n return Go ;\n}\n"))),(0,o.kt)(l.Z,{value:"maplibre",label:"Maplibre",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {Map, useMap} from 'react-map-gl/maplibre';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {current: map} = useMap();\n\n const onClick = () => {\n map.flyTo({center: [-122.4, 37.8]});\n };\n\n return Go ;\n}\n")))),(0,o.kt)("p",null,"When used with the ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/map-provider"},"MapProvider"),", this hook can also reference maps that are rendered outside of the current component's direct render tree."),(0,o.kt)(u.Z,{groupId:"map-library",mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"mapbox",label:"Mapbox",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},'import {MapProvider, Map, useMap} from \'react-map-gl\';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {myMapA, myMapB} = useMap();\n\n const onClick = () => {\n myMapA.flyTo({center: [-122.4, 37.8]});\n myMapB.flyTo({center: [-74, 40.7]});\n };\n\n return Go ;\n}\n'))),(0,o.kt)(l.Z,{value:"maplibre",label:"Maplibre",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},'import {MapProvider, Map, useMap} from \'react-map-gl/maplibre\';\n\nfunction Root() {\n return (\n \n \n );\n}\n\nfunction NavigateButton() {\n const {myMapA, myMapB} = useMap();\n\n const onClick = () => {\n myMapA.flyTo({center: [-122.4, 37.8]});\n myMapB.flyTo({center: [-74, 40.7]});\n };\n\n return Go ;\n}\n')))),(0,o.kt)("p",null,"See a full example ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.1-release/examples/get-started/hook"},"here"),"."),(0,o.kt)("h2",{id:"signature"},"Signature"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"useMap(): {current?: MapRef, [id: string]: MapRef}")),(0,o.kt)("p",null,"The hook returns an object that contains all mounted maps under the closest ",(0,o.kt)("inlineCode",{parentName:"p"},"MapProvider"),". The keys are each map's ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/map#id"},"id")," and the values are the ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/types#mapref"},"MapRef"),"."),(0,o.kt)("p",null,"If the hook is used inside a decendent of a ",(0,o.kt)("inlineCode",{parentName:"p"},"Map")," component, the returned object also contains a ",(0,o.kt)("inlineCode",{parentName:"p"},"current")," field that references the containing map."),(0,o.kt)("h2",{id:"source"},"Source"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/visgl/react-map-gl/tree/7.1-release/src/components/use-map.tsx"},"use-map.tsx")))}v.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/assets/js/44f68560.4e20e424.js b/assets/js/44f68560.4e20e424.js
new file mode 100644
index 00000000..95918ba1
--- /dev/null
+++ b/assets/js/44f68560.4e20e424.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3640],{2801:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"api-reference/maplibre/navigation-control","title":"NavigationControl","description":"React component that wraps maplibre-gl\'s NavigationControl class.","source":"@site/../docs/api-reference/maplibre/navigation-control.md","sourceDirName":"api-reference/maplibre","slug":"/api-reference/maplibre/navigation-control","permalink":"/react-map-gl/docs/api-reference/maplibre/navigation-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/maplibre/navigation-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Marker","permalink":"/react-map-gl/docs/api-reference/maplibre/marker"},"next":{"title":"Popup","permalink":"/react-map-gl/docs/api-reference/maplibre/popup"}}');var o=r(4848),i=r(8453);const s={},a="NavigationControl",l={},c=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"navigationcontrol",children:"NavigationControl"})}),"\n",(0,o.jsxs)(t.p,{children:["React component that wraps maplibre-gl's ",(0,o.jsx)(t.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/NavigationControl/",children:"NavigationControl"})," class."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {Map, NavigationControl} from 'react-map-gl/maplibre';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\n\r\nfunction App() {\r\n return \r\n =0&&(a.get=function(r,e){return(r=f(this,r))>=0&&ro)return{value:void 0,done:!0};var t=i.next();return n||1===r||t.done?t:T(r,a-1,0===r?void 0:t.value[1],t)}))},a}function Kt(t,r,e,n){var i=Vt(t);return i.__iterateUncached=function(i,o){var u=this;if(o)return this.cacheResult().__iterate(i,o);var s=!0,a=0;return t.__iterate((function(t,o,c){if(!s||!(s=r.call(e,t,o,c)))return a++,i(t,n?o:a-1,u)})),a},i.__iteratorUncached=function(i,o){var u=this;if(o)return this.cacheResult().__iterator(i,o);var s=t.__iterator(2,o),a=!0,c=0;return new C((function(){var t,o,f;do{if((t=s.next()).done)return n||1===i?t:T(i,c++,0===i?void 0:t.value[1],t);var h=t.value;o=h[0],f=h[1],a&&(a=r.call(e,f,o,u))}while(a);return 2===i?t:T(i,o,f,t)}))},i}function Ct(t,r,e){var n=Vt(t);return n.__iterateUncached=function(i,o){if(o)return this.cacheResult().__iterate(i,o);var u=0,s=!1;return function t(a,c){a.__iterate((function(o,a){return(!r||c0}function Wt(t,r,e,n){var i=Vt(t),o=new G(e).map((function(t){return t.size}));return i.size=n?o.max():o.min(),i.__iterate=function(t,r){for(var e,n=this.__iterator(1,r),i=0;!(e=n.next()).done&&!1!==t(e.value,i++,this););return i},i.__iteratorUncached=function(t,i){var o=e.map((function(t){return t=I(t),N(i?t.reverse():t)})),u=0,s=!1;return new C((function(){var e;return s||(e=o.map((function(t){return t.next()})),s=n?e.every((function(t){return t.done})):e.some((function(t){return t.done}))),s?{value:void 0,done:!0}:T(t,u++,r.apply(null,e.map((function(t){return t.value}))))}))},i}function Nt(t,r){return t===r?t:M(t)?r:t.constructor(r)}function Ht(t){if(t!==Object(t))throw new TypeError("Expected [K, V] tuple: "+t)}function Jt(t){return m(t)?O:S(t)?E:j}function Vt(t){return Object.create((m(t)?Q:S(t)?X:F).prototype)}function Yt(){return this._iter.cacheResult?(this._iter.cacheResult(),this.size=this._iter.size,this):Y.prototype.cacheResult.call(this)}function Qt(t,r){return void 0===t&&void 0===r?0:void 0===t?1:void 0===r?-1:t>r?1:t0;)r[e]=arguments[e+1];if("function"!=typeof t)throw new TypeError("Invalid merger function: "+t);return gr(this,r,t)}function gr(t,r,e){for(var n=[],i=0;i0;)r[e]=arguments[e+1];return mr(this,r,t)}function Ir(t){for(var r=[],e=arguments.length-1;e-- >0;)r[e]=arguments[e+1];return ar(this,t,Wr(),(function(t){return zr(t,r)}))}function Or(t){for(var r=[],e=arguments.length-1;e-- >0;)r[e]=arguments[e+1];return ar(this,t,Wr(),(function(t){return mr(t,r)}))}function Er(t){var r=this.asMutable();return t(r),r.wasAltered()?r.__ensureOwner(this.__ownerID):this}function jr(){return this.__ownerID?this:this.__ensureOwner(new a)}function qr(){return this.__ensureOwner()}function Mr(){return this.__altered}var Dr=function(t){function r(r){return null==r?Wr():ut(r)&&!R(r)?r:Wr().withMutations((function(e){var n=t(r);Gt(n.size),n.forEach((function(t,r){return e.set(r,t)}))}))}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.of=function(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];return Wr().withMutations((function(r){for(var e=0;e=t.length)throw new Error("Missing value for key: "+t[e]);r.set(t[e],t[e+1])}}))},r.prototype.toString=function(){return this.__toString("Map {","}")},r.prototype.get=function(t,r){return this._root?this._root.get(0,void 0,t,r):r},r.prototype.set=function(t,r){return Nr(this,t,r)},r.prototype.remove=function(t){return Nr(this,t,u)},r.prototype.deleteAll=function(t){var r=I(t);return 0===r.size?this:this.withMutations((function(t){r.forEach((function(r){return t.remove(r)}))}))},r.prototype.clear=function(){return 0===this.size?this:this.__ownerID?(this.size=0,this._root=null,this.__hash=void 0,this.__altered=!0,this):Wr()},r.prototype.sort=function(t){return le(Tt(this,t))},r.prototype.sortBy=function(t,r){return le(Tt(this,r,t))},r.prototype.map=function(t,r){var e=this;return this.withMutations((function(n){n.forEach((function(i,o){n.set(o,t.call(r,i,o,e))}))}))},r.prototype.__iterator=function(t,r){return new Cr(this,t,r)},r.prototype.__iterate=function(t,r){var e=this,n=0;return this._root&&this._root.iterate((function(r){return n++,t(r[1],r[0],e)}),r),n},r.prototype.__ensureOwner=function(t){return t===this.__ownerID?this:t?Pr(this.size,this._root,t,this.__hash):0===this.size?Wr():(this.__ownerID=t,this.__altered=!1,this)},r}(O);Dr.isMap=ut;var Ar=Dr.prototype;Ar[ot]=!0,Ar[n]=Ar.remove,Ar.removeAll=Ar.deleteAll,Ar.setIn=hr,Ar.removeIn=Ar.deleteIn=_r,Ar.update=vr,Ar.updateIn=yr,Ar.merge=Ar.concat=dr,Ar.mergeWith=wr,Ar.mergeDeep=Sr,Ar.mergeDeepWith=br,Ar.mergeIn=Ir,Ar.mergeDeepIn=Or,Ar.withMutations=Er,Ar.wasAltered=Mr,Ar.asImmutable=qr,Ar["@@transducer/init"]=Ar.asMutable=jr,Ar["@@transducer/step"]=function(t,r){return t.set(r[0],r[1])},Ar["@@transducer/result"]=function(t){return t.asImmutable()};var kr=function(t,r){this.ownerID=t,this.entries=r};kr.prototype.get=function(t,r,e,n){for(var i=this.entries,o=0,u=i.length;o=Xr)return function(t,r,e,n){t||(t=new a);for(var i=new Br(t,_t(e),[e,n]),o=0;o>>t)&o),u=this.bitmap;return u&i?this.nodes[Yr(u&i-1)].get(t+5,r,e,n):n},xr.prototype.update=function(t,r,e,n,s,a,c){void 0===e&&(e=_t(n));var f=(0===r?e:e>>>r)&o,h=1<=Fr)return function(t,r,e,n,o){for(var u=0,s=new Array(i),a=0;0!==e;a++,e>>>=1)s[a]=1&e?r[u++]:void 0;return s[n]=o,new Rr(t,u+1,s)}(t,v,p,f,d);if(_&&!d&&2===v.length&&Jr(v[1^l]))return v[1^l];if(_&&d&&1===v.length&&Jr(d))return d;var w=t&&t===this.ownerID,g=_?d?p:p^h:p|h,m=_?d?Qr(v,l,d,w):function(t,r,e){var n=t.length-1;if(e&&r===n)return t.pop(),t;for(var i=new Array(n),o=0,u=0;u>>t)&o,u=this.nodes[i];return u?u.get(t+5,r,e,n):n},Rr.prototype.update=function(t,r,e,n,i,s,a){void 0===e&&(e=_t(n));var c=(0===r?e:e>>>r)&o,f=i===u,h=this.nodes,p=h[c];if(f&&!p)return this;var _=Hr(p,t,r+5,e,n,i,s,a);if(_===p)return this;var l=this.count;if(p){if(!_&&--l>>e)&o,a=(0===e?n:n>>>e)&o,c=s===a?[Vr(t,r,e+5,n,i)]:(u=new Br(r,n,i),s>1&1431655765))+(t>>2&858993459))+(t>>4)&252645135,t+=t>>8,127&(t+=t>>16)}function Qr(t,r,e,n){var i=n?t:Xt(t);return i[r]=e,i}var Xr=8,Fr=16,Gr=8,Zr="@@__IMMUTABLE_LIST__@@";function $r(t){return Boolean(t&&t[Zr])}var te=function(t){function r(r){var e=se();if(null==r)return e;if($r(r))return r;var n=t(r),o=n.size;return 0===o?e:(Gt(o),o>0&&o=0&&t=t.size||r<0)return t.withMutations((function(t){r<0?he(t,r).set(0,e):he(t,0,r+1).set(r,e)}));r+=t._origin;var n=t._tail,i=t._root,o={value:!1};r>=pe(t._capacity)?n=ae(n,t.__ownerID,0,r,e,o):i=ae(i,t.__ownerID,t._level,r,e,o);if(!o.value)return t;if(t.__ownerID)return t._root=i,t._tail=n,t.__hash=void 0,t.__altered=!0,t;return ue(t._origin,t._capacity,t._level,i,n)}(this,t,r)},r.prototype.remove=function(t){return this.has(t)?0===t?this.shift():t===this.size-1?this.pop():this.splice(t,1):this},r.prototype.insert=function(t,r){return this.splice(t,0,r)},r.prototype.clear=function(){return 0===this.size?this:this.__ownerID?(this.size=this._origin=this._capacity=0,this._level=5,this._root=this._tail=this.__hash=void 0,this.__altered=!0,this):se()},r.prototype.push=function(){var t=arguments,r=this.size;return this.withMutations((function(e){he(e,0,r+t.length);for(var n=0;n>>r&o;if(n>=this.array.length)return new ee([],t);var i,u=0===n;if(r>0){var s=this.array[n];if((i=s&&s.removeBefore(t,r-5,e))===s&&u)return this}if(u&&!i)return this;var a=ce(this,t);if(!u)for(var c=0;c>>r&o;if(i>=this.array.length)return this;if(r>0){var u=this.array[i];if((n=u&&u.removeAfter(t,r-5,e))===u&&i===this.array.length-1)return this}var s=ce(this,t);return s.array.splice(i+1),n&&(s.array[i]=n),s};var ne,ie={};function oe(t,r){var e=t._origin,n=t._capacity,o=pe(n),u=t._tail;return s(t._root,t._level,0);function s(t,a,c){return 0===a?function(t,s){var a=s===o?u&&u.array:t&&t.array,c=s>e?0:e-s,f=n-s;f>i&&(f=i);return function(){if(c===f)return ie;var t=r?--f:c++;return a&&a[t]}}(t,c):function(t,o,u){var a,c=t&&t.array,f=u>e?0:e-u>>o,h=1+(n-u>>o);h>i&&(h=i);return function(){for(;;){if(a){var t=a();if(t!==ie)return t;a=null}if(f===h)return ie;var e=r?--h:f++;a=s(c&&c[e],o-5,u+(e<>>e&o,f=t&&c0){var h=t&&t.array[c],p=ae(h,r,e-5,n,i,u);return p===h?t:((a=ce(t,r)).array[c]=p,a)}return f&&t.array[c]===i?t:(u&&s(u),a=ce(t,r),void 0===i&&c===a.array.length-1?a.array.pop():a.array[c]=i,a)}function ce(t,r){return r&&t&&r===t.ownerID?t:new ee(t?t.array.slice():[],r)}function fe(t,r){if(r>=pe(t._capacity))return t._tail;if(r<1<0;)e=e.array[r>>>n&o],n-=5;return e}}function he(t,r,e){void 0!==r&&(r|=0),void 0!==e&&(e|=0);var n=t.__ownerID||new a,i=t._origin,u=t._capacity,s=i+r,c=void 0===e?u:e<0?u+e:i+e;if(s===i&&c===u)return t;if(s>=c)return t.clear();for(var f=t._level,h=t._root,p=0;s+p<0;)h=new ee(h&&h.array.length?[void 0,h]:[],n),p+=1<<(f+=5);p&&(s+=p,i+=p,c+=p,u+=p);for(var _=pe(u),l=pe(c);l>=1<_?new ee([],n):v;if(v&&l>_&&s5;w-=5){var g=_>>>w&o;d=d.array[g]=ce(d.array[g],n)}d.array[_>>>5&o]=v}if(c=l)s-=l,c-=l,f=5,h=null,y=y&&y.removeBefore(n,0,s);else if(s>i||l<_){for(p=0;h;){var m=s>>>f&o;if(m!==l>>>f&o)break;m&&(p+=(1<i&&(h=h.removeBefore(n,f,s-p)),h&&l<_&&(h=h.removeAfter(n,f,l-p)),p&&(s-=p,c-=p)}return t.__ownerID?(t.size=c-s,t._origin=s,t._capacity=c,t._level=f,t._root=h,t._tail=y,t.__hash=void 0,t.__altered=!0,t):ue(s,c,f,h,y)}function pe(t){return t>>5<<5}var _e,le=function(t){function r(t){return null==t?ye():st(t)?t:ye().withMutations((function(r){var e=O(t);Gt(e.size),e.forEach((function(t,e){return r.set(e,t)}))}))}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.of=function(){return this(arguments)},r.prototype.toString=function(){return this.__toString("OrderedMap {","}")},r.prototype.get=function(t,r){var e=this._map.get(t);return void 0!==e?this._list.get(e)[1]:r},r.prototype.clear=function(){return 0===this.size?this:this.__ownerID?(this.size=0,this._map.clear(),this._list.clear(),this.__altered=!0,this):ye()},r.prototype.set=function(t,r){return de(this,t,r)},r.prototype.remove=function(t){return de(this,t,u)},r.prototype.__iterate=function(t,r){var e=this;return this._list.__iterate((function(r){return r&&t(r[1],r[0],e)}),r)},r.prototype.__iterator=function(t,r){return this._list.fromEntrySeq().__iterator(t,r)},r.prototype.__ensureOwner=function(t){if(t===this.__ownerID)return this;var r=this._map.__ensureOwner(t),e=this._list.__ensureOwner(t);return t?ve(r,e,t,this.__hash):0===this.size?ye():(this.__ownerID=t,this.__altered=!1,this._map=r,this._list=e,this)},r}(Dr);function ve(t,r,e,n){var i=Object.create(le.prototype);return i.size=t?t.size:0,i._map=t,i._list=r,i.__ownerID=e,i.__hash=n,i.__altered=!1,i}function ye(){return _e||(_e=ve(Wr(),se()))}function de(t,r,e){var n,o,s=t._map,a=t._list,c=s.get(r),f=void 0!==c;if(e===u){if(!f)return t;a.size>=i&&a.size>=2*s.size?(n=(o=a.filter((function(t,r){return void 0!==t&&c!==r}))).toKeyedSeq().map((function(t){return t[0]})).flip().toMap(),t.__ownerID&&(n.__ownerID=o.__ownerID=t.__ownerID)):(n=s.remove(r),o=c===a.size-1?a.pop():a.set(c,void 0))}else if(f){if(e===a.get(c)[1])return t;n=s,o=a.set(c,[r,e])}else n=s.set(r,a.size),o=a.set(a.size,[r,e]);return t.__ownerID?(t.size=n.size,t._map=n,t._list=o,t.__hash=void 0,t.__altered=!0,t):ve(n,o)}le.isOrderedMap=st,le.prototype[x]=!0,le.prototype[n]=le.prototype.remove;var we="@@__IMMUTABLE_STACK__@@";function ge(t){return Boolean(t&&t[we])}var me=function(t){function r(t){return null==t?Ie():ge(t)?t:Ie().pushAll(t)}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.of=function(){return this(arguments)},r.prototype.toString=function(){return this.__toString("Stack [","]")},r.prototype.get=function(t,r){var e=this._head;for(t=f(this,t);e&&t--;)e=e.next;return e?e.value:r},r.prototype.peek=function(){return this._head&&this._head.value},r.prototype.push=function(){var t=arguments;if(0===arguments.length)return this;for(var r=this.size+arguments.length,e=this._head,n=arguments.length-1;n>=0;n--)e={value:t[n],next:e};return this.__ownerID?(this.size=r,this._head=e,this.__hash=void 0,this.__altered=!0,this):be(r,e)},r.prototype.pushAll=function(r){if(0===(r=t(r)).size)return this;if(0===this.size&&ge(r))return r;Gt(r.size);var e=this.size,n=this._head;return r.__iterate((function(t){e++,n={value:t,next:n}}),!0),this.__ownerID?(this.size=e,this._head=n,this.__hash=void 0,this.__altered=!0,this):be(e,n)},r.prototype.pop=function(){return this.slice(1)},r.prototype.clear=function(){return 0===this.size?this:this.__ownerID?(this.size=0,this._head=void 0,this.__hash=void 0,this.__altered=!0,this):Ie()},r.prototype.slice=function(r,e){if(p(r,e,this.size))return this;var n=_(r,this.size);if(l(e,this.size)!==this.size)return t.prototype.slice.call(this,r,e);for(var i=this.size-n,o=this._head;n--;)o=o.next;return this.__ownerID?(this.size=i,this._head=o,this.__hash=void 0,this.__altered=!0,this):be(i,o)},r.prototype.__ensureOwner=function(t){return t===this.__ownerID?this:t?be(this.size,this._head,t,this.__hash):0===this.size?Ie():(this.__ownerID=t,this.__altered=!1,this)},r.prototype.__iterate=function(t,r){var e=this;if(r)return new G(this.toArray()).__iterate((function(r,n){return t(r,n,e)}),r);for(var n=0,i=this._head;i&&!1!==t(i.value,n++,this);)i=i.next;return n},r.prototype.__iterator=function(t,r){if(r)return new G(this.toArray()).__iterator(t,r);var e=0,n=this._head;return new C((function(){if(n){var r=n.value;return n=n.next,T(t,e++,r)}return{value:void 0,done:!0}}))},r}(E);me.isStack=ge;var ze,Se=me.prototype;function be(t,r,e,n){var i=Object.create(Se);return i.size=t,i._head=r,i.__ownerID=e,i.__hash=n,i.__altered=!1,i}function Ie(){return ze||(ze=be(0))}Se[we]=!0,Se.shift=Se.pop,Se.unshift=Se.push,Se.unshiftAll=Se.pushAll,Se.withMutations=Er,Se.wasAltered=Mr,Se.asImmutable=qr,Se["@@transducer/init"]=Se.asMutable=jr,Se["@@transducer/step"]=function(t,r){return t.unshift(r)},Se["@@transducer/result"]=function(t){return t.asImmutable()};var Oe="@@__IMMUTABLE_SET__@@";function Ee(t){return Boolean(t&&t[Oe])}function je(t){return Ee(t)&&R(t)}function qe(t,r){if(t===r)return!0;if(!w(r)||void 0!==t.size&&void 0!==r.size&&t.size!==r.size||void 0!==t.__hash&&void 0!==r.__hash&&t.__hash!==r.__hash||m(t)!==m(r)||S(t)!==S(r)||R(t)!==R(r))return!1;if(0===t.size&&0===r.size)return!0;var e=!b(t);if(R(t)){var n=t.entries();return r.every((function(t,r){var i=n.next().value;return i&&ct(i[1],t)&&(e||ct(i[0],r))}))&&n.next().done}var i=!1;if(void 0===t.size)if(void 0===r.size)"function"==typeof t.cacheResult&&t.cacheResult();else{i=!0;var o=t;t=r,r=o}var s=!0,a=r.__iterate((function(r,n){if(e?!t.has(r):i?!ct(r,t.get(n,u)):!ct(t.get(n,u),r))return s=!1,!1}));return s&&t.size===a}function Me(t,r){var e=function(e){t.prototype[e]=r[e]};return Object.keys(r).forEach(e),Object.getOwnPropertySymbols&&Object.getOwnPropertySymbols(r).forEach(e),t}function De(t){if(!t||"object"!=typeof t)return t;if(!w(t)){if(!rr(t))return t;t=Y(t)}if(m(t)){var r={};return t.__iterate((function(t,e){r[e]=De(t)})),r}var e=[];return t.__iterate((function(t){e.push(De(t))})),e}var Ae=function(t){function r(r){return null==r?Be():Ee(r)&&!R(r)?r:Be().withMutations((function(e){var n=t(r);Gt(n.size),n.forEach((function(t){return e.add(t)}))}))}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.of=function(){return this(arguments)},r.fromKeys=function(t){return this(O(t).keySeq())},r.intersect=function(t){return(t=I(t).toArray()).length?xe.intersect.apply(r(t.pop()),t):Be()},r.union=function(t){return(t=I(t).toArray()).length?xe.union.apply(r(t.pop()),t):Be()},r.prototype.toString=function(){return this.__toString("Set {","}")},r.prototype.has=function(t){return this._map.has(t)},r.prototype.add=function(t){return Re(this,this._map.set(t,t))},r.prototype.remove=function(t){return Re(this,this._map.remove(t))},r.prototype.clear=function(){return Re(this,this._map.clear())},r.prototype.map=function(t,r){var e=this,n=!1,i=Re(this,this._map.mapEntries((function(i){var o=i[1],u=t.call(r,o,o,e);return u!==o&&(n=!0),[u,u]}),r));return n?i:this},r.prototype.union=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return 0===(r=r.filter((function(t){return 0!==t.size}))).length?this:0!==this.size||this.__ownerID||1!==r.length?this.withMutations((function(e){for(var n=0;n=0&&r=0&&e>>-15,461845907),r=ft(r<<13|r>>>-13,5),r=r+3864292196^t,r=ft(r^r>>>16,2246822507),r=ft(r^r>>>13,3266489909),r=ht(r^r>>>16),r}(t.__iterate(e?r?function(t,r){n=31*n+tn(_t(t),_t(r))|0}:function(t,r){n=n+tn(_t(t),_t(r))|0}:r?function(t){n=31*n+_t(t)|0}:function(t){n=n+_t(t)|0}),n)}(this))}});var Ne=I.prototype;Ne[d]=!0,Ne[K]=Ne.values,Ne.toJSON=Ne.toArray,Ne.__toStringMapper=er,Ne.inspect=Ne.toSource=function(){return this.toString()},Ne.chain=Ne.flatMap,Ne.contains=Ne.includes,Me(O,{flip:function(){return Nt(this,kt(this))},mapEntries:function(t,r){var e=this,n=0;return Nt(this,this.toSeq().map((function(i,o){return t.call(r,[o,i],n++,e)})).fromEntrySeq())},mapKeys:function(t,r){var e=this;return Nt(this,this.toSeq().flip().map((function(n,i){return t.call(r,n,i,e)})).flip())}});var He=O.prototype;He[g]=!0,He[K]=Ne.entries,He.toJSON=We,He.__toStringMapper=function(t,r){return er(r)+": "+er(t)},Me(E,{toKeyedSeq:function(){return new qt(this,!1)},filter:function(t,r){return Nt(this,Ut(this,t,r,!1))},findIndex:function(t,r){var e=this.findEntry(t,r);return e?e[0]:-1},indexOf:function(t){var r=this.keyOf(t);return void 0===r?-1:r},lastIndexOf:function(t){var r=this.lastKeyOf(t);return void 0===r?-1:r},reverse:function(){return Nt(this,Rt(this,!1))},slice:function(t,r){return Nt(this,Bt(this,t,r,!1))},splice:function(t,r){var e=arguments.length;if(r=Math.max(r||0,0),0===e||2===e&&!r)return this;t=_(t,t<0?this.count():this.size);var n=this.slice(0,t);return Nt(this,1===e?n:n.concat(Xt(arguments,2),this.slice(t+r)))},findLastIndex:function(t,r){var e=this.findLastEntry(t,r);return e?e[0]:-1},first:function(t){return this.get(0,t)},flatten:function(t){return Nt(this,Ct(this,t,!1))},get:function(t,r){return(t=f(this,t))<0||this.size===1/0||void 0!==this.size&&t>this.size?r:this.find((function(r,e){return e===t}),void 0,r)},has:function(t){return(t=f(this,t))>=0&&(void 0!==this.size?this.size===1/0||tr?-1:0}function tn(t,r){return t^r+2654435769+(t<<6)+(t>>2)}Ve.has=Ne.includes,Ve.contains=Ve.includes,Ve.keys=Ve.values,Me(Q,He),Me(X,Je),Me(F,Ve);var rn=function(t){function r(t){return null==t?un():je(t)?t:un().withMutations((function(r){var e=j(t);Gt(e.size),e.forEach((function(t){return r.add(t)}))}))}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.of=function(){return this(arguments)},r.fromKeys=function(t){return this(O(t).keySeq())},r.prototype.toString=function(){return this.__toString("OrderedSet {","}")},r}(Ae);rn.isOrderedSet=je;var en,nn=rn.prototype;function on(t,r){var e=Object.create(nn);return e.size=t?t.size:0,e._map=t,e.__ownerID=r,e}function un(){return en||(en=on(ye()))}nn[x]=!0,nn.zip=Je.zip,nn.zipWith=Je.zipWith,nn.zipAll=Je.zipAll,nn.__empty=un,nn.__make=on;var sn=function(t,r){var e;!function(t){if(A(t))throw new Error("Can not call `Record` with an immutable Record as default values. Use a plain javascript object instead.");if(k(t))throw new Error("Can not call `Record` with an immutable Collection as default values. Use a plain javascript object instead.");if(null===t||"object"!=typeof t)throw new Error("Can not call `Record` with a non-object as default values. Use a plain javascript object instead.")}(t);var n=function(o){var u=this;if(o instanceof n)return o;if(!(this instanceof n))return new n(o);if(!e){e=!0;var s=Object.keys(t),a=i._indices={};i._name=r,i._keys=s,i._defaultValues=t;for(var c=0;c2?[]:void 0,{"":t})}function ln(t,r,e,n,i,o){if("string"!=typeof e&&!k(e)&&(V(e)||P(e)||tr(e))){if(~t.indexOf(e))throw new TypeError("Cannot convert circular structure to Immutable");t.push(e),i&&""!==n&&i.push(n);var u=r.call(o,n,Y(e).map((function(n,o){return ln(t,r,n,o,i,e)})),i&&i.slice());return t.pop(),i&&i.pop(),u}return e}function vn(t,r){return S(r)?r.toList():m(r)?r.toMap():r.toSet()}},8453:(t,r,e)=>{e.d(r,{R:()=>u,x:()=>s});var n=e(6540);const i={},o=n.createContext(i);function u(t){const r=n.useContext(o);return n.useMemo((function(){return"function"==typeof t?t(r):{...r,...t}}),[r,t])}function s(t){let r;return r=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:u(t.components),n.createElement(o.Provider,{value:r},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/47f0ae92.4de7f90c.js b/assets/js/47f0ae92.4de7f90c.js
new file mode 100644
index 00000000..ec07bb5a
--- /dev/null
+++ b/assets/js/47f0ae92.4de7f90c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9589],{2470:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>h,contentTitle:()=>f,default:()=>b,frontMatter:()=>y,metadata:()=>n,toc:()=>g});const n=JSON.parse('{"id":"maplibre/zoom-to-bounds","title":"Zoom to Bounds","description":"","source":"@site/src/examples/maplibre/zoom-to-bounds.mdx","sourceDirName":"maplibre","slug":"/maplibre/zoom-to-bounds","permalink":"/react-map-gl/examples/maplibre/zoom-to-bounds","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Camera Transition","permalink":"/react-map-gl/examples/maplibre/viewport-animation"}}');var a=o(4848),r=o(8453),i=o(6540),l=(o(5338),o(5490)),s=o(5917);function c(){return(0,a.jsxs)("div",{className:"control-panel",children:[(0,a.jsx)("h3",{children:"Zoom to Bounding Box"}),(0,a.jsx)("p",{children:"Click on a San Fransisco Neighborhood to zoom in."}),(0,a.jsx)("div",{className:"source-link",children:(0,a.jsx)("a",{href:"https://github.com/visgl/react-maplibre/tree/1.0-release/examples/zoom-to-bounds",target:"_new",children:"View Code \u2197"})})]})}const u=i.memo(c);var p=o(1545);const d=Object.assign({},p,{sources:Object.assign({},p.sources,{"sf-neighborhoods":{type:"geojson",data:"https://raw.githubusercontent.com/visgl/react-map-gl/master/examples/.data/feature-example-sf.json"}}),layers:[...p.layers,{id:"sf-neighborhoods-fill",source:"sf-neighborhoods",type:"fill",paint:{"fill-outline-color":"#0040c8","fill-color":"#fff","fill-opacity":0}},{id:"sf-neighborhoods-outline",source:"sf-neighborhoods",type:"line",paint:{"line-width":2,"line-color":"#0080ef"}}]});function m(){const e=(0,i.useRef)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(l.T5,{ref:e,initialViewState:{latitude:37.78,longitude:-122.4,zoom:11},mapStyle:d,interactiveLayerIds:["sf-neighborhoods-fill"],onClick:t=>{const o=t.features[0];if(o){const[t,n,a,r]=(0,s.A)(o);e.current.fitBounds([[t,n],[a,r]],{padding:40,duration:1e3})}}}),(0,a.jsx)(u,{})]})}const y={},f="Zoom to Bounds",h={},g=[];function x(e){const t={h1:"h1",header:"header",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"zoom-to-bounds",children:"Zoom to Bounds"})}),"\n","\n",(0,a.jsx)(m,{})]})}function b(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(x,{...e})}):x(e)}},5490:(e,t,o)=>{o.d(t,{T3:()=>O,tG:()=>E,Wd:()=>Z,T5:()=>v,pH:()=>M,ov:()=>P,zD:()=>k,g0:()=>I,kL:()=>F,jG:()=>G,Ay:()=>v,VI:()=>C});var n=o(6540),a=o(4848);const r=n.createContext(null);function i(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let o=0;o{let o=null;"interactive"in e&&(o=Object.assign({},e),delete o.interactive);const n=t[e.ref];if(n){o=o||Object.assign({},e),delete o.ref;for(const e of c)e in n&&(o[e]=n[e])}return o||e}));return Object.assign({},e,{layers:o})}const p={version:8,sources:{},layers:[]},d={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},m={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},y={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},f=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],h=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class g{constructor(e,t,o){this._map=null,this._internalUpdate=!1,this._hoveredFeatures=null,this._propsedCameraUpdate=null,this._styleComponents={},this._onEvent=e=>{const t=this.props[y[e.type]];t?t(e):"error"===e.type&&console.error(e.error)},this._onCameraEvent=e=>{if(this._internalUpdate)return;e.viewState=this._propsedCameraUpdate||l(this._map.transform);const t=this.props[m[e.type]];t&&t(e)},this._onCameraUpdate=e=>this._internalUpdate?e:(this._propsedCameraUpdate=l(e),s(e,this.props)),this._onPointerEvent=e=>{"mousemove"!==e.type&&"mouseout"!==e.type||this._updateHover(e);const t=this.props[d[e.type]];t&&(this.props.interactiveLayerIds&&"mouseover"!==e.type&&"mouseout"!==e.type&&(e.features=this._hoveredFeatures||this._queryRenderedFeatures(e.point)),t(e),delete e.features)},this._MapClass=e,this.props=t,this._initialize(o)}get map(){return this._map}setProps(e){const t=this.props;this.props=e;const o=this._updateSettings(e,t),n=this._updateSize(e),a=this._updateViewState(e);this._updateStyle(e,t),this._updateStyleComponents(e),this._updateHandlers(e,t),(o||n||a&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const o=g.savedMaps.pop();if(!o)return null;const n=o.map,a=n.getContainer();for(t.className=a.className;a.childNodes.length>0;)t.appendChild(a.childNodes[0]);n._container=t;const r=n._resizeObserver;r&&(r.disconnect(),r.observe(t)),o.setProps(Object.assign({},e,{styleDiffing:!1})),n.resize();const{initialViewState:i}=e;return i&&(i.bounds?n.fitBounds(i.bounds,Object.assign({},i.fitBoundsOptions,{duration:0})):o._updateViewState(i)),n.isStyleLoaded()?n.fire("load"):n.once("style.load",(()=>n.fire("load"))),n._update(),o}_initialize(e){const{props:t}=this,{mapStyle:o=p}=t,n=Object.assign({},t,t.initialViewState,{container:e,style:u(o)}),a=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[a.longitude||0,a.latitude||0],zoom:a.zoom||0,pitch:a.pitch||0,bearing:a.bearing||0}),t.gl){const e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=e,t.gl)}const r=new this._MapClass(n);a.padding&&r.setPadding(a.padding),t.cursor&&(r.getCanvas().style.cursor=t.cursor),r.transformCameraUpdate=this._onCameraUpdate,r.on("style.load",(()=>{this._styleComponents={light:r.getLight(),sky:r.getSky(),projection:null==r.getProjection?void 0:r.getProjection(),terrain:r.getTerrain()},this._updateStyleComponents(this.props)})),r.on("sourcedata",(()=>{this._updateStyleComponents(this.props)}));for(const i in d)r.on(i,this._onPointerEvent);for(const i in m)r.on(i,this._onCameraEvent);for(const i in y)r.on(i,this._onEvent);this._map=r}recycle(){const e=this.map.getContainer().querySelector("[mapboxgl-children]");null==e||e.remove(),g.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const e=this._map;e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())}_updateSize(e){const{viewState:t}=e;if(t){const e=this._map;if(t.width!==e.transform.width||t.height!==e.transform.height)return e.resize(),!0}return!1}_updateViewState(e){const t=this._map,o=t.transform;if(!t.isMoving()){const n=s(o,e);if(Object.keys(n).length>0)return this._internalUpdate=!0,t.jumpTo(n),this._internalUpdate=!1,!0}return!1}_updateSettings(e,t){const o=this._map;let n=!1;for(const a of f)if(a in e&&!i(e[a],t[a])){n=!0;const t=o["set"+a[0].toUpperCase()+a.slice(1)];null==t||t.call(o,e[a])}return n}_updateStyle(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor||""),e.mapStyle!==t.mapStyle){const{mapStyle:t=p,styleDiffing:o=!0}=e,n={diff:o};"localIdeographFontFamily"in e&&(n.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(u(t),n)}}_updateStyleComponents(e){let{light:t,projection:o,sky:n,terrain:a}=e;const r=this._map,l=this._styleComponents;var s;r.style._loaded&&(t&&!i(t,l.light)&&(l.light=t,r.setLight(t)),o&&!i(o,l.projection)&&o!==(null==(s=l.projection)?void 0:s.type)&&(l.projection="string"==typeof o?{type:o}:o,null==r.setProjection||r.setProjection(l.projection)),n&&!i(n,l.sky)&&(l.sky=n,r.setSky(n)),void 0===a||i(a,l.terrain)||a&&!r.getSource(a.source)||(l.terrain=a,r.setTerrain(a)))}_updateHandlers(e,t){const o=this._map;for(const r of h){var n,a;const l=null==(n=e[r])||n;i(l,null==(a=t[r])||a)||(l?o[r].enable(l):o[r].disable())}}_queryRenderedFeatures(e){const t=this._map,{interactiveLayerIds:o=[]}=this.props;try{return t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(n){return[]}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var o;const t=e.type,n=(null==(o=this._hoveredFeatures)?void 0:o.length)>0,a=this._queryRenderedFeatures(e.point),r=a.length>0;!r&&n&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=a,r&&!n&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}}g.savedMaps=[];const x=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function b(e){if(!e)return null;const t=e.map,o={getMap:()=>t};for(const n of function(e){const t=new Set;let o=e;for(;o;){for(const n of Object.getOwnPropertyNames(o))"_"!==n[0]&&"function"==typeof e[n]&&"fire"!==n&&"setEventedParent"!==n&&t.add(n);o=Object.getPrototypeOf(o)}return Array.from(t)}(t))n in o||x.includes(n)||(o[n]=t[n].bind(t));return o}const _="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;const z=n.createContext(null);function w(e,t){const i=(0,n.useContext)(r),[l,s]=(0,n.useState)(null),c=(0,n.useRef)(),{current:u}=(0,n.useRef)({mapLib:null,map:null});(0,n.useEffect)((()=>{const t=e.mapLib;let n,a=!0;return Promise.resolve(t||o.e(6443).then(o.t.bind(o,6443,23))).then((t=>{if(!a)return;if(!t)throw new Error("Invalid mapLib");const o="Map"in t?t:t.default;if(!o.Map)throw new Error("Invalid mapLib");if(function(e,t){const{RTLTextPlugin:o,maxParallelImageRequests:n,workerCount:a,workerUrl:r}=t;if(o&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()){const{pluginUrl:t,lazy:n=!0}="string"==typeof o?{pluginUrl:o}:o;e.setRTLTextPlugin(t,(e=>{e&&console.error(e)}),n)}void 0!==n&&e.setMaxParallelImageRequests(n),void 0!==a&&e.setWorkerCount(a),void 0!==r&&e.setWorkerUrl(r)}(o,e),o.supported&&!o.supported(e))throw new Error("Map is not supported by this browser");e.reuseMaps&&(n=g.reuse(e,c.current)),n||(n=new g(o.Map,e,c.current)),u.map=b(n),u.mapLib=o,s(n),null==i||i.onMapMount(u.map,e.id)})).catch((t=>{const{onError:o}=e;o?o({type:"error",target:null,originalEvent:null,error:t}):console.error(t)})),()=>{a=!1,n&&(null==i||i.onMapUnmount(e.id),e.reuseMaps?n.recycle():n.destroy())}}),[]),_((()=>{l&&l.setProps(e)})),(0,n.useImperativeHandle)(t,(()=>u.map),[l]);const p=(0,n.useMemo)((()=>Object.assign({position:"relative",width:"100%",height:"100%"},e.style)),[e.style]);return(0,a.jsx)("div",{id:e.id,ref:c,style:p,children:l&&(0,a.jsx)(z.Provider,{value:u,children:(0,a.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const v=n.forwardRef(w);var R=o(961);const S=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function j(e,t){if(!e||!t)return;const o=e.style;for(const n in t){const e=t[n];Number.isFinite(e)&&!S.test(n)?o[n]=e+"px":o[n]=e}}const M=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:a}=(0,n.useContext)(z),r=(0,n.useRef)({props:e});r.current.props=e;const i=(0,n.useMemo)((()=>{let t=!1;n.Children.forEach(e.children,(e=>{e&&(t=!0)}));const o=Object.assign({},e,{element:t?document.createElement("div"):null}),l=new a.Marker(o);return l.setLngLat([e.longitude,e.latitude]),l.getElement().addEventListener("click",(e=>{null==r.current.props.onClick||r.current.props.onClick({type:"click",target:l,originalEvent:e})})),l.on("dragstart",(e=>{const t=e;t.lngLat=i.getLngLat(),null==r.current.props.onDragStart||r.current.props.onDragStart(t)})),l.on("drag",(e=>{const t=e;t.lngLat=i.getLngLat(),null==r.current.props.onDrag||r.current.props.onDrag(t)})),l.on("dragend",(e=>{const t=e;t.lngLat=i.getLngLat(),null==r.current.props.onDragEnd||r.current.props.onDragEnd(t)})),l}),[]);(0,n.useEffect)((()=>(i.addTo(o.getMap()),()=>{i.remove()})),[]);const{longitude:l,latitude:s,offset:c,style:u,draggable:p=!1,popup:d=null,rotation:m=0,rotationAlignment:y="auto",pitchAlignment:f="auto"}=e;return(0,n.useEffect)((()=>{j(i.getElement(),u)}),[u]),(0,n.useImperativeHandle)(t,(()=>i),[]),i.getLngLat().lng===l&&i.getLngLat().lat===s||i.setLngLat([l,s]),c&&!function(e,t){const o=Array.isArray(e)?e[0]:e?e.x:0,n=Array.isArray(e)?e[1]:e?e.y:0,a=Array.isArray(t)?t[0]:t?t.x:0,r=Array.isArray(t)?t[1]:t?t.y:0;return o===a&&n===r}(i.getOffset(),c)&&i.setOffset(c),i.isDraggable()!==p&&i.setDraggable(p),i.getRotation()!==m&&i.setRotation(m),i.getRotationAlignment()!==y&&i.setRotationAlignment(y),i.getPitchAlignment()!==f&&i.setPitchAlignment(f),i.getPopup()!==d&&i.setPopup(d),(0,R.createPortal)(e.children,i.getElement())})));function L(e){return new Set(e?e.trim().split(/\s+/):[])}const k=(0,n.memo)((0,n.forwardRef)(((e,t)=>{const{map:o,mapLib:a}=(0,n.useContext)(z),r=(0,n.useMemo)((()=>document.createElement("div")),[]),l=(0,n.useRef)({props:e});l.current.props=e;const s=(0,n.useMemo)((()=>{const t=Object.assign({},e),o=new a.Popup(t);return o.setLngLat([e.longitude,e.latitude]),o.once("open",(e=>{null==l.current.props.onOpen||l.current.props.onOpen(e)})),o}),[]);if((0,n.useEffect)((()=>{const e=e=>{null==l.current.props.onClose||l.current.props.onClose(e)};return s.on("close",e),s.setDOMContent(r).addTo(o.getMap()),()=>{s.off("close",e),s.isOpen()&&s.remove()}}),[]),(0,n.useEffect)((()=>{j(s.getElement(),e.style)}),[e.style]),(0,n.useImperativeHandle)(t,(()=>s),[]),s.isOpen()&&(s.getLngLat().lng===e.longitude&&s.getLngLat().lat===e.latitude||s.setLngLat([e.longitude,e.latitude]),e.offset&&!i(s.options.offset,e.offset)&&s.setOffset(e.offset),s.options.anchor===e.anchor&&s.options.maxWidth===e.maxWidth||(s.options.anchor=e.anchor,s.setMaxWidth(e.maxWidth)),s.options.className!==e.className)){const t=L(s.options.className),o=L(e.className);for(const e of t)o.has(e)||s.removeClassName(e);for(const e of o)t.has(e)||s.addClassName(e);s.options.className=e.className}return(0,R.createPortal)(e.children,r)})));function C(e,t,o,a){const r=(0,n.useContext)(z),i=(0,n.useMemo)((()=>e(r)),[]);return(0,n.useEffect)((()=>{const e=a||o||t,n="function"==typeof t&&"function"==typeof o?t:null,l="function"==typeof o?o:"function"==typeof t?t:null,{map:s}=r;return s.hasControl(i)||(s.addControl(i,null==e?void 0:e.position),n&&n(r)),()=>{l&&l(r),s.hasControl(i)&&s.removeControl(i)}}),[]),i}function N(e){const t=C((t=>{let{mapLib:o}=t;return new o.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,n.useEffect)((()=>{j(t._controlContainer,e.style)}),[e.style]),null}const O=(0,n.memo)(N);function H(e,t){const o=(0,n.useRef)({props:e}),a=C((t=>{let{mapLib:n}=t;const a=new n.GeolocateControl(e),r=a._setupUI;return a._setupUI=()=>{a._container.hasChildNodes()||r()},a.on("geolocate",(e=>{null==o.current.props.onGeolocate||o.current.props.onGeolocate(e)})),a.on("error",(e=>{null==o.current.props.onError||o.current.props.onError(e)})),a.on("outofmaxbounds",(e=>{null==o.current.props.onOutOfMaxBounds||o.current.props.onOutOfMaxBounds(e)})),a.on("trackuserlocationstart",(e=>{null==o.current.props.onTrackUserLocationStart||o.current.props.onTrackUserLocationStart(e)})),a.on("trackuserlocationend",(e=>{null==o.current.props.onTrackUserLocationEnd||o.current.props.onTrackUserLocationEnd(e)})),a}),{position:e.position});return o.current.props=e,(0,n.useImperativeHandle)(t,(()=>a),[]),(0,n.useEffect)((()=>{j(a._container,e.style)}),[e.style]),null}const E=(0,n.memo)((0,n.forwardRef)(H));function B(e){const t=C((t=>{let{mapLib:o}=t;return new o.NavigationControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{j(t._container,e.style)}),[e.style]),null}const P=(0,n.memo)(B);function W(e){const t=C((t=>{let{mapLib:o}=t;return new o.ScaleControl(e)}),{position:e.position}),o=(0,n.useRef)(e),a=o.current;o.current=e;const{style:r}=e;return void 0!==e.maxWidth&&e.maxWidth!==a.maxWidth&&(t.options.maxWidth=e.maxWidth),void 0!==e.unit&&e.unit!==a.unit&&t.setUnit(e.unit),(0,n.useEffect)((()=>{j(t._container,r)}),[r]),null}const I=(0,n.memo)(W);function T(e){const t=C((t=>{let{mapLib:o}=t;return new o.TerrainControl(e)}),{position:e.position});return(0,n.useEffect)((()=>{j(t._container,e.style)}),[e.style]),null}const G=(0,n.memo)(T);function U(e,t){if(!e)throw new Error(t)}let A=0;function F(e){const t=(0,n.useContext)(z).map.getMap(),o=(0,n.useRef)(e),[,a]=(0,n.useState)(0),r=(0,n.useMemo)((()=>e.id||"jsx-source-"+A++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>setTimeout((()=>a((e=>e+1))),0);return t.on("styledata",e),e(),()=>{if(t.off("styledata",e),t.style&&t.style._loaded&&t.getSource(r)){var o;const e=null==(o=t.getStyle())?void 0:o.layers;if(e)for(const o of e)o.source===r&&t.removeLayer(o.id);t.removeSource(r)}}}}),[t]);let l=t&&t.style&&t.getSource(r);return l?function(e,t,o){U(t.id===o.id,"source id changed"),U(t.type===o.type,"source type changed");let n="",a=0;for(const l in t)"children"===l||"id"===l||i(o[l],t[l])||(n=l,a++);if(!a)return;const r=t.type;if("geojson"===r)e.setData(t.data);else if("image"===r)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(n){case"coordinates":null==e.setCoordinates||e.setCoordinates(t.coordinates);break;case"url":null==e.setUrl||e.setUrl(t.url);break;case"tiles":null==e.setTiles||e.setTiles(t.tiles);break;default:console.warn("Unable to update prop: "+n)}}(l,e,o.current):l=function(e,t,o){if(e.style&&e.style._loaded){const n=Object.assign({},o);return delete n.id,delete n.children,e.addSource(t,n),e.getSource(t)}return null}(t,r,e),o.current=e,l&&n.Children.map(e.children,(e=>e&&(0,n.cloneElement)(e,{source:r})))||null}let D=0;function Z(e){const t=(0,n.useContext)(z).map.getMap(),o=(0,n.useRef)(e),[,a]=(0,n.useState)(0),r=(0,n.useMemo)((()=>e.id||"jsx-layer-"+D++),[]);(0,n.useEffect)((()=>{if(t){const e=()=>a((e=>e+1));return t.on("styledata",e),e(),()=>{t.off("styledata",e),t.style&&t.style._loaded&&t.getLayer(r)&&t.removeLayer(r)}}}),[t]);if(t&&t.style&&t.getLayer(r))try{!function(e,t,o,n){if(U(o.id===n.id,"layer id changed"),U(o.type===n.type,"layer type changed"),"custom"===o.type||"custom"===n.type)return;const{layout:a={},paint:r={},filter:l,minzoom:s,maxzoom:c,beforeId:u}=o;if(u!==n.beforeId&&e.moveLayer(t,u),a!==n.layout){const o=n.layout||{};for(const n in a)i(a[n],o[n])||e.setLayoutProperty(t,n,a[n]);for(const n in o)a.hasOwnProperty(n)||e.setLayoutProperty(t,n,void 0)}if(r!==n.paint){const o=n.paint||{};for(const n in r)i(r[n],o[n])||e.setPaintProperty(t,n,r[n]);for(const n in o)r.hasOwnProperty(n)||e.setPaintProperty(t,n,void 0)}i(l,n.filter)||e.setFilter(t,l),s===n.minzoom&&c===n.maxzoom||e.setLayerZoomRange(t,s,c)}(t,r,e,o.current)}catch(l){console.warn(l)}else!function(e,t,o){if(e.style&&e.style._loaded&&(!("source"in o)||e.getSource(o.source))){const n=Object.assign({},o,{id:t});delete n.beforeId,e.addLayer(n,o.beforeId)}}(t,r,e);return o.current=e,null}},5917:(e,t,o)=>{o.d(t,{A:()=>r});var n=o(2820);function a(e){var t=[1/0,1/0,-1/0,-1/0];return(0,n.Fh)(e,(function(e){t[0]>e[0]&&(t[0]=e[0]),t[1]>e[1]&&(t[1]=e[1]),t[2]{e.exports=JSON.parse('{"version":8,"name":"Positron","metadata":{},"sources":{"carto":{"type":"vector","url":"https://tiles.basemaps.cartocdn.com/vector/carto.streets/v1/tiles.json"}},"sprite":"https://tiles.basemaps.cartocdn.com/gl/positron-gl-style/sprite","glyphs":"https://tiles.basemaps.cartocdn.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","layout":{"visibility":"visible"},"paint":{"background-color":"#fafaf8","background-opacity":1}},{"id":"landcover","type":"fill","source":"carto","source-layer":"landcover","filter":["any",["==","class","wood"],["==","class","grass"],["==","subclass","recreation_ground"]],"paint":{"fill-color":{"stops":[[8,"rgba(234, 241, 233, 0.5)"],[9,"rgba(234, 241, 233, 0.5)"],[11,"rgba(234, 241, 233, 0.5)"],[13,"rgba(234, 241, 233, 0.5)"],[15,"rgba(234, 241, 233, 0.5)"]]},"fill-opacity":1}},{"id":"park_national_park","type":"fill","source":"carto","source-layer":"park","minzoom":9,"filter":["all",["==","class","national_park"]],"layout":{"visibility":"visible"},"paint":{"fill-color":{"stops":[[8,"rgba(234, 241, 233, 0.5)"],[9,"rgba(234, 241, 233, 0.5)"],[11,"rgba(234, 241, 233, 0.5)"],[13,"rgba(234, 241, 233, 0.5)"],[15,"rgba(234, 241, 233, 0.5)"]]},"fill-opacity":1,"fill-translate-anchor":"map"}},{"id":"park_nature_reserve","type":"fill","source":"carto","source-layer":"park","minzoom":0,"filter":["all",["==","class","nature_reserve"]],"layout":{"visibility":"visible"},"paint":{"fill-color":{"stops":[[8,"rgba(234, 241, 233, 0.5)"],[9,"rgba(234, 241, 233, 0.5)"],[11,"rgba(234, 241, 233, 0.5)"],[13,"rgba(234, 241, 233, 0.5)"],[15,"rgba(234, 241, 233, 0.5)"]]},"fill-antialias":true,"fill-opacity":{"stops":[[6,0.7],[9,0.9]]}}},{"id":"landuse_residential","type":"fill","source":"carto","source-layer":"landuse","minzoom":6,"filter":["any",["==","class","residential"]],"paint":{"fill-color":{"stops":[[5,"rgba(237, 237, 237, 0.5)"],[8,"rgba(237, 237, 237, 0.45)"],[9,"rgba(237, 237, 237, 0.4)"],[11,"rgba(237, 237, 237, 0.35)"],[13,"rgba(237, 237, 237, 0.3)"],[15,"rgba(237, 237, 237, 0.25)"],[16,"rgba(237, 237, 237, 0.25)"]]},"fill-opacity":{"stops":[[6,0.6],[9,1]]}}},{"id":"landuse","type":"fill","source":"carto","source-layer":"landuse","filter":["any",["==","class","cemetery"],["==","class","stadium"]],"paint":{"fill-color":{"stops":[[8,"rgba(234, 241, 233, 0.5)"],[9,"rgba(234, 241, 233, 0.5)"],[11,"rgba(234, 241, 233, 0.5)"],[13,"rgba(234, 241, 233, 0.5)"],[15,"rgba(234, 241, 233, 0.5)"]]}}},{"id":"waterway","type":"line","source":"carto","source-layer":"waterway","paint":{"line-color":"#d1dbdf","line-width":{"stops":[[8,0.5],[9,1],[15,2],[16,3]]}}},{"id":"boundary_county","type":"line","source":"carto","source-layer":"boundary","minzoom":9,"maxzoom":24,"filter":["all",["==","admin_level",6],["==","maritime",0]],"paint":{"line-color":{"stops":[[4,"#ead5d7"],[5,"#ead5d7"],[6,"#e1c5c7"]]},"line-width":{"stops":[[4,0.5],[7,1]]},"line-dasharray":{"stops":[[6,[1]],[7,[2,2]]]}}},{"id":"boundary_state","type":"line","source":"carto","source-layer":"boundary","minzoom":4,"filter":["all",["==","admin_level",4],["==","maritime",0]],"paint":{"line-color":{"stops":[[4,"#ead5d7"],[5,"#ead5d7"],[6,"#e1c5c7"]]},"line-width":{"stops":[[4,0.5],[7,1],[8,1],[9,1.2]]},"line-dasharray":{"stops":[[6,[1]],[7,[2,2]]]}}},{"id":"water","type":"fill","source":"carto","source-layer":"water","minzoom":0,"maxzoom":24,"filter":["all",["==","$type","Polygon"]],"layout":{"visibility":"visible"},"paint":{"fill-color":"#d4dadc","fill-antialias":true,"fill-translate-anchor":"map","fill-opacity":1}},{"id":"water_shadow","type":"fill","source":"carto","source-layer":"water","minzoom":0,"filter":["all",["==","$type","Polygon"]],"layout":{"visibility":"visible"},"paint":{"fill-color":"transparent","fill-antialias":true,"fill-translate-anchor":"map","fill-opacity":1,"fill-translate":{"stops":[[0,[0,2]],[6,[0,1]],[14,[0,1]],[17,[0,2]]]}}},{"id":"aeroway-runway","type":"line","source":"carto","source-layer":"aeroway","minzoom":12,"filter":["all",["==","class","runway"]],"layout":{"line-cap":"square"},"paint":{"line-width":{"stops":[[11,1],[13,4],[14,6],[15,8],[16,10]]},"line-color":"#e8e8e8"}},{"id":"aeroway-taxiway","type":"line","source":"carto","source-layer":"aeroway","minzoom":13,"filter":["all",["==","class","taxiway"]],"paint":{"line-color":"#e8e8e8","line-width":{"stops":[[13,0.5],[14,1],[15,2],[16,4]]}}},{"id":"waterway_label","type":"symbol","source":"carto","source-layer":"waterway","filter":["all",["has","name"],["==","class","river"]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Regular Italic","Open Sans Italic","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"symbol-placement":"line","symbol-spacing":300,"symbol-avoid-edges":false,"text-size":{"stops":[[9,8],[10,9]]},"text-padding":2,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-offset":{"stops":[[6,[0,-0.2]],[11,[0,-0.4]],[12,[0,-0.6]]]},"text-letter-spacing":0,"text-keep-upright":true},"paint":{"text-color":"#7a96a0","text-halo-color":"#f5f5f3","text-halo-width":1}},{"id":"tunnel_service_case","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,1],[16,3],[17,6],[18,8]]},"line-opacity":1,"line-color":"#ddd"}},{"id":"tunnel_minor_case","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["==","class","minor"],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-width":{"stops":[[11,0.5],[12,0.5],[14,2],[15,4],[16,6],[17,10],[18,14]]},"line-opacity":1,"line-color":"#ddd"}},{"id":"tunnel_sec_case","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,0.5],[12,1],[13,2],[14,5],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#ddd"}},{"id":"tunnel_pri_case","type":"line","source":"carto","source-layer":"transportation","minzoom":8,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":"#ddd"}},{"id":"tunnel_trunk_case","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round","visibility":"visible"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":"#ddd"}},{"id":"tunnel_mot_case","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[12,4],[13,5],[14,7],[15,9],[16,11],[17,13],[18,22]]},"line-opacity":{"stops":[[6,0.5],[7,1]]},"line-color":"#ddd"}},{"id":"tunnel_path","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","path"],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,0.5],[16,1],[18,3]]},"line-opacity":1,"line-color":"#d5d5d5","line-dasharray":{"stops":[[15,[2,2]],[18,[3,3]]]}}},{"id":"tunnel_service_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,2],[16,2],[17,4],[18,6]]},"line-opacity":1,"line-color":"#eee"}},{"id":"tunnel_minor_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","minor"],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[15,3],[16,4],[17,8],[18,12]]},"line-opacity":1,"line-color":"rgba(238, 238, 238, 1)"}},{"id":"tunnel_sec_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,2],[13,2],[14,3],[15,4],[16,6],[17,10],[18,14]]},"line-opacity":1,"line-color":"#eee"}},{"id":"tunnel_pri_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[11,1],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#eee"}},{"id":"tunnel_trunk_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"round","line-join":"round","visibility":"visible"},"paint":{"line-width":{"stops":[[11,1],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#eee"}},{"id":"tunnel_mot_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":10,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["==","brunnel","tunnel"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[10,1],[12,2],[13,3],[14,5],[15,7],[16,9],[17,11],[18,20]]},"line-opacity":1,"line-color":"#eee"}},{"id":"tunnel_rail","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"filter":["all",["==","class","rail"],["==","brunnel","tunnel"]],"layout":{"visibility":"visible","line-join":"round"},"paint":{"line-color":"#dddddd","line-width":{"base":1.3,"stops":[[13,0.5],[14,1],[15,1],[16,3],[21,7]]},"line-opacity":0.5}},{"id":"tunnel_rail_dash","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"filter":["all",["==","class","rail"],["==","brunnel","tunnel"]],"layout":{"visibility":"visible","line-join":"round"},"paint":{"line-color":"#ffffff","line-width":{"base":1.3,"stops":[[15,0.5],[16,1],[20,5]]},"line-dasharray":{"stops":[[15,[5,5]],[16,[6,6]]]},"line-opacity":0.5}},{"id":"road_service_case","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,1],[16,3],[17,6],[18,8]]},"line-opacity":1,"line-color":"#ddd"}},{"id":"road_minor_case","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["==","class","minor"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,0.5],[12,0.5],[14,2],[15,3],[16,4.3],[17,10],[18,14]]},"line-opacity":1,"line-color":{"stops":[[13,"#e6e6e6"],[15.7,"#e6e6e6"],[16,"#ddd"]]}}},{"id":"road_pri_case_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","primary"],["==","ramp",1]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[12,2],[13,3],[14,4],[15,5],[16,8],[17,10]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":"#ddd"}},{"id":"road_trunk_case_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","trunk"],["==","ramp",1]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[12,2],[13,3],[14,4],[15,5],[16,8],[17,10]]},"line-opacity":1,"line-color":{"stops":[[12,"#e6e6e6"],[14,"#ddd"]]}}},{"id":"road_mot_case_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","motorway"],["==","ramp",1]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[12,2],[13,3],[14,4],[15,5],[16,8],[17,10]]},"line-opacity":1,"line-color":{"stops":[[12,"#e6e6e6"],[14,"#ddd"]]}}},{"id":"road_sec_case_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,0.5],[12,1.5],[13,3],[14,5],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":{"stops":[[11,"#e6e6e6"],[12.99,"#e6e6e6"],[13,"#ddd"]]}}},{"id":"road_pri_case_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":7,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":{"stops":[[7,"#e6e6e6"],[12,"#ddd"]]}}},{"id":"road_trunk_case_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":{"stops":[[5,"#e6e6e6"],[12,"#ddd"]]}}},{"id":"road_mot_case_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.7],[8,0.8],[11,3],[12,4],[13,5],[14,7],[15,9],[16,11],[17,13],[18,22]]},"line-opacity":{"stops":[[6,0.5],[7,1]]},"line-color":{"stops":[[5,"#e6e6e6"],[12,"#ddd"]]}}},{"id":"road_path","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["in","class","path","track"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,0.5],[16,1],[18,3]]},"line-opacity":1,"line-color":"#d5d5d5","line-dasharray":{"stops":[[15,[2,2]],[18,[3,3]]]}}},{"id":"road_service_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,2],[16,2],[17,4],[18,6]]},"line-opacity":1,"line-color":"#fdfdfd"}},{"id":"road_minor_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","minor"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,3],[16,4],[17,8],[18,12]]},"line-opacity":1,"line-color":"#fdfdfd"}},{"id":"road_pri_fill_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","primary"],["==","ramp",1]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[12,1],[13,1.5],[14,2],[15,3],[16,6],[17,8]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_trunk_fill_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","trunk"],["==","ramp",1]],"layout":{"line-cap":"square","line-join":"round"},"paint":{"line-width":{"stops":[[12,1],[13,1.5],[14,2],[15,3],[16,6],[17,8]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_mot_fill_ramp","type":"line","source":"carto","source-layer":"transportation","minzoom":12,"maxzoom":24,"filter":["all",["==","class","motorway"],["==","ramp",1]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[12,1],[13,1.5],[14,2],[15,3],[16,6],[17,8]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_sec_fill_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,2],[13,2],[14,3],[15,4],[16,6],[17,10],[18,14]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_pri_fill_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":10,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[10,0.3],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_trunk_fill_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":10,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,1],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#fff"}},{"id":"road_mot_fill_noramp","type":"line","source":"carto","source-layer":"transportation","minzoom":10,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["!has","brunnel"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[10,1],[12,2],[13,3],[14,5],[15,7],[16,9],[17,11],[18,20]]},"line-opacity":1,"line-color":"#fff"}},{"id":"rail","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"filter":["all",["==","class","rail"],["!=","brunnel","tunnel"]],"layout":{"visibility":"visible","line-join":"round"},"paint":{"line-color":"#dddddd","line-width":{"base":1.3,"stops":[[13,0.5],[14,1],[15,1],[16,3],[21,7]]}}},{"id":"rail_dash","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"filter":["all",["==","class","rail"],["!=","brunnel","tunnel"]],"layout":{"visibility":"visible","line-join":"round"},"paint":{"line-color":"#ffffff","line-width":{"base":1.3,"stops":[[15,0.5],[16,1],[20,5]]},"line-dasharray":{"stops":[[15,[5,5]],[16,[6,6]]]}}},{"id":"bridge_service_case","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[15,1],[16,3],[17,6],[18,8]]},"line-opacity":1,"line-color":"#ddd"}},{"id":"bridge_minor_case","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["==","class","minor"],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-width":{"stops":[[11,0.5],[12,0.5],[14,2],[15,3],[16,4.3],[17,10],[18,14]]},"line-opacity":1,"line-color":{"stops":[[13,"#e6e6e6"],[15.7,"#e6e6e6"],[16,"#ddd"]]}}},{"id":"bridge_sec_case","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-width":{"stops":[[11,0.5],[12,1.5],[13,3],[14,5],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":{"stops":[[11,"#e6e6e6"],[12.99,"#e6e6e6"],[13,"#ddd"]]}}},{"id":"bridge_pri_case","type":"line","source":"carto","source-layer":"transportation","minzoom":8,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":{"stops":[[8,"#e6e6e6"],[12,"#ddd"]]}}},{"id":"bridge_trunk_case","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round","visibility":"visible"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[13,4],[14,6],[15,8],[16,10],[17,14],[18,18]]},"line-opacity":{"stops":[[5,0.5],[7,1]]},"line-color":{"stops":[[5,"#e6e6e6"],[12,"#ddd"]]}}},{"id":"bridge_mot_case","type":"line","source":"carto","source-layer":"transportation","minzoom":5,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[6,0.5],[7,0.8],[8,1],[11,3],[12,4],[13,5],[14,7],[15,9],[16,11],[17,13],[18,22]]},"line-opacity":{"stops":[[6,0.5],[7,1]]},"line-color":{"stops":[[5,"#e6e6e6"],[10,"#ddd"]]}}},{"id":"bridge_path","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","path"],["==","brunnel","bridge"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,0.5],[16,1],[18,3]]},"line-opacity":1,"line-color":"#d5d5d5","line-dasharray":{"stops":[[15,[2,2]],[18,[3,3]]]}}},{"id":"bridge_service_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","service"],["==","brunnel","bridge"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[15,2],[16,2],[17,4],[18,6]]},"line-opacity":1,"line-color":"#fdfdfd"}},{"id":"bridge_minor_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":15,"maxzoom":24,"filter":["all",["==","class","minor"],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[15,3],[16,4],[17,8],[18,12]]},"line-opacity":1,"line-color":"#fdfdfd"}},{"id":"bridge_sec_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":13,"maxzoom":24,"filter":["all",["in","class","secondary","tertiary"],["==","brunnel","bridge"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-width":{"stops":[[11,2],[13,2],[14,3],[15,4],[16,6],[17,10],[18,14]]},"line-opacity":1,"line-color":"#fff"}},{"id":"bridge_pri_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["==","class","primary"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[11,1],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#fff"}},{"id":"bridge_trunk_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":11,"maxzoom":24,"filter":["all",["==","class","trunk"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round","visibility":"visible"},"paint":{"line-width":{"stops":[[11,1],[13,2],[14,4],[15,6],[16,8],[17,12],[18,16]]},"line-opacity":1,"line-color":"#fff"}},{"id":"bridge_mot_fill","type":"line","source":"carto","source-layer":"transportation","minzoom":10,"maxzoom":24,"filter":["all",["==","class","motorway"],["!=","ramp",1],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"round"},"paint":{"line-width":{"stops":[[10,1],[12,2],[13,3],[14,5],[15,7],[16,9],[17,11],[18,20]]},"line-opacity":1,"line-color":"#fff"}},{"id":"building","type":"fill","source":"carto","source-layer":"building","layout":{"visibility":"visible"},"paint":{"fill-color":{"base":1,"stops":[[15.5,"#dfdfdf"],[16,"#dfdfdf"]]},"fill-antialias":true}},{"id":"building-top","type":"fill","source":"carto","source-layer":"building","layout":{"visibility":"visible"},"paint":{"fill-translate":{"base":1,"stops":[[14,[0,0]],[16,[-2,-2]]]},"fill-outline-color":"#dfdfdf","fill-color":"#ededed","fill-opacity":{"base":1,"stops":[[13,0],[16,1]]}}},{"id":"boundary_country_outline","type":"line","source":"carto","source-layer":"boundary","minzoom":6,"maxzoom":24,"filter":["all",["==","admin_level",2],["==","maritime",0]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#f3efed","line-opacity":0.5,"line-width":8,"line-offset":0}},{"id":"boundary_country_inner","type":"line","source":"carto","source-layer":"boundary","minzoom":0,"filter":["all",["==","admin_level",2],["==","maritime",0]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":{"stops":[[4,"#f2e6e7"],[5,"#ebd6d8"],[6,"#ebd6d8"]]},"line-opacity":1,"line-width":{"stops":[[3,1],[6,1.5]]},"line-offset":0}},{"id":"watername_ocean","type":"symbol","source":"carto","source-layer":"water_name","minzoom":0,"maxzoom":5,"filter":["all",["has","name"],["==","$type","Point"],["==","class","ocean"]],"layout":{"text-field":"{name}","symbol-placement":"point","text-size":{"stops":[[0,13],[2,14],[4,18]]},"text-font":["Montserrat Medium Italic","Open Sans Italic","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-line-height":1.2,"text-padding":2,"text-allow-overlap":false,"text-ignore-placement":false,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-max-width":6,"text-letter-spacing":0.1},"paint":{"text-color":"#abb6be","text-halo-color":"#d4dadc","text-halo-width":1,"text-halo-blur":0}},{"id":"watername_sea","type":"symbol","source":"carto","source-layer":"water_name","minzoom":5,"filter":["all",["has","name"],["==","$type","Point"],["==","class","sea"]],"layout":{"text-field":"{name}","symbol-placement":"point","text-size":12,"text-font":["Montserrat Medium Italic","Open Sans Italic","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-line-height":1.2,"text-padding":2,"text-allow-overlap":false,"text-ignore-placement":false,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-max-width":6,"text-letter-spacing":0.1},"paint":{"text-color":"#abb6be","text-halo-color":"#d4dadc","text-halo-width":1,"text-halo-blur":0}},{"id":"watername_lake","type":"symbol","source":"carto","source-layer":"water_name","minzoom":4,"filter":["all",["has","name"],["==","$type","Point"],["==","class","lake"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"symbol-placement":"point","text-size":{"stops":[[13,9],[14,10],[15,11],[16,12],[17,13]]},"text-font":["Montserrat Regular Italic","Open Sans Italic","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-line-height":1.2,"text-padding":2,"text-allow-overlap":false,"text-ignore-placement":false,"text-pitch-alignment":"auto","text-rotation-alignment":"auto"},"paint":{"text-color":"#7a96a0","text-halo-color":"#f5f5f3","text-halo-width":1,"text-halo-blur":1}},{"id":"watername_lake_line","type":"symbol","source":"carto","source-layer":"water_name","filter":["all",["has","name"],["==","$type","LineString"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"symbol-placement":"line","text-size":{"stops":[[13,9],[14,10],[15,11],[16,12],[17,13]]},"text-font":["Montserrat Regular Italic","Open Sans Italic","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"symbol-spacing":350,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-line-height":1.2},"paint":{"text-color":"#7a96a0","text-halo-color":"#f5f5f3","text-halo-width":1,"text-halo-blur":1}},{"id":"place_hamlet","type":"symbol","source":"carto","source-layer":"place","minzoom":12,"maxzoom":16,"filter":["any",["==","class","neighbourhood"],["==","class","hamlet"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[14,"{name}"]]},"text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[13,8],[14,10],[16,11]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":{"stops":[[12,"none"],[14,"uppercase"]]}},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_suburbs","type":"symbol","source":"carto","source-layer":"place","minzoom":12,"maxzoom":16,"filter":["all",["==","class","suburb"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[12,9],[13,10],[14,11],[15,12],[16,13]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":{"stops":[[8,"none"],[12,"uppercase"]]}},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_villages","type":"symbol","source":"carto","source-layer":"place","minzoom":10,"maxzoom":16,"filter":["all",["==","class","village"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[10,9],[12,10],[13,11],[14,12],[16,13]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":"none"},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_town","type":"symbol","source":"carto","source-layer":"place","minzoom":8,"maxzoom":14,"filter":["all",["==","class","town"]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[8,10],[9,10],[10,11],[13,14],[14,15]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":"none"},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_country_2","type":"symbol","source":"carto","source-layer":"place","minzoom":3,"maxzoom":10,"filter":["all",["==","class","country"],[">=","rank",3],["has","iso_a2"]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[3,10],[5,11],[6,12],[7,13],[8,14]]},"text-transform":"uppercase"},"paint":{"text-color":{"stops":[[3,"#8a99a4"],[5,"#a1adb6"],[6,"#b9c2c9"]]},"text-halo-color":"#fafaf8","text-halo-width":1}},{"id":"place_country_1","type":"symbol","source":"carto","source-layer":"place","minzoom":2,"maxzoom":7,"filter":["all",["==","class","country"],["<=","rank",2]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[3,11],[4,12],[5,13],[6,14]]},"text-transform":"uppercase","text-max-width":{"stops":[[2,6],[3,6],[4,9],[5,12]]}},"paint":{"text-color":{"stops":[[3,"#8a99a4"],[5,"#a1adb6"],[6,"#b9c2c9"]]},"text-halo-color":"#fafaf8","text-halo-width":1}},{"id":"place_state","type":"symbol","source":"carto","source-layer":"place","minzoom":5,"maxzoom":10,"filter":["all",["==","class","state"],["<=","rank",4]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[5,12],[7,14]]},"text-transform":"uppercase","text-max-width":9},"paint":{"text-color":"#97a4ae","text-halo-color":"#fafaf8","text-halo-width":0}},{"id":"place_continent","type":"symbol","source":"carto","source-layer":"place","minzoom":0,"maxzoom":2,"filter":["all",["==","class","continent"]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-transform":"uppercase","text-size":14,"text-letter-spacing":0.1,"text-max-width":9,"text-justify":"center","text-keep-upright":false},"paint":{"text-color":"#697b89","text-halo-color":"#fafaf8","text-halo-width":1}},{"id":"place_city_r6","type":"symbol","source":"carto","source-layer":"place","minzoom":8,"maxzoom":15,"filter":["all",["==","class","city"],[">=","rank",6]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[8,12],[9,13],[10,14],[13,17],[14,20]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":"uppercase"},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_city_r5","type":"symbol","source":"carto","source-layer":"place","minzoom":8,"maxzoom":15,"filter":["all",["==","class","city"],[">=","rank",0],["<=","rank",5]],"layout":{"text-field":{"stops":[[8,"{name_en}"],[13,"{name}"]]},"text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[8,14],[10,16],[13,19],[14,22]]},"icon-image":"","icon-offset":[16,0],"text-anchor":"center","icon-size":1,"text-max-width":10,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":"uppercase"},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_city_dot_r7","type":"symbol","source":"carto","source-layer":"place","minzoom":6,"maxzoom":7,"filter":["all",["==","class","city"],["<=","rank",7]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":12,"icon-image":"circle-11","icon-offset":[16,5],"text-anchor":"right","icon-size":0.4,"text-max-width":8,"text-keep-upright":true,"text-offset":[0.2,0.2]},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_city_dot_r4","type":"symbol","source":"carto","source-layer":"place","minzoom":5,"maxzoom":7,"filter":["all",["==","class","city"],["<=","rank",4]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":12,"icon-image":"circle-11","icon-offset":[16,5],"text-anchor":"right","icon-size":0.4,"text-max-width":8,"text-keep-upright":true,"text-offset":[0.2,0.2]},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_city_dot_r2","type":"symbol","source":"carto","source-layer":"place","minzoom":4,"maxzoom":7,"filter":["all",["==","class","city"],["<=","rank",2]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":12,"icon-image":"circle-11","icon-offset":[16,5],"text-anchor":"right","icon-size":0.4,"text-max-width":8,"text-keep-upright":true,"text-offset":[0.2,0.2]},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_city_dot_z7","type":"symbol","source":"carto","source-layer":"place","minzoom":7,"maxzoom":8,"filter":["all",["!has","capital"],["!in","class","country","state"]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":12,"icon-image":"circle-11","icon-offset":[16,5],"text-anchor":"right","icon-size":0.4,"text-max-width":8,"text-keep-upright":true,"text-offset":[0.2,0.2]},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"place_capital_dot_z7","type":"symbol","source":"carto","source-layer":"place","minzoom":7,"maxzoom":8,"filter":["all",[">","capital",0]],"layout":{"text-field":"{name_en}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":12,"icon-image":"circle-11","icon-offset":[16,5],"text-anchor":"right","icon-size":0.4,"text-max-width":8,"text-keep-upright":true,"text-offset":[0.2,0.2],"text-transform":"uppercase"},"paint":{"text-color":"#697b89","icon-color":"#697b89","icon-translate-anchor":"map","text-halo-color":"rgba(255,255,255,0.5)","text-halo-width":1}},{"id":"poi_stadium","type":"symbol","source":"carto","source-layer":"poi","minzoom":15,"filter":["all",["in","class","stadium","cemetery","attraction"],["<=","rank",3]],"layout":{"text-field":"{name}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[15,8],[17,9],[18,10]]},"text-transform":"uppercase"},"paint":{"text-color":"#7d9c83","text-halo-color":"#f5f5f3","text-halo-width":1}},{"id":"poi_park","type":"symbol","source":"carto","source-layer":"poi","minzoom":15,"filter":["all",["==","class","park"]],"layout":{"text-field":"{name}","text-font":["Montserrat Medium","Open Sans Bold","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[15,8],[17,9],[18,10]]},"text-transform":"uppercase"},"paint":{"text-color":"#7d9c83","text-halo-color":"#f5f5f3","text-halo-width":1}},{"id":"roadname_minor","type":"symbol","source":"carto","source-layer":"transportation_name","minzoom":16,"filter":["all",["in","class","minor","service"]],"layout":{"symbol-placement":"line","text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":9,"text-field":"{name}","symbol-avoid-edges":false,"symbol-spacing":200,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-justify":"center"},"paint":{"text-color":"#838383","text-halo-color":"#fff","text-halo-width":1}},{"id":"roadname_sec","type":"symbol","source":"carto","source-layer":"transportation_name","minzoom":15,"filter":["all",["in","class","secondary","tertiary"]],"layout":{"symbol-placement":"line","text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[15,9],[16,11],[18,12]]},"text-field":"{name}","symbol-avoid-edges":false,"symbol-spacing":200,"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-justify":"center"},"paint":{"text-color":"#838383","text-halo-color":"#fff","text-halo-width":1}},{"id":"roadname_pri","type":"symbol","source":"carto","source-layer":"transportation_name","minzoom":14,"filter":["all",["in","class","primary"]],"layout":{"symbol-placement":"line","text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[14,10],[15,10],[16,11],[18,12]]},"text-field":"{name}","symbol-avoid-edges":false,"symbol-spacing":{"stops":[[6,200],[16,250]]},"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-justify":"center","text-letter-spacing":{"stops":[[14,0],[16,0.2]]}},"paint":{"text-color":"#838383","text-halo-color":"#fff","text-halo-width":1}},{"id":"roadname_major","type":"symbol","source":"carto","source-layer":"transportation_name","minzoom":13,"filter":["all",["in","class","trunk","motorway"]],"layout":{"symbol-placement":"line","text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"],"text-size":{"stops":[[14,10],[15,10],[16,11],[18,12]]},"text-field":"{name}","symbol-avoid-edges":false,"symbol-spacing":{"stops":[[6,200],[16,250]]},"text-pitch-alignment":"auto","text-rotation-alignment":"auto","text-justify":"center","text-letter-spacing":{"stops":[[13,0],[16,0.2]]}},"paint":{"text-color":"#838383","text-halo-color":"#fff","text-halo-width":1}},{"id":"housenumber","type":"symbol","source":"carto","source-layer":"housenumber","minzoom":17,"maxzoom":24,"layout":{"text-field":"{housenumber}","text-size":{"stops":[[17,9],[18,11]]},"text-font":["Montserrat Regular","Open Sans Regular","Noto Sans Regular","HanWangHeiLight Regular","NanumBarunGothic Regular"]},"paint":{"text-halo-color":"transparent","text-color":"transparent","text-halo-width":0.75}}],"id":"voyager","owner":"Carto"}')}}]);
\ No newline at end of file
diff --git a/assets/js/4972.8e046a82.js b/assets/js/4972.8e046a82.js
deleted file mode 100644
index 755637a3..00000000
--- a/assets/js/4972.8e046a82.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[4972],{4972:(e,t,a)=>{a.r(t),a.d(t,{default:()=>i});var n=a(7294),l=a(5999),o=a(1944),r=a(179);function i(){return n.createElement(n.Fragment,null,n.createElement(o.d,{title:(0,l.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),n.createElement(r.Z,null,n.createElement("main",{className:"container margin-vert--xl"},n.createElement("div",{className:"row"},n.createElement("div",{className:"col col--6 col--offset-3"},n.createElement("h1",{className:"hero__title"},n.createElement(l.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),n.createElement("p",null,n.createElement(l.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),n.createElement("p",null,n.createElement(l.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}}}]);
\ No newline at end of file
diff --git a/assets/js/4ae403c3.0f921c35.js b/assets/js/4ae403c3.0f921c35.js
new file mode 100644
index 00000000..006ae495
--- /dev/null
+++ b/assets/js/4ae403c3.0f921c35.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2368],{9949:(e,r,o)=>{o.r(r),o.d(r,{assets:()=>i,contentTitle:()=>a,default:()=>d,frontMatter:()=>c,metadata:()=>t,toc:()=>p});const t=JSON.parse('{"id":"api-reference/mapbox/source","title":"Source","description":"This component allows apps to create a map source using React. It may contain Layer components as children.","source":"@site/../docs/api-reference/mapbox/source.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/source","permalink":"/react-map-gl/docs/api-reference/mapbox/source","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/source.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"ScaleControl","permalink":"/react-map-gl/docs/api-reference/mapbox/scale-control"},"next":{"title":"useControl","permalink":"/react-map-gl/docs/api-reference/mapbox/use-control"}}');var n=o(4848),s=o(8453);const c={},a="Source",i={},p=[{value:"Properties",id:"properties",level:2},{value:"id: string",id:"id",level:4},{value:"type: string",id:"type",level:4},{value:"Source",id:"source-1",level:2}];function l(e){const r={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h4:"h4",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.header,{children:(0,n.jsx)(r.h1,{id:"source",children:"Source"})}),"\n",(0,n.jsxs)(r.p,{children:["This component allows apps to create a ",(0,n.jsx)(r.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources",children:"map source"})," using React. It may contain ",(0,n.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/mapbox/layer",children:"Layer"})," components as children."]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport Map, {Source, Layer} from 'react-map-gl/mapbox';\r\nimport type {CircleLayer} from 'react-map-gl/mapbox';\r\nimport type {FeatureCollection} from 'geojson';\r\nimport 'mapbox-gl/dist/mapbox-gl.css';\r\n\r\nconst geojson: FeatureCollection = {\r\n type: 'FeatureCollection',\r\n features: [\r\n {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}\r\n ]\r\n};\r\n\r\nconst layerStyle: CircleLayer = {\r\n id: 'point',\r\n type: 'circle',\r\n paint: {\r\n 'circle-radius': 10,\r\n 'circle-color': '#007cbf'\r\n }\r\n};\r\n\r\nfunction App() {\r\n return \r\n \r\n \r\n ;\r\n}\n"})}),"\n",(0,n.jsx)(r.h2,{id:"properties",children:"Properties"}),"\n",(0,n.jsxs)(r.p,{children:["The props provided to this component should be conforming to the ",(0,n.jsx)(r.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources",children:"Mapbox source specification"})," or ",(0,n.jsx)(r.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/#canvassourceoptions",children:"CanvasSourceOptions"}),"."]}),"\n",(0,n.jsxs)(r.p,{children:["When props change ",(0,n.jsx)(r.em,{children:"shallowly"}),", the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit."]}),"\n",(0,n.jsxs)(r.p,{children:["Once a ",(0,n.jsx)(r.code,{children:""})," is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's ",(0,n.jsx)(r.a,{href:"https://reactjs.org/docs/lists-and-keys.html#keys",children:"key prop"})," to give each element a stable identity."]}),"\n",(0,n.jsxs)(r.h4,{id:"id",children:[(0,n.jsx)(r.code,{children:"id"}),": string"]}),"\n",(0,n.jsx)(r.p,{children:"Unique identifier of the source. If not provided, a default id will be assigned."}),"\n",(0,n.jsxs)(r.h4,{id:"type",children:[(0,n.jsx)(r.code,{children:"type"}),": string"]}),"\n",(0,n.jsx)(r.p,{children:"Required. Type of the source."}),"\n",(0,n.jsx)(r.h2,{id:"source-1",children:"Source"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/source.ts",children:"source.ts"})})]})}function d(e={}){const{wrapper:r}={...(0,s.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},8453:(e,r,o)=>{o.d(r,{R:()=>c,x:()=>a});var t=o(6540);const n={},s=t.createContext(n);function c(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function a(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:c(e.components),t.createElement(s.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4d116018.0735bab9.js b/assets/js/4d116018.0735bab9.js
new file mode 100644
index 00000000..3404014a
--- /dev/null
+++ b/assets/js/4d116018.0735bab9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[208],{622:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>a,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"api-reference/maplibre/terrain-control","title":"TerrainControl","description":"React component that wraps maplibre-gl\'s TerrainControl class.","source":"@site/../docs/api-reference/maplibre/terrain-control.md","sourceDirName":"api-reference/maplibre","slug":"/api-reference/maplibre/terrain-control","permalink":"/react-map-gl/docs/api-reference/maplibre/terrain-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/maplibre/terrain-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Source","permalink":"/react-map-gl/docs/api-reference/maplibre/source"},"next":{"title":"useControl","permalink":"/react-map-gl/docs/api-reference/maplibre/use-control"}}');var o=t(4848),i=t(8453);const s={},l="TerrainControl",a={},c=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"style: CSSProperties",id:"style",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"terraincontrol",children:"TerrainControl"})}),"\n",(0,o.jsxs)(r.p,{children:["React component that wraps maplibre-gl's ",(0,o.jsx)(r.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/TerrainControl/",children:"TerrainControl"})," class."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {Map, MapStyle, TerrainControl} from 'react-map-gl/maplibre';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\n\r\n// https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/\r\nconst MAP_STYLE: MapStyle = {\r\n version: 8,\r\n sources: {\r\n osm: {\r\n type: 'raster',\r\n tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],\r\n tileSize: 256,\r\n attribution: '© OpenStreetMap Contributors',\r\n maxzoom: 19\r\n },\r\n terrainSource: {\r\n type: 'raster-dem',\r\n url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',\r\n tileSize: 256\r\n }\r\n },\r\n layers: [\r\n {\r\n id: 'osm',\r\n type: 'raster',\r\n source: 'osm'\r\n }\r\n ],\r\n terrain: {\r\n source: 'terrainSource',\r\n exaggeration: 1\r\n },\r\n sky: {}\r\n};\r\n\r\nfunction App() {\r\n return \r\n anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined",id:"anchor",level:4},{value:"className: string",id:"classname",level:4},{value:"offset: number | PointLike | Record<string, PointLike>",id:"offset",level:4},{value:"maxWidth: string",id:"maxwidth",level:4},{value:"style: CSSProperties",id:"style",level:4},{value:"Callbacks",id:"callbacks",level:3},{value:"onOpen: (evt: PopupEvent) => void",id:"onopen",level:4},{value:"onClose: (evt: PopupEvent) => void",id:"onclose",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"Methods",id:"methods",level:2},{value:"Source",id:"source",level:2}];function a(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"popup",children:"Popup"})}),"\n",(0,o.jsxs)(r.p,{children:["React component that wraps maplibre-gl's ",(0,o.jsx)(r.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/",children:"Popup"})," class."]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {useState} from 'react';\r\nimport {Map, Popup} from 'react-map-gl/maplibre';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\n\r\nfunction App() {\r\n const [showPopup, setShowPopup] = useState(true);\r\n\r\n return \r\n {showPopup && (\r\n setShowPopup(false)}>\r\n You are here\r\n )}\r\n ;\r\n}\n"})}),"\n",(0,o.jsx)(r.h2,{id:"properties",children:"Properties"}),"\n",(0,o.jsx)(r.h3,{id:"reactive-properties",children:"Reactive Properties"}),"\n",(0,o.jsxs)(r.h4,{id:"anchor",children:[(0,o.jsx)(r.code,{children:"anchor"}),": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined"]}),"\n",(0,o.jsxs)(r.p,{children:["A string indicating the part of the popup that should be positioned closest to the coordinate, set via ",(0,o.jsx)(r.code,{children:"longitude"})," and ",(0,o.jsx)(r.code,{children:"latitude"}),".\r\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for ",(0,o.jsx)(r.code,{children:"'bottom'"}),"."]}),"\n",(0,o.jsxs)(r.h4,{id:"classname",children:[(0,o.jsx)(r.code,{children:"className"}),": string"]}),"\n",(0,o.jsx)(r.p,{children:"Space-separated CSS class names to add to popup container."}),"\n",(0,o.jsxs)(r.h4,{id:"offset",children:[(0,o.jsx)(r.code,{children:"offset"}),": number | ",(0,o.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/maplibre/types#pointlike",children:"PointLike"})," | Record"]}),"\n",(0,o.jsxs)(r.p,{children:["Default: ",(0,o.jsx)(r.code,{children:"null"})]}),"\n",(0,o.jsx)(r.p,{children:"A pixel offset applied to the popup's location specified as:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:"a single number specifying a distance from the popup's location"}),"\n",(0,o.jsx)(r.li,{children:"a PointLike specifying a constant offset"}),"\n",(0,o.jsx)(r.li,{children:"an object of Points specifing an offset for each anchor position."}),"\n"]}),"\n",(0,o.jsx)(r.p,{children:"Negative offsets indicate left and up."}),"\n",(0,o.jsxs)(r.h4,{id:"maxwidth",children:[(0,o.jsx)(r.code,{children:"maxWidth"}),": string"]}),"\n",(0,o.jsxs)(r.p,{children:["Default: ",(0,o.jsx)(r.code,{children:"240px"})]}),"\n",(0,o.jsx)(r.p,{children:"A string that sets the CSS property of the popup's maximum width."}),"\n",(0,o.jsxs)(r.h4,{id:"style",children:[(0,o.jsx)(r.code,{children:"style"}),": CSSProperties"]}),"\n",(0,o.jsx)(r.p,{children:"CSS style override that applies to the popup's container."}),"\n",(0,o.jsx)(r.h3,{id:"callbacks",children:"Callbacks"}),"\n",(0,o.jsxs)(r.h4,{id:"onopen",children:[(0,o.jsx)(r.code,{children:"onOpen"}),": (evt: ",(0,o.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/maplibre/types#popupevent",children:"PopupEvent"}),") => void"]}),"\n",(0,o.jsx)(r.p,{children:"Called when the popup is opened."}),"\n",(0,o.jsxs)(r.h4,{id:"onclose",children:[(0,o.jsx)(r.code,{children:"onClose"}),": (evt: ",(0,o.jsx)(r.a,{href:"/react-map-gl/docs/api-reference/maplibre/types#popupevent",children:"PopupEvent"}),") => void"]}),"\n",(0,o.jsxs)(r.p,{children:["Called when the popup is closed by the user clicking on the close button or outside (if ",(0,o.jsx)(r.code,{children:"closeOnClick: true"}),")."]}),"\n",(0,o.jsx)(r.h3,{id:"other-properties",children:"Other Properties"}),"\n",(0,o.jsx)(r.p,{children:"The properties in this section are not reactive. They are only used when the component first mounts."}),"\n",(0,o.jsxs)(r.p,{children:["Any ",(0,o.jsx)(r.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/",children:"options"})," supported by the ",(0,o.jsx)(r.code,{children:"Popup"})," class, such as"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"closeButton"})}),"\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"closeOnClick"})}),"\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"closeOnMove"})}),"\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"focusAfterOpen"})}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"methods",children:"Methods"}),"\n",(0,o.jsxs)(r.p,{children:["The underlying native ",(0,o.jsx)(r.code,{children:"Popup"})," instance is accessible via a ",(0,o.jsx)(r.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs",children:"React ref"})," hook.\r\nYou may use it to call any imperative methods:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {useRef, useEffect} from 'react';\r\nimport {Map, Popup} from 'react-map-gl/maplibre';\r\nimport maplibregl from 'maplibre-gl';\r\n\r\nfunction App() {\r\n const popupRef = useRef();\r\n\r\n useEffect(() => {\r\n popupRef.current?.trackPointer();\r\n }, [popupRef.current])\r\n\r\n return \r\n \r\n Tooltip\r\n \r\n ;\r\n}\n"})}),"\n",(0,o.jsx)(r.h2,{id:"source",children:"Source"}),"\n",(0,o.jsx)(r.p,{children:(0,o.jsx)(r.a,{href:"https://github.com/visgl/react-map-gl/tree/master/modules/maplibre/src/components/popup.ts",children:"popup.ts"})})]})}function d(e={}){const{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,r,n)=>{n.d(r,{R:()=>s,x:()=>p});var t=n(6540);const o={},i=t.createContext(o);function s(e){const r=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function p(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),t.createElement(i.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4ef1d265.069c1c16.js b/assets/js/4ef1d265.069c1c16.js
deleted file mode 100644
index 68209c97..00000000
--- a/assets/js/4ef1d265.069c1c16.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[1089],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>v});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),u=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,v=p["".concat(s,".").concat(d)]||p[d]||m[d]||o;return n?a.createElement(v,i(i({ref:t},c),{},{components:n})):a.createElement(v,i({ref:t},c))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:r,i[1]=l;for(var u=2;u{n.d(t,{Z:()=>i});var a=n(7294),r=n(6010);const o={tabItem:"tabItem_Ymn6"};function i(e){var t=e.children,n=e.hidden,i=e.className;return a.createElement("div",{role:"tabpanel",className:(0,r.Z)(o.tabItem,i),hidden:n},t)}},4866:(e,t,n)=>{n.d(t,{Z:()=>w});var a=n(7462),r=n(7294),o=n(6010),i=n(2466),l=n(6550),s=n(1980),u=n(7392),c=n(12);function p(e){return function(e){var t,n;return null!=(t=null==(n=r.Children.map(e,(function(e){if(!e||(0,r.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:n.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function m(e){var t=e.values,n=e.children;return(0,r.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId,o=(0,l.k6)(),i=function(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:n,groupId:a});return[(0,s._X)(i),(0,r.useCallback)((function(e){if(i){var t=new URLSearchParams(o.location.search);t.set(i,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[i,o])]}function b(e){var t,n,a,o,i=e.defaultValue,l=e.queryString,s=void 0!==l&&l,u=e.groupId,p=m(e),b=(0,r.useState)((function(){return function(e){var t,n=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!d({value:n,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var r=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:i,tabValues:p})})),f=b[0],h=b[1],g=v({queryString:s,groupId:u}),k=g[0],y=g[1],w=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,c.Nk)(t),a=n[0],o=n[1],[a,(0,r.useCallback)((function(e){t&&o.set(e)}),[t,o])]),T=w[0],x=w[1],N=function(){var e=null!=k?k:T;return d({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){N&&h(N)}),[N]),{selectedValue:f,selectValue:(0,r.useCallback)((function(e){if(!d({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);h(e),y(e),x(e)}),[y,x,p]),tabValues:p}}var f=n(2389);const h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,l=e.selectedValue,s=e.selectValue,u=e.tabValues,c=[],p=(0,i.o5)().blockElementScrollPositionUntilNextRender,m=function(e){var t=e.currentTarget,n=c.indexOf(t),a=u[n].value;a!==l&&(p(t),s(a))},d=function(e){var t,n=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":var a,r=c.indexOf(e.currentTarget)+1;n=null!=(a=c[r])?a:c[0];break;case"ArrowLeft":var o,i=c.indexOf(e.currentTarget)-1;n=null!=(o=c[i])?o:c[c.length-1]}null==(t=n)||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t)},u.map((function(e){var t=e.value,n=e.label,i=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return c.push(e)},onKeyDown:d,onClick:m},i,{className:(0,o.Z)("tabs__item",h.tabItem,null==i?void 0:i.className,{"tabs__item--active":l===t})}),null!=n?n:t)})))}function k(e){var t=e.lazy,n=e.children,a=e.selectedValue,o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){var i=o.find((function(e){return e.props.value===a}));return i?(0,r.cloneElement)(i,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},o.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function y(e){var t=b(e);return r.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},r.createElement(g,(0,a.Z)({},e,t)),r.createElement(k,(0,a.Z)({},e,t)))}function w(e){var t=(0,f.Z)();return r.createElement(y,(0,a.Z)({key:String(t)},e))}},7460:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>c,default:()=>f,frontMatter:()=>u,metadata:()=>p,toc:()=>d});var a=n(7462),r=n(3366),o=(n(7294),n(3905)),i=n(4866),l=n(5162),s=["components"],u={},c="Tips and Tricks",p={unversionedId:"get-started/tips-and-tricks",id:"get-started/tips-and-tricks",title:"Tips and Tricks",description:"Securing Mapbox Token",source:"@site/../docs/get-started/tips-and-tricks.md",sourceDirName:"get-started",slug:"/get-started/tips-and-tricks",permalink:"/react-map-gl/docs/get-started/tips-and-tricks",draft:!1,editUrl:"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/get-started/tips-and-tricks.md",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Adding Custom Data",permalink:"/react-map-gl/docs/get-started/adding-custom-data"},next:{title:"default (Map)",permalink:"/react-map-gl/docs/api-reference/map"}},m={},d=[{value:"Securing Mapbox Token",id:"securing-mapbox-token",level:2},{value:"Minimize Cost from Frequent Re-mounting",id:"minimize-cost-from-frequent-re-mounting",level:2},{value:"Performance with Many Markers",id:"performance-with-many-markers",level:2},{value:"Finding out if a point is within the current viewport",id:"finding-out-if-a-point-is-within-the-current-viewport",level:2}],v={toc:d},b="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,s);return(0,o.kt)(b,(0,a.Z)({},v,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"tips-and-tricks"},"Tips and Tricks"),(0,o.kt)("h2",{id:"securing-mapbox-token"},"Securing Mapbox Token"),(0,o.kt)("p",null,"Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Never commit your token in clear text into GitHub or other source control."),(0,o.kt)("li",{parentName:"ul"},"In your local dev environment, define the token in an environment variable e.g. ",(0,o.kt)("inlineCode",{parentName:"li"},"MapboxAccessTokenDev=...")," in the command line, or use something like ",(0,o.kt)("a",{parentName:"li",href:"https://github.com/motdotla/dotenv"},"dotenv")," and put ",(0,o.kt)("inlineCode",{parentName:"li"},"MapboxAccessTokenDev=...")," in a ",(0,o.kt)("inlineCode",{parentName:"li"},".env")," file. Add ",(0,o.kt)("inlineCode",{parentName:"li"},".env")," to ",(0,o.kt)("inlineCode",{parentName:"li"},".gitignore")," so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable."),(0,o.kt)("li",{parentName:"ul"},"Create separate tokens for development (often times on ",(0,o.kt)("inlineCode",{parentName:"li"},"http://localhost"),"), public code snippet (Gist, Codepen etc.) and production (deployed to ",(0,o.kt)("inlineCode",{parentName:"li"},"https://mycompany.com"),"). The public token should be rotated regularly. The production token should have strict ",(0,o.kt)("a",{parentName:"li",href:"https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens"},"scope and URL restrictions")," that only allows it to be used on a domain that you own."),(0,o.kt)("li",{parentName:"ul"},"Add the following to your bundler config:")),(0,o.kt)(i.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"webpack",label:"Webpack",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"/// webpack.config.js\nconst {DefinePlugin} = require('webpack');\n\nmodule.exports = {\n ...\n plugins: [\n new DefinePlugin({\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)\n })\n ]\n};\n"))),(0,o.kt)(l.Z,{value:"rollup",label:"Rollup",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"/// rollup.config.js\nconst replace = require('@rollup/plugin-replace').default;\n\nmodule.exports = {\n ...\n plugins: [\n replace({ \n 'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)\n })\n ]\n};\n")))),(0,o.kt)("p",null," react-map-gl automatically picks up ",(0,o.kt)("inlineCode",{parentName:"p"},"process.env.MapboxAccessToken")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"process.env.REACT_APP_MAPBOX_ACCESS_TOKEN")," if they are defined. Alternatively, you can use your own variable name (e.g. ",(0,o.kt)("inlineCode",{parentName:"p"},"__SUPER_SECRET_TOKEN__"),") and pass it in manually with ",(0,o.kt)("inlineCode",{parentName:"p"},"mapboxAccessToken={__SUPER_SECRET_TOKEN__}"),"."),(0,o.kt)("h2",{id:"minimize-cost-from-frequent-re-mounting"},"Minimize Cost from Frequent Re-mounting"),(0,o.kt)("p",null,"In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},'/// Example using Tabs from Material UI\n\n \n \n \n \n {items.map(renderMarker)}\n \n \n \n \n {items.map(renderRow)}\n
\n \n \n')),(0,o.kt)("p",null,'Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a ',(0,o.kt)("a",{parentName:"p",href:"https://www.mapbox.com/pricing#maploads"},"billable event")," every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI."),(0,o.kt)("p",null,"In this case, it is recommended that you set the ",(0,o.kt)("a",{parentName:"p",href:"/react-map-gl/docs/api-reference/map#reuseMaps"},"reuseMaps")," prop to ",(0,o.kt)("inlineCode",{parentName:"p"},"true"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},' \n \n {items.map(renderMarker)}\n \n \n')),(0,o.kt)("p",null,"This bypasses the initialization when a map is removed then added back."),(0,o.kt)("h2",{id:"performance-with-many-markers"},"Performance with Many Markers"),(0,o.kt)("p",null,"If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {useSelector, useDispatch} from 'react-redux';\nimport Map, {Marker} from 'react-map-gl';\n\nfunction MapView() {\n const viewState = useSelector((s: RootState) => s.viewState);\n const vehicles = useSelector((s: RootState) => s.vehicles);\n const dispatch = useDispatch();\n\n const onMove = useCallback(evt => {\n dispatch({type: 'setViewState', payload: evt.viewState});\n }, []);\n\n return (\n \n >\n {vehicles.map(vehicle => (\n \n \n // vehicle icon\n \n )\n )}\n \n );\n}\n")),(0,o.kt)("p",null,"This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible."),(0,o.kt)("p",null,"One way to improve the performance is ",(0,o.kt)("inlineCode",{parentName:"p"},"useMemo"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},' const markers = useMemo(() => vehicles.map(vehicle => (\n \n \n // vehicle icon\n \n )\n ), [vehicles]);\n\n return (\n \n >\n {markers}\n \n );\n}\n')),(0,o.kt)("p",null,"This prevents React from rerendering the markers unless they have changed."),(0,o.kt)("p",null,"If your application can do without complicated DOM objects and CSS styling, consider switching to a ",(0,o.kt)("a",{parentName:"p",href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol"},"symbol layer"),". Layers are rendered in WebGL and are much more performant than markers:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"}," const vehiclesGeoJSON = useMemo(() => {\n return {\n type: 'FeatureCollection',\n features: vehicles.map(vehicle => turf.point(vehicle.coordinates, vehicle))\n };\n }, [vehicles]);\n\n return (\n \n >\n \n \n \n );\n")),(0,o.kt)("h2",{id:"finding-out-if-a-point-is-within-the-current-viewport"},"Finding out if a point is within the current viewport"),(0,o.kt)("p",null,"There are some situations where you want to know if a point is currently visible on the map.",(0,o.kt)("br",{parentName:"p"}),"\n","Checking this is simple and can be done like so:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"const mapRef = useRef();\n\nconst checkIfPositionInViewport = (lat, lng) => {\n const bounds = mapRef.current.getBounds();\n return bounds.contains([lng, lat]);\n}\n\nreturn \n \n \n \n \n {items.map(renderMarker)}\n \n \n \n \n {items.map(renderRow)}\n
\n \n \n'})}),"\n",(0,r.jsxs)(n.p,{children:['Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a ',(0,r.jsx)(n.a,{href:"https://www.mapbox.com/pricing#maploads",children:"billable event"})," every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI."]}),"\n",(0,r.jsxs)(n.p,{children:["In this case, it is recommended that you set the ",(0,r.jsx)(n.a,{href:"/react-map-gl/docs/api-reference/mapbox/map#reuseMaps",children:"reuseMaps"})," prop to ",(0,r.jsx)(n.code,{children:"true"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:' \n \n {items.map(renderMarker)}\n \n \n'})}),"\n",(0,r.jsx)(n.p,{children:"This bypasses the initialization when a map is removed then added back."}),"\n",(0,r.jsx)(n.h2,{id:"performance-with-many-markers",children:"Performance with Many Markers"}),"\n",(0,r.jsx)(n.p,{children:"If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import {useSelector, useDispatch} from 'react-redux';\nimport Map, {Marker} from 'react-map-gl/maplibre';\n\nfunction MapView() {\n const viewState = useSelector((s: RootState) => s.viewState);\n const vehicles = useSelector((s: RootState) => s.vehicles);\n const dispatch = useDispatch();\n\n const onMove = useCallback(evt => {\n dispatch({type: 'setViewState', payload: evt.viewState});\n }, []);\n\n return (\n \n >\n {vehicles.map(vehicle => (\n \n \n // vehicle icon\n \n )\n )}\n \n );\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:"This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible."}),"\n",(0,r.jsxs)(n.p,{children:["One way to improve the performance is ",(0,r.jsx)(n.code,{children:"useMemo"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:' const markers = useMemo(() => vehicles.map(vehicle => (\n \n \n // vehicle icon\n \n )\n ), [vehicles]);\n\n return (\n \n >\n {markers}\n \n );\n}\n'})}),"\n",(0,r.jsx)(n.p,{children:"This prevents React from rerendering the markers unless they have changed."}),"\n",(0,r.jsxs)(n.p,{children:["If your application can do without complicated DOM objects and CSS styling, consider switching to a ",(0,r.jsx)(n.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol",children:"symbol layer"}),". Layers are rendered in WebGL and are much more performant than markers:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:" const vehiclesGeoJSON = useMemo(() => {\n return {\n type: 'FeatureCollection',\n features: vehicles.map(vehicle => turf.point(vehicle.coordinates, vehicle))\n };\n }, [vehicles]);\n\n return (\n \n >\n \n \n \n );\n"})}),"\n",(0,r.jsx)(n.h2,{id:"finding-out-if-a-point-is-within-the-current-viewport",children:"Finding out if a point is within the current viewport"}),"\n",(0,r.jsxs)(n.p,{children:["There are some situations where you want to know if a point is currently visible on the map.",(0,r.jsx)(n.br,{}),"\n","Checking this is simple and can be done like so:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"const mapRef = useRef();\n\nconst checkIfPositionInViewport = (lat, lng) => {\n const bounds = mapRef.current.getBounds();\n return bounds.contains([lng, lat]);\n}\n\nreturn child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?n:[]}function p(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((e=>e.value)).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=t?t:null}({queryString:n,groupId:t});return[(0,l.aZ)(s),(0,a.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace(Object.assign({},r.location,{search:n.toString()}))}),[s,r])]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,s=p(e),[o,l]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(n=a.find((e=>e.default)))?n:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:s}))),[c,d]=m({queryString:t,groupId:r}),[b,v]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[r,s]=(0,u.Dv)(t);return[r,(0,a.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:r}),g=(()=>{const e=null!=c?c:b;return h({value:e,tabValues:s})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error("Can't select invalid tab value="+e);l(e),d(e),v(e)}),[d,v,s]),tabValues:s}}var v=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=t(4848);function x(e){let{className:n,block:t,selectedValue:a,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.a_)(),u=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==a&&(c(n),o(r))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=l.indexOf(e.currentTarget)+1;t=null!=(a=l[n])?a:l[0];break}case"ArrowLeft":{var r;const n=l.indexOf(e.currentTarget)-1;t=null!=(r=l[n])?r:l[l.length-1];break}}null==(n=t)||n.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,f.jsx)("li",Object.assign({role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:u},s,{className:(0,r.A)("tabs__item",g.tabItem,null==s?void 0:s.className,{"tabs__item--active":a===n}),children:null!=t?t:n}),n)}))})}function y(e){let{lazy:n,children:t,selectedValue:s}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==s})))})}function j(e){const n=b(e);return(0,f.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,f.jsx)(x,Object.assign({},n,e)),(0,f.jsx)(y,Object.assign({},n,e))]})}function k(e){const n=(0,v.A)();return(0,f.jsx)(j,Object.assign({},e,{children:d(e.children)}),String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var a=t(6540);const r={},s=a.createContext(r);function o(e){const n=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5525.373971e1.js b/assets/js/5525.373971e1.js
deleted file mode 100644
index b45acfd7..00000000
--- a/assets/js/5525.373971e1.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[5525],{5525:()=>{}}]);
\ No newline at end of file
diff --git a/assets/js/5596474f.9caf4ca7.js b/assets/js/5596474f.9caf4ca7.js
deleted file mode 100644
index b8cd7cff..00000000
--- a/assets/js/5596474f.9caf4ca7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_map_gl_website=self.webpackChunkreact_map_gl_website||[]).push([[9162],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),c=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=c(e.components);return n.createElement(i.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=c(r),d=a,f=p["".concat(i,".").concat(d)]||p[d]||m[d]||o;return r?n.createElement(f,l(l({ref:t},s),{},{components:r})):n.createElement(f,l({ref:t},s))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var u={};for(var i in t)hasOwnProperty.call(t,i)&&(u[i]=t[i]);u.originalType=e,u[p]="string"==typeof e?e:a,l[1]=u;for(var c=2;c{r.d(t,{Z:()=>l});var n=r(7294),a=r(6010);const o={tabItem:"tabItem_Ymn6"};function l(e){var t=e.children,r=e.hidden,l=e.className;return n.createElement("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,l),hidden:r},t)}},4866:(e,t,r)=>{r.d(t,{Z:()=>w});var n=r(7462),a=r(7294),o=r(6010),l=r(2466),u=r(6550),i=r(1980),c=r(7392),s=r(12);function p(e){return function(e){var t,r;return null!=(t=null==(r=a.Children.map(e,(function(e){if(!e||(0,a.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every 
\n