@urbica/react-map-gl/dist/react-map-gl.cjs.js

React Component for Mapbox GL JS

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("mapbox-gl"),o=require("react-dom");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=s(e);function i(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const a=t.createContext(null);var n="undefined"!=typeof window&&"object"==typeof window.process&&"renderer"===window.process.type||!("undefined"==typeof process||"object"!=typeof process.versions||!Boolean(process.versions.electron))||"object"==typeof navigator&&"string"==typeof navigator.userAgent&&navigator.userAgent.indexOf("Electron")>=0;const p=!("object"==typeof process&&"[object process]"===String(process)&&!process.browser)||n?r.default:null;var l=["resize","remove","mousedown","mouseup","mouseover","mousemove","click","dblclick","mouseenter","mouseleave","mouseout","contextmenu","touchstart","touchend","touchmove","touchcancel","movestart","move","moveend","dragstart","drag","dragend","zoomstart","zoom","zoomend","rotatestart","rotate","rotateend","pitchstart","pitch","pitchend","boxzoomstart","boxzoomend","boxzoomcancel","webglcontextlost","webglcontextrestored","load","error","data","styledata","sourcedata","dataloading","styledataloading","sourcedataloading"];var c=function(t){return t.charAt(0).toUpperCase()+t.slice(1)};const h=(t=[],e=[])=>{if(t.length!==e.length)return!1;for(let o=0;o<t.length;o+=1)if(t[o]!==e[o])return!1;return!0},u=(t={},e={})=>[...new Set([...Object.keys(t),...Object.keys(e)])].reduce(((o,s)=>{const r=t[s];return r!==e[s]&&o.push([s,r]),o}),[]),d=(t,e,o,s)=>{const r={layers:[e]};if(s){const e=[[o[0]-s,o[1]-s],[o[0]+s,o[1]+s]];return t.queryRenderedFeatures(e,r)}return t.queryRenderedFeatures(o,r)},m=[["onClick","click"],["onHover","mousemove"],["onEnter","mouseenter"],["onLeave","mouseleave"],["onContextMenu","contextmenu"]];class f extends t.PureComponent{constructor(t){super(t),i(this,"_addLayer",(t=>{const e=this._map,{before:o,radius:s,onClick:r,onHover:i,onEnter:a,onLeave:n,onContextMenu:p,...l}=t;o&&e.getLayer(o)?e.addLayer(l,o):e.addLayer(l),this._addEventListeners(t)})),i(this,"_addEventListeners",(t=>{m.forEach((([e,o])=>{const s=`_${e}`;t[e]&&this._map.on(o,this._id,this[s])}))})),i(this,"_updateEventListeners",((t,e)=>{m.forEach((([o,s])=>{const r=`_${o}`;!e[o]&&t[o]&&this._map.off(s,this._id,this[r]),e[o]&&!t[o]&&this._map.on(s,this._id,this[r])}))})),i(this,"_removeEventListeners",(t=>{m.forEach((([e,o])=>{const s=`_${e}`;t[e]&&this._map.off(o,this._id,this[s])}))})),i(this,"_onClick",(t=>{const e=[t.point.x,t.point.y],o=d(this._map,this._id,e,this.props.radius);this.props.onClick({...t,features:o})})),i(this,"_onHover",(t=>{const e=[t.point.x,t.point.y],o=d(this._map,this._id,e,this.props.radius);this.props.onHover({...t,features:o})})),i(this,"_onEnter",(t=>{const e=[t.point.x,t.point.y],o=d(this._map,this._id,e,this.props.radius);this.props.onEnter({...t,features:o})})),i(this,"_onLeave",(t=>{const e=[t.point.x,t.point.y],o=d(this._map,this._id,e,this.props.radius);this.props.onLeave({...t,features:o})})),i(this,"_onContextMenu",(t=>{const e=[t.point.x,t.point.y],o=d(this._map,this._id,e,this.props.radius);this.props.onContextMenu({...t,features:o})})),this._id=t.id}componentDidMount(){this._addLayer(this.props)}componentDidUpdate(t){const e=this._map,{id:o,before:s,onClick:r,...i}=this.props;if(o!==t.id||this.props.type!==t.type||"background"!==t.type&&(this.props.source!==t.source||this.props["source-layer"]!==t["source-layer"]))return this._id=o,this._map.removeLayer(t.id),void this._addLayer(this.props);s!==t.before&&s&&e.getLayer(s)&&e.moveLayer(this._id,s),i.paint!==t.paint&&u(i.paint,t.paint).forEach((([t,o])=>{e.setPaintProperty(this._id,t,o)})),i.layout!==t.layout&&u(i.layout,t.layout).forEach((([t,o])=>{e.setLayoutProperty(this._id,t,o)})),i.filter!==t.filter&&(i.filter?e.setFilter(this._id,i.filter):e.setFilter(this._id,void 0)),this._updateEventListeners(t,this.props)}componentWillUnmount(){this._map&&this._map.getStyle()&&(this._removeEventListeners(this.props),this._map.getLayer(this._id)&&this._map.removeLayer(this._id))}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(f,"displayName","Layer"),i(f,"defaultProps",{radius:0});class g extends t.PureComponent{componentDidMount(){const{layer:t,before:e}=this.props;e&&this._map.getLayer(e)?this._map.addLayer(t,e):this._map.addLayer(t),this._id=t.id}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.getLayer(this._id)&&this._map.removeLayer(this._id)}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(g,"displayName","CustomLayer");const _=[f,g],y=t=>_.includes(t.type),b=(e,o)=>{t.Children.forEach(o,(t=>{t&&(y(t)&&e(t),t.props&&t.props.children&&b(e,t.props.children))}))},v=e=>{const o=(t=>{const e=[];return b((t=>{t.props.before||e.push((t=>t.props.id||t.props.layer.id)(t))}),t),e})(e);o.shift();const s=e=>"function"==typeof e?e:t.Children.map(e,(e=>{if(!e)return e;if(y(e)){const s=e.props.before||o.shift();return t.cloneElement(e,{before:s})}return e.props&&e.props.children?t.cloneElement(e,{children:s(e.props.children)}):e}));return s(e)};class x extends t.PureComponent{constructor(e){super(e),i(this,"state",{loaded:!1}),i(this,"_onViewportChange",(t=>{if(!t.originalEvent)return;const e=this._map,{lng:o,lat:s}=e.getCenter(),r={latitude:s,longitude:o,zoom:e.getZoom(),pitch:e.getPitch(),bearing:e.getBearing()};this.props.onViewportChange(r)})),p&&(p.accessToken=e.accessToken),this._container=t.createRef()}componentDidMount(){if(!p)return;const t=this._container.current,e=new p.Map({container:t,style:this.props.mapStyle,interactive:!!this.props.onViewportChange,center:[this.props.longitude,this.props.latitude],zoom:this.props.zoom,pitch:this.props.pitch,bearing:this.props.bearing,minZoom:this.props.minZoom,maxZoom:this.props.maxZoom,hash:this.props.hash,bearingSnap:this.props.bearingSnap,pitchWithRotate:this.props.pitchWithRotate,attributionControl:this.props.attributionControl,logoPosition:this.props.logoPosition,failIfMajorPerformanceCaveat:this.props.failIfMajorPerformanceCaveat,preserveDrawingBuffer:this.props.preserveDrawingBuffer,antialias:this.props.antialias,refreshExpiredTiles:this.props.refreshExpiredTiles,maxBounds:this.props.maxBounds,bounds:this.props.bounds,scrollZoom:this.props.scrollZoom,boxZoom:this.props.boxZoom,dragRotate:this.props.dragRotate,dragPan:this.props.dragPan,keyboard:this.props.keyboard,doubleClickZoom:this.props.doubleClickZoom,trackResize:this.props.trackResize,renderWorldCopies:this.props.renderWorldCopies,maxTileCacheSize:this.props.maxTileCacheSize,localIdeographFontFamily:this.props.localIdeographFontFamily,transformRequest:this.props.transformRequest,collectResourceTiming:this.props.collectResourceTiming,fadeDuration:this.props.fadeDuration,crossSourceCollisions:this.props.crossSourceCollisions,locale:this.props.locale});this._map=e,e.once("load",(()=>{this.setState({loaded:!0},this.props.onLoad)})),this.props.onViewportChange&&(e.on("dragend",this._onViewportChange),e.on("zoomend",this._onViewportChange),e.on("rotateend",this._onViewportChange),e.on("pitchend",this._onViewportChange),e.on("boxzoomend",this._onViewportChange)),l.forEach((t=>{const o=`on${c(t)}`,s=this.props[o];s&&(Array.isArray(s)?e.on(t,...s):e.on(t,s))})),this.props.cursorStyle&&(e.getCanvas().style.cursor=this.props.cursorStyle),this.props.showTileBoundaries&&(this._map.showTileBoundaries=this.props.showTileBoundaries)}componentDidUpdate(t){this._updateMapViewport(t,this.props),this._updateMapStyle(t,this.props),this._updateMapSize(t,this.props),this._updateMapEventListeners(t,this.props),!t.cursorStyle!==this.props.cursorStyle&&(this._map.getCanvas().style.cursor=this.props.cursorStyle),t.showTileBoundaries!==this.props.showTileBoundaries&&(this._map.showTileBoundaries=!!this.props.showTileBoundaries)}componentWillUnmount(){this._map&&this._map.remove()}getMap(){return this._map}_updateMapEventListeners(t,e){l.forEach((o=>{const s=`on${c(o)}`,r=t[s],i=e[s];Array.isArray(r)&&Array.isArray(i)&&h(r,i)||r===i||(r&&(Array.isArray(r)?this._map.off(o,...r):this._map.off(o,r)),i&&(Array.isArray(i)?this._map.on(o,...i):this._map.on(o,i)))}))}_updateMapStyle(t,e){const o=e.mapStyle,s=t.mapStyle;o!==s&&this.setState({loaded:!1},(()=>{this._map.setStyle(o),this._map.once("style.load",(()=>this.setState({loaded:!0})))}))}_updateMapViewport(t,e){const o=this._map,s=o.getCenter();if(!(e.latitude!==t.latitude&&e.latitude!==s.lat||e.longitude!==t.longitude&&e.longitude!==s.lng||e.zoom!==t.zoom&&e.zoom!==o.getZoom()||e.pitch!==t.pitch&&e.pitch!==o.getPitch()||e.bearing!==t.bearing&&e.bearing!==o.getBearing()))return;const r={center:[e.longitude,e.latitude],zoom:e.zoom,pitch:e.pitch,bearing:e.bearing},{viewportChangeMethod:i,viewportChangeOptions:a}=this.props,n={...a,...r};switch(i){case"flyTo":o.flyTo(n);break;case"jumpTo":o.jumpTo(n);break;case"easeTo":o.easeTo(n);break;default:throw new Error("Unknown viewport change method")}}_updateMapSize(t,e){((t.style&&t.style.height)!==(e.style&&e.style.height)||(t.style&&t.style.width)!==(e.style&&e.style.width))&&this._map.resize()}render(){const{loaded:e}=this.state,{className:o,style:s}=this.props,r=this.props.children?v(this.props.children):null;return t.createElement(a.Provider,{value:this._map},t.createElement("div",{ref:this._container,style:s,className:o},e&&r))}}i(x,"displayName","MapGL"),i(x,"defaultProps",{children:null,className:null,style:null,mapStyle:"mapbox://styles/mapbox/light-v8",accessToken:null,bearing:0,pitch:0,minZoom:0,maxZoom:22,maxBounds:null,bounds:null,hash:!1,bearingSnap:7,pitchWithRotate:!0,attributionControl:!0,logoPosition:"bottom-left",failIfMajorPerformanceCaveat:!1,preserveDrawingBuffer:!1,antialias:!1,refreshExpiredTiles:!0,boxZoom:!0,scrollZoom:!0,dragRotate:!0,dragPan:!0,keyboard:!0,doubleClickZoom:!0,trackResize:!0,renderWorldCopies:!0,maxTileCacheSize:null,onViewportChange:null,onLoad:null,localIdeographFontFamily:null,transformRequest:null,collectResourceTiming:!1,fadeDuration:300,crossSourceCollisions:!0,locale:null,cursorStyle:null,viewportChangeMethod:"jumpTo",viewportChangeOptions:null});var C=t=>{switch(t.type){case"vector":return{type:"vector",...t};case"raster":return{type:"raster",...t};case"raster-dem":return{type:"raster-dem",...t};case"geojson":return{type:"geojson",...t};case"video":return{type:"video",...t};case"image":return{type:"image",...t};default:throw new Error(`Unknown type for '${t.id}' Source`)}};class w extends t.PureComponent{constructor(...t){super(...t),i(this,"state",{loaded:!1}),i(this,"_onSourceData",(()=>{this._map.isSourceLoaded(this.props.id)&&(this._map.off("sourcedata",this._onSourceData),this.setState({loaded:!0}))})),i(this,"_updateGeoJSONSource",((t,e,o)=>{if(o.data!==e.data){const e=this._map.getSource(t);void 0!==e&&e.setData(o.data)}})),i(this,"_updateImageSource",((t,e,o)=>{if(o.url!==e.url||o.coordinates!==e.coordinates){const e=this._map.getSource(t);void 0!==e&&e.updateImage(o)}})),i(this,"_updateTileSource",((t,e,o)=>{if(o.url===e.url&&h(o.tiles,e.tiles))return;const s=this._map.getSource(t);s._tileJSONRequest&&s._tileJSONRequest.cancel(),s.url=o.url,s.scheme=o.scheme,s._options={...s._options,...o};const r=this._map.style.sourceCaches[t];r&&r.clearTiles(),s.load()})),i(this,"_removeSource",(()=>{const{id:t}=this.props;if(this._map.getSource(t)){const{layers:e}=this._map.getStyle();e&&e.forEach((e=>{e.source===t&&this._map.removeLayer(e.id)})),this._map.removeSource(t)}}))}componentDidMount(){const{id:t,children:e,...o}=this.props,s=C(o);this._map.addSource(t,s),this._map.on("sourcedata",this._onSourceData)}componentDidUpdate(t){const{id:e,children:o,...s}=t,r=C(s),{id:i,children:a,...n}=this.props,p=C(n);if(i!==e||p.type!==r.type)return this._map.removeSource(e),void this._map.addSource(i,p);"geojson"!==p.type||"geojson"!==r.type?"image"!==p.type||"image"!==r.type?"vector"!==p.type||"vector"!==r.type?"raster"===p.type&&"raster"===r.type&&this._updateTileSource(i,r,p):this._updateTileSource(i,r,p):this._updateImageSource(i,r,p):this._updateGeoJSONSource(i,r,p)}componentWillUnmount(){this._map&&this._map.getStyle()&&this._removeSource()}render(){const{loaded:e}=this.state,{children:o}=this.props;return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),e&&o)))}}i(w,"displayName","Source");class S extends t.PureComponent{constructor(t){super(t),this._el=document.createElement("div")}componentDidMount(){const{longitude:t,latitude:e,offset:o,closeButton:s,closeOnClick:r,onClose:i,anchor:a,className:n,maxWidth:l}=this.props;this._popup=new p.Popup({offset:o,closeButton:s,closeOnClick:r,anchor:a,className:n,maxWidth:l}),this._popup.setDOMContent(this._el),this._popup.setLngLat([t,e]).addTo(this._map),i&&this._popup.on("close",i)}componentDidUpdate(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._popup.setLngLat([this.props.longitude,this.props.latitude])}componentWillUnmount(){this._map&&this._map.getStyle()&&this._popup.remove()}getPopup(){return this._popup}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),o.createPortal(this.props.children,this._el))))}}i(S,"displayName","Popup"),i(S,"defaultProps",{closeButton:!0,closeOnClick:!0,onClose:void 0,anchor:void 0,offset:void 0,className:void 0,maxWidth:"240px"});class L extends t.PureComponent{constructor(t){super(t),i(this,"_onDragEnd",(()=>{this.props.onDragEnd(this._marker.getLngLat())})),i(this,"_onDragStart",(()=>{this.props.onDragStart(this._marker.getLngLat())})),i(this,"_onDrag",(()=>{this.props.onDrag(this._marker.getLngLat())})),this._el=document.createElement("div")}componentDidMount(){const{longitude:t,latitude:e,onClick:o,onDragEnd:s,onDragStart:r,onDrag:i}=this.props;this._marker=new p.Marker({element:this._el,anchor:this.props.anchor,draggable:this.props.draggable,offset:this.props.offset,rotation:this.props.rotation,pitchAlignment:this.props.pitchAlignment,rotationAlignment:this.props.rotationAlignment}),this._marker.setLngLat([t,e]).addTo(this._map),o&&this._el.addEventListener("click",o),s&&this._marker.on("dragend",this._onDragEnd),r&&this._marker.on("dragstart",this._onDragStart),i&&this._marker.on("drag",this._onDrag)}componentDidUpdate(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._marker.setLngLat([this.props.longitude,this.props.latitude])}componentWillUnmount(){this._map&&this._map.getStyle()&&(this.props.onClick&&this._el.removeEventListener("click",this.props.onClick),this._marker.remove())}getMarker(){return this._marker}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),o.createPortal(this.props.children,this._el))))}}i(L,"displayName","Marker"),i(L,"defaultProps",{anchor:"center",offset:null,draggable:!1,rotation:0,pitchAlignment:"auto",rotationAlignment:"auto"});class T extends t.PureComponent{componentDidMount(){const t=this._map,{id:e,source:o,sourceLayer:s,state:r}=this.props;t.setFeatureState({id:e,source:o,sourceLayer:s},r)}componentDidUpdate(t){const e=this._map,{id:o,source:s,sourceLayer:r,state:i}=this.props;o===t.id&&s===t.source&&r===t.sourceLayer&&i===t.state||(e.removeFeatureState({id:t.id,source:t.source,sourceLayer:t.sourceLayer}),e.setFeatureState({id:o,source:s,sourceLayer:r},i))}componentWillUnmount(){if(!this._map||!this._map.getStyle())return;const{id:t,source:e,sourceLayer:o}=this.props;this._map.removeFeatureState({id:t,source:e,sourceLayer:o})}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}class k extends t.PureComponent{constructor(t){super(t),i(this,"_loadImage",((t,e)=>{"string"!=typeof t?e(t):this._map.loadImage(t,((t,o)=>{if(t)throw t;e(o)}))})),this._id=t.id}componentDidMount(){const{image:t,pixelRatio:e,sdf:o}=this.props;this._loadImage(t,(t=>this._map.addImage(this._id,t,{pixelRatio:e,sdf:o})))}componentDidUpdate(t){const{id:e,image:o,pixelRatio:s,sdf:r}=this.props;if(e!==t.id||r!==t.sdf||s!==t.pixelRatio)return this._id=e,this._map.removeImage(t.id),void this._loadImage(o,(t=>this._map.addImage(this._id,t,{pixelRatio:s,sdf:r})));o!==t.image&&this._loadImage(o,(t=>this._map.updateImage(this._id,t)))}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.hasImage(this._id)&&this._map.removeImage(this._id)}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(k,"defaultProps",{pixelRatio:1,sdf:!1});class E extends t.PureComponent{componentDidMount(){const t=this._map,{compact:e,customAttribution:o,position:s}=this.props,r=new p.AttributionControl({compact:e,customAttribution:o});t.addControl(r,s),this._control=r}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(E,"defaultProps",{position:"bottom-right"});class P extends t.PureComponent{componentDidMount(){const t=this._map,{container:e,position:o}=this.props,s=new p.FullscreenControl({container:e});t.addControl(s,o),this._control=s}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(P,"defaultProps",{position:"top-right"});class D extends t.PureComponent{componentDidMount(){const t=this._map,{positionOptions:e,fitBoundsOptions:o,trackUserLocation:s,showUserLocation:r,position:i,onTrackUserLocationEnd:a,onTrackUserLocationStart:n,onError:l,onGeolocate:c}=this.props,h=new p.GeolocateControl({positionOptions:e,fitBoundsOptions:o,trackUserLocation:s,showUserLocation:r});a&&h.on("trackuserlocationend",a),n&&h.on("trackuserlocationstart",n),l&&h.on("error",l),c&&h.on("geolocate",c),t.addControl(h,i),this._control=h}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(D,"defaultProps",{positionOptions:{enableHighAccuracy:!1,timeout:6e3},fitBoundsOptions:{maxZoom:15},trackUserLocation:!1,showUserLocation:!0});class M extends t.PureComponent{componentDidMount(){const t=this._map,{showCompass:e,showZoom:o,visualizePitch:s,position:r}=this.props,i=new p.NavigationControl({showCompass:e,showZoom:o,visualizePitch:s});t.addControl(i,r),this._control=i}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(M,"defaultProps",{showCompass:!0,showZoom:!0,visualizePitch:!1,position:"top-right"});class U extends t.PureComponent{componentDidMount(){const t=this._map,{maxWidth:e,unit:o,position:s}=this.props,r=new p.ScaleControl({maxWidth:e,unit:o});t.addControl(r,s),this._control=r}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(U,"defaultProps",{position:"bottom-right",unit:"metric"});var j={exports:{}};!function(t){function e(t){if(t=Object.assign({},t),!(this instanceof e))throw new Error("MapboxLanguage needs to be called with the new keyword");this.setLanguage=this.setLanguage.bind(this),this._initialStyleUpdate=this._initialStyleUpdate.bind(this),this._defaultLanguage=t.defaultLanguage,this._isLanguageField=t.languageField||/^\{name/,this._getLanguageField=t.getLanguageField||function(t){return"mul"===t?"{name}":"{name_"+t+"}"},this._languageSource=t.languageSource||null,this._languageTransform=t.languageTransform||function(t,e){return"ar"===e?function(t){var e=t.layers.map((function(t){if(!(t.layout||{})["text-field"])return t;var e=0;return Object.assign({},t,{layout:Object.assign({},t.layout,{"text-letter-spacing":e})})}));return Object.assign({},t,{layers:e})}(t):function(t){var e=t.layers.map((function(t){if(!(t.layout||{})["text-field"])return t;var e=0;return"state_label"===t["source-layer"]&&(e=.15),"marine_label"===t["source-layer"]&&(/-lg/.test(t.id)&&(e=.25),/-md/.test(t.id)&&(e=.15),/-sm/.test(t.id)&&(e=.1)),"place_label"===t["source-layer"]&&(/-suburb/.test(t.id)&&(e=.15),/-neighbour/.test(t.id)&&(e=.1),/-islet/.test(t.id)&&(e=.01)),"airport_label"===t["source-layer"]&&(e=.01),"rail_station_label"===t["source-layer"]&&(e=.01),"poi_label"===t["source-layer"]&&/-scalerank/.test(t.id)&&(e=.01),"road_label"===t["source-layer"]&&(/-label-/.test(t.id)&&(e=.01),/-shields/.test(t.id)&&(e=.05)),Object.assign({},t,{layout:Object.assign({},t.layout,{"text-letter-spacing":e})})}));return Object.assign({},t,{layers:e})}(t)},this._excludedLayerIds=t.excludedLayerIds||[],this.supportedLanguages=t.supportedLanguages||["ar","en","es","fr","de","ja","ko","mul","pt","ru","zh"]}function o(t,e,o){if(function(t,e){return"string"==typeof e&&t.test(e)}(t,e))return o;if(function(t,e){return e.stops&&e.stops.filter((function(e){return t.test(e[1])})).length>0}(t,e)){var s=e.stops.map((function(e){return t.test(e[1])?[e[0],o]:e}));return Object.assign({},e,{stops:s})}return e}e.prototype.setLanguage=function(t,e){if(this.supportedLanguages.indexOf(e)<0)throw new Error("Language "+e+" is not supported");var s=this._languageSource||function(t){return Object.keys(t.sources).filter((function(e){var o=t.sources[e];return/mapbox-streets-v\d/.test(o.url)}))[0]}(t);if(!s)return t;var r=this._getLanguageField(e),i=this._isLanguageField,a=this._excludedLayerIds,n=t.layers.map((function(t){return t.source===s?function(t,e,s,r){return e.layout&&e.layout["text-field"]&&-1===r.indexOf(e.id)?Object.assign({},e,{layout:Object.assign({},e.layout,{"text-field":o(t,e.layout["text-field"],s)})}):e}(i,t,r,a):t})),p=Object.assign({},t,{layers:n});return this._languageTransform(p,e)},e.prototype._initialStyleUpdate=function(){var t=this._map.getStyle(),e=this._defaultLanguage||function(t){var e=navigator.languages?navigator.languages[0]:navigator.language||navigator.userLanguage,o=e.split("-"),s=e;o.length>1&&(s=o[0]);if(t.indexOf(s)>-1)return s;return null}(this.supportedLanguages);this._map.off("styledata",this._initialStyleUpdate),this._map.setStyle(this.setLanguage(t,e))},e.prototype.onAdd=function(t){return this._map=t,this._map.on("styledata",this._initialStyleUpdate),this._container=document.createElement("div"),this._container},e.prototype.onRemove=function(){this._map.off("styledata",this._initialStyleUpdate),this._map=void 0},t.exports=e}(j);var O=j.exports;class z extends t.PureComponent{constructor(...t){super(...t),i(this,"_setLanguage",(()=>{const{language:t}=this.props,e=this._map,o=this._control;t&&e.setStyle(o.setLanguage(e.getStyle(),t))}))}componentDidMount(){const t=this._map,{supportedLanguages:e,languageTransform:o,languageField:s,getLanguageField:r,languageSource:i,defaultLanguage:a}=this.props,n=new O({supportedLanguages:e,languageTransform:o,languageField:s,getLanguageField:r,languageSource:i,defaultLanguage:a});t.addControl(n),this._control=n}componentDidUpdate(t){t.language!==this.props.language&&this._setLanguage()}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(z,"defaultProps",{});var F={exports:{}};!function(t){var e=[{id:"traffic-street-link-bg",type:"line",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},source:"mapbox://mapbox.mapbox-traffic-v1","source-layer":"traffic",minzoom:15,filter:["all",["==","$type","LineString"],["all",["has","congestion"],["in","class","link","motorway_link","service","street"]]],layout:{visibility:"visible","line-join":"round","line-cap":"round"},paint:{"line-width":{base:1.5,stops:[[14,2.5],[20,15.5]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(145, 95%, 30%)"],["moderate","hsl(30, 100%, 42%)"],["heavy","hsl(355, 100%, 37%)"],["severe","hsl(355, 70%, 22%)"]]},"line-offset":{base:1.5,stops:[[14,2],[20,18]]},"line-opacity":{base:1,stops:[[15,0],[16,1]]}}},{id:"traffic-secondary-tertiary-bg",type:"line",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},source:"mapbox://mapbox.mapbox-traffic-v1","source-layer":"traffic",minzoom:6,filter:["all",["==","$type","LineString"],["all",["has","congestion"],["in","class","secondary","tertiary"]]],layout:{visibility:"visible","line-join":"round","line-cap":"round"},paint:{"line-width":{base:1.5,stops:[[9,1.5],[18,11],[20,16.5]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(145, 95%, 30%)"],["moderate","hsl(30, 100%, 42%)"],["heavy","hsl(355, 100%, 37%)"],["severe","hsl(355, 70%, 22%)"]]},"line-offset":{base:1.5,stops:[[10,.5],[15,5],[18,11],[20,14.5]]},"line-opacity":{base:1,stops:[[13,0],[14,1]]}}},{id:"traffic-primary-bg",type:"line",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},source:"mapbox://mapbox.mapbox-traffic-v1","source-layer":"traffic",minzoom:6,filter:["all",["==","$type","LineString"],["all",["==","class","primary"],["has","congestion"]]],layout:{visibility:"visible","line-join":"round","line-cap":"round"},paint:{"line-width":{base:1.5,stops:[[10,.75],[15,6],[20,18]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(145, 95%, 30%)"],["moderate","hsl(30, 100%, 42%)"],["heavy","hsl(355, 100%, 37%)"],["severe","hsl(355, 70%, 22%)"]]},"line-offset":{base:1.2,stops:[[10,0],[12,1.5],[18,13],[20,16]]},"line-opacity":{base:1,stops:[[11,0],[12,1]]}}},{id:"traffic-trunk-bg",type:"line",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},source:"mapbox://mapbox.mapbox-traffic-v1","source-layer":"traffic",minzoom:6,filter:["all",["==","$type","LineString"],["all",["==","class","trunk"],["has","congestion"]]],layout:{visibility:"visible","line-join":"round","line-cap":"round"},paint:{"line-width":{base:1.5,stops:[[8,.5],[9,2.25],[18,13],[20,17.5]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(145, 95%, 30%)"],["moderate","hsl(30, 100%, 42%)"],["heavy","hsl(355, 100%, 37%)"],["severe","hsl(355, 70%, 22%)"]]},"line-offset":{base:1.5,stops:[[7,0],[9,1],[18,13],[20,18]]},"line-opacity":1}},{id:"traffic-motorway-bg",type:"line",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},source:"mapbox://mapbox.mapbox-traffic-v1","source-layer":"traffic",minzoom:6,filter:["all",["==","$type","LineString"],["all",["==","class","motorway"],["has","congestion"]]],layout:{visibility:"visible","line-join":"round","line-cap":"round"},paint:{"line-width":{base:1.5,stops:[[6,.5],[9,3],[18,16],[20,20]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(145, 95%, 30%)"],["moderate","hsl(30, 100%, 42%)"],["heavy","hsl(355, 100%, 37%)"],["severe","hsl(355, 70%, 22%)"]]},"line-opacity":1,"line-offset":{base:1.5,stops:[[7,0],[9,1.2],[11,1.2],[18,10],[20,15.5]]}}},{id:"traffic-primary",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},ref:"traffic-primary-bg",paint:{"line-width":{base:1.5,stops:[[10,1],[15,4],[20,16]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(142, 55%, 50%)"],["moderate","hsl(30, 100%, 55%)"],["heavy","hsl(355, 100%, 50%)"],["severe","hsl(355, 70%, 35%)"]]},"line-offset":{base:1.2,stops:[[10,0],[12,1.5],[18,13],[20,16]]},"line-opacity":1}},{id:"traffic-secondary-tertiary",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},ref:"traffic-secondary-tertiary-bg",paint:{"line-width":{base:1.5,stops:[[9,.5],[18,9],[20,14]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(142, 55%, 50%)"],["moderate","hsl(30, 100%, 55%)"],["heavy","hsl(355, 100%, 50%)"],["severe","hsl(355, 70%, 35%)"]]},"line-offset":{base:1.5,stops:[[10,.5],[15,5],[18,11],[20,14.5]]},"line-opacity":1}},{id:"traffic-street-link",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},ref:"traffic-street-link-bg",paint:{"line-width":{base:1.5,stops:[[14,1.5],[20,13.5]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(142, 55%, 50%)"],["moderate","hsl(30, 100%, 55%)"],["heavy","hsl(355, 100%, 50%)"],["severe","hsl(355, 70%, 35%)"]]},"line-offset":{base:1.5,stops:[[14,2],[20,18]]},"line-opacity":1}},{id:"traffic-trunk",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},ref:"traffic-trunk-bg",paint:{"line-width":{base:1.5,stops:[[8,.75],[18,11],[20,15]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(142, 55%, 50%)"],["moderate","hsl(30, 100%, 55%)"],["heavy","hsl(355, 100%, 50%)"],["severe","hsl(355, 70%, 35%)"]]},"line-offset":{base:1.5,stops:[[7,0],[9,1],[18,13],[20,18]]},"line-opacity":1}},{id:"traffic-motorway",metadata:{"mapbox:group":"4053de47c16e55481b10fd748eaa994c"},ref:"traffic-motorway-bg",paint:{"line-width":{base:1.5,stops:[[6,.5],[9,1.5],[18,14],[20,18]]},"line-color":{base:1,type:"categorical",property:"congestion",stops:[["low","hsl(142, 55%, 50%)"],["moderate","hsl(30, 100%, 55%)"],["heavy","hsl(355, 100%, 50%)"],["severe","hsl(355, 70%, 35%)"]]},"line-opacity":1,"line-offset":{base:1.5,stops:[[7,0],[9,1.2],[11,1.2],[18,10],[20,15.5]]}}}];function o(t){if(!(this instanceof o))throw new Error("MapboxTraffic needs to be called with the new keyword");this.options=Object.assign({showTraffic:!1,showTrafficButton:!0,trafficSource:/mapbox-traffic-v\d/},t),this.render=this.render.bind(this),this.toggleTraffic=this.toggleTraffic.bind(this),this._hideTraffic=this._hideTraffic.bind(this),this._showTraffic=this._showTraffic.bind(this),this._hasTraffic=this._hasTraffic.bind(this),this._toggle=new s({show:this.options.showTrafficButton,onToggle:this.toggleTraffic.bind(this)})}function s(t){var e;t=Object.assign({show:!0,onToggle:function(){}},t),this._btn=((e=document.createElement("button")).className="mapboxgl-ctrl-icon mapboxgl-ctrl-traffic",e.type="button",e["aria-label"]="Inspect",e),this._btn.onclick=t.onToggle,this.elem=function(t,e){var o=document.createElement("div");return o.className="mapboxgl-ctrl mapboxgl-ctrl-group",o.appendChild(t),e||(o.style.display="none"),o}(this._btn,t.show)}o.prototype._hasTraffic=function(){var t=this._map.getStyle(),e=this.options.trafficSource;return Object.keys(t.sources).filter((function(t){return e.test(t)})).length>0},o.prototype.toggleTraffic=function(){this.options.showTraffic=!this.options.showTraffic,this.render()},o.prototype.render=function(){if(!this._hasTraffic()){this._map.addSource("mapbox://mapbox.mapbox-traffic-v1",{type:"vector",url:"mapbox://mapbox.mapbox-traffic-v1"});var t=this._map.getStyle().layers.filter((function(t){return"road"===t["source-layer"]})),o=t[t.length-1].id,s=function(t,e,o){for(var s=0;s<t.layers.length;s++)if(o===t.layers[s].id){var r=t.layers.slice(0,s).concat(e).concat(t.layers.slice(s));return Object.assign({},t,{layers:r})}return t}(this._map.getStyle(),e,o);this._map.setStyle(s)}this.options.showTraffic?(this._showTraffic(),this._toggle.setMapIcon()):(this._hideTraffic(),this._toggle.setTrafficIcon())},o.prototype._hideTraffic=function(){var t=this._map.getStyle(),e=this.options.trafficSource;t.layers.forEach((function(t){e.test(t.source)&&(t.layout=t.layout||{},t.layout.visibility="none")})),this._map.setStyle(t)},o.prototype._showTraffic=function(){var t=this._map.getStyle(),e=this.options.trafficSource;t.layers.forEach((function(t){e.test(t.source)&&(t.layout=t.layout||{},t.layout.visibility="visible")})),this._map.setStyle(t)},o.prototype.onAdd=function(t){return this._map=t,t.on("load",this.render),this._toggle.elem},o.prototype.onRemove=function(){this._map.off("load",this.render);var t=this._toggle.elem;t.parentNode.removeChild(t),this._map=void 0},s.prototype.setTrafficIcon=function(){this._btn.className="mapboxgl-ctrl-icon mapboxgl-ctrl-traffic"},s.prototype.setMapIcon=function(){this._btn.className="mapboxgl-ctrl-icon mapboxgl-ctrl-map"},t.exports=o}(F);var I=F.exports;class B extends t.PureComponent{constructor(...t){super(...t),i(this,"_addControl",(()=>{const{showTraffic:t,showTrafficButton:e,trafficSource:o}=this.props,s=new I({showTraffic:t,showTrafficButton:e,trafficSource:o});this._map.addControl(s),this._control=s}))}componentDidMount(){this._addControl()}componentDidUpdate(t){t.showTraffic!==this.props.showTraffic&&this._control.toggleTraffic();(t.showTrafficButton!==this.props.showTrafficButton||t.trafficSource!==this.props.trafficSource)&&(this._map.removeControl(this._control),this._addControl())}componentWillUnmount(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)}getControl(){return this._control}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(B,"defaultProps",{showTraffic:!1,showTrafficButton:!0,trafficSource:/mapbox-traffic-v\d/});class A extends t.PureComponent{componentDidMount(){this._setFilter()}componentDidUpdate(t){const e=t.filter,o=t.validate,{filter:s,validate:r}=this.props;(!h(e,s)||o!==r)&&this._setFilter()}componentWillUnmount(){if(!this._map||!this._map.getStyle())return;const{layerId:t}=this.props;void 0!==this._map.getLayer(t)&&this._map.setFilter(t,void 0)}_setFilter(){const{layerId:t,filter:e,validate:o}=this.props;void 0!==this._map.getLayer(t)&&(Array.isArray(e)?this._map.setFilter(t,e,{validate:o}):this._map.setFilter(t,void 0))}render(){return t.createElement(a.Consumer,{},(t=>(t&&(this._map=t),null)))}}i(A,"defaultProps",{validate:!0}),exports.AttributionControl=E,exports.CustomLayer=g,exports.FeatureState=T,exports.Filter=A,exports.FullscreenControl=P,exports.GeolocateControl=D,exports.Image=k,exports.LanguageControl=z,exports.Layer=f,exports.MapContext=a,exports.Marker=L,exports.NavigationControl=M,exports.Popup=S,exports.ScaleControl=U,exports.Source=w,exports.TrafficControl=B,exports.default=x;
//# sourceMappingURL=react-map-gl.cjs.js.map