@vertome/react-map-gl/dist/react-map-gl.esm.js

React Component for Mapbox GL JS

import{createContext as t,createElement as e,PureComponent as o,Children as r,cloneElement as n,createRef as i}from"react";import{createPortal as a}from"react-dom";function s(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function p(){return(p=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r])}return t}).apply(this,arguments)}function l(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function c(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t){return function(t){if(Array.isArray(t))return d(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return d(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);"Object"===o&&t.constructor&&(o=t.constructor.name);if("Map"===o||"Set"===o)return Array.from(t);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return d(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,r=new Array(e);o<e;o++)r[o]=t[o];return r}var f=t(null),m=!("[object process]"===Object.prototype.toString.call(global.process)&&!global.process.browser)?require("mapbox-gl"):null,g=["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 y=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},_=function(t,e){void 0===t&&(t={}),void 0===e&&(e={});var o=new Set([].concat(h(Object.keys(t)),h(Object.keys(e))));return h(o).reduce((function(o,r){var n=t[r];return n!==e[r]&&o.push([r,n]),o}),[])},v=function(t,e,o,r){var n={layers:[e]};if(r){var i=[[o[0]-r,o[1]-r],[o[0]+r,o[1]+r]];return t.queryRenderedFeatures(i,n)}return t.queryRenderedFeatures(o,n)},b=[["onClick","click"],["onHover","mousemove"],["onEnter","mouseenter"],["onLeave","mouseleave"]],w=function(t){function o(e){var o;return s(u(o=t.call(this,e)||this),"$key",void 0),s(u(o),"$value",void 0),s(u(o),"_id",void 0),s(u(o),"_map",void 0),s(u(o),"_onClick",void 0),s(u(o),"_onHover",void 0),s(u(o),"_onEnter",void 0),s(u(o),"_onLeave",void 0),s(u(o),"_addLayer",(function(t){var e=o._map,r=t.before,n=(t.radius,t.onClick,t.onHover,t.onEnter,t.onLeave,c(t,["before","radius","onClick","onHover","onEnter","onLeave"]));r&&e.getLayer(r)?e.addLayer(n,r):e.addLayer(n),o._addEventListeners(t)})),s(u(o),"_addEventListeners",(function(t){b.forEach((function(e){var r=e[0],n=e[1],i="_"+r;t[r]&&o._map.on(n,o._id,o[i])}))})),s(u(o),"_updateEventListeners",(function(t,e){b.forEach((function(r){var n=r[0],i=r[1],a="_"+n;!e[n]&&t[n]&&o._map.off(i,o._id,o[a]),e[n]&&!t[n]&&o._map.on(i,o._id,o[a])}))})),s(u(o),"_removeEventListeners",(function(t){b.forEach((function(e){var r=e[0],n=e[1],i="_"+r;t[r]&&o._map.off(n,o._id,o[i])}))})),s(u(o),"_onClick",(function(t){var e=[t.point.x,t.point.y],r=v(o._map,o._id,e,o.props.radius);o.props.onClick(p({},t,{features:r}))})),s(u(o),"_onHover",(function(t){var e=[t.point.x,t.point.y],r=v(o._map,o._id,e,o.props.radius);o.props.onHover(p({},t,{features:r}))})),s(u(o),"_onEnter",(function(t){var e=[t.point.x,t.point.y],r=v(o._map,o._id,e,o.props.radius);o.props.onEnter(p({},t,{features:r}))})),s(u(o),"_onLeave",(function(t){var e=[t.point.x,t.point.y],r=v(o._map,o._id,e,o.props.radius);o.props.onLeave(p({},t,{features:r}))})),o._id=e.id,o}l(o,t);var r=o.prototype;return r.componentDidMount=function(){this._addLayer(this.props)},r.componentDidUpdate=function(t){var e=this,o=this._map,r=this.props,n=r.id,i=r.before,a=(r.onClick,c(r,["id","before","onClick"]));if(n!==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=n,this._map.removeLayer(t.id),void this._addLayer(this.props);i!==t.before&&i&&o.getLayer(i)&&o.moveLayer(this._id,i),a.paint!==t.paint&&_(a.paint,t.paint).forEach((function(t){var r=t[0],n=t[1];o.setPaintProperty(e._id,r,n)})),a.layout!==t.layout&&_(a.layout,t.layout).forEach((function(t){var r=t[0],n=t[1];o.setLayoutProperty(e._id,r,n)})),a.filter!==t.filter&&(a.filter?o.setFilter(this._id,a.filter):o.setFilter(this._id,void 0)),this._updateEventListeners(t,this.props)},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&(this._removeEventListeners(this.props),this._map.getLayer(this._id)&&this._map.removeLayer(this._id))},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(w,"displayName","Layer"),s(w,"defaultProps",{radius:0});var S=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_id",void 0),s(u(e),"_map",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this.props,e=t.layer,o=t.before;o&&this._map.getLayer(o)?this._map.addLayer(e,o):this._map.addLayer(e),this._id=e.id},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.getLayer(this._id)&&this._map.removeLayer(this._id)},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(S,"displayName","CustomLayer");var x=[w,S],L=function(t){return x.includes(t.type)},C=function(t){var e=[];return function t(e,o){r.forEach(o,(function(o){o&&(L(o)&&e(o),o.props&&o.props.children&&t(e,o.props.children))}))}((function(t){t.props.before||e.push(function(t){return t.props.id||t.props.layer.id}(t))}),t),e},k=function(t){function o(e){var o;return s(u(o=t.call(this,e)||this),"_map",void 0),s(u(o),"_container",void 0),s(u(o),"state",{loaded:!1}),s(u(o),"_onViewportChange",(function(t){if(t.originalEvent){var e=o._map,r=e.getCenter(),n=r.lng,i={latitude:r.lat,longitude:n,zoom:e.getZoom(),pitch:e.getPitch(),bearing:e.getBearing()};o.props.onViewportChange(i)}})),m&&(m.accessToken=e.accessToken),o._container=i(),o}l(o,t);var a=o.prototype;return a.componentDidMount=function(){var t=this;if(m){var e=this._container.current,o=new m.Map({container:e,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=o,o.once("load",(function(){t.setState({loaded:!0},t.props.onLoad)})),this.props.onViewportChange&&(o.on("dragend",this._onViewportChange),o.on("zoomend",this._onViewportChange),o.on("rotateend",this._onViewportChange),o.on("pitchend",this._onViewportChange),o.on("boxzoomend",this._onViewportChange)),g.forEach((function(e){var r="on"+y(e),n=t.props[r];n&&(Array.isArray(n)?o.on.apply(o,[e].concat(h(n))):o.on(e,n))})),this.props.cursorStyle&&(o.getCanvas().style.cursor=this.props.cursorStyle),this.props.showTileBoundaries&&(this._map.showTileBoundaries=this.props.showTileBoundaries)}},a.componentDidUpdate=function(t){this._updateMapViewport(t,this.props),this._updateMapStyle(t,this.props),this._updateMapSize(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)},a.componentWillUnmount=function(){this._map&&this._map.remove()},a.getMap=function(){return this._map},a._updateMapStyle=function(t,e){var o=this,r=e.mapStyle,n=t.mapStyle;r!==n&&this.setState({loaded:!1},(function(){o._map.setStyle(r),o._map.once("style.load",(function(){return o.setState({loaded:!0})}))}))},a._updateMapViewport=function(t,e){var o=this._map,r=o.getCenter();if(e.latitude!==t.latitude&&e.latitude!==r.lat||e.longitude!==t.longitude&&e.longitude!==r.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()){var n={center:[e.longitude,e.latitude],zoom:e.zoom,pitch:e.pitch,bearing:e.bearing},i=this.props,a=i.viewportChangeMethod,s=p({},i.viewportChangeOptions,n);switch(a){case"flyTo":o.flyTo(s);break;case"jumpTo":o.jumpTo(s);break;case"easeTo":o.easeTo(s);break;default:throw new Error("Unknown viewport change method")}}},a._updateMapSize=function(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()},a.render=function(){var t=this.state.loaded,o=this.props,i=o.className,a=o.style,s=this.props.children?function(t){var e=C(t);e.shift();return function t(o){return"function"==typeof o?o:r.map(o,(function(o){if(!o)return o;if(L(o)){var r=o.props.before||e.shift();return n(o,{before:r})}return o.props&&o.props.children?n(o,{children:t(o.props.children)}):o}))}(t)}(this.props.children):null;return e(f.Provider,{value:this._map},e("div",{ref:this._container,style:a,className:i},t&&s))},o}(o);s(k,"displayName","MapGL"),s(k,"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 T=function(t,e){if(void 0===t&&(t=[]),void 0===e&&(e=[]),t.length!==e.length)return!1;for(var o=0;o<t.length;o+=1)if(t[o]!==e[o])return!1;return!0},D=function(t){switch(t.type){case"vector":return p({type:"vector"},t);case"raster":return p({type:"raster"},t);case"raster-dem":return p({type:"raster-dem"},t);case"geojson":return p({type:"geojson"},t);case"video":return p({type:"video"},t);case"image":return p({type:"image"},t);default:throw new Error("Unknown type for '"+t.id+"' Source")}},O=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"state",{loaded:!1}),s(u(e),"_onSourceData",(function(){e._map.isSourceLoaded(e.props.id)&&(e._map.off("sourcedata",e._onSourceData),e.setState({loaded:!0}))})),s(u(e),"_updateGeoJSONSource",(function(t,o,r){if(r.data!==o.data){var n=e._map.getSource(t);void 0!==n&&n.setData(r.data)}})),s(u(e),"_updateImageSource",(function(t,o,r){if(r.url!==o.url||r.coordinates!==o.coordinates){var n=e._map.getSource(t);void 0!==n&&n.updateImage(r)}})),s(u(e),"_updateTileSource",(function(t,o,r){if(r.url!==o.url||!T(r.tiles,o.tiles)){var n=e._map.getSource(t);n._tileJSONRequest&&n._tileJSONRequest.cancel(),n.url=r.url,n.scheme=r.scheme,n._options=p({},n._options,r);var i=e._map.style.sourceCaches[t];i&&i.clearTiles(),n.load()}})),s(u(e),"_removeSource",(function(){var t=e.props.id;if(e._map.getSource(t)){var o=e._map.getStyle().layers;o&&o.forEach((function(o){o.source===t&&e._map.removeLayer(o.id)})),e._map.removeSource(t)}})),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this.props,e=t.id,o=(t.children,c(t,["id","children"])),r=D(o);this._map.addSource(e,r),this._map.on("sourcedata",this._onSourceData)},r.componentDidUpdate=function(t){var e=t.id,o=(t.children,c(t,["id","children"])),r=D(o),n=this.props,i=n.id,a=(n.children,c(n,["id","children"])),s=D(a);if(i!==e||s.type!==r.type)return this._map.removeSource(e),void this._map.addSource(i,s);"geojson"!==s.type||"geojson"!==r.type?"image"!==s.type||"image"!==r.type?"vector"!==s.type||"vector"!==r.type?"raster"===s.type&&"raster"===r.type&&this._updateTileSource(i,r,s):this._updateTileSource(i,r,s):this._updateImageSource(i,r,s):this._updateGeoJSONSource(i,r,s)},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._removeSource()},r.render=function(){var t=this,o=this.state.loaded,r=this.props.children;return e(f.Consumer,{},(function(e){return e&&(t._map=e),o&&r}))},o}(o);s(O,"displayName","Source");var E=function(t){function o(e){var o;return s(u(o=t.call(this,e)||this),"_map",void 0),s(u(o),"_el",void 0),s(u(o),"_popup",void 0),o._el=document.createElement("div"),o}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this.props,e=t.longitude,o=t.latitude,r=t.offset,n=t.closeButton,i=t.closeOnClick,a=t.onClose,s=t.anchor,p=t.className,l=t.maxWidth;this._popup=new m.Popup({offset:r,closeButton:n,closeOnClick:i,anchor:s,className:p,maxWidth:l}),this._popup.setDOMContent(this._el),this._popup.setLngLat([e,o]).addTo(this._map),a&&this._popup.on("close",a)},r.componentDidUpdate=function(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._popup.setLngLat([this.props.longitude,this.props.latitude])},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._popup.remove()},r.getPopup=function(){return this._popup},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),a(t.props.children,t._el)}))},o}(o);s(E,"displayName","Popup"),s(E,"defaultProps",{closeButton:!0,closeOnClick:!0,onClose:null,anchor:null,offset:null,className:null,maxWidth:"240px"});var j=function(t){function o(e){var o;return s(u(o=t.call(this,e)||this),"_map",void 0),s(u(o),"_el",void 0),s(u(o),"_marker",void 0),s(u(o),"_onDragEnd",(function(){o.props.onDragEnd(o._marker.getLngLat())})),s(u(o),"_onDragStart",(function(){o.props.onDragStart(o._marker.getLngLat())})),s(u(o),"_onDrag",(function(){o.props.onDrag(o._marker.getLngLat())})),o._el=document.createElement("div"),o}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this.props,e=t.longitude,o=t.latitude,r=t.onClick,n=t.onDragEnd,i=t.onDragStart,a=t.onDrag;this._marker=new m.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([e,o]).addTo(this._map),r&&this._el.addEventListener("click",r),n&&this._marker.on("dragend",this._onDragEnd),i&&this._marker.on("dragstart",this._onDragStart),a&&this._marker.on("drag",this._onDrag)},r.componentDidUpdate=function(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._marker.setLngLat([this.props.longitude,this.props.latitude])},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&(this.props.onClick&&this._el.removeEventListener("click",this.props.onClick),this._marker.remove())},r.getMarker=function(){return this._marker},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),a(t.props.children,t._el)}))},o}(o);s(j,"displayName","Marker"),s(j,"defaultProps",{anchor:"center",offset:null,draggable:!1,rotation:0,pitchAlignment:"auto",rotationAlignment:"auto"});var U=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.id,r=e.source,n=e.sourceLayer,i=e.state;t.setFeatureState({id:o,source:r,sourceLayer:n},i)},r.componentDidUpdate=function(t){var e=this._map,o=this.props,r=o.id,n=o.source,i=o.sourceLayer,a=o.state;r===t.id&&n===t.source&&i===t.sourceLayer&&a===t.state||(e.removeFeatureState({id:t.id,source:t.source,sourceLayer:t.sourceLayer}),e.setFeatureState({id:r,source:n,sourceLayer:i},a))},r.componentWillUnmount=function(){if(this._map&&this._map.getStyle()){var t=this.props,e=t.id,o=t.source,r=t.sourceLayer;this._map.removeFeatureState({id:e,source:o,sourceLayer:r})}},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o),M=function(t){function o(e){var o;return s(u(o=t.call(this,e)||this),"_map",void 0),s(u(o),"_id",void 0),s(u(o),"_loadImage",(function(t,e){"string"!=typeof t?e(t):o._map.loadImage(t,(function(t,o){if(t)throw t;e(o)}))})),o._id=e.id,o}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this,e=this.props,o=e.image,r=e.pixelRatio,n=e.sdf;this._loadImage(o,(function(e){return t._map.addImage(t._id,e,{pixelRatio:r,sdf:n})}))},r.componentDidUpdate=function(t){var e=this,o=this.props,r=o.id,n=o.image,i=o.pixelRatio,a=o.sdf;if(r!==t.id||a!==t.sdf||i!==t.pixelRatio)return this._id=r,this._map.removeImage(t.id),void this._loadImage(n,(function(t){return e._map.addImage(e._id,t,{pixelRatio:i,sdf:a})}));n!==t.image&&this._loadImage(n,(function(t){return e._map.updateImage(e._id,t)}))},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.hasImage(this._id)&&this._map.removeImage(this._id)},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(M,"defaultProps",{pixelRatio:1,sdf:!1});var A=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.compact,r=e.customAttribution,n=e.position,i=new m.AttributionControl({compact:o,customAttribution:r});t.addControl(i,n),this._control=i},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(A,"defaultProps",{position:"bottom-right"});var I=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.container,r=e.position,n=new m.FullscreenControl({container:o});t.addControl(n,r),this._control=n},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(I,"defaultProps",{position:"top-right"});var P=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.positionOptions,r=e.fitBoundsOptions,n=e.trackUserLocation,i=e.showUserLocation,a=e.position,s=e.onTrackUserLocationEnd,p=e.onTrackUserLocationStart,l=e.onError,c=e.onGeolocate,u=new m.GeolocateControl({positionOptions:o,fitBoundsOptions:r,trackUserLocation:n,showUserLocation:i});s&&u.on("trackuserlocationend",s),p&&u.on("trackuserlocationstart",p),l&&u.on("error",l),c&&u.on("geolocate",c),t.addControl(u,a),this._control=u},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(P,"defaultProps",{positionOptions:{enableHighAccuracy:!1,timeout:6e3},fitBoundsOptions:{maxZoom:15},trackUserLocation:!1,showUserLocation:!0});var z=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.showCompass,r=e.showZoom,n=e.position,i=new m.NavigationControl({showCompass:o,showZoom:r});t.addControl(i,n),this._control=i},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(z,"defaultProps",{position:"top-right"});var F=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.maxWidth,r=e.unit,n=e.position,i=new m.ScaleControl({maxWidth:o,unit:r});t.addControl(i,n),this._control=i},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);function B(t,e){return t(e={exports:{}},e.exports),e.exports}s(F,"defaultProps",{position:"bottom-right",unit:"metric"});var R=B((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;return Object.assign({},t,{layout:Object.assign({},t.layout,{"text-letter-spacing":0})})}));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 r=e.stops.map((function(e){return t.test(e[1])?[e[0],o]:e}));return Object.assign({},e,{stops:r})}return e}e.prototype.setLanguage=function(t,e){if(this.supportedLanguages.indexOf(e)<0)throw new Error("Language "+e+" is not supported");var r=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(!r)return t;var n=this._getLanguageField(e),i=this._isLanguageField,a=this._excludedLayerIds,s=t.layers.map((function(t){return t.source===r?function(t,e,r,n){return e.layout&&e.layout["text-field"]&&-1===n.indexOf(e.id)?Object.assign({},e,{layout:Object.assign({},e.layout,{"text-field":o(t,e.layout["text-field"],r)})}):e}(i,t,n,a):t})),p=Object.assign({},t,{layers:s});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("-"),r=e;o.length>1&&(r=o[0]);if(t.indexOf(r)>-1)return r;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})),W=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),s(u(e),"_setLanguage",(function(){var t=e.props.language,o=e._map,r=e._control;t&&o.setStyle(r.setLanguage(o.getStyle(),t))})),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){var t=this._map,e=this.props,o=e.supportedLanguages,r=e.languageTransform,n=e.languageField,i=e.getLanguageField,a=e.languageSource,s=e.defaultLanguage,p=new R({supportedLanguages:o,languageTransform:r,languageField:n,getLanguageField:i,languageSource:a,defaultLanguage:s});t.addControl(p),this._control=p},r.componentDidUpdate=function(t){t.language!==this.props.language&&this._setLanguage()},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(W,"defaultProps",{});var N=B((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 r({show:this.options.showTrafficButton,onToggle:this.toggleTraffic.bind(this)})}function r(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,r=function(t,e,o){for(var r=0;r<t.layers.length;r++){if(o===t.layers[r].id){var n=t.layers.slice(0,r).concat(e).concat(t.layers.slice(r));return Object.assign({},t,{layers:n})}}return t}(this._map.getStyle(),e,o);this._map.setStyle(r)}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},r.prototype.setTrafficIcon=function(){this._btn.className="mapboxgl-ctrl-icon mapboxgl-ctrl-traffic"},r.prototype.setMapIcon=function(){this._btn.className="mapboxgl-ctrl-icon mapboxgl-ctrl-map"},t.exports=o})),Z=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),s(u(e),"_control",void 0),s(u(e),"_addControl",(function(){var t=e.props,o=t.showTraffic,r=t.showTrafficButton,n=t.trafficSource,i=new N({showTraffic:o,showTrafficButton:r,trafficSource:n});e._map.addControl(i),e._control=i})),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){this._addControl()},r.componentDidUpdate=function(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())},r.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},r.getControl=function(){return this._control},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(Z,"defaultProps",{showTraffic:!1,showTrafficButton:!0,trafficSource:/mapbox-traffic-v\d/});var V=function(t){function o(){for(var e,o=arguments.length,r=new Array(o),n=0;n<o;n++)r[n]=arguments[n];return s(u(e=t.call.apply(t,[this].concat(r))||this),"_map",void 0),e}l(o,t);var r=o.prototype;return r.componentDidMount=function(){this._setFilter()},r.componentDidUpdate=function(t){var e=t.filter,o=t.validate,r=this.props,n=r.filter,i=r.validate;(!T(e,n)||o!==i)&&this._setFilter()},r.componentWillUnmount=function(){if(this._map&&this._map.getStyle()){var t=this.props.layerId;void 0!==this._map.getLayer(t)&&this._map.setFilter(t,void 0)}},r._setFilter=function(){var t=this.props,e=t.layerId,o=t.filter,r=t.validate;void 0!==this._map.getLayer(e)&&(Array.isArray(o)?this._map.setFilter(e,o,{validate:r}):this._map.setFilter(e,void 0))},r.render=function(){var t=this;return e(f.Consumer,{},(function(e){return e&&(t._map=e),null}))},o}(o);s(V,"defaultProps",{validate:!0});export default k;export{A as AttributionControl,S as CustomLayer,U as FeatureState,V as Filter,I as FullscreenControl,P as GeolocateControl,M as Image,W as LanguageControl,w as Layer,f as MapContext,j as Marker,z as NavigationControl,E as Popup,F as ScaleControl,O as Source,Z as TrafficControl};
//# sourceMappingURL=react-map-gl.esm.js.map