UNPKG

@vertome/react-map-gl

Version:
3 lines (2 loc) 39 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom");function o(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function r(){return(r=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 n(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function i(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 a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t){return function(t){if(Array.isArray(t))return p(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 p(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 p(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 p(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 l=t.createContext(null),c=!("[object process]"===Object.prototype.toString.call(global.process)&&!global.process.browser)?require("mapbox-gl"):null,u=["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 h=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},d=function(t,e){void 0===t&&(t={}),void 0===e&&(e={});var o=new Set([].concat(s(Object.keys(t)),s(Object.keys(e))));return s(o).reduce((function(o,r){var n=t[r];return n!==e[r]&&o.push([r,n]),o}),[])},f=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)},m=[["onClick","click"],["onHover","mousemove"],["onEnter","mouseenter"],["onLeave","mouseleave"]],g=function(e){function s(t){var n;return o(a(n=e.call(this,t)||this),"$key",void 0),o(a(n),"$value",void 0),o(a(n),"_id",void 0),o(a(n),"_map",void 0),o(a(n),"_onClick",void 0),o(a(n),"_onHover",void 0),o(a(n),"_onEnter",void 0),o(a(n),"_onLeave",void 0),o(a(n),"_addLayer",(function(t){var e=n._map,o=t.before,r=(t.radius,t.onClick,t.onHover,t.onEnter,t.onLeave,i(t,["before","radius","onClick","onHover","onEnter","onLeave"]));o&&e.getLayer(o)?e.addLayer(r,o):e.addLayer(r),n._addEventListeners(t)})),o(a(n),"_addEventListeners",(function(t){m.forEach((function(e){var o=e[0],r=e[1],i="_"+o;t[o]&&n._map.on(r,n._id,n[i])}))})),o(a(n),"_updateEventListeners",(function(t,e){m.forEach((function(o){var r=o[0],i=o[1],a="_"+r;!e[r]&&t[r]&&n._map.off(i,n._id,n[a]),e[r]&&!t[r]&&n._map.on(i,n._id,n[a])}))})),o(a(n),"_removeEventListeners",(function(t){m.forEach((function(e){var o=e[0],r=e[1],i="_"+o;t[o]&&n._map.off(r,n._id,n[i])}))})),o(a(n),"_onClick",(function(t){var e=[t.point.x,t.point.y],o=f(n._map,n._id,e,n.props.radius);n.props.onClick(r({},t,{features:o}))})),o(a(n),"_onHover",(function(t){var e=[t.point.x,t.point.y],o=f(n._map,n._id,e,n.props.radius);n.props.onHover(r({},t,{features:o}))})),o(a(n),"_onEnter",(function(t){var e=[t.point.x,t.point.y],o=f(n._map,n._id,e,n.props.radius);n.props.onEnter(r({},t,{features:o}))})),o(a(n),"_onLeave",(function(t){var e=[t.point.x,t.point.y],o=f(n._map,n._id,e,n.props.radius);n.props.onLeave(r({},t,{features:o}))})),n._id=t.id,n}n(s,e);var p=s.prototype;return p.componentDidMount=function(){this._addLayer(this.props)},p.componentDidUpdate=function(t){var e=this,o=this._map,r=this.props,n=r.id,a=r.before,s=(r.onClick,i(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);a!==t.before&&a&&o.getLayer(a)&&o.moveLayer(this._id,a),s.paint!==t.paint&&d(s.paint,t.paint).forEach((function(t){var r=t[0],n=t[1];o.setPaintProperty(e._id,r,n)})),s.layout!==t.layout&&d(s.layout,t.layout).forEach((function(t){var r=t[0],n=t[1];o.setLayoutProperty(e._id,r,n)})),s.filter!==t.filter&&(s.filter?o.setFilter(this._id,s.filter):o.setFilter(this._id,void 0)),this._updateEventListeners(t,this.props)},p.componentWillUnmount=function(){this._map&&this._map.getStyle()&&(this._removeEventListeners(this.props),this._map.getLayer(this._id)&&this._map.removeLayer(this._id))},p.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},s}(t.PureComponent);o(g,"displayName","Layer"),o(g,"defaultProps",{radius:0});var y=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_id",void 0),o(a(t),"_map",void 0),t}n(r,e);var i=r.prototype;return i.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},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.getLayer(this._id)&&this._map.removeLayer(this._id)},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(y,"displayName","CustomLayer");var _=[g,y],v=function(t){return _.includes(t.type)},b=function(e){var o=[];return function e(o,r){t.Children.forEach(r,(function(t){t&&(v(t)&&o(t),t.props&&t.props.children&&e(o,t.props.children))}))}((function(t){t.props.before||o.push(function(t){return t.props.id||t.props.layer.id}(t))}),e),o},w=function(e){function i(r){var n;return o(a(n=e.call(this,r)||this),"_map",void 0),o(a(n),"_container",void 0),o(a(n),"state",{loaded:!1}),o(a(n),"_onViewportChange",(function(t){if(t.originalEvent){var e=n._map,o=e.getCenter(),r=o.lng,i={latitude:o.lat,longitude:r,zoom:e.getZoom(),pitch:e.getPitch(),bearing:e.getBearing()};n.props.onViewportChange(i)}})),c&&(c.accessToken=r.accessToken),n._container=t.createRef(),n}n(i,e);var p=i.prototype;return p.componentDidMount=function(){var t=this;if(c){var e=this._container.current,o=new c.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)),u.forEach((function(e){var r="on"+h(e),n=t.props[r];n&&(Array.isArray(n)?o.on.apply(o,[e].concat(s(n))):o.on(e,n))})),this.props.cursorStyle&&(o.getCanvas().style.cursor=this.props.cursorStyle),this.props.showTileBoundaries&&(this._map.showTileBoundaries=this.props.showTileBoundaries)}},p.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)},p.componentWillUnmount=function(){this._map&&this._map.remove()},p.getMap=function(){return this._map},p._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})}))}))},p._updateMapViewport=function(t,e){var o=this._map,n=o.getCenter();if(e.latitude!==t.latitude&&e.latitude!==n.lat||e.longitude!==t.longitude&&e.longitude!==n.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 i={center:[e.longitude,e.latitude],zoom:e.zoom,pitch:e.pitch,bearing:e.bearing},a=this.props,s=a.viewportChangeMethod,p=r({},a.viewportChangeOptions,i);switch(s){case"flyTo":o.flyTo(p);break;case"jumpTo":o.jumpTo(p);break;case"easeTo":o.easeTo(p);break;default:throw new Error("Unknown viewport change method")}}},p._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()},p.render=function(){var e=this.state.loaded,o=this.props,r=o.className,n=o.style,i=this.props.children?function(e){var o=b(e);o.shift();return function e(r){return"function"==typeof r?r:t.Children.map(r,(function(r){if(!r)return r;if(v(r)){var n=r.props.before||o.shift();return t.cloneElement(r,{before:n})}return r.props&&r.props.children?t.cloneElement(r,{children:e(r.props.children)}):r}))}(e)}(this.props.children):null;return t.createElement(l.Provider,{value:this._map},t.createElement("div",{ref:this._container,style:n,className:r},e&&i))},i}(t.PureComponent);o(w,"displayName","MapGL"),o(w,"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=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},S=function(t){switch(t.type){case"vector":return r({type:"vector"},t);case"raster":return r({type:"raster"},t);case"raster-dem":return r({type:"raster-dem"},t);case"geojson":return r({type:"geojson"},t);case"video":return r({type:"video"},t);case"image":return r({type:"image"},t);default:throw new Error("Unknown type for '"+t.id+"' Source")}},x=function(e){function s(){for(var t,n=arguments.length,i=new Array(n),s=0;s<n;s++)i[s]=arguments[s];return o(a(t=e.call.apply(e,[this].concat(i))||this),"_map",void 0),o(a(t),"state",{loaded:!1}),o(a(t),"_onSourceData",(function(){t._map.isSourceLoaded(t.props.id)&&(t._map.off("sourcedata",t._onSourceData),t.setState({loaded:!0}))})),o(a(t),"_updateGeoJSONSource",(function(e,o,r){if(r.data!==o.data){var n=t._map.getSource(e);void 0!==n&&n.setData(r.data)}})),o(a(t),"_updateImageSource",(function(e,o,r){if(r.url!==o.url||r.coordinates!==o.coordinates){var n=t._map.getSource(e);void 0!==n&&n.updateImage(r)}})),o(a(t),"_updateTileSource",(function(e,o,n){if(n.url!==o.url||!C(n.tiles,o.tiles)){var i=t._map.getSource(e);i._tileJSONRequest&&i._tileJSONRequest.cancel(),i.url=n.url,i.scheme=n.scheme,i._options=r({},i._options,n);var a=t._map.style.sourceCaches[e];a&&a.clearTiles(),i.load()}})),o(a(t),"_removeSource",(function(){var e=t.props.id;if(t._map.getSource(e)){var o=t._map.getStyle().layers;o&&o.forEach((function(o){o.source===e&&t._map.removeLayer(o.id)})),t._map.removeSource(e)}})),t}n(s,e);var p=s.prototype;return p.componentDidMount=function(){var t=this.props,e=t.id,o=(t.children,i(t,["id","children"])),r=S(o);this._map.addSource(e,r),this._map.on("sourcedata",this._onSourceData)},p.componentDidUpdate=function(t){var e=t.id,o=(t.children,i(t,["id","children"])),r=S(o),n=this.props,a=n.id,s=(n.children,i(n,["id","children"])),p=S(s);if(a!==e||p.type!==r.type)return this._map.removeSource(e),void this._map.addSource(a,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(a,r,p):this._updateTileSource(a,r,p):this._updateImageSource(a,r,p):this._updateGeoJSONSource(a,r,p)},p.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._removeSource()},p.render=function(){var e=this,o=this.state.loaded,r=this.props.children;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),o&&r}))},s}(t.PureComponent);o(x,"displayName","Source");var L=function(r){function i(t){var e;return o(a(e=r.call(this,t)||this),"_map",void 0),o(a(e),"_el",void 0),o(a(e),"_popup",void 0),e._el=document.createElement("div"),e}n(i,r);var s=i.prototype;return s.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 c.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)},s.componentDidUpdate=function(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._popup.setLngLat([this.props.longitude,this.props.latitude])},s.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._popup.remove()},s.getPopup=function(){return this._popup},s.render=function(){var o=this;return t.createElement(l.Consumer,{},(function(t){return t&&(o._map=t),e.createPortal(o.props.children,o._el)}))},i}(t.PureComponent);o(L,"displayName","Popup"),o(L,"defaultProps",{closeButton:!0,closeOnClick:!0,onClose:null,anchor:null,offset:null,className:null,maxWidth:"240px"});var k=function(r){function i(t){var e;return o(a(e=r.call(this,t)||this),"_map",void 0),o(a(e),"_el",void 0),o(a(e),"_marker",void 0),o(a(e),"_onDragEnd",(function(){e.props.onDragEnd(e._marker.getLngLat())})),o(a(e),"_onDragStart",(function(){e.props.onDragStart(e._marker.getLngLat())})),o(a(e),"_onDrag",(function(){e.props.onDrag(e._marker.getLngLat())})),e._el=document.createElement("div"),e}n(i,r);var s=i.prototype;return s.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 c.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)},s.componentDidUpdate=function(t){(t.latitude!==this.props.latitude||t.longitude!==this.props.longitude)&&this._marker.setLngLat([this.props.longitude,this.props.latitude])},s.componentWillUnmount=function(){this._map&&this._map.getStyle()&&(this.props.onClick&&this._el.removeEventListener("click",this.props.onClick),this._marker.remove())},s.getMarker=function(){return this._marker},s.render=function(){var o=this;return t.createElement(l.Consumer,{},(function(t){return t&&(o._map=t),e.createPortal(o.props.children,o._el)}))},i}(t.PureComponent);o(k,"displayName","Marker"),o(k,"defaultProps",{anchor:"center",offset:null,draggable:!1,rotation:0,pitchAlignment:"auto",rotationAlignment:"auto"});var T=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),t}n(r,e);var i=r.prototype;return i.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)},i.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))},i.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})}},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent),E=function(e){function r(t){var r;return o(a(r=e.call(this,t)||this),"_map",void 0),o(a(r),"_id",void 0),o(a(r),"_loadImage",(function(t,e){"string"!=typeof t?e(t):r._map.loadImage(t,(function(t,o){if(t)throw t;e(o)}))})),r._id=t.id,r}n(r,e);var i=r.prototype;return i.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})}))},i.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)}))},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.hasImage(this._id)&&this._map.removeImage(this._id)},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(E,"defaultProps",{pixelRatio:1,sdf:!1});var P=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){var t=this._map,e=this.props,o=e.compact,r=e.customAttribution,n=e.position,i=new c.AttributionControl({compact:o,customAttribution:r});t.addControl(i,n),this._control=i},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(P,"defaultProps",{position:"bottom-right"});var D=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){var t=this._map,e=this.props,o=e.container,r=e.position,n=new c.FullscreenControl({container:o});t.addControl(n,r),this._control=n},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(D,"defaultProps",{position:"top-right"});var O=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),t}n(r,e);var i=r.prototype;return i.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,u=e.onGeolocate,h=new c.GeolocateControl({positionOptions:o,fitBoundsOptions:r,trackUserLocation:n,showUserLocation:i});s&&h.on("trackuserlocationend",s),p&&h.on("trackuserlocationstart",p),l&&h.on("error",l),u&&h.on("geolocate",u),t.addControl(h,a),this._control=h},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(O,"defaultProps",{positionOptions:{enableHighAccuracy:!1,timeout:6e3},fitBoundsOptions:{maxZoom:15},trackUserLocation:!1,showUserLocation:!0});var j=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){var t=this._map,e=this.props,o=e.showCompass,r=e.showZoom,n=e.position,i=new c.NavigationControl({showCompass:o,showZoom:r});t.addControl(i,n),this._control=i},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(j,"defaultProps",{position:"top-right"});var U=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){var t=this._map,e=this.props,o=e.maxWidth,r=e.unit,n=e.position,i=new c.ScaleControl({maxWidth:o,unit:r});t.addControl(i,n),this._control=i},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);function M(t,e){return t(e={exports:{}},e.exports),e.exports}o(U,"defaultProps",{position:"bottom-right",unit:"metric"});var A=M((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})),F=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),o(a(t),"_setLanguage",(function(){var e=t.props.language,o=t._map,r=t._control;e&&o.setStyle(r.setLanguage(o.getStyle(),e))})),t}n(r,e);var i=r.prototype;return i.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 A({supportedLanguages:o,languageTransform:r,languageField:n,getLanguageField:i,languageSource:a,defaultLanguage:s});t.addControl(p),this._control=p},i.componentDidUpdate=function(t){t.language!==this.props.language&&this._setLanguage()},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(F,"defaultProps",{});var I=M((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(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),o(a(t),"_control",void 0),o(a(t),"_addControl",(function(){var e=t.props,o=e.showTraffic,r=e.showTrafficButton,n=e.trafficSource,i=new I({showTraffic:o,showTrafficButton:r,trafficSource:n});t._map.addControl(i),t._control=i})),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){this._addControl()},i.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())},i.componentWillUnmount=function(){this._map&&this._map.getStyle()&&this._map.removeControl(this._control)},i.getControl=function(){return this._control},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(z,"defaultProps",{showTraffic:!1,showTrafficButton:!0,trafficSource:/mapbox-traffic-v\d/});var R=function(e){function r(){for(var t,r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return o(a(t=e.call.apply(e,[this].concat(n))||this),"_map",void 0),t}n(r,e);var i=r.prototype;return i.componentDidMount=function(){this._setFilter()},i.componentDidUpdate=function(t){var e=t.filter,o=t.validate,r=this.props,n=r.filter,i=r.validate;(!C(e,n)||o!==i)&&this._setFilter()},i.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)}},i._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))},i.render=function(){var e=this;return t.createElement(l.Consumer,{},(function(t){return t&&(e._map=t),null}))},r}(t.PureComponent);o(R,"defaultProps",{validate:!0}),exports.AttributionControl=P,exports.CustomLayer=y,exports.FeatureState=T,exports.Filter=R,exports.FullscreenControl=D,exports.GeolocateControl=O,exports.Image=E,exports.LanguageControl=F,exports.Layer=g,exports.MapContext=l,exports.Marker=k,exports.NavigationControl=j,exports.Popup=L,exports.ScaleControl=U,exports.Source=x,exports.TrafficControl=z,exports.default=w; //# sourceMappingURL=react-map-gl.cjs.js.map