react-map-gl/assets/js/73c00601.b531c588.js

"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5067],{721:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>b,contentTitle:()=>g,default:()=>_,frontMatter:()=>y,metadata:()=>o,toc:()=>x});const o=JSON.parse('{"id":"mapbox/custom-cursor","title":"Custom Cursor","description":"","source":"@site/src/examples/mapbox/custom-cursor.mdx","sourceDirName":"mapbox","slug":"/mapbox/custom-cursor","permalink":"/react-map-gl/examples/mapbox/custom-cursor","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Markers, Popups and Controls","permalink":"/react-map-gl/examples/mapbox/controls"},"next":{"title":"Draggable Marker","permalink":"/react-map-gl/examples/mapbox/draggable-markers"}}');var n=r(4848),a=r(8453),s=r(6540),i=(r(5338),r(2198));const l={parks:/park/,buildings:/building/,roads:/bridge|road|tunnel/,labels:/label|place|poi/};function c(e){let{name:t,value:r,onChange:o}=e;return(0,n.jsxs)("div",{className:"input",children:[(0,n.jsx)("label",{children:t}),(0,n.jsx)("input",{type:"checkbox",checked:r,onChange:e=>o(t,e.target.checked)})]},t)}function u(e){const[t,r]=(0,s.useState)({parks:!0,buildings:!0,roads:!0,labels:!0});(0,s.useEffect)((()=>{e.onChange((e=>function(e,t){for(const r in e)if(e[r]&&l[r].test(t))return!0;return!1}(t,e)))}),[t]);const o=(e,o)=>{r(Object.assign({},t,{[e]:o}))};return(0,n.jsxs)("div",{className:"control-panel",children:[(0,n.jsx)("h3",{children:"Custom Cursor"}),(0,n.jsx)("p",{children:"Customize the cursor based on interactivity."}),(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/custom-cursor",target:"_new",children:"View Code \u2197"})}),(0,n.jsx)("hr",{}),(0,n.jsx)("p",{children:"Clickable layers"}),Object.keys(l).map((e=>(0,n.jsx)(c,{name:e,value:t[e],onChange:o},e)))]})}const p=s.memo(u);var d=r(2868);const m="",f={longitude:-122.48,latitude:37.78,zoom:15.5,bearing:0,pitch:0};function h(){const[e,t]=(0,s.useState)("auto"),[r,o]=(0,s.useState)(["nonexist"]),a=(0,s.useCallback)((e=>{o(d.layers.map((e=>e.id)).filter(e))}),[]),l=(0,s.useCallback)((e=>{const t=e.features&&e.features[0];t&&window.alert("Clicked layer "+t.layer.id)}),[]),c=(0,s.useCallback)((()=>t("pointer")),[]),u=(0,s.useCallback)((()=>t("auto")),[]);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.Ay,{initialViewState:f,mapStyle:d,onClick:l,onMouseEnter:c,onMouseLeave:u,cursor:e,interactiveLayerIds:r,mapboxAccessToken:m}),(0,n.jsx)(p,{onChange:a})]})}const y={},g="Custom Cursor",b={},x=[];function v(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:"custom-cursor",children:"Custom Cursor"})}),"\n","\n",(0,n.jsx)(h,{})]})}function _(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(v,{...e})}):v(e)}},2198:(e,t,r)=>{r.d(t,{T3:()=>A,tG:()=>N,Wd:()=>q,T5:()=>k,pH:()=>P,ov:()=>F,zD:()=>R,g0:()=>B,kL:()=>$,Ay:()=>k,VI:()=>T});var o=r(6540),n=r(4848);const a=o.createContext(null);function s(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 r=0;r<e.length;r++)if(!s(e[r],t[r]))return!1;return!0}if(Array.isArray(t))return!1;if("object"==typeof e&&"object"==typeof t){const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(const n of r){if(!t.hasOwnProperty(n))return!1;if(!s(e[n],t[n]))return!1}return!0}return!1}function i(e,t){if(!e.getProjection)return;const r=e.getProjection();s(r,t.getProjection())||t.setProjection(r)}function l(e){return{longitude:e.center.lng,latitude:e.center.lat,zoom:e.zoom,pitch:e.pitch,bearing:e.bearing,padding:e.padding}}function c(e,t){const r=t.viewState||t;let o=!1;if("zoom"in r){const t=e.zoom;e.zoom=r.zoom,o=o||t!==e.zoom}if("bearing"in r){const t=e.bearing;e.bearing=r.bearing,o=o||t!==e.bearing}if("pitch"in r){const t=e.pitch;e.pitch=r.pitch,o=o||t!==e.pitch}if(r.padding&&!e.isPaddingEqual(r.padding)&&(o=!0,e.padding=r.padding),"longitude"in r&&"latitude"in r){const t=e.center;e.center=new t.constructor(r.longitude,r.latitude),o=o||t!==e.center}return o}const u=["type","source","source-layer","minzoom","maxzoom","filter","layout"];function p(e){if(!e)return null;if("string"==typeof e)return e;if("toJS"in e&&(e=e.toJS()),!e.layers)return e;const t={};for(const o of e.layers)t[o.id]=o;const r=e.layers.map((e=>{let r=null;"interactive"in e&&(r=Object.assign({},e),delete r.interactive);const o=t[e.ref];if(o){r=r||Object.assign({},e),delete r.ref;for(const e of u)e in o&&(r[e]=o[e])}return r||e}));return Object.assign({},e,{layers:r})}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,r){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(r)}get map(){return this._map}get transform(){return this._renderTransform}setProps(e){const t=this.props;this.props=e;const r=this._updateSettings(e,t);r&&this._createShadowTransform(this._map);const o=this._updateSize(e),n=this._updateViewState(e,!0);this._updateStyle(e,t),this._updateStyleComponents(e,t),this._updateHandlers(e,t),(r||o||n&&!this._map.isMoving())&&this.redraw()}static reuse(e,t){const r=b.savedMaps.pop();if(!r)return null;const o=r.map,n=o.getContainer();for(t.className=n.className;n.childNodes.length>0;)t.appendChild(n.childNodes[0]);o._container=t,r.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})):r._updateViewState(a,!1)),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(()=>o.fire("load"))),o._update(),r}_initialize(e){const{props:t}=this,{mapStyle:r=d}=t,o=Object.assign({},t,t.initialViewState,{accessToken:t.mapboxAccessToken||x()||null,container:e,style:p(r)}),n=o.initialViewState||o.viewState||o;if(Object.assign(o,{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(o);n.padding&&a.setPadding(n.padding),t.cursor&&(a.getCanvas().style.cursor=t.cursor),this._createShadowTransform(a);const s=a._render;a._render=e=>{this._inRender=!0,s.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,{}),i(a.transform,this._renderTransform)})),a.on("sourcedata",(()=>this._updateStyleComponents(this.props,{})));for(const i in m)a.on(i,this._onPointerEvent);for(const i in f)a.on(i,this._onCameraEvent);for(const i in h)a.on(i,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 r=this._map,o=this._renderTransform,{zoom:n,pitch:a,bearing:s}=o,i=r.isMoving();i&&(o.cameraElevationReference="sea");const u=c(o,Object.assign({},l(r.transform),e));if(i&&(o.cameraElevationReference="ground"),u&&t){const e=this._deferredEvents;e.move=!0,e.zoom||(e.zoom=n!==o.zoom),e.rotate||(e.rotate=s!==o.bearing),e.pitch||(e.pitch=a!==o.pitch)}return i||c(r.transform,e),u}_updateSettings(e,t){const r=this._map;let o=!1;for(const n of y)if(n in e&&!s(e[n],t[n])){o=!0;const t=r["set"+n[0].toUpperCase()+n.slice(1)];null==t||t.call(r,e[n])}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:r=!0}=e,o={diff:r};return"localIdeographFontFamily"in e&&(o.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(p(t),o),!0}return!1}_updateStyleComponents(e,t){const r=this._map;let o=!1;return r.isStyleLoaded()&&("light"in e&&r.setLight&&!s(e.light,t.light)&&(o=!0,r.setLight(e.light)),"fog"in e&&r.setFog&&!s(e.fog,t.fog)&&(o=!0,r.setFog(e.fog)),"terrain"in e&&r.setTerrain&&!s(e.terrain,t.terrain)&&(e.terrain&&!r.getSource(e.terrain.source)||(o=!0,r.setTerrain(e.terrain)))),o}_updateHandlers(e,t){const r=this._map;let o=!1;for(const i of g){var n,a;const l=null==(n=e[i])||n;s(l,null==(a=t[i])||a)||(o=!0,l?r[i].enable(l):r[i].disable())}return o}_queryRenderedFeatures(e){const t=this._map,r=t.transform,{interactiveLayerIds:o=[]}=this.props;try{return t.transform=this._renderTransform,t.queryRenderedFeatures(e,{layers:o.filter(t.getLayer.bind(t))})}catch(n){return[]}finally{t.transform=r}}_updateHover(e){const{props:t}=this;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var r;const t=e.type,o=(null==(r=this._hoveredFeatures)?void 0:r.length)>0,n=this._queryRenderedFeatures(e.point),a=n.length>0;!a&&o&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,a&&!o&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=t}else this._hoveredFeatures=null}_fireEvent(e,t,r){const o=this._map,n=o.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())?(o.transform=this._renderTransform,e.call(o,t,r),o.transform=n,o):(e.call(o,t,r),o)}_onBeforeRepaint(){const e=this._map;this._internalUpdate=!0;for(const r in this._deferredEvents)this._deferredEvents[r]&&e.fire(r);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(r){}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,r={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:r=>{const o=t.transform;t.transform=e.transform;const n=t.project(r);return t.transform=o,n},unproject:r=>{const o=t.transform;t.transform=e.transform;const n=t.unproject(r);return t.transform=o,n},queryTerrainElevation:(r,o)=>{const n=t.transform;t.transform=e.transform;const a=t.queryTerrainElevation(r,o);return t.transform=n,a},queryRenderedFeatures:(r,o)=>{const n=t.transform;t.transform=e.transform;const a=t.queryRenderedFeatures(r,o);return t.transform=n,a}};for(const o of function(e){const t=new Set;let r=e;for(;r;){for(const o of Object.getOwnPropertyNames(r))"_"!==o[0]&&"function"==typeof e[o]&&"fire"!==o&&"setEventedParent"!==o&&t.add(o);r=Object.getPrototypeOf(r)}return Array.from(t)}(t))o in r||v.includes(o)||(r[o]=t[o].bind(t));return r}const w="undefined"!=typeof document?o.useLayoutEffect:o.useEffect,S=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];const C=o.createContext(null);function L(e,t){const s=(0,o.useContext)(a),[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,n=!0;return Promise.resolve(t||r.e(842).then(r.t.bind(r,842,23))).then((t=>{if(!n)return;if(!t)throw new Error("Invalid mapLib");const r="Map"in t?t:t.default;if(!r.Map)throw new Error("Invalid mapLib");if(function(e,t){for(const o of S)o in t&&(e[o]=t[o]);const{RTLTextPlugin:r="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;r&&e.getRTLTextPluginStatus&&"unavailable"===e.getRTLTextPluginStatus()&&e.setRTLTextPlugin(r,(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&&(o=b.reuse(e,c.current)),o||(o=new b(r.Map,e,c.current)),u.map=_(o),u.mapLib=r,l(o),null==s||s.onMapMount(u.map,e.id)})).catch((t=>{const{onError:r}=e;r?r({type:"error",target:null,error:t}):console.error(t)})),()=>{n=!1,o&&(null==s||s.onMapUnmount(e.id),e.reuseMaps?o.recycle():o.destroy())}}),[]),w((()=>{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,n.jsx)("div",{id:e.id,ref:c,style:p,children:i&&(0,n.jsx)(C.Provider,{value:u,children:(0,n.jsx)("div",{"mapboxgl-children":"",style:{height:"100%"},children:e.children})})})}const k=o.forwardRef(L);var j=r(961);const E=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function M(e,t){if(!e||!t)return;const r=e.style;for(const o in t){const e=t[o];Number.isFinite(e)&&!E.test(o)?r[o]=e+"px":r[o]=e}}const P=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:r,mapLib:n}=(0,o.useContext)(C),a=(0,o.useRef)({props:e});a.current.props=e;const s=(0,o.useMemo)((()=>{let t=!1;o.Children.forEach(e.children,(e=>{e&&(t=!0)}));const r=Object.assign({},e,{element:t?document.createElement("div"):null}),i=new n.Marker(r);return i.setLngLat([e.longitude,e.latitude]),i.getElement().addEventListener("click",(e=>{null==a.current.props.onClick||a.current.props.onClick({type:"click",target:i,originalEvent:e})})),i.on("dragstart",(e=>{const t=e;t.lngLat=s.getLngLat(),null==a.current.props.onDragStart||a.current.props.onDragStart(t)})),i.on("drag",(e=>{const t=e;t.lngLat=s.getLngLat(),null==a.current.props.onDrag||a.current.props.onDrag(t)})),i.on("dragend",(e=>{const t=e;t.lngLat=s.getLngLat(),null==a.current.props.onDragEnd||a.current.props.onDragEnd(t)})),i}),[]);(0,o.useEffect)((()=>(s.addTo(r.getMap()),()=>{s.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,o.useEffect)((()=>{M(s.getElement(),u)}),[u]),(0,o.useImperativeHandle)(t,(()=>s),[]),s.getLngLat().lng===i&&s.getLngLat().lat===l||s.setLngLat([i,l]),c&&!function(e,t){const r=Array.isArray(e)?e[0]:e?e.x:0,o=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 r===n&&o===a}(s.getOffset(),c)&&s.setOffset(c),s.isDraggable()!==p&&s.setDraggable(p),s.getRotation()!==m&&s.setRotation(m),s.getRotationAlignment()!==f&&s.setRotationAlignment(f),s.getPitchAlignment()!==h&&s.setPitchAlignment(h),s.getPopup()!==d&&s.setPopup(d),(0,j.createPortal)(e.children,s.getElement())})));function z(e){return new Set(e?e.trim().split(/\s+/):[])}const R=(0,o.memo)((0,o.forwardRef)(((e,t)=>{const{map:r,mapLib:n}=(0,o.useContext)(C),a=(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),r=new n.Popup(t);return r.setLngLat([e.longitude,e.latitude]),r.once("open",(e=>{null==i.current.props.onOpen||i.current.props.onOpen(e)})),r}),[]);if((0,o.useEffect)((()=>{const e=e=>{null==i.current.props.onClose||i.current.props.onClose(e)};return l.on("close",e),l.setDOMContent(a).addTo(r.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&&!s(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=z(l.options.className),r=z(e.className);for(const e of t)r.has(e)||l.removeClassName(e);for(const e of r)t.has(e)||l.addClassName(e);l.options.className=e.className}return(0,j.createPortal)(e.children,a)})));function T(e,t,r,n){const a=(0,o.useContext)(C),s=(0,o.useMemo)((()=>e(a)),[]);return(0,o.useEffect)((()=>{const e=n||r||t,o="function"==typeof t&&"function"==typeof r?t:null,i="function"==typeof r?r:"function"==typeof t?t:null,{map:l}=a;return l.hasControl(s)||(l.addControl(s,null==e?void 0:e.position),o&&o(a)),()=>{i&&i(a),l.hasControl(s)&&l.removeControl(s)}}),[]),s}function O(e){const t=T((t=>{let{mapLib:r}=t;return new r.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)})}),{position:e.position});return(0,o.useEffect)((()=>{M(t._controlContainer,e.style)}),[e.style]),null}const A=(0,o.memo)(O);function I(e,t){const r=(0,o.useRef)({props:e}),n=T((t=>{let{mapLib:o}=t;const n=new o.GeolocateControl(e),a=n._setupUI.bind(n);return n._setupUI=e=>{n._container.hasChildNodes()||a(e)},n.on("geolocate",(e=>{null==r.current.props.onGeolocate||r.current.props.onGeolocate(e)})),n.on("error",(e=>{null==r.current.props.onError||r.current.props.onError(e)})),n.on("outofmaxbounds",(e=>{null==r.current.props.onOutOfMaxBounds||r.current.props.onOutOfMaxBounds(e)})),n.on("trackuserlocationstart",(e=>{null==r.current.props.onTrackUserLocationStart||r.current.props.onTrackUserLocationStart(e)})),n.on("trackuserlocationend",(e=>{null==r.current.props.onTrackUserLocationEnd||r.current.props.onTrackUserLocationEnd(e)})),n}),{position:e.position});return r.current.props=e,(0,o.useImperativeHandle)(t,(()=>n),[]),(0,o.useEffect)((()=>{M(n._container,e.style)}),[e.style]),null}const N=(0,o.memo)((0,o.forwardRef)(I));function U(e){const t=T((t=>{let{mapLib:r}=t;return new r.NavigationControl(e)}),{position:e.position});return(0,o.useEffect)((()=>{M(t._container,e.style)}),[e.style]),null}const F=(0,o.memo)(U);function D(e){const t=T((t=>{let{mapLib:r}=t;return new r.ScaleControl(e)}),{position:e.position}),r=(0,o.useRef)(e),n=r.current;r.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,o.useEffect)((()=>{M(t._container,a)}),[a]),null}const B=(0,o.memo)(D);function Z(e,t){if(!e)throw new Error(t)}let W=0;function $(e){const t=(0,o.useContext)(C).map.getMap(),r=(0,o.useRef)(e),[,n]=(0,o.useState)(0),a=(0,o.useMemo)((()=>e.id||"jsx-source-"+W++),[]);(0,o.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 r;const e=null==(r=t.getStyle())?void 0:r.layers;if(e)for(const r of e)r.source===a&&t.removeLayer(r.id);t.removeSource(a)}}}}),[t]);let i=t&&t.style&&t.getSource(a);return i?function(e,t,r){Z(t.id===r.id,"source id changed"),Z(t.type===r.type,"source type changed");let o="",n=0;for(const i in t)"children"===i||"id"===i||s(r[i],t[i])||(o=i,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"===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 <Source> prop: "+o)}(i,e,r.current):i=function(e,t,r){if(e.style&&e.style._loaded){const o=Object.assign({},r);return delete o.id,delete o.children,e.addSource(t,o),e.getSource(t)}return null}(t,a,e),r.current=e,i&&o.Children.map(e.children,(e=>e&&(0,o.cloneElement)(e,{source:a})))||null}let H=0;function q(e){const t=(0,o.useContext)(C).map.getMap(),r=(0,o.useRef)(e),[,n]=(0,o.useState)(0),a=(0,o.useMemo)((()=>e.id||"jsx-layer-"+H++),[]);(0,o.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,r,o){if(Z(r.id===o.id,"layer id changed"),Z(r.type===o.type,"layer type changed"),"custom"===r.type||"custom"===o.type)return;const{layout:n={},paint:a={},filter:i,minzoom:l,maxzoom:c,beforeId:u}=r;if(u!==o.beforeId&&e.moveLayer(t,u),n!==o.layout){const r=o.layout||{};for(const o in n)s(n[o],r[o])||e.setLayoutProperty(t,o,n[o]);for(const o in r)n.hasOwnProperty(o)||e.setLayoutProperty(t,o,void 0)}if(a!==o.paint){const r=o.paint||{};for(const o in a)s(a[o],r[o])||e.setPaintProperty(t,o,a[o]);for(const o in r)a.hasOwnProperty(o)||e.setPaintProperty(t,o,void 0)}s(i,o.filter)||e.setFilter(t,i),l===o.minzoom&&c===o.maxzoom||e.setLayerZoomRange(t,l,c)}(t,a,e,r.current)}catch(i){console.warn(i)}else!function(e,t,r){if(e.style&&e.style._loaded&&(!("source"in r)||e.getSource(r.source))){const o=Object.assign({},r,{id:t});delete o.beforeId,e.addLayer(o,r.beforeId)}}(t,a,e);return r.current=e,null}},8453:(e,t,r)=>{r.d(t,{R:()=>s,x:()=>i});var o=r(6540);const n={},a=o.createContext(n);function s(e){const t=o.useContext(a);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(n):e.components||n:s(e.components),o.createElement(a.Provider,{value:t},e.children)}},2868:e=>{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"}]}')}}]);