From 009910cffe940adeb54d6577d7db9c21600a79c8 Mon Sep 17 00:00:00 2001 From: Pessimistress Date: Fri, 29 Jan 2021 18:16:31 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=2036263?= =?UTF-8?q?d9f1b5be60dcf33035589e35cbe82de28df=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js | 2 -- ...e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js | 2 ++ ...81c8da985f3febdc31697d-e356d2e7a3916880fbf2.js.LICENSE.txt | 0 docs/advanced/custom-components/index.html | 4 ++-- docs/advanced/custom-map-controller/index.html | 4 ++-- docs/advanced/viewport-transition/index.html | 4 ++-- docs/api-reference/attribution-control/index.html | 4 ++-- docs/api-reference/canvas-overlay/index.html | 2 +- docs/api-reference/fly-to-interpolator/index.html | 4 ++-- docs/api-reference/fullscreen-control/index.html | 4 ++-- docs/api-reference/geolocate-control/index.html | 4 ++-- docs/api-reference/html-overlay/index.html | 2 +- docs/api-reference/interactive-map/index.html | 4 ++-- docs/api-reference/layer/index.html | 4 ++-- docs/api-reference/linear-interpolator/index.html | 4 ++-- docs/api-reference/map-context/index.html | 4 ++-- docs/api-reference/map-controller/index.html | 2 +- docs/api-reference/marker/index.html | 4 ++-- docs/api-reference/navigation-control/index.html | 4 ++-- docs/api-reference/pointer-event/index.html | 2 +- docs/api-reference/popup/index.html | 4 ++-- docs/api-reference/scale-control/index.html | 4 ++-- docs/api-reference/source/index.html | 4 ++-- docs/api-reference/static-map/index.html | 4 ++-- docs/api-reference/svg-overlay/index.html | 2 +- docs/api-reference/web-mercator-viewport/index.html | 4 ++-- docs/contributing/index.html | 4 ++-- docs/get-started/adding-custom-data/index.html | 4 ++-- docs/get-started/faq/index.html | 4 ++-- docs/get-started/get-started/index.html | 4 ++-- docs/get-started/mapbox-tokens/index.html | 4 ++-- docs/get-started/state-management/index.html | 4 ++-- docs/index.html | 4 ++-- docs/upgrade-guide/index.html | 4 ++-- docs/whats-new/index.html | 4 ++-- examples/clusters/index.html | 2 +- examples/controls/index.html | 2 +- examples/custom-cursor/index.html | 2 +- examples/draggable-markers/index.html | 2 +- examples/draw-polygon/index.html | 2 +- examples/filter/index.html | 2 +- examples/geojson-animation/index.html | 2 +- examples/geojson/index.html | 2 +- examples/heatmap/index.html | 2 +- examples/index.html | 2 +- examples/interaction/index.html | 2 +- examples/layers/index.html | 2 +- examples/locate-user/index.html | 2 +- examples/viewport-animation/index.html | 2 +- examples/zoom-to-bounds/index.html | 2 +- index.html | 2 +- page-data/app-data.json | 2 +- page-data/docs/get-started/faq/page-data.json | 2 +- search/index.html | 2 +- ...cb1c3efe550d.js => webpack-runtime-a47292676d6534678190.js | 2 +- webpack.stats.json | 2 +- 56 files changed, 82 insertions(+), 82 deletions(-) delete mode 100644 76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js create mode 100644 76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js rename 76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js.LICENSE.txt => 76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js.LICENSE.txt (100%) rename webpack-runtime-8ddac0bbcb1c3efe550d.js => webpack-runtime-a47292676d6534678190.js (98%) diff --git a/76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js b/76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js deleted file mode 100644 index e2ead88e..00000000 --- a/76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{"+qjn":function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return Ue})),n.d(e,"InteractiveMap",(function(){return Ue})),n.d(e,"StaticMap",(function(){return mt})),n.d(e,"Source",(function(){return Ye})),n.d(e,"Layer",(function(){return nn})),n.d(e,"BaseControl",(function(){return cn})),n.d(e,"Marker",(function(){return wn})),n.d(e,"Popup",(function(){return kn})),n.d(e,"AttributionControl",(function(){return An})),n.d(e,"FullscreenControl",(function(){return Vn})),n.d(e,"GeolocateControl",(function(){return Xn})),n.d(e,"NavigationControl",(function(){return er})),n.d(e,"ScaleControl",(function(){return or})),n.d(e,"CanvasOverlay",(function(){return cr})),n.d(e,"HTMLOverlay",(function(){return hr})),n.d(e,"SVGOverlay",(function(){return dr})),n.d(e,"TRANSITION_EVENTS",(function(){return Nt})),n.d(e,"TransitionInterpolator",(function(){return wt})),n.d(e,"LinearInterpolator",(function(){return Lt})),n.d(e,"FlyToInterpolator",(function(){return Ct})),n.d(e,"MapController",(function(){return ke})),n.d(e,"WebMercatorViewport",(function(){return F})),n.d(e,"setRTLTextPlugin",(function(){return vr})),n.d(e,"MapContext",(function(){return ut})),n.d(e,"_useMapControl",(function(){return an})),n.d(e,"_MapContext",(function(){return ut}));var r=n("KQm4");function i(){return(i=Object.assign||function(t){for(var e=1;e=-90&&r<=90,"invalid latitude");var i=r*M;return[512*(n*M+P)/(2*P),512*(P+Math.log(Math.tan(_+.5*i)))/(2*P)]}function D(t){var e=Object(v.a)(t,2),n=e[0],r=e[1],i=n/512*(2*P)-P,o=2*(Math.atan(Math.exp(r/512*(2*P)-P))-_);return[i*S,o*S]}function C(t){var e=t.latitude,n=t.longitude,r=t.highPrecision,i=void 0!==r&&r;E(Number.isFinite(e)&&Number.isFinite(n));var o={},a=Math.cos(e*M),s=512/360/a,c=512/4003e4/a;if(o.unitsPerMeter=[c,c,c],o.metersPerUnit=[1/c,1/c,1/c],o.unitsPerDegree=[512/360,s,c],o.degreesPerUnit=[.703125,1/s,1/c],i){var u=M*Math.tan(e*M)/a,l=512/360*u/2,h=512/4003e4*u,p=h/s*c;o.unitsPerDegree2=[0,l,h],o.unitsPerMeter2=[p,0,p]}return o}function I(t){var e=t.height,n=t.pitch,r=t.bearing,i=t.altitude,o=t.scale,a=t.center,s=void 0===a?null:a,c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return O.h(c,c,[0,0,-i]),O.e(c,c,-n*M),O.f(c,c,r*M),o/=e,O.g(c,c,[o,o,o]),s&&O.h(c,c,j.a([],s)),c}function A(t){var e=t.width,n=t.height,r=t.pitch,i=function(t){var e=t.width,n=t.height,r=t.altitude,i=void 0===r?1.5:r,o=t.pitch,a=void 0===o?0:o,s=t.nearZMultiplier,c=void 0===s?1:s,u=t.farZMultiplier,l=void 0===u?1:u,h=a*M,p=Math.atan(.5/i),f=Math.sin(p)*i/Math.sin(Math.PI/2-h-p);return{fov:2*p,aspect:e/n,focalDistance:i,near:c,far:(Math.cos(Math.PI/2-h)*f+i)*l}}({width:e,height:n,altitude:t.altitude,pitch:r,nearZMultiplier:t.nearZMultiplier,farZMultiplier:t.farZMultiplier}),o=i.fov,a=i.aspect,s=i.near,c=i.far;return O.d([],o,a,s,c)}function R(t,e){var n=Object(v.a)(t,3),r=n[0],i=n[1],o=n[2],a=void 0===o?0:o;return E(Number.isFinite(r)&&Number.isFinite(i)&&Number.isFinite(a)),b(e,[r,i,a,1])}function L(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=Object(v.a)(t,3),i=r[0],o=r[1],a=r[2];if(E(Number.isFinite(i)&&Number.isFinite(o),"invalid pixel coordinate"),Number.isFinite(a)){var s=b(e,[i,o,a,1]);return s}var c=b(e,[i,o,0,1]),u=b(e,[i,o,1,1]),l=c[2],h=u[2],p=l===h?0:((n||0)-l)/(h-l);return w.c([],c,u,p)}var z=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function N(t){var e=t.width,n=t.height,r=t.bounds,i=t.minExtent,o=void 0===i?0:i,a=t.maxZoom,s=void 0===a?24:a,c=t.padding,u=void 0===c?0:c,l=t.offset,h=void 0===l?[0,0]:l,p=Object(v.a)(r,2),f=Object(v.a)(p[0],2),d=f[0],g=f[1],b=Object(v.a)(p[1],2),m=b[0],y=b[1];if(Number.isFinite(u)){u={top:u,bottom:u,left:u,right:u}}else E(Number.isFinite(u.top)&&Number.isFinite(u.bottom)&&Number.isFinite(u.left)&&Number.isFinite(u.right));var O=new F({width:e,height:n,longitude:0,latitude:0,zoom:0}),w=O.project([d,y]),j=O.project([m,g]),P=[Math.max(Math.abs(j[0]-w[0]),o),Math.max(Math.abs(j[1]-w[1]),o)],_=[e-u.left-u.right-2*Math.abs(h[0]),n-u.top-u.bottom-2*Math.abs(h[1])];E(_[0]>0&&_[1]>0);var M=_[0]/P[0],S=_[1]/P[1],x=(u.right-u.left)/2/M,T=(u.bottom-u.top)/2/S,k=[(j[0]+w[0])/2+x,(j[1]+w[1])/2+T],D=O.unproject(k),C=Math.min(s,O.zoom+Math.log2(Math.abs(Math.min(M,S))));return E(Number.isFinite(C)),{longitude:D[0],latitude:D[1],zoom:C}}var F=function(t){function e(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.width,i=n.height,o=n.latitude,a=void 0===o?0:o,s=n.longitude,u=void 0===s?0:s,l=n.zoom,d=void 0===l?0:l,v=n.pitch,g=void 0===v?0:v,b=n.bearing,m=void 0===b?0:b,y=n.altitude,O=void 0===y?1.5:y,w=n.nearZMultiplier,j=void 0===w?.02:w,E=n.farZMultiplier,P=void 0===E?1.01:E;Object(c.a)(this,e),r=r||1,i=i||1;var _=x(d);O=Math.max(.75,O);var M=k([u,a]);M[2]=0;var S=A({width:r,height:i,pitch:g,bearing:m,altitude:O,nearZMultiplier:j,farZMultiplier:P}),T=I({height:i,scale:_,center:M,pitch:g,bearing:m,altitude:O});return(t=p(this,f(e).call(this,{width:r,height:i,scale:_,viewMatrix:T,projectionMatrix:S}))).latitude=a,t.longitude=u,t.zoom=d,t.pitch=g,t.bearing=m,t.altitude=O,t.center=M,t.unitsPerMeter=C(Object(h.a)(t)).unitsPerMeter[2],Object.freeze(Object(h.a)(t)),t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&d(t,e)}(e,t),Object(u.a)(e,[{key:"projectFlat",value:function(t){return k(t)}},{key:"unprojectFlat",value:function(t){return D(t)}},{key:"getMapCenterByLngLatPosition",value:function(t){var e=t.lngLat,n=L(t.pos,this.pixelUnprojectionMatrix),r=k(e),i=w.a([],r,w.d([],n));return D(w.a([],this.center,i),this.scale)}},{key:"getLocationAtPoint",value:function(t){var e=t.lngLat,n=t.pos;return this.getMapCenterByLngLatPosition({lngLat:e,pos:n})}},{key:"fitBounds",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.width,i=this.height,o=N(Object.assign({width:r,height:i,bounds:t},n)),a=o.longitude,s=o.latitude,c=o.zoom;return new e({width:r,height:i,longitude:a,latitude:s,zoom:c})}}]),e}(function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.width,r=e.height,i=e.scale,o=e.viewMatrix,a=void 0===o?z:o,s=e.projectionMatrix,u=void 0===s?z:s;Object(c.a)(this,t),this.width=n||1,this.height=r||1,this.scale=i,this.unitsPerMeter=1,this.viewMatrix=a,this.projectionMatrix=u;var l=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];O.c(l,l,this.projectionMatrix),O.c(l,l,this.viewMatrix),this.viewProjectionMatrix=l;var h=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];O.g(h,h,[this.width/2,-this.height/2,1]),O.h(h,h,[1,-1,0]),O.c(h,h,this.viewProjectionMatrix);var p=O.b([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],h);if(!p)throw new Error("Pixel project matrix not invertible");this.pixelProjectionMatrix=h,this.pixelUnprojectionMatrix=p,this.equals=this.equals.bind(this),this.project=this.project.bind(this),this.unproject=this.unproject.bind(this),this.projectPosition=this.projectPosition.bind(this),this.unprojectPosition=this.unprojectPosition.bind(this),this.projectFlat=this.projectFlat.bind(this),this.unprojectFlat=this.unprojectFlat.bind(this)}return Object(u.a)(t,[{key:"equals",value:function(e){return e instanceof t&&(e.width===this.width&&e.height===this.height&&O.a(e.projectionMatrix,this.projectionMatrix)&&O.a(e.viewMatrix,this.viewMatrix))}},{key:"project",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=this.projectPosition(t),o=R(i,this.pixelProjectionMatrix),a=Object(v.a)(o,2),s=a[0],c=a[1],u=r?c:this.height-c;return 2===t.length?[s,u]:[s,u,o[2]]}},{key:"unproject",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=e.targetZ,o=Object(v.a)(t,3),a=o[0],s=o[1],c=o[2],u=r?s:this.height-s,l=i&&i*this.unitsPerMeter,h=L([a,u,c],this.pixelUnprojectionMatrix,l),p=this.unprojectPosition(h),f=Object(v.a)(p,3),d=f[0],g=f[1],b=f[2];return Number.isFinite(c)?[d,g,b]:Number.isFinite(i)?[d,g,i]:[d,g]}},{key:"projectPosition",value:function(t){var e=this.projectFlat(t),n=Object(v.a)(e,2);return[n[0],n[1],(t[2]||0)*this.unitsPerMeter]}},{key:"unprojectPosition",value:function(t){var e=this.unprojectFlat(t),n=Object(v.a)(e,2);return[n[0],n[1],(t[2]||0)/this.unitsPerMeter]}},{key:"projectFlat",value:function(t){arguments.length>1&&void 0!==arguments[1]||this.scale;return t}},{key:"unprojectFlat",value:function(t){arguments.length>1&&void 0!==arguments[1]||this.scale;return t}}]),t}());var V=["longitude","latitude","zoom"],Z={curve:1.414,speed:1.2};function B(t,e,n){var r=(n=Object.assign({},Z,n)).curve,i=t.zoom,o=[t.longitude,t.latitude],a=x(i),s=e.zoom,c=[e.longitude,e.latitude],u=x(s-i),l=k(o),h=k(c),p=w.f([],h,l),f=Math.max(t.width,t.height),d=f/u,v=w.b(p)*a,g=Math.max(v,.01),b=r*r,m=(d*d-f*f+b*b*g*g)/(2*f*b*g),y=(d*d-f*f-b*b*g*g)/(2*d*b*g),O=Math.log(Math.sqrt(m*m+1)-m),j=Math.log(Math.sqrt(y*y+1)-y);return{startZoom:i,startCenterXY:l,uDelta:p,w0:f,u1:v,S:(j-O)/r,rho:r,rho2:b,r0:O,r1:j}}var U=n("iXzu"),q=n("9jAm"),W=n("bhPm"),H=n.n(W);function X(t){return Array.isArray(t)||ArrayBuffer.isView(t)}function Y(t,e){if(t===e)return!0;if(X(t)&&X(e)){if(t.length!==e.length)return!1;for(var n=0;n0,"`scale` must be a positive number");var i=this._state,o=i.startZoom,a=i.startZoomLngLat;Number.isFinite(o)||(o=this._viewportProps.zoom,a=this._unproject(n)||this._unproject(e)),Q(a,"`startZoomLngLat` prop is required for zoom behavior to calculate where to position the map.");var s=this._calculateNewZoom({scale:r,startZoom:o||0}),c=new F(Object.assign({},this._viewportProps,{zoom:s})).getMapCenterByLngLatPosition({lngLat:a,pos:e}),u=c[0],l=c[1];return this._getUpdatedMapState({zoom:s,longitude:u,latitude:l})},e.zoomEnd=function(){return this._getUpdatedMapState({startZoomLngLat:null,startZoom:null})},e._getUpdatedMapState=function(e){return new t(Object.assign({},this._viewportProps,this._state,e))},e._applyConstraints=function(t){var e=t.maxZoom,n=t.minZoom,r=t.zoom;t.zoom=G(r,n,e);var i=t.maxPitch,o=t.minPitch,a=t.pitch;return t.pitch=G(a,o,i),Object.assign(t,function(t){var e=t.width,n=t.height,r=t.longitude,i=t.latitude,o=t.zoom,a=t.pitch,s=void 0===a?0:a,c=t.bearing,u=void 0===c?0:c;(r<-180||r>180)&&(r=m(r+180,360)-180),(u<-180||u>180)&&(u=m(u+180,360)-180);var l=new F({width:e,height:n,longitude:r,latitude:i,zoom:o}),h=l.project([r,85.05113])[1],p=l.project([r,-85.05113])[1],f=0;return p-h0?f=h:p0?c=i+n*(s-i):n<0&&(c=i-n*(a-i)),{pitch:c,bearing:r+180*e}},e._getRotationParams=function(t,e){var n=t[0]-e[0],r=t[1]-e[1],i=t[1],o=e[1],a=this._viewportProps,s=a.width,c=a.height,u=n/s,l=0;return r>0?Math.abs(c-o)>5&&(l=r/(o-c)*1.2):r<0&&o>5&&(l=1-i/o),{deltaScaleX:u,deltaScaleY:l=Math.min(1,Math.max(-1,l))}},t}();function ot(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function at(t){for(var e=1;ee[n])return!1}var o;return!0}(t.viewState||t,y),j=Object.assign({},ft,{visibility:w?"inherit":"hidden"});return a.createElement("div",{key:"map-container",ref:h,style:O},a.createElement("div",{key:"map-mapbox",ref:l,style:j,className:v}),d,!r&&!t.disableTokenWarning&&a.createElement(vt,null))}));bt.supported=function(){return H.a&&H.a.supported()},bt.defaultProps=dt;var mt=bt;function yt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Ot(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Ot(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function Ot(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n180&&(n=n<0?n+360:n-360),n}function Mt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return St(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return St(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function St(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n3&&void 0!==arguments[3]?arguments[3]:{},i={},o=B(t,e,r),a=o.startZoom,s=o.startCenterXY,c=o.uDelta,u=o.w0,l=o.u1,h=o.S,p=o.rho,f=o.rho2,d=o.r0;if(l<.01){var v=!0,g=!1,b=void 0;try{for(var m,O=V[Symbol.iterator]();!(v=(m=O.next()).done);v=!0){var j=m.value,E=t[j],P=e[j];i[j]=y(E,P,n)}}catch(A){g=!0,b=A}finally{try{v||null==O.return||O.return()}finally{if(g)throw b}}return i}var _=n*h,M=Math.cosh(d)/Math.cosh(d+p*_),S=u*((Math.cosh(d)*Math.tanh(d+p*_)-Math.sinh(d))/f)/l,x=1/M,k=a+T(x),C=w.e([],c,S);w.a(C,C,s);var I=D(C);return i.longitude=I[0],i.latitude=I[1],i.zoom=k,i}(t,e,n,this.props),o=Mt(kt);!(r=o()).done;){var a=r.value;i[a]=K(t[a],e[a],n)}return i},n.getDuration=function(t,e){var n=e.transitionDuration;return"auto"===n&&(n=function(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r=Object.assign({},Z,r),o=i.screenSpeed,a=i.speed,s=i.maxDuration,c=B(t,e,r),u=c.S,l=c.rho,h=1e3*u;return n=Number.isFinite(o)?h/(o/l):h/a,Number.isFinite(s)&&n>s?0:n}(t,e,this.props)),n},e}(wt);function It(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return At(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return At(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function At(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0||"auto"===e)&&Boolean(n)},e._isUpdateDueToCurrentTransition=function(t){return!!this.state.propsInTransition&&this.state.interpolator.arePropsEqual(t,this.state.propsInTransition)},e._shouldIgnoreViewportChange=function(t,e){return!t||(this._isTransitionInProgress()?this.state.interruption===Nt.IGNORE||this._isUpdateDueToCurrentTransition(e):!this._isTransitionEnabled(e)||e.transitionInterpolator.arePropsEqual(t,e))},e._triggerTransition=function(t,e){Q(this._isTransitionEnabled(e)),this._animationFrame&&cancelAnimationFrame(this._animationFrame);var n=e.transitionInterpolator,r=n.getDuration?n.getDuration(t,e):e.transitionDuration;if(0!==r){var i=e.transitionInterpolator.initializeProps(t,e),o={inTransition:!0,isZooming:t.zoom!==e.zoom,isPanning:t.longitude!==e.longitude||t.latitude!==e.latitude,isRotating:t.bearing!==e.bearing||t.pitch!==e.pitch};this.state={duration:r,easing:e.transitionEasing,interpolator:e.transitionInterpolator,interruption:e.transitionInterruption,startTime:this.time(),startProps:i.start,endProps:i.end,animation:null,propsInTransition:{}},this._onTransitionFrame(),this.onStateChange(o)}},e._endTransition=function(){this._animationFrame&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this.onStateChange({inTransition:!1,isZooming:!1,isPanning:!1,isRotating:!1})},e._updateViewport=function(){var t=this.time(),e=this.state,n=e.startTime,r=e.duration,i=e.easing,o=e.interpolator,a=e.startProps,s=e.endProps,c=!1,u=(t-n)/r;u>=1&&(u=1,c=!0),u=i(u);var l=o.interpolateProps(a,s,u),h=new it(Object.assign({},this.props,l));this.state.propsInTransition=h.getViewportProps(),this.onViewportChange(this.state.propsInTransition,this.props),c&&(this._endTransition(),this.props.onTransitionEnd())},t}();Object(o.a)(Vt,"defaultProps",Ft);var Zt,Bt,Ut=n("QFtD"),qt=n.n(Ut),Wt={mousedown:1,mousemove:2,mouseup:4};Zt=qt.a.PointerEventInput,Bt=Zt.prototype.handler,Zt.prototype.handler=function(t){var e=this.store;t.button>0&&(function(t,e){for(var n=0;n=0&&(this.pressed=!0),2&e&&0===t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))};var Ht=qt.a.Manager,Xt=qt.a,Yt=Xt?[[Xt.Pan,{event:"tripan",pointers:3,threshold:0,enable:!1}],[Xt.Rotate,{enable:!1}],[Xt.Pinch,{enable:!1}],[Xt.Swipe,{enable:!1}],[Xt.Pan,{threshold:0,enable:!1}],[Xt.Press,{enable:!1}],[Xt.Tap,{event:"doubletap",taps:2,enable:!1}],[Xt.Tap,{event:"anytap",enable:!1}],[Xt.Tap,{enable:!1}]]:null,Gt={tripan:["rotate","pinch","pan"],rotate:["pinch"],pinch:["pan"],pan:["press","doubletap","anytap","tap"],doubletap:["anytap"],anytap:["tap"]},Kt={doubletap:["tap"]},Qt={pointerdown:"pointerdown",pointermove:"pointermove",pointerup:"pointerup",touchstart:"pointerdown",touchmove:"pointermove",touchend:"pointerup",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup"},Jt=["keydown","keyup"],$t=["mousedown","mousemove","mouseup","mouseover","mouseout","mouseleave"],te=["wheel","mousewheel","DOMMouseScroll"],ee={tap:"tap",anytap:"anytap",doubletap:"doubletap",press:"press",pinch:"pinch",pinchin:"pinch",pinchout:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",tripan:"tripan",tripanstart:"tripan",tripanmove:"tripan",tripanup:"tripan",tripandown:"tripan",tripanleft:"tripan",tripanright:"tripan",tripanend:"tripan",tripancancel:"tripan",pan:"pan",panstart:"pan",panmove:"pan",panup:"pan",pandown:"pan",panleft:"pan",panright:"pan",panend:"pan",pancancel:"pan",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe"},ne={click:"tap",anyclick:"anytap",dblclick:"doubletap",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup",mouseover:"pointerover",mouseout:"pointerout",mouseleave:"pointerleave"},re=n("ExcP"),ie=-1!==re.b.indexOf("firefox"),oe=te,ae=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.events=oe.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent,!!re.a&&{passive:!1})}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"wheel"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){if(this.options.enable){var e=t.deltaY;re.c.WheelEvent&&(ie&&t.deltaMode===re.c.WheelEvent.DOM_DELTA_PIXEL&&(e/=re.c.devicePixelRatio),t.deltaMode===re.c.WheelEvent.DOM_DELTA_LINE&&(e*=40));var n={x:t.clientX,y:t.clientY};0!==e&&e%4.000244140625==0&&(e=Math.floor(e/4.000244140625)),t.shiftKey&&e&&(e*=.25),this._onWheel(t,-e,n)}}},{key:"_onWheel",value:function(t,e,n){this.callback({type:"wheel",center:n,delta:e,srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),se=$t,ce=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.pressed=!1,this.options=Object.assign({enable:!0},i),this.enableMoveEvent=this.options.enable,this.enableLeaveEvent=this.options.enable,this.enableOutEvent=this.options.enable,this.enableOverEvent=this.options.enable,this.events=se.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"pointermove"===t&&(this.enableMoveEvent=e),"pointerover"===t&&(this.enableOverEvent=e),"pointerout"===t&&(this.enableOutEvent=e),"pointerleave"===t&&(this.enableLeaveEvent=e)}},{key:"handleEvent",value:function(t){this.handleOverEvent(t),this.handleOutEvent(t),this.handleLeaveEvent(t),this.handleMoveEvent(t)}},{key:"handleOverEvent",value:function(t){this.enableOverEvent&&"mouseover"===t.type&&this.callback({type:"pointerover",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleOutEvent",value:function(t){this.enableOutEvent&&"mouseout"===t.type&&this.callback({type:"pointerout",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleLeaveEvent",value:function(t){this.enableLeaveEvent&&"mouseleave"===t.type&&this.callback({type:"pointerleave",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleMoveEvent",value:function(t){if(this.enableMoveEvent)switch(t.type){case"mousedown":t.button>=0&&(this.pressed=!0);break;case"mousemove":0===t.which&&(this.pressed=!1),this.pressed||this.callback({type:"pointermove",srcEvent:t,pointerType:"mouse",target:t.target});break;case"mouseup":this.pressed=!1}}}]),t}(),ue=Jt,le=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.enableDownEvent=this.options.enable,this.enableUpEvent=this.options.enable,this.events=ue.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),e.tabIndex=i.tabIndex||0,e.style.outline="none",this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"keydown"===t&&(this.enableDownEvent=e),"keyup"===t&&(this.enableUpEvent=e)}},{key:"handleEvent",value:function(t){var e=t.target||t.srcElement;"INPUT"===e.tagName&&"text"===e.type||"TEXTAREA"===e.tagName||(this.enableDownEvent&&"keydown"===t.type&&this.callback({type:"keydown",srcEvent:t,key:t.key,target:t.target}),this.enableUpEvent&&"keyup"===t.type&&this.callback({type:"keyup",srcEvent:t,key:t.key,target:t.target}))}}]),t}(),he=function(){function t(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},r),this.handleEvent=this.handleEvent.bind(this),e.addEventListener("contextmenu",this.handleEvent)}return Object(u.a)(t,[{key:"destroy",value:function(){this.element.removeEventListener("contextmenu",this.handleEvent)}},{key:"enableEventType",value:function(t,e){"contextmenu"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){this.options.enable&&this.callback({type:"contextmenu",center:{x:t.clientX,y:t.clientY},srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),pe={pointerdown:1,pointermove:2,pointerup:4,mousedown:1,mousemove:2,mouseup:4};var fe={srcElement:"root",priority:0},de=function(){function t(e){Object(c.a)(this,t),this.eventManager=e,this.handlers=[],this.handlersByElement=new Map,this.handleEvent=this.handleEvent.bind(this),this._active=!1}return Object(u.a)(t,[{key:"isEmpty",value:function(){return!this._active}},{key:"add",value:function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=this.handlers,a=this.handlersByElement;n&&("object"!==Object(l.a)(n)||n.addEventListener)&&(n={srcElement:n}),n=n?Object.assign({},fe,n):fe;var s=a.get(n.srcElement);s||(s=[],a.set(n.srcElement,s));var c={type:t,handler:e,srcElement:n.srcElement,priority:n.priority};r&&(c.once=!0),i&&(c.passive=!0),o.push(c),this._active=this._active||!c.passive;for(var u=s.length-1;u>=0&&!(s[u].priority>=c.priority);)u--;s.splice(u+1,0,c)}},{key:"remove",value:function(t,e){for(var n=this.handlers,r=this.handlersByElement,i=n.length-1;i>=0;i--){var o=n[i];if(o.type===t&&o.handler===e){n.splice(i,1);var a=r.get(o.srcElement);a.splice(a.indexOf(o),1),0===a.length&&r.delete(o.srcElement)}}this._active=n.some((function(t){return!t.passive}))}},{key:"handleEvent",value:function(t){if(!this.isEmpty()){for(var e=this._normalizeEvent(t),n=t.srcEvent.target;n&&n!==e.rootElement;){if(this._emit(e,n),e.handled)return;n=n.parentNode}this._emit(e,"root")}}},{key:"_emit",value:function(t,e){var n=this.handlersByElement.get(e);if(n){for(var r=!1,i=function(){t.handled=!0},o=function(){t.handled=!0,r=!0},a=[],s=0;s=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function ge(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object(c.a)(this,t),this.options=Object.assign({},be,n),this.events=new Map,this._onBasicInput=this._onBasicInput.bind(this),this._onOtherEvent=this._onOtherEvent.bind(this),this.setElement(e);var r=n.events;r&&this.on(r)}return Object(u.a)(t,[{key:"setElement",value:function(t){var e=this;if(this.element&&this.destroy(),this.element=t,t){var n=this.options,r=n.Manager;for(var i in this.manager=new r(t,{touchAction:n.touchAction,recognizers:n.recognizers||Yt}).on("hammer.input",this._onBasicInput),n.recognizers||Object.keys(Gt).forEach((function(t){var n=e.manager.get(t);n&&Gt[t].forEach((function(t){n.recognizeWith(t)}))})),n.recognizerOptions){var o=this.manager.get(i);if(o){var a=n.recognizerOptions[i];delete a.enable,o.set(a)}}this.wheelInput=new ae(t,this._onOtherEvent,{enable:!1}),this.moveInput=new ce(t,this._onOtherEvent,{enable:!1}),this.keyInput=new le(t,this._onOtherEvent,{enable:!1,tabIndex:n.tabIndex}),this.contextmenuInput=new he(t,this._onOtherEvent,{enable:!1});var s,c=ve(this.events);try{for(c.s();!(s=c.n()).done;){var u=Object(v.a)(s.value,2),l=u[0],h=u[1];h.isEmpty()||(this._toggleRecognizer(h.recognizerName,!0),this.manager.on(l,h.handleEvent))}}catch(p){c.e(p)}finally{c.f()}}}},{key:"destroy",value:function(){this.element&&(this.wheelInput.destroy(),this.moveInput.destroy(),this.keyInput.destroy(),this.contextmenuInput.destroy(),this.manager.destroy(),this.wheelInput=null,this.moveInput=null,this.keyInput=null,this.contextmenuInput=null,this.manager=null,this.element=null)}},{key:"on",value:function(t,e,n){this._addEventHandler(t,e,n,!1)}},{key:"once",value:function(t,e,n){this._addEventHandler(t,e,n,!0)}},{key:"watch",value:function(t,e,n){this._addEventHandler(t,e,n,!1,!0)}},{key:"off",value:function(t,e){this._removeEventHandler(t,e)}},{key:"_toggleRecognizer",value:function(t,e){var n=this.manager;if(n){var r=n.get(t);if(r&&r.options.enable!==e){r.set({enable:e});var i=Kt[t];i&&!this.options.recognizers&&i.forEach((function(i){var o=n.get(i);e?(o.requireFailure(t),r.dropRequireFailure(i)):o.dropRequireFailure(t)}))}this.wheelInput.enableEventType(t,e),this.moveInput.enableEventType(t,e),this.keyInput.enableEventType(t,e),this.contextmenuInput.enableEventType(t,e)}}},{key:"_addEventHandler",value:function(t,e,n,r,i){if("string"==typeof t){var o=this.manager,a=this.events,s=ne[t]||t,c=a.get(s);c||(c=new de(this),a.set(s,c),c.recognizerName=ee[s]||s,o&&o.on(s,c.handleEvent)),c.add(t,e,n,r,i),c.isEmpty()||this._toggleRecognizer(c.recognizerName,!0)}else for(var u in n=e,t)this._addEventHandler(u,t[u],n,r,i)}},{key:"_removeEventHandler",value:function(t,e){if("string"==typeof t){var n=this.events,r=ne[t]||t,i=n.get(r);if(i&&(i.remove(t,e),i.isEmpty())){var o,a=i.recognizerName,s=!1,c=ve(n.values());try{for(c.s();!(o=c.n()).done;){var u=o.value;if(u.recognizerName===a&&!u.isEmpty()){s=!0;break}}}catch(h){c.e(h)}finally{c.f()}s||this._toggleRecognizer(a,!1)}}else for(var l in t)this._removeEventHandler(l,t[l])}},{key:"_onBasicInput",value:function(t){var e=t.srcEvent,n=Qt[e.type];n&&this.manager.emit(n,t)}},{key:"_onOtherEvent",value:function(t){this.manager.emit(t.type,t)}}]),t}();function ye(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Oe(t){for(var e=1;e0),a=o&&!this.state.isHovering,s=!o&&this.state.isHovering;a&&ze.call(this,"onMouseEnter",t),s&&ze.call(this,"onMouseLeave",t),(a||s)&&this.setState({isHovering:o})}}function Ze(t){var e=this.props,n=e.onClick,r=e.onNativeClick,i=e.onDblClick,o=e.doubleClickZoom,a=[],s=i||o;switch(t.type){case"anyclick":a.push(r),s||a.push(n);break;case"click":s&&a.push(n)}(a=a.filter(Boolean)).length&&((t=Re.call(this,t)).features=Le.call(this,t.point),a.forEach((function(e){return e(t)})))}var Be=Object(a.forwardRef)((function(t,e){var n=Object(a.useContext)(ut),o=Object(a.useMemo)((function(){return t.controller||new ke}),[]),s=Object(a.useMemo)((function(){return new me(null,{touchAction:t.touchAction,recognizerOptions:t.eventRecognizerOptions})}),[]),c=Object(a.useRef)(null),u=e||Object(a.useRef)(null),l=Object(a.useRef)({width:0,height:0,state:{isHovering:!1,isDragging:!1}}).current;l.props=t,l.map=u.current&&u.current.getMap(),l.setState=function(e){l.state=Ce(Ce({},l.state),e),c.current.style.cursor=t.getCursor(l.state)};var h,p,f=!0,d=function(e,n,r){if(f)h=[e,n,r];else{var i=t.onViewStateChange,o=t.onViewportChange;i&&i({viewState:e,interactionState:n,oldViewState:r}),o&&o(e,n,r)}},v=Object(a.useMemo)((function(){return Ce(Ce({},n),{},{eventManager:s,container:n.container||c.current})}),[n,c.current]);v.onViewportChange=d;var g=function(e){var n=e.isDragging,r=void 0!==n&&n;if(r!==l.state.isDragging&&l.setState({isDragging:r}),f)p=e;else{var i=t.onInteractionStateChange;i&&i(e)}},b=function(){var e=Object.assign({},t,t.viewState,{isInteractive:Boolean(t.onViewStateChange||t.onViewportChange),onViewportChange:d,onStateChange:g,eventManager:s,width:l.width,height:l.height});o.setOptions(e)};Object(a.useEffect)((function(){return s.setElement(c.current),s.on({pointerdown:Ne.bind(l),pointermove:Ve.bind(l),pointerup:Fe.bind(l),pointerleave:ze.bind(l,"onMouseOut"),click:Ze.bind(l),anyclick:Ze.bind(l),dblclick:ze.bind(l,"onDblClick"),wheel:ze.bind(l,"onWheel"),contextmenu:ze.bind(l,"onContextMenu")}),function(){s.destroy()}}),[]),Object(a.useLayoutEffect)((function(){h&&d.apply(void 0,Object(r.a)(h)),p&&g(p)})),b();var m=t.width,y=t.height,O=t.style,w=t.getCursor,j=Object(a.useMemo)((function(){return Ce(Ce({position:"relative"},O),{},{width:m,height:y,cursor:w(l.state)})}),[O,m,y,w,l.state]);return h||(l._child=a.createElement(ct,{value:v},a.createElement("div",{key:"event-canvas",ref:c,style:j},a.createElement(mt,i({},t,{width:"100%",height:"100%",style:null,onResize:function(e){var n=e.width,r=e.height;l.width=n,l.height=r,b(),t.onResize({width:n,height:r})},ref:u}))))),f=!1,l._child}));Be.supported=mt.supported,Be.propTypes=Ie,Be.defaultProps=Ae;var Ue=Be;function qe(t,e){if(t===e)return!0;if(!t||!e)return!1;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var n=0;n prop: ".concat(r));else t.setCoordinates(e.coordinates)}}(s,t,n.current):s=Xe(o,i,t),n.current=t,s?a.Children.map(t.children,(function(t){return t&&Object(a.cloneElement)(t,{source:i})})):null},Ge=n("zLVn");function Ke(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Qe(t){for(var e=1;e=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}(n,["layout","paint","filter","minzoom","maxzoom","beforeId"]);if(h!==r.beforeId&&t.moveLayer(e,h),o!==r.layout){var f=r.layout||{};for(var d in o)qe(o[d],f[d])||t.setLayoutProperty(e,d,o[d]);for(var v in f)o.hasOwnProperty(v)||t.setLayoutProperty(e,v,void 0)}if(s!==r.paint){var g=r.paint||{};for(var b in s)qe(s[b],g[b])||t.setPaintProperty(e,b,s[b]);for(var m in g)s.hasOwnProperty(m)||t.setPaintProperty(e,m,void 0)}for(var y in qe(c,r.filter)||t.setFilter(e,c),u===r.minzoom&&l===r.maxzoom||t.setLayerZoomRange(e,u,l),p)qe(p[y],r[y])||t.setLayerProperty(e,y,p[y])}var tn=0;function en(t){var e=Object(a.useContext)(ut),n=Object(a.useRef)({id:t.id,type:t.type}),r=Object(a.useState)(0)[1],i=Object(a.useMemo)((function(){return t.id||"jsx-layer-".concat(tn++)}),[]),o=e.map;return Object(a.useEffect)((function(){if(o){var t=function(){return r((function(t){return t+1}))};return o.on("styledata",t),function(){o.off("styledata",t),o.style&&o.style._loaded&&o.removeLayer(i)}}}),[o]),o&&o.style&&o.getLayer(i)?function(t,e,n,r){Q(n.id===r.id,"layer id changed"),Q(n.type===r.type,"layer type changed");try{$e(t,e,n,r)}catch(i){console.warn(i)}}(o,i,t,n.current):function(t,e,n){if(t.style&&t.style._loaded){var r=Qe(Qe({},n),{},{id:e});delete r.beforeId,t.addLayer(r,n.beforeId)}}(o,i,t),n.current=t,null}en.propTypes=Je;var nn=en,rn={captureScroll:!1,captureDrag:!0,captureClick:!0,captureDoubleClick:!0,capturePointerMove:!1},on={captureScroll:s.bool,captureDrag:s.bool,captureClick:s.bool,captureDoubleClick:s.bool,capturePointerMove:s.bool};function an(t){void 0===t&&(t={});var e=Object(a.useContext)(ut),n=Object(a.useRef)(null),r=Object(a.useRef)({props:t,state:{},context:e,containerRef:n}).current;return r.props=t,r.context=e,Object(a.useEffect)((function(){return function(t){var e=t.containerRef.current,n=t.context.eventManager;if(e&&n){var r={wheel:function(e){var n=t.props;n.captureScroll&&e.stopPropagation(),n.onScroll&&n.onScroll(e,t)},panstart:function(e){var n=t.props;n.captureDrag&&e.stopPropagation(),n.onDragStart&&n.onDragStart(e,t)},anyclick:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},click:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},dblclick:function(e){var n=t.props;n.captureDoubleClick&&e.stopPropagation(),n.onDoubleClick&&n.onDoubleClick(e,t)},pointermove:function(e){var n=t.props;n.capturePointerMove&&e.stopPropagation(),n.onPointerMove&&n.onPointerMove(e,t)}};return n.watch(r,e),function(){n.off(r)}}}(r)}),[e.eventManager]),r}function sn(t){var e=t.instance,n=an(t),r=n.context,i=n.containerRef;return e._context=r,e._containerRef=i,e._render()}var cn=function(t){function e(){for(var e,n=arguments.length,r=new Array(n),i=0;i0){var g=p,b=v;for(p=0;p<=1;p+=.5)d=(f=n-p*a)+a,(v=Math.max(0,u-f)+Math.max(0,d-i+u))0){var j=h,E=w;for(h=0;h<=1;h+=m)O=(y=e-h*o)+o,(w=Math.max(0,u-y)+Math.max(0,O-r+u))1||s<-1||o<0||o>e.width||a<0||a>e.height?g.display="none":g.zIndex=Math.floor((1-s)/2*1e5),g):g}(t,s,i.current,v,g),m=r.eventManager?null:xn;return a.createElement("div",{className:"mapboxgl-popup mapboxgl-popup-anchor-".concat(g," ").concat(c),style:b,ref:i},a.createElement("div",{key:"tip",className:"mapboxgl-popup-tip",style:{borderWidth:p}}),a.createElement("div",{key:"content",ref:e,className:"mapboxgl-popup-content",onClick:m},f&&a.createElement("button",{key:"close-button",className:"mapboxgl-popup-close-button",type:"button"},"Ă—"),d))}Tn.defaultProps=Mn;var kn=a.memo(Tn);function Dn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Cn=Object.assign({},rn,{className:"",toggleLabel:"Toggle Attribution"});function In(t){var e=an(t),n=e.context,r=e.containerRef,i=Object(a.useRef)(null),s=Object(a.useState)(!1),c=s[0],u=s[1];Object(a.useEffect)((function(){var e;return n.map&&(e=function(t,e,n,r){var i=new H.a.AttributionControl(t);return i._map=e,i._container=n,i._innerContainer=r,i._updateAttributions(),i._updateEditLink(),e.on("styledata",i._updateData),e.on("sourcedata",i._updateData),i}({customAttribution:t.customAttribution},n.map,r.current,i.current)),function(){return e&&function(t){t._map.off("styledata",t._updateData),t._map.off("sourcedata",t._updateData)}(e)}}),[n.map]);var l=void 0===t.compact?n.viewport.width<=640:t.compact;Object(a.useEffect)((function(){!l&&c&&u(!1)}),[l]);var h=Object(a.useCallback)((function(){return u((function(t){return!t}))}),[]),p=Object(a.useMemo)((function(){return function(t){for(var e=1;ea)return 1}return 0}(t,"1.6.0")>=0?2:1}function Jn(t,e,n){var r=t.viewport,i=new it(Object.assign({},r,n)),o=Object.assign({},i.getViewportProps(),je),a=e.onViewportChange||t.onViewportChange||Gn;(e.onViewStateChange||t.onViewStateChange||Gn)({viewState:o}),a(o)}function $n(t,e,n,r){return a.createElement("button",{key:t,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-".concat(t),type:"button",title:e,onClick:n},r||a.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))}function tr(t){var e=an(t),n=e.context,r=e.containerRef,i=t.className,s=t.showCompass,c=t.showZoom,u=t.zoomInLabel,l=t.zoomOutLabel,h=t.compassLabel,p=Object(a.useMemo)((function(){return function(t){for(var e=1;e=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0;)r.appendChild(n.childNodes[0]);this._map._container=r,t.savedMap=null,e.mapStyle&&this._map.setStyle(Object(a.a)(e.mapStyle),{diff:!1}),this._map.isStyleLoaded()?this._fireLoadEvent():this._map.once("styledata",this._fireLoadEvent)},e._create=function(e){if(e.reuseMaps&&t.savedMap)this._reuse(e);else{if(e.gl){var n=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=n,e.gl}}var r={container:e.container,center:[0,0],zoom:8,pitch:0,bearing:0,maxZoom:24,style:Object(a.a)(e.mapStyle),interactive:!1,trackResize:!1,attributionControl:e.attributionControl,preserveDrawingBuffer:e.preserveDrawingBuffer};e.transformRequest&&(r.transformRequest=e.transformRequest),this._map=new this.mapboxgl.Map(Object.assign({},r,e.mapOptions)),this._map.once("load",e.onLoad),this._map.on("error",e.onError)}return this},e._destroy=function(){this._map&&(t.savedMap?this._map.remove():(t.savedMap=this._map,this._map.off("load",this.props.onLoad),this._map.off("error",this.props.onError),this._map.off("styledata",this._fireLoadEvent)),this._map=null)},e._initialize=function(t){var e=this;u(t=Object.assign({},c,t),"Mapbox"),this.mapboxgl.accessToken=t.mapboxApiAccessToken||c.mapboxApiAccessToken,this.mapboxgl.baseApiUrl=t.mapboxApiUrl,this._create(t);var n=t.container;Object.defineProperty(n,"offsetWidth",{get:function(){return e.width}}),Object.defineProperty(n,"clientWidth",{get:function(){return e.width}}),Object.defineProperty(n,"offsetHeight",{get:function(){return e.height}}),Object.defineProperty(n,"clientHeight",{get:function(){return e.height}});var r=this._map.getCanvas();r&&(r.style.outline="none"),this._updateMapViewport({},t),this._updateMapSize({},t),this.props=t},e._update=function(t,e){if(this._map){u(e=Object.assign({},this.props,e),"Mapbox");var n=this._updateMapViewport(t,e),r=this._updateMapSize(t,e);this._updateMapStyle(t,e),e.asyncRender||!n&&!r||this.redraw(),this.props=e}},e._updateMapStyle=function(t,e){t.mapStyle!==e.mapStyle&&this._map.setStyle(Object(a.a)(e.mapStyle),{diff:!e.preventStyleDiffing})},e._updateMapSize=function(t,e){var n=t.width!==e.width||t.height!==e.height;return n&&(this.width=e.width,this.height=e.height,this._map.resize()),n},e._updateMapViewport=function(t,e){var n=this._getViewState(t),r=this._getViewState(e),i=r.latitude!==n.latitude||r.longitude!==n.longitude||r.zoom!==n.zoom||r.pitch!==n.pitch||r.bearing!==n.bearing||r.altitude!==n.altitude;return i&&(this._map.jumpTo(this._viewStateToMapboxProps(r)),r.altitude!==n.altitude&&(this._map.transform.altitude=r.altitude)),i},e._getViewState=function(t){var e=t.viewState||t,n=e.longitude,r=e.latitude,i=e.zoom,o=e.pitch,a=void 0===o?0:o,s=e.bearing,c=void 0===s?0:s,u=e.altitude;return{longitude:n,latitude:r,zoom:i,pitch:a,bearing:c,altitude:void 0===u?1.5:u}},e._checkStyleSheet=function(t){if(void 0===t&&(t="0.47.0"),void 0!==o.a)try{var e=o.a.createElement("div");if(e.className="mapboxgl-map",e.style.display="none",o.a.body.appendChild(e),!("static"!==window.getComputedStyle(e).position)){var n=o.a.createElement("link");n.setAttribute("rel","stylesheet"),n.setAttribute("type","text/css"),n.setAttribute("href","https://api.tiles.mapbox.com/mapbox-gl-js/v".concat(t,"/mapbox-gl.css")),o.a.head.appendChild(n)}}catch(r){}},e._viewStateToMapboxProps=function(t){return{center:[t.longitude,t.latitude],zoom:t.zoom,bearing:t.bearing,pitch:t.pitch}},t}();Object(r.a)(l,"initialized",!1),Object(r.a)(l,"propTypes",s),Object(r.a)(l,"defaultProps",c),Object(r.a)(l,"savedMap",null)}).call(this,n("8oxB"))},ExcP:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r})),n.d(e,"c",(function(){return i})),n.d(e,"a",(function(){return o}));var r="undefined"!=typeof navigator&&navigator.userAgent?navigator.userAgent.toLowerCase():"",i="undefined"!=typeof window?window:t,o=(void 0!==t||window,"undefined"!=typeof document&&document,!1);try{var a={get passive(){return o=!0,!0}};i.addEventListener("test",a,a),i.removeEventListener("test",a,a)}catch(s){}}).call(this,n("yLpj"))},ODXe:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var r=n("BsWD");function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(c){i=!0,o=c}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}(t,e)||Object(r.a)(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},QFcT:function(t,e,n){var r=n("I+eb"),i=Math.hypot,o=Math.abs,a=Math.sqrt;r({target:"Math",stat:!0,forced:!!i&&i(1/0,NaN)!==1/0},{hypot:function(t,e){for(var n,r,i=0,s=0,c=arguments.length,u=0;s0?(r=n/u)*r:n;return u===1/0?1/0:u*a(i)}})},QFtD:function(t,e,n){var r;!function(i,o,a,s){"use strict";var c,u=["","webkit","Moz","MS","ms","o"],l=o.createElement("div"),h=Math.round,p=Math.abs,f=Date.now;function d(t,e,n){return setTimeout(w(t,n),e)}function v(t,e,n){return!!Array.isArray(t)&&(g(t,n[e],n),!0)}function g(t,e,n){var r;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(r=0;r\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=i.console&&(i.console.warn||i.console.log);return o&&o.call(i.console,r,n),t.apply(this,arguments)}}c="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n-1}function x(t){return t.trim().split(/\s+/g)}function T(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var r=0;rn[e]})):r.sort()),r}function C(t,e){for(var n,r,i=e[0].toUpperCase()+e.slice(1),o=0;o1&&!n.firstMultiple?n.firstMultiple=B(e):1===i&&(n.firstMultiple=!1);var o=n.firstInput,a=n.firstMultiple,s=a?a.center:o.center,c=e.center=U(r);e.timeStamp=f(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=X(s,c),e.distance=H(s,c),function(t,e){var n=e.center,r=t.offsetDelta||{},i=t.prevDelta||{},o=t.prevInput||{};1!==e.eventType&&4!==o.eventType||(i=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},r=t.offsetDelta={x:n.x,y:n.y});e.deltaX=i.x+(n.x-r.x),e.deltaY=i.y+(n.y-r.y)}(n,e),e.offsetDirection=W(e.deltaX,e.deltaY);var u=q(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=u.x,e.overallVelocityY=u.y,e.overallVelocity=p(u.x)>p(u.y)?u.x:u.y,e.scale=a?(l=a.pointers,h=r,H(h[0],h[1],F)/H(l[0],l[1],F)):1,e.rotation=a?function(t,e){return X(e[1],e[0],F)+X(t[1],t[0],F)}(a.pointers,r):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,r,i,o,a=t.lastInterval||e,s=e.timeStamp-a.timeStamp;if(8!=e.eventType&&(s>25||void 0===a.velocity)){var c=e.deltaX-a.deltaX,u=e.deltaY-a.deltaY,l=q(s,c,u);r=l.x,i=l.y,n=p(l.x)>p(l.y)?l.x:l.y,o=W(c,u),t.lastInterval=e}else n=a.velocity,r=a.velocityX,i=a.velocityY,o=a.direction;e.velocity=n,e.velocityX=r,e.velocityY=i,e.direction=o}(n,e);var l,h;var d=t.element;M(e.srcEvent.target,d)&&(d=e.srcEvent.target);e.target=d}(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function B(t){for(var e=[],n=0;n=p(e)?t<0?2:4:e<0?8:16}function H(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return Math.sqrt(r*r+i*i)}function X(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return 180*Math.atan2(i,r)/Math.PI}V.prototype={handler:function(){},init:function(){this.evEl&&P(this.element,this.evEl,this.domHandler),this.evTarget&&P(this.target,this.evTarget,this.domHandler),this.evWin&&P(A(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&_(this.element,this.evEl,this.domHandler),this.evTarget&&_(this.target,this.evTarget,this.domHandler),this.evWin&&_(A(this.element),this.evWin,this.domHandler)}};var Y={mousedown:1,mousemove:2,mouseup:4};function G(){this.evEl="mousedown",this.evWin="mousemove mouseup",this.pressed=!1,V.apply(this,arguments)}O(G,V,{handler:function(t){var e=Y[t.type];1&e&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))}});var K={pointerdown:1,pointermove:2,pointerup:4,pointercancel:8,pointerout:8},Q={2:"touch",3:"pen",4:"mouse",5:"kinect"},J="pointerdown",$="pointermove pointerup pointercancel";function tt(){this.evEl=J,this.evWin=$,V.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}i.MSPointerEvent&&!i.PointerEvent&&(J="MSPointerDown",$="MSPointerMove MSPointerUp MSPointerCancel"),O(tt,V,{handler:function(t){var e=this.store,n=!1,r=t.type.toLowerCase().replace("ms",""),i=K[r],o=Q[t.pointerType]||t.pointerType,a="touch"==o,s=T(e,t.pointerId,"pointerId");1&i&&(0===t.button||a)?s<0&&(e.push(t),s=e.length-1):12&i&&(n=!0),s<0||(e[s]=t,this.callback(this.manager,i,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(s,1))}});var et={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function nt(){this.evTarget="touchstart",this.evWin="touchstart touchmove touchend touchcancel",this.started=!1,V.apply(this,arguments)}function rt(t,e){var n=k(t.touches),r=k(t.changedTouches);return 12&e&&(n=D(n.concat(r),"identifier",!0)),[n,r]}O(nt,V,{handler:function(t){var e=et[t.type];if(1===e&&(this.started=!0),this.started){var n=rt.call(this,t,e);12&e&&n[0].length-n[1].length==0&&(this.started=!1),this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}}});var it={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function ot(){this.evTarget="touchstart touchmove touchend touchcancel",this.targetIds={},V.apply(this,arguments)}function at(t,e){var n=k(t.touches),r=this.targetIds;if(3&e&&1===n.length)return r[n[0].identifier]=!0,[n,n];var i,o,a=k(t.changedTouches),s=[],c=this.target;if(o=n.filter((function(t){return M(t.target,c)})),1===e)for(i=0;i-1&&r.splice(t,1)}),2500)}}function lt(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,r=0;r-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){var e=this,n=this.state;function r(n){e.manager.emit(n,t)}n<8&&r(e.options.event+gt(n)),r(e.options.event),t.additionalEvent&&r(t.additionalEvent),n>=8&&r(e.options.event+gt(n))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;te.threshold&&i&e.direction},attrTest:function(t){return yt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=bt(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),O(wt,yt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||2&this.state)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),O(jt,vt,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return["auto"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distancee.time;if(this._input=t,!r||!n||12&t.eventType&&!i)this.reset();else if(1&t.eventType)this.reset(),this._timer=d((function(){this.state=8,this.tryEmit()}),e.time,this);else if(4&t.eventType)return 8;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){8===this.state&&(t&&4&t.eventType?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=f(),this.manager.emit(this.options.event,this._input)))}}),O(Et,yt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||2&this.state)}}),O(Pt,yt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:30,pointers:1},getTouchAction:function(){return Ot.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return 30&n?e=t.overallVelocity:6&n?e=t.overallVelocityX:24&n&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&p(e)>this.options.velocity&&4&t.eventType},emit:function(t){var e=bt(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),O(_t,vt,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return["manipulation"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance0},t.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),l=function(t,e){for(var n=0,r=Object.keys(e);n0},t}(),j="undefined"!=typeof WeakMap?new WeakMap:new r,E=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=u.getInstance(),r=new w(e,n,this);j.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){E.prototype[t]=function(){var e;return(e=j.get(this))[t].apply(e,arguments)}}));var P=void 0!==o.ResizeObserver?o.ResizeObserver:E;e.a=P}).call(this,n("yLpj"))},"n+fv":function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));n("QFcT");var r=n("yU0y");function i(t,e){return t[0]=-e[0],t[1]=-e[1],t[2]=-e[2],t}var o,a;o=new r.a(3),r.a!=Float32Array&&(o[0]=0,o[1]=0,o[2]=0),a=o},yU0y:function(t,e,n){"use strict";n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o}));n("QFcT");var r=1e-6,i="undefined"!=typeof Float32Array?Float32Array:Array,o=Math.random;Math.PI;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)})},zLVn:function(t,e,n){"use strict";function r(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r=0||(i[n]=t[n]);return i}n.d(e,"a",(function(){return r}))}}]); \ No newline at end of file diff --git a/76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js b/76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js new file mode 100644 index 00000000..01b3ab38 --- /dev/null +++ b/76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js @@ -0,0 +1,2 @@ +/*! For license information please see 76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{"+qjn":function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return qe})),n.d(e,"InteractiveMap",(function(){return qe})),n.d(e,"StaticMap",(function(){return yt})),n.d(e,"Source",(function(){return Ge})),n.d(e,"Layer",(function(){return rn})),n.d(e,"BaseControl",(function(){return un})),n.d(e,"Marker",(function(){return jn})),n.d(e,"Popup",(function(){return Dn})),n.d(e,"AttributionControl",(function(){return Rn})),n.d(e,"FullscreenControl",(function(){return Zn})),n.d(e,"GeolocateControl",(function(){return Yn})),n.d(e,"NavigationControl",(function(){return nr})),n.d(e,"ScaleControl",(function(){return ar})),n.d(e,"CanvasOverlay",(function(){return ur})),n.d(e,"HTMLOverlay",(function(){return pr})),n.d(e,"SVGOverlay",(function(){return vr})),n.d(e,"TRANSITION_EVENTS",(function(){return Ft})),n.d(e,"TransitionInterpolator",(function(){return jt})),n.d(e,"LinearInterpolator",(function(){return zt})),n.d(e,"FlyToInterpolator",(function(){return It})),n.d(e,"MapController",(function(){return De})),n.d(e,"WebMercatorViewport",(function(){return F})),n.d(e,"setRTLTextPlugin",(function(){return gr})),n.d(e,"MapContext",(function(){return ut})),n.d(e,"_useMapControl",(function(){return sn})),n.d(e,"_MapContext",(function(){return ut}));var r=n("KQm4");function i(){return(i=Object.assign||function(t){for(var e=1;e=-90&&r<=90,"invalid latitude");var i=r*M;return[512*(n*M+P)/(2*P),512*(P+Math.log(Math.tan(_+.5*i)))/(2*P)]}function D(t){var e=Object(v.a)(t,2),n=e[0],r=e[1],i=n/512*(2*P)-P,o=2*(Math.atan(Math.exp(r/512*(2*P)-P))-_);return[i*S,o*S]}function C(t){var e=t.latitude,n=t.longitude,r=t.highPrecision,i=void 0!==r&&r;E(Number.isFinite(e)&&Number.isFinite(n));var o={},a=Math.cos(e*M),s=512/360/a,c=512/4003e4/a;if(o.unitsPerMeter=[c,c,c],o.metersPerUnit=[1/c,1/c,1/c],o.unitsPerDegree=[512/360,s,c],o.degreesPerUnit=[.703125,1/s,1/c],i){var u=M*Math.tan(e*M)/a,l=512/360*u/2,h=512/4003e4*u,p=h/s*c;o.unitsPerDegree2=[0,l,h],o.unitsPerMeter2=[p,0,p]}return o}function I(t){var e=t.height,n=t.pitch,r=t.bearing,i=t.altitude,o=t.scale,a=t.center,s=void 0===a?null:a,c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return O.h(c,c,[0,0,-i]),O.e(c,c,-n*M),O.f(c,c,r*M),o/=e,O.g(c,c,[o,o,o]),s&&O.h(c,c,j.a([],s)),c}function A(t){var e=t.width,n=t.height,r=t.pitch,i=function(t){var e=t.width,n=t.height,r=t.altitude,i=void 0===r?1.5:r,o=t.pitch,a=void 0===o?0:o,s=t.nearZMultiplier,c=void 0===s?1:s,u=t.farZMultiplier,l=void 0===u?1:u,h=a*M,p=Math.atan(.5/i),f=Math.sin(p)*i/Math.sin(Math.PI/2-h-p);return{fov:2*p,aspect:e/n,focalDistance:i,near:c,far:(Math.cos(Math.PI/2-h)*f+i)*l}}({width:e,height:n,altitude:t.altitude,pitch:r,nearZMultiplier:t.nearZMultiplier,farZMultiplier:t.farZMultiplier}),o=i.fov,a=i.aspect,s=i.near,c=i.far;return O.d([],o,a,s,c)}function R(t,e){var n=Object(v.a)(t,3),r=n[0],i=n[1],o=n[2],a=void 0===o?0:o;return E(Number.isFinite(r)&&Number.isFinite(i)&&Number.isFinite(a)),b(e,[r,i,a,1])}function L(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=Object(v.a)(t,3),i=r[0],o=r[1],a=r[2];if(E(Number.isFinite(i)&&Number.isFinite(o),"invalid pixel coordinate"),Number.isFinite(a)){var s=b(e,[i,o,a,1]);return s}var c=b(e,[i,o,0,1]),u=b(e,[i,o,1,1]),l=c[2],h=u[2],p=l===h?0:((n||0)-l)/(h-l);return w.c([],c,u,p)}var z=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function N(t){var e=t.width,n=t.height,r=t.bounds,i=t.minExtent,o=void 0===i?0:i,a=t.maxZoom,s=void 0===a?24:a,c=t.padding,u=void 0===c?0:c,l=t.offset,h=void 0===l?[0,0]:l,p=Object(v.a)(r,2),f=Object(v.a)(p[0],2),d=f[0],g=f[1],b=Object(v.a)(p[1],2),m=b[0],y=b[1];if(Number.isFinite(u)){u={top:u,bottom:u,left:u,right:u}}else E(Number.isFinite(u.top)&&Number.isFinite(u.bottom)&&Number.isFinite(u.left)&&Number.isFinite(u.right));var O=new F({width:e,height:n,longitude:0,latitude:0,zoom:0}),w=O.project([d,y]),j=O.project([m,g]),P=[Math.max(Math.abs(j[0]-w[0]),o),Math.max(Math.abs(j[1]-w[1]),o)],_=[e-u.left-u.right-2*Math.abs(h[0]),n-u.top-u.bottom-2*Math.abs(h[1])];E(_[0]>0&&_[1]>0);var M=_[0]/P[0],S=_[1]/P[1],x=(u.right-u.left)/2/M,T=(u.bottom-u.top)/2/S,k=[(j[0]+w[0])/2+x,(j[1]+w[1])/2+T],D=O.unproject(k),C=Math.min(s,O.zoom+Math.log2(Math.abs(Math.min(M,S))));return E(Number.isFinite(C)),{longitude:D[0],latitude:D[1],zoom:C}}var F=function(t){function e(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.width,i=n.height,o=n.latitude,a=void 0===o?0:o,s=n.longitude,u=void 0===s?0:s,l=n.zoom,d=void 0===l?0:l,v=n.pitch,g=void 0===v?0:v,b=n.bearing,m=void 0===b?0:b,y=n.altitude,O=void 0===y?1.5:y,w=n.nearZMultiplier,j=void 0===w?.02:w,E=n.farZMultiplier,P=void 0===E?1.01:E;Object(c.a)(this,e),r=r||1,i=i||1;var _=x(d);O=Math.max(.75,O);var M=k([u,a]);M[2]=0;var S=A({width:r,height:i,pitch:g,bearing:m,altitude:O,nearZMultiplier:j,farZMultiplier:P}),T=I({height:i,scale:_,center:M,pitch:g,bearing:m,altitude:O});return(t=p(this,f(e).call(this,{width:r,height:i,scale:_,viewMatrix:T,projectionMatrix:S}))).latitude=a,t.longitude=u,t.zoom=d,t.pitch=g,t.bearing=m,t.altitude=O,t.center=M,t.unitsPerMeter=C(Object(h.a)(t)).unitsPerMeter[2],Object.freeze(Object(h.a)(t)),t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&d(t,e)}(e,t),Object(u.a)(e,[{key:"projectFlat",value:function(t){return k(t)}},{key:"unprojectFlat",value:function(t){return D(t)}},{key:"getMapCenterByLngLatPosition",value:function(t){var e=t.lngLat,n=L(t.pos,this.pixelUnprojectionMatrix),r=k(e),i=w.a([],r,w.d([],n));return D(w.a([],this.center,i),this.scale)}},{key:"getLocationAtPoint",value:function(t){var e=t.lngLat,n=t.pos;return this.getMapCenterByLngLatPosition({lngLat:e,pos:n})}},{key:"fitBounds",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.width,i=this.height,o=N(Object.assign({width:r,height:i,bounds:t},n)),a=o.longitude,s=o.latitude,c=o.zoom;return new e({width:r,height:i,longitude:a,latitude:s,zoom:c})}}]),e}(function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.width,r=e.height,i=e.scale,o=e.viewMatrix,a=void 0===o?z:o,s=e.projectionMatrix,u=void 0===s?z:s;Object(c.a)(this,t),this.width=n||1,this.height=r||1,this.scale=i,this.unitsPerMeter=1,this.viewMatrix=a,this.projectionMatrix=u;var l=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];O.c(l,l,this.projectionMatrix),O.c(l,l,this.viewMatrix),this.viewProjectionMatrix=l;var h=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];O.g(h,h,[this.width/2,-this.height/2,1]),O.h(h,h,[1,-1,0]),O.c(h,h,this.viewProjectionMatrix);var p=O.b([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],h);if(!p)throw new Error("Pixel project matrix not invertible");this.pixelProjectionMatrix=h,this.pixelUnprojectionMatrix=p,this.equals=this.equals.bind(this),this.project=this.project.bind(this),this.unproject=this.unproject.bind(this),this.projectPosition=this.projectPosition.bind(this),this.unprojectPosition=this.unprojectPosition.bind(this),this.projectFlat=this.projectFlat.bind(this),this.unprojectFlat=this.unprojectFlat.bind(this)}return Object(u.a)(t,[{key:"equals",value:function(e){return e instanceof t&&(e.width===this.width&&e.height===this.height&&O.a(e.projectionMatrix,this.projectionMatrix)&&O.a(e.viewMatrix,this.viewMatrix))}},{key:"project",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=this.projectPosition(t),o=R(i,this.pixelProjectionMatrix),a=Object(v.a)(o,2),s=a[0],c=a[1],u=r?c:this.height-c;return 2===t.length?[s,u]:[s,u,o[2]]}},{key:"unproject",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=e.targetZ,o=Object(v.a)(t,3),a=o[0],s=o[1],c=o[2],u=r?s:this.height-s,l=i&&i*this.unitsPerMeter,h=L([a,u,c],this.pixelUnprojectionMatrix,l),p=this.unprojectPosition(h),f=Object(v.a)(p,3),d=f[0],g=f[1],b=f[2];return Number.isFinite(c)?[d,g,b]:Number.isFinite(i)?[d,g,i]:[d,g]}},{key:"projectPosition",value:function(t){var e=this.projectFlat(t),n=Object(v.a)(e,2);return[n[0],n[1],(t[2]||0)*this.unitsPerMeter]}},{key:"unprojectPosition",value:function(t){var e=this.unprojectFlat(t),n=Object(v.a)(e,2);return[n[0],n[1],(t[2]||0)/this.unitsPerMeter]}},{key:"projectFlat",value:function(t){arguments.length>1&&void 0!==arguments[1]||this.scale;return t}},{key:"unprojectFlat",value:function(t){arguments.length>1&&void 0!==arguments[1]||this.scale;return t}}]),t}());var V=["longitude","latitude","zoom"],Z={curve:1.414,speed:1.2};function B(t,e,n){var r=(n=Object.assign({},Z,n)).curve,i=t.zoom,o=[t.longitude,t.latitude],a=x(i),s=e.zoom,c=[e.longitude,e.latitude],u=x(s-i),l=k(o),h=k(c),p=w.f([],h,l),f=Math.max(t.width,t.height),d=f/u,v=w.b(p)*a,g=Math.max(v,.01),b=r*r,m=(d*d-f*f+b*b*g*g)/(2*f*b*g),y=(d*d-f*f-b*b*g*g)/(2*d*b*g),O=Math.log(Math.sqrt(m*m+1)-m),j=Math.log(Math.sqrt(y*y+1)-y);return{startZoom:i,startCenterXY:l,uDelta:p,w0:f,u1:v,S:(j-O)/r,rho:r,rho2:b,r0:O,r1:j}}var U=n("iXzu"),q=n("9jAm"),W=n("bhPm"),H=n.n(W);function X(t){return Array.isArray(t)||ArrayBuffer.isView(t)}function Y(t,e){if(t===e)return!0;if(X(t)&&X(e)){if(t.length!==e.length)return!1;for(var n=0;n0,"`scale` must be a positive number");var i=this._state,o=i.startZoom,a=i.startZoomLngLat;Number.isFinite(o)||(o=this._viewportProps.zoom,a=this._unproject(n)||this._unproject(e)),Q(a,"`startZoomLngLat` prop is required for zoom behavior to calculate where to position the map.");var s=this._calculateNewZoom({scale:r,startZoom:o||0}),c=new F(Object.assign({},this._viewportProps,{zoom:s})).getMapCenterByLngLatPosition({lngLat:a,pos:e}),u=c[0],l=c[1];return this._getUpdatedMapState({zoom:s,longitude:u,latitude:l})},e.zoomEnd=function(){return this._getUpdatedMapState({startZoomLngLat:null,startZoom:null})},e._getUpdatedMapState=function(e){return new t(Object.assign({},this._viewportProps,this._state,e))},e._applyConstraints=function(t){var e=t.maxZoom,n=t.minZoom,r=t.zoom;t.zoom=G(r,n,e);var i=t.maxPitch,o=t.minPitch,a=t.pitch;return t.pitch=G(a,o,i),Object.assign(t,function(t){var e=t.width,n=t.height,r=t.longitude,i=t.latitude,o=t.zoom,a=t.pitch,s=void 0===a?0:a,c=t.bearing,u=void 0===c?0:c;(r<-180||r>180)&&(r=m(r+180,360)-180),(u<-180||u>180)&&(u=m(u+180,360)-180);var l=new F({width:e,height:n,longitude:r,latitude:i,zoom:o}),h=l.project([r,85.05113])[1],p=l.project([r,-85.05113])[1],f=0;return p-h0?f=h:p0?c=i+n*(s-i):n<0&&(c=i-n*(a-i)),{pitch:c,bearing:r+180*e}},e._getRotationParams=function(t,e){var n=t[0]-e[0],r=t[1]-e[1],i=t[1],o=e[1],a=this._viewportProps,s=a.width,c=a.height,u=n/s,l=0;return r>0?Math.abs(c-o)>5&&(l=r/(o-c)*1.2):r<0&&o>5&&(l=1-i/o),{deltaScaleX:u,deltaScaleY:l=Math.min(1,Math.max(-1,l))}},t}();function ot(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function at(t){for(var e=1;ee[n])return!1}var o;return!0}(t.viewState||t,y),j=Object.assign({},dt,{visibility:w?"inherit":"hidden"});return a.createElement("div",{key:"map-container",ref:h,style:O},a.createElement("div",{key:"map-mapbox",ref:l,style:j,className:v}),d,!r&&!t.disableTokenWarning&&a.createElement(gt,null))}));mt.supported=function(){return H.a&&H.a.supported()},mt.defaultProps=vt;var yt=mt;function Ot(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return wt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return wt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function wt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n180&&(n=n<0?n+360:n-360),n}function St(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return xt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return xt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function xt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n3&&void 0!==arguments[3]?arguments[3]:{},i={},o=B(t,e,r),a=o.startZoom,s=o.startCenterXY,c=o.uDelta,u=o.w0,l=o.u1,h=o.S,p=o.rho,f=o.rho2,d=o.r0;if(l<.01){var v=!0,g=!1,b=void 0;try{for(var m,O=V[Symbol.iterator]();!(v=(m=O.next()).done);v=!0){var j=m.value,E=t[j],P=e[j];i[j]=y(E,P,n)}}catch(A){g=!0,b=A}finally{try{v||null==O.return||O.return()}finally{if(g)throw b}}return i}var _=n*h,M=Math.cosh(d)/Math.cosh(d+p*_),S=u*((Math.cosh(d)*Math.tanh(d+p*_)-Math.sinh(d))/f)/l,x=1/M,k=a+T(x),C=w.e([],c,S);w.a(C,C,s);var I=D(C);return i.longitude=I[0],i.latitude=I[1],i.zoom=k,i}(t,e,n,this.props),o=St(Dt);!(r=o()).done;){var a=r.value;i[a]=K(t[a],e[a],n)}return i},n.getDuration=function(t,e){var n=e.transitionDuration;return"auto"===n&&(n=function(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r=Object.assign({},Z,r),o=i.screenSpeed,a=i.speed,s=i.maxDuration,c=B(t,e,r),u=c.S,l=c.rho,h=1e3*u;return n=Number.isFinite(o)?h/(o/l):h/a,Number.isFinite(s)&&n>s?0:n}(t,e,this.props)),n},e}(jt);function At(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Rt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Rt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function Rt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0||"auto"===e)&&Boolean(n)},e._isUpdateDueToCurrentTransition=function(t){return!!this.state.propsInTransition&&this.state.interpolator.arePropsEqual(t,this.state.propsInTransition)},e._shouldIgnoreViewportChange=function(t,e){return!t||(this._isTransitionInProgress()?this.state.interruption===Ft.IGNORE||this._isUpdateDueToCurrentTransition(e):!this._isTransitionEnabled(e)||e.transitionInterpolator.arePropsEqual(t,e))},e._triggerTransition=function(t,e){Q(this._isTransitionEnabled(e)),this._animationFrame&&cancelAnimationFrame(this._animationFrame);var n=e.transitionInterpolator,r=n.getDuration?n.getDuration(t,e):e.transitionDuration;if(0!==r){var i=e.transitionInterpolator.initializeProps(t,e),o={inTransition:!0,isZooming:t.zoom!==e.zoom,isPanning:t.longitude!==e.longitude||t.latitude!==e.latitude,isRotating:t.bearing!==e.bearing||t.pitch!==e.pitch};this.state={duration:r,easing:e.transitionEasing,interpolator:e.transitionInterpolator,interruption:e.transitionInterruption,startTime:this.time(),startProps:i.start,endProps:i.end,animation:null,propsInTransition:{}},this._onTransitionFrame(),this.onStateChange(o)}},e._endTransition=function(){this._animationFrame&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this.onStateChange({inTransition:!1,isZooming:!1,isPanning:!1,isRotating:!1})},e._updateViewport=function(){var t=this.time(),e=this.state,n=e.startTime,r=e.duration,i=e.easing,o=e.interpolator,a=e.startProps,s=e.endProps,c=!1,u=(t-n)/r;u>=1&&(u=1,c=!0),u=i(u);var l=o.interpolateProps(a,s,u),h=new it(Object.assign({},this.props,l));this.state.propsInTransition=h.getViewportProps(),this.onViewportChange(this.state.propsInTransition,this.props),c&&(this._endTransition(),this.props.onTransitionEnd())},t}();Object(o.a)(Zt,"defaultProps",Vt);var Bt,Ut,qt=n("QFtD"),Wt=n.n(qt),Ht={mousedown:1,mousemove:2,mouseup:4};Bt=Wt.a.PointerEventInput,Ut=Bt.prototype.handler,Bt.prototype.handler=function(t){var e=this.store;t.button>0&&(function(t,e){for(var n=0;n=0&&(this.pressed=!0),2&e&&0===t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))};var Xt=Wt.a.Manager,Yt=Wt.a,Gt=Yt?[[Yt.Pan,{event:"tripan",pointers:3,threshold:0,enable:!1}],[Yt.Rotate,{enable:!1}],[Yt.Pinch,{enable:!1}],[Yt.Swipe,{enable:!1}],[Yt.Pan,{threshold:0,enable:!1}],[Yt.Press,{enable:!1}],[Yt.Tap,{event:"doubletap",taps:2,enable:!1}],[Yt.Tap,{event:"anytap",enable:!1}],[Yt.Tap,{enable:!1}]]:null,Kt={tripan:["rotate","pinch","pan"],rotate:["pinch"],pinch:["pan"],pan:["press","doubletap","anytap","tap"],doubletap:["anytap"],anytap:["tap"]},Qt={doubletap:["tap"]},Jt={pointerdown:"pointerdown",pointermove:"pointermove",pointerup:"pointerup",touchstart:"pointerdown",touchmove:"pointermove",touchend:"pointerup",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup"},$t=["keydown","keyup"],te=["mousedown","mousemove","mouseup","mouseover","mouseout","mouseleave"],ee=["wheel","mousewheel","DOMMouseScroll"],ne={tap:"tap",anytap:"anytap",doubletap:"doubletap",press:"press",pinch:"pinch",pinchin:"pinch",pinchout:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",tripan:"tripan",tripanstart:"tripan",tripanmove:"tripan",tripanup:"tripan",tripandown:"tripan",tripanleft:"tripan",tripanright:"tripan",tripanend:"tripan",tripancancel:"tripan",pan:"pan",panstart:"pan",panmove:"pan",panup:"pan",pandown:"pan",panleft:"pan",panright:"pan",panend:"pan",pancancel:"pan",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe"},re={click:"tap",anyclick:"anytap",dblclick:"doubletap",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup",mouseover:"pointerover",mouseout:"pointerout",mouseleave:"pointerleave"},ie=n("ExcP"),oe=-1!==ie.b.indexOf("firefox"),ae=ee,se=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.events=ae.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent,!!ie.a&&{passive:!1})}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"wheel"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){if(this.options.enable){var e=t.deltaY;ie.c.WheelEvent&&(oe&&t.deltaMode===ie.c.WheelEvent.DOM_DELTA_PIXEL&&(e/=ie.c.devicePixelRatio),t.deltaMode===ie.c.WheelEvent.DOM_DELTA_LINE&&(e*=40));var n={x:t.clientX,y:t.clientY};0!==e&&e%4.000244140625==0&&(e=Math.floor(e/4.000244140625)),t.shiftKey&&e&&(e*=.25),this._onWheel(t,-e,n)}}},{key:"_onWheel",value:function(t,e,n){this.callback({type:"wheel",center:n,delta:e,srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),ce=te,ue=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.pressed=!1,this.options=Object.assign({enable:!0},i),this.enableMoveEvent=this.options.enable,this.enableLeaveEvent=this.options.enable,this.enableOutEvent=this.options.enable,this.enableOverEvent=this.options.enable,this.events=ce.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"pointermove"===t&&(this.enableMoveEvent=e),"pointerover"===t&&(this.enableOverEvent=e),"pointerout"===t&&(this.enableOutEvent=e),"pointerleave"===t&&(this.enableLeaveEvent=e)}},{key:"handleEvent",value:function(t){this.handleOverEvent(t),this.handleOutEvent(t),this.handleLeaveEvent(t),this.handleMoveEvent(t)}},{key:"handleOverEvent",value:function(t){this.enableOverEvent&&"mouseover"===t.type&&this.callback({type:"pointerover",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleOutEvent",value:function(t){this.enableOutEvent&&"mouseout"===t.type&&this.callback({type:"pointerout",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleLeaveEvent",value:function(t){this.enableLeaveEvent&&"mouseleave"===t.type&&this.callback({type:"pointerleave",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleMoveEvent",value:function(t){if(this.enableMoveEvent)switch(t.type){case"mousedown":t.button>=0&&(this.pressed=!0);break;case"mousemove":0===t.which&&(this.pressed=!1),this.pressed||this.callback({type:"pointermove",srcEvent:t,pointerType:"mouse",target:t.target});break;case"mouseup":this.pressed=!1}}}]),t}(),le=$t,he=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.enableDownEvent=this.options.enable,this.enableUpEvent=this.options.enable,this.events=le.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),e.tabIndex=i.tabIndex||0,e.style.outline="none",this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"keydown"===t&&(this.enableDownEvent=e),"keyup"===t&&(this.enableUpEvent=e)}},{key:"handleEvent",value:function(t){var e=t.target||t.srcElement;"INPUT"===e.tagName&&"text"===e.type||"TEXTAREA"===e.tagName||(this.enableDownEvent&&"keydown"===t.type&&this.callback({type:"keydown",srcEvent:t,key:t.key,target:t.target}),this.enableUpEvent&&"keyup"===t.type&&this.callback({type:"keyup",srcEvent:t,key:t.key,target:t.target}))}}]),t}(),pe=function(){function t(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},r),this.handleEvent=this.handleEvent.bind(this),e.addEventListener("contextmenu",this.handleEvent)}return Object(u.a)(t,[{key:"destroy",value:function(){this.element.removeEventListener("contextmenu",this.handleEvent)}},{key:"enableEventType",value:function(t,e){"contextmenu"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){this.options.enable&&this.callback({type:"contextmenu",center:{x:t.clientX,y:t.clientY},srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),fe={pointerdown:1,pointermove:2,pointerup:4,mousedown:1,mousemove:2,mouseup:4};var de={srcElement:"root",priority:0},ve=function(){function t(e){Object(c.a)(this,t),this.eventManager=e,this.handlers=[],this.handlersByElement=new Map,this.handleEvent=this.handleEvent.bind(this),this._active=!1}return Object(u.a)(t,[{key:"isEmpty",value:function(){return!this._active}},{key:"add",value:function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=this.handlers,a=this.handlersByElement;n&&("object"!==Object(l.a)(n)||n.addEventListener)&&(n={srcElement:n}),n=n?Object.assign({},de,n):de;var s=a.get(n.srcElement);s||(s=[],a.set(n.srcElement,s));var c={type:t,handler:e,srcElement:n.srcElement,priority:n.priority};r&&(c.once=!0),i&&(c.passive=!0),o.push(c),this._active=this._active||!c.passive;for(var u=s.length-1;u>=0&&!(s[u].priority>=c.priority);)u--;s.splice(u+1,0,c)}},{key:"remove",value:function(t,e){for(var n=this.handlers,r=this.handlersByElement,i=n.length-1;i>=0;i--){var o=n[i];if(o.type===t&&o.handler===e){n.splice(i,1);var a=r.get(o.srcElement);a.splice(a.indexOf(o),1),0===a.length&&r.delete(o.srcElement)}}this._active=n.some((function(t){return!t.passive}))}},{key:"handleEvent",value:function(t){if(!this.isEmpty()){for(var e=this._normalizeEvent(t),n=t.srcEvent.target;n&&n!==e.rootElement;){if(this._emit(e,n),e.handled)return;n=n.parentNode}this._emit(e,"root")}}},{key:"_emit",value:function(t,e){var n=this.handlersByElement.get(e);if(n){for(var r=!1,i=function(){t.handled=!0},o=function(){t.handled=!0,r=!0},a=[],s=0;s=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function be(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object(c.a)(this,t),this.options=Object.assign({},me,n),this.events=new Map,this._onBasicInput=this._onBasicInput.bind(this),this._onOtherEvent=this._onOtherEvent.bind(this),this.setElement(e);var r=n.events;r&&this.on(r)}return Object(u.a)(t,[{key:"setElement",value:function(t){var e=this;if(this.element&&this.destroy(),this.element=t,t){var n=this.options,r=n.Manager;for(var i in this.manager=new r(t,{touchAction:n.touchAction,recognizers:n.recognizers||Gt}).on("hammer.input",this._onBasicInput),n.recognizers||Object.keys(Kt).forEach((function(t){var n=e.manager.get(t);n&&Kt[t].forEach((function(t){n.recognizeWith(t)}))})),n.recognizerOptions){var o=this.manager.get(i);if(o){var a=n.recognizerOptions[i];delete a.enable,o.set(a)}}this.wheelInput=new se(t,this._onOtherEvent,{enable:!1}),this.moveInput=new ue(t,this._onOtherEvent,{enable:!1}),this.keyInput=new he(t,this._onOtherEvent,{enable:!1,tabIndex:n.tabIndex}),this.contextmenuInput=new pe(t,this._onOtherEvent,{enable:!1});var s,c=ge(this.events);try{for(c.s();!(s=c.n()).done;){var u=Object(v.a)(s.value,2),l=u[0],h=u[1];h.isEmpty()||(this._toggleRecognizer(h.recognizerName,!0),this.manager.on(l,h.handleEvent))}}catch(p){c.e(p)}finally{c.f()}}}},{key:"destroy",value:function(){this.element&&(this.wheelInput.destroy(),this.moveInput.destroy(),this.keyInput.destroy(),this.contextmenuInput.destroy(),this.manager.destroy(),this.wheelInput=null,this.moveInput=null,this.keyInput=null,this.contextmenuInput=null,this.manager=null,this.element=null)}},{key:"on",value:function(t,e,n){this._addEventHandler(t,e,n,!1)}},{key:"once",value:function(t,e,n){this._addEventHandler(t,e,n,!0)}},{key:"watch",value:function(t,e,n){this._addEventHandler(t,e,n,!1,!0)}},{key:"off",value:function(t,e){this._removeEventHandler(t,e)}},{key:"_toggleRecognizer",value:function(t,e){var n=this.manager;if(n){var r=n.get(t);if(r&&r.options.enable!==e){r.set({enable:e});var i=Qt[t];i&&!this.options.recognizers&&i.forEach((function(i){var o=n.get(i);e?(o.requireFailure(t),r.dropRequireFailure(i)):o.dropRequireFailure(t)}))}this.wheelInput.enableEventType(t,e),this.moveInput.enableEventType(t,e),this.keyInput.enableEventType(t,e),this.contextmenuInput.enableEventType(t,e)}}},{key:"_addEventHandler",value:function(t,e,n,r,i){if("string"==typeof t){var o=this.manager,a=this.events,s=re[t]||t,c=a.get(s);c||(c=new ve(this),a.set(s,c),c.recognizerName=ne[s]||s,o&&o.on(s,c.handleEvent)),c.add(t,e,n,r,i),c.isEmpty()||this._toggleRecognizer(c.recognizerName,!0)}else for(var u in n=e,t)this._addEventHandler(u,t[u],n,r,i)}},{key:"_removeEventHandler",value:function(t,e){if("string"==typeof t){var n=this.events,r=re[t]||t,i=n.get(r);if(i&&(i.remove(t,e),i.isEmpty())){var o,a=i.recognizerName,s=!1,c=ge(n.values());try{for(c.s();!(o=c.n()).done;){var u=o.value;if(u.recognizerName===a&&!u.isEmpty()){s=!0;break}}}catch(h){c.e(h)}finally{c.f()}s||this._toggleRecognizer(a,!1)}}else for(var l in t)this._removeEventHandler(l,t[l])}},{key:"_onBasicInput",value:function(t){var e=t.srcEvent,n=Jt[e.type];n&&this.manager.emit(n,t)}},{key:"_onOtherEvent",value:function(t){this.manager.emit(t.type,t)}}]),t}();function Oe(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function we(t){for(var e=1;e0),a=o&&!this.state.isHovering,s=!o&&this.state.isHovering;a&&Ne.call(this,"onMouseEnter",t),s&&Ne.call(this,"onMouseLeave",t),(a||s)&&this.setState({isHovering:o})}}function Be(t){var e=this.props,n=e.onClick,r=e.onNativeClick,i=e.onDblClick,o=e.doubleClickZoom,a=[],s=i||o;switch(t.type){case"anyclick":a.push(r),s||a.push(n);break;case"click":s&&a.push(n)}(a=a.filter(Boolean)).length&&((t=Le.call(this,t)).features=ze.call(this,t.point),a.forEach((function(e){return e(t)})))}var Ue=Object(a.forwardRef)((function(t,e){var n=Object(a.useContext)(ut),o=Object(a.useMemo)((function(){return t.controller||new De}),[]),s=Object(a.useMemo)((function(){return new ye(null,{touchAction:t.touchAction,recognizerOptions:t.eventRecognizerOptions})}),[]),c=Object(a.useRef)(null),u=e||Object(a.useRef)(null),l=Object(a.useRef)({width:0,height:0,state:{isHovering:!1,isDragging:!1}}).current;l.props=t,l.map=u.current&&u.current.getMap(),l.setState=function(e){l.state=Ie(Ie({},l.state),e),c.current.style.cursor=t.getCursor(l.state)};var h,p,f=!0,d=function(e,n,r){if(f)h=[e,n,r];else{var i=t.onViewStateChange,o=t.onViewportChange;i&&i({viewState:e,interactionState:n,oldViewState:r}),o&&o(e,n,r)}},v=Object(a.useMemo)((function(){return Ie(Ie({},n),{},{eventManager:s,container:n.container||c.current})}),[n,c.current]);v.onViewportChange=d;var g=function(e){var n=e.isDragging,r=void 0!==n&&n;if(r!==l.state.isDragging&&l.setState({isDragging:r}),f)p=e;else{var i=t.onInteractionStateChange;i&&i(e)}},b=function(){var e=Object.assign({},t,t.viewState,{isInteractive:Boolean(t.onViewStateChange||t.onViewportChange),onViewportChange:d,onStateChange:g,eventManager:s,width:l.width,height:l.height});o.setOptions(e)};Object(a.useEffect)((function(){return s.setElement(c.current),s.on({pointerdown:Fe.bind(l),pointermove:Ze.bind(l),pointerup:Ve.bind(l),pointerleave:Ne.bind(l,"onMouseOut"),click:Be.bind(l),anyclick:Be.bind(l),dblclick:Ne.bind(l,"onDblClick"),wheel:Ne.bind(l,"onWheel"),contextmenu:Ne.bind(l,"onContextMenu")}),function(){s.destroy()}}),[]),lt((function(){h&&d.apply(void 0,Object(r.a)(h)),p&&g(p)})),b();var m=t.width,y=t.height,O=t.style,w=t.getCursor,j=Object(a.useMemo)((function(){return Ie(Ie({position:"relative"},O),{},{width:m,height:y,cursor:w(l.state)})}),[O,m,y,w,l.state]);return h&&l._child||(l._child=a.createElement(ct,{value:v},a.createElement("div",{key:"event-canvas",ref:c,style:j},a.createElement(yt,i({},t,{width:"100%",height:"100%",style:null,onResize:function(e){var n=e.width,r=e.height;l.width=n,l.height=r,b(),t.onResize({width:n,height:r})},ref:u}))))),f=!1,l._child}));Ue.supported=yt.supported,Ue.propTypes=Ae,Ue.defaultProps=Re;var qe=Ue;function We(t,e){if(t===e)return!0;if(!t||!e)return!1;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var n=0;n prop: ".concat(r));else t.setCoordinates(e.coordinates)}}(s,t,n.current):s=Ye(o,i,t),n.current=t,s?a.Children.map(t.children,(function(t){return t&&Object(a.cloneElement)(t,{source:i})})):null},Ke=n("zLVn");function Qe(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Je(t){for(var e=1;e=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}(n,["layout","paint","filter","minzoom","maxzoom","beforeId"]);if(h!==r.beforeId&&t.moveLayer(e,h),o!==r.layout){var f=r.layout||{};for(var d in o)We(o[d],f[d])||t.setLayoutProperty(e,d,o[d]);for(var v in f)o.hasOwnProperty(v)||t.setLayoutProperty(e,v,void 0)}if(s!==r.paint){var g=r.paint||{};for(var b in s)We(s[b],g[b])||t.setPaintProperty(e,b,s[b]);for(var m in g)s.hasOwnProperty(m)||t.setPaintProperty(e,m,void 0)}for(var y in We(c,r.filter)||t.setFilter(e,c),u===r.minzoom&&l===r.maxzoom||t.setLayerZoomRange(e,u,l),p)We(p[y],r[y])||t.setLayerProperty(e,y,p[y])}var en=0;function nn(t){var e=Object(a.useContext)(ut),n=Object(a.useRef)({id:t.id,type:t.type}),r=Object(a.useState)(0)[1],i=Object(a.useMemo)((function(){return t.id||"jsx-layer-".concat(en++)}),[]),o=e.map;return Object(a.useEffect)((function(){if(o){var t=function(){return r((function(t){return t+1}))};return o.on("styledata",t),function(){o.off("styledata",t),o.style&&o.style._loaded&&o.removeLayer(i)}}}),[o]),o&&o.style&&o.getLayer(i)?function(t,e,n,r){Q(n.id===r.id,"layer id changed"),Q(n.type===r.type,"layer type changed");try{tn(t,e,n,r)}catch(i){console.warn(i)}}(o,i,t,n.current):function(t,e,n){if(t.style&&t.style._loaded){var r=Je(Je({},n),{},{id:e});delete r.beforeId,t.addLayer(r,n.beforeId)}}(o,i,t),n.current=t,null}nn.propTypes=$e;var rn=nn,on={captureScroll:!1,captureDrag:!0,captureClick:!0,captureDoubleClick:!0,capturePointerMove:!1},an={captureScroll:s.bool,captureDrag:s.bool,captureClick:s.bool,captureDoubleClick:s.bool,capturePointerMove:s.bool};function sn(t){void 0===t&&(t={});var e=Object(a.useContext)(ut),n=Object(a.useRef)(null),r=Object(a.useRef)({props:t,state:{},context:e,containerRef:n}).current;return r.props=t,r.context=e,Object(a.useEffect)((function(){return function(t){var e=t.containerRef.current,n=t.context.eventManager;if(e&&n){var r={wheel:function(e){var n=t.props;n.captureScroll&&e.stopPropagation(),n.onScroll&&n.onScroll(e,t)},panstart:function(e){var n=t.props;n.captureDrag&&e.stopPropagation(),n.onDragStart&&n.onDragStart(e,t)},anyclick:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},click:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},dblclick:function(e){var n=t.props;n.captureDoubleClick&&e.stopPropagation(),n.onDoubleClick&&n.onDoubleClick(e,t)},pointermove:function(e){var n=t.props;n.capturePointerMove&&e.stopPropagation(),n.onPointerMove&&n.onPointerMove(e,t)}};return n.watch(r,e),function(){n.off(r)}}}(r)}),[e.eventManager]),r}function cn(t){var e=t.instance,n=sn(t),r=n.context,i=n.containerRef;return e._context=r,e._containerRef=i,e._render()}var un=function(t){function e(){for(var e,n=arguments.length,r=new Array(n),i=0;i0){var g=p,b=v;for(p=0;p<=1;p+=.5)d=(f=n-p*a)+a,(v=Math.max(0,u-f)+Math.max(0,d-i+u))0){var j=h,E=w;for(h=0;h<=1;h+=m)O=(y=e-h*o)+o,(w=Math.max(0,u-y)+Math.max(0,O-r+u))1||s<-1||o<0||o>e.width||a<0||a>e.height?g.display="none":g.zIndex=Math.floor((1-s)/2*1e5),g):g}(t,s,i.current,v,g),m=r.eventManager?null:Tn;return a.createElement("div",{className:"mapboxgl-popup mapboxgl-popup-anchor-".concat(g," ").concat(c),style:b,ref:i},a.createElement("div",{key:"tip",className:"mapboxgl-popup-tip",style:{borderWidth:p}}),a.createElement("div",{key:"content",ref:e,className:"mapboxgl-popup-content",onClick:m},f&&a.createElement("button",{key:"close-button",className:"mapboxgl-popup-close-button",type:"button"},"Ă—"),d))}kn.defaultProps=Sn;var Dn=a.memo(kn);function Cn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var In=Object.assign({},on,{className:"",toggleLabel:"Toggle Attribution"});function An(t){var e=sn(t),n=e.context,r=e.containerRef,i=Object(a.useRef)(null),s=Object(a.useState)(!1),c=s[0],u=s[1];Object(a.useEffect)((function(){var e;return n.map&&(e=function(t,e,n,r){var i=new H.a.AttributionControl(t);return i._map=e,i._container=n,i._innerContainer=r,i._updateAttributions(),i._updateEditLink(),e.on("styledata",i._updateData),e.on("sourcedata",i._updateData),i}({customAttribution:t.customAttribution},n.map,r.current,i.current)),function(){return e&&function(t){t._map.off("styledata",t._updateData),t._map.off("sourcedata",t._updateData)}(e)}}),[n.map]);var l=void 0===t.compact?n.viewport.width<=640:t.compact;Object(a.useEffect)((function(){!l&&c&&u(!1)}),[l]);var h=Object(a.useCallback)((function(){return u((function(t){return!t}))}),[]),p=Object(a.useMemo)((function(){return function(t){for(var e=1;ea)return 1}return 0}(t,"1.6.0")>=0?2:1}function $n(t,e,n){var r=t.viewport,i=new it(Object.assign({},r,n)),o=Object.assign({},i.getViewportProps(),Ee),a=e.onViewportChange||t.onViewportChange||Kn;(e.onViewStateChange||t.onViewStateChange||Kn)({viewState:o}),a(o)}function tr(t,e,n,r){return a.createElement("button",{key:t,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-".concat(t),type:"button",title:e,onClick:n},r||a.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))}function er(t){var e=sn(t),n=e.context,r=e.containerRef,i=t.className,s=t.showCompass,c=t.showZoom,u=t.zoomInLabel,l=t.zoomOutLabel,h=t.compassLabel,p=Object(a.useMemo)((function(){return function(t){for(var e=1;e=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n0;)r.appendChild(n.childNodes[0]);this._map._container=r,t.savedMap=null,e.mapStyle&&this._map.setStyle(Object(a.a)(e.mapStyle),{diff:!1}),this._map.isStyleLoaded()?this._fireLoadEvent():this._map.once("styledata",this._fireLoadEvent)},e._create=function(e){if(e.reuseMaps&&t.savedMap)this._reuse(e);else{if(e.gl){var n=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=n,e.gl}}var r={container:e.container,center:[0,0],zoom:8,pitch:0,bearing:0,maxZoom:24,style:Object(a.a)(e.mapStyle),interactive:!1,trackResize:!1,attributionControl:e.attributionControl,preserveDrawingBuffer:e.preserveDrawingBuffer};e.transformRequest&&(r.transformRequest=e.transformRequest),this._map=new this.mapboxgl.Map(Object.assign({},r,e.mapOptions)),this._map.once("load",e.onLoad),this._map.on("error",e.onError)}return this},e._destroy=function(){this._map&&(t.savedMap?this._map.remove():(t.savedMap=this._map,this._map.off("load",this.props.onLoad),this._map.off("error",this.props.onError),this._map.off("styledata",this._fireLoadEvent)),this._map=null)},e._initialize=function(t){var e=this;u(t=Object.assign({},c,t),"Mapbox"),this.mapboxgl.accessToken=t.mapboxApiAccessToken||c.mapboxApiAccessToken,this.mapboxgl.baseApiUrl=t.mapboxApiUrl,this._create(t);var n=t.container;Object.defineProperty(n,"offsetWidth",{get:function(){return e.width}}),Object.defineProperty(n,"clientWidth",{get:function(){return e.width}}),Object.defineProperty(n,"offsetHeight",{get:function(){return e.height}}),Object.defineProperty(n,"clientHeight",{get:function(){return e.height}});var r=this._map.getCanvas();r&&(r.style.outline="none"),this._updateMapViewport({},t),this._updateMapSize({},t),this.props=t},e._update=function(t,e){if(this._map){u(e=Object.assign({},this.props,e),"Mapbox");var n=this._updateMapViewport(t,e),r=this._updateMapSize(t,e);this._updateMapStyle(t,e),e.asyncRender||!n&&!r||this.redraw(),this.props=e}},e._updateMapStyle=function(t,e){t.mapStyle!==e.mapStyle&&this._map.setStyle(Object(a.a)(e.mapStyle),{diff:!e.preventStyleDiffing})},e._updateMapSize=function(t,e){var n=t.width!==e.width||t.height!==e.height;return n&&(this.width=e.width,this.height=e.height,this._map.resize()),n},e._updateMapViewport=function(t,e){var n=this._getViewState(t),r=this._getViewState(e),i=r.latitude!==n.latitude||r.longitude!==n.longitude||r.zoom!==n.zoom||r.pitch!==n.pitch||r.bearing!==n.bearing||r.altitude!==n.altitude;return i&&(this._map.jumpTo(this._viewStateToMapboxProps(r)),r.altitude!==n.altitude&&(this._map.transform.altitude=r.altitude)),i},e._getViewState=function(t){var e=t.viewState||t,n=e.longitude,r=e.latitude,i=e.zoom,o=e.pitch,a=void 0===o?0:o,s=e.bearing,c=void 0===s?0:s,u=e.altitude;return{longitude:n,latitude:r,zoom:i,pitch:a,bearing:c,altitude:void 0===u?1.5:u}},e._checkStyleSheet=function(t){if(void 0===t&&(t="0.47.0"),void 0!==o.a)try{var e=o.a.createElement("div");if(e.className="mapboxgl-map",e.style.display="none",o.a.body.appendChild(e),!("static"!==window.getComputedStyle(e).position)){var n=o.a.createElement("link");n.setAttribute("rel","stylesheet"),n.setAttribute("type","text/css"),n.setAttribute("href","https://api.tiles.mapbox.com/mapbox-gl-js/v".concat(t,"/mapbox-gl.css")),o.a.head.appendChild(n)}}catch(r){}},e._viewStateToMapboxProps=function(t){return{center:[t.longitude,t.latitude],zoom:t.zoom,bearing:t.bearing,pitch:t.pitch}},t}();Object(r.a)(l,"initialized",!1),Object(r.a)(l,"propTypes",s),Object(r.a)(l,"defaultProps",c),Object(r.a)(l,"savedMap",null)}).call(this,n("8oxB"))},ExcP:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r})),n.d(e,"c",(function(){return i})),n.d(e,"a",(function(){return o}));var r="undefined"!=typeof navigator&&navigator.userAgent?navigator.userAgent.toLowerCase():"",i="undefined"!=typeof window?window:t,o=(void 0!==t||window,"undefined"!=typeof document&&document,!1);try{var a={get passive(){return o=!0,!0}};i.addEventListener("test",a,a),i.removeEventListener("test",a,a)}catch(s){}}).call(this,n("yLpj"))},ODXe:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var r=n("BsWD");function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(c){i=!0,o=c}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}(t,e)||Object(r.a)(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},QFcT:function(t,e,n){var r=n("I+eb"),i=Math.hypot,o=Math.abs,a=Math.sqrt;r({target:"Math",stat:!0,forced:!!i&&i(1/0,NaN)!==1/0},{hypot:function(t,e){for(var n,r,i=0,s=0,c=arguments.length,u=0;s0?(r=n/u)*r:n;return u===1/0?1/0:u*a(i)}})},QFtD:function(t,e,n){var r;!function(i,o,a,s){"use strict";var c,u=["","webkit","Moz","MS","ms","o"],l=o.createElement("div"),h=Math.round,p=Math.abs,f=Date.now;function d(t,e,n){return setTimeout(w(t,n),e)}function v(t,e,n){return!!Array.isArray(t)&&(g(t,n[e],n),!0)}function g(t,e,n){var r;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(r=0;r\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=i.console&&(i.console.warn||i.console.log);return o&&o.call(i.console,r,n),t.apply(this,arguments)}}c="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n-1}function x(t){return t.trim().split(/\s+/g)}function T(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var r=0;rn[e]})):r.sort()),r}function C(t,e){for(var n,r,i=e[0].toUpperCase()+e.slice(1),o=0;o1&&!n.firstMultiple?n.firstMultiple=B(e):1===i&&(n.firstMultiple=!1);var o=n.firstInput,a=n.firstMultiple,s=a?a.center:o.center,c=e.center=U(r);e.timeStamp=f(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=X(s,c),e.distance=H(s,c),function(t,e){var n=e.center,r=t.offsetDelta||{},i=t.prevDelta||{},o=t.prevInput||{};1!==e.eventType&&4!==o.eventType||(i=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},r=t.offsetDelta={x:n.x,y:n.y});e.deltaX=i.x+(n.x-r.x),e.deltaY=i.y+(n.y-r.y)}(n,e),e.offsetDirection=W(e.deltaX,e.deltaY);var u=q(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=u.x,e.overallVelocityY=u.y,e.overallVelocity=p(u.x)>p(u.y)?u.x:u.y,e.scale=a?(l=a.pointers,h=r,H(h[0],h[1],F)/H(l[0],l[1],F)):1,e.rotation=a?function(t,e){return X(e[1],e[0],F)+X(t[1],t[0],F)}(a.pointers,r):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,r,i,o,a=t.lastInterval||e,s=e.timeStamp-a.timeStamp;if(8!=e.eventType&&(s>25||void 0===a.velocity)){var c=e.deltaX-a.deltaX,u=e.deltaY-a.deltaY,l=q(s,c,u);r=l.x,i=l.y,n=p(l.x)>p(l.y)?l.x:l.y,o=W(c,u),t.lastInterval=e}else n=a.velocity,r=a.velocityX,i=a.velocityY,o=a.direction;e.velocity=n,e.velocityX=r,e.velocityY=i,e.direction=o}(n,e);var l,h;var d=t.element;M(e.srcEvent.target,d)&&(d=e.srcEvent.target);e.target=d}(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function B(t){for(var e=[],n=0;n=p(e)?t<0?2:4:e<0?8:16}function H(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return Math.sqrt(r*r+i*i)}function X(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return 180*Math.atan2(i,r)/Math.PI}V.prototype={handler:function(){},init:function(){this.evEl&&P(this.element,this.evEl,this.domHandler),this.evTarget&&P(this.target,this.evTarget,this.domHandler),this.evWin&&P(A(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&_(this.element,this.evEl,this.domHandler),this.evTarget&&_(this.target,this.evTarget,this.domHandler),this.evWin&&_(A(this.element),this.evWin,this.domHandler)}};var Y={mousedown:1,mousemove:2,mouseup:4};function G(){this.evEl="mousedown",this.evWin="mousemove mouseup",this.pressed=!1,V.apply(this,arguments)}O(G,V,{handler:function(t){var e=Y[t.type];1&e&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))}});var K={pointerdown:1,pointermove:2,pointerup:4,pointercancel:8,pointerout:8},Q={2:"touch",3:"pen",4:"mouse",5:"kinect"},J="pointerdown",$="pointermove pointerup pointercancel";function tt(){this.evEl=J,this.evWin=$,V.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}i.MSPointerEvent&&!i.PointerEvent&&(J="MSPointerDown",$="MSPointerMove MSPointerUp MSPointerCancel"),O(tt,V,{handler:function(t){var e=this.store,n=!1,r=t.type.toLowerCase().replace("ms",""),i=K[r],o=Q[t.pointerType]||t.pointerType,a="touch"==o,s=T(e,t.pointerId,"pointerId");1&i&&(0===t.button||a)?s<0&&(e.push(t),s=e.length-1):12&i&&(n=!0),s<0||(e[s]=t,this.callback(this.manager,i,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(s,1))}});var et={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function nt(){this.evTarget="touchstart",this.evWin="touchstart touchmove touchend touchcancel",this.started=!1,V.apply(this,arguments)}function rt(t,e){var n=k(t.touches),r=k(t.changedTouches);return 12&e&&(n=D(n.concat(r),"identifier",!0)),[n,r]}O(nt,V,{handler:function(t){var e=et[t.type];if(1===e&&(this.started=!0),this.started){var n=rt.call(this,t,e);12&e&&n[0].length-n[1].length==0&&(this.started=!1),this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}}});var it={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function ot(){this.evTarget="touchstart touchmove touchend touchcancel",this.targetIds={},V.apply(this,arguments)}function at(t,e){var n=k(t.touches),r=this.targetIds;if(3&e&&1===n.length)return r[n[0].identifier]=!0,[n,n];var i,o,a=k(t.changedTouches),s=[],c=this.target;if(o=n.filter((function(t){return M(t.target,c)})),1===e)for(i=0;i-1&&r.splice(t,1)}),2500)}}function lt(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,r=0;r-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){var e=this,n=this.state;function r(n){e.manager.emit(n,t)}n<8&&r(e.options.event+gt(n)),r(e.options.event),t.additionalEvent&&r(t.additionalEvent),n>=8&&r(e.options.event+gt(n))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;te.threshold&&i&e.direction},attrTest:function(t){return yt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=bt(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),O(wt,yt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||2&this.state)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),O(jt,vt,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return["auto"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distancee.time;if(this._input=t,!r||!n||12&t.eventType&&!i)this.reset();else if(1&t.eventType)this.reset(),this._timer=d((function(){this.state=8,this.tryEmit()}),e.time,this);else if(4&t.eventType)return 8;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){8===this.state&&(t&&4&t.eventType?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=f(),this.manager.emit(this.options.event,this._input)))}}),O(Et,yt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||2&this.state)}}),O(Pt,yt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:30,pointers:1},getTouchAction:function(){return Ot.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return 30&n?e=t.overallVelocity:6&n?e=t.overallVelocityX:24&n&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&p(e)>this.options.velocity&&4&t.eventType},emit:function(t){var e=bt(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),O(_t,vt,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return["manipulation"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance0},t.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),l=function(t,e){for(var n=0,r=Object.keys(e);n0},t}(),j="undefined"!=typeof WeakMap?new WeakMap:new r,E=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=u.getInstance(),r=new w(e,n,this);j.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){E.prototype[t]=function(){var e;return(e=j.get(this))[t].apply(e,arguments)}}));var P=void 0!==o.ResizeObserver?o.ResizeObserver:E;e.a=P}).call(this,n("yLpj"))},"n+fv":function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));n("QFcT");var r=n("yU0y");function i(t,e){return t[0]=-e[0],t[1]=-e[1],t[2]=-e[2],t}var o,a;o=new r.a(3),r.a!=Float32Array&&(o[0]=0,o[1]=0,o[2]=0),a=o},yU0y:function(t,e,n){"use strict";n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o}));n("QFcT");var r=1e-6,i="undefined"!=typeof Float32Array?Float32Array:Array,o=Math.random;Math.PI;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)})},zLVn:function(t,e,n){"use strict";function r(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r=0||(i[n]=t[n]);return i}n.d(e,"a",(function(){return r}))}}]); \ No newline at end of file diff --git a/76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js.LICENSE.txt b/76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js.LICENSE.txt similarity index 100% rename from 76c8c8e7b22c6a62b281c8da985f3febdc31697d-58243f9e219c888e8bad.js.LICENSE.txt rename to 76c8c8e7b22c6a62b281c8da985f3febdc31697d-e356d2e7a3916880fbf2.js.LICENSE.txt diff --git a/docs/advanced/custom-components/index.html b/docs/advanced/custom-components/index.html index 0e02f28d..179f5d92 100644 --- a/docs/advanced/custom-components/index.html +++ b/docs/advanced/custom-components/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Custom Components

You may create your own map control components by consuming MapContext.

Using the MapContext

The following component renders a label "(longitude, latitude)" at the given coordinate:

import * as React from 'react';
+  
Custom Components
You may create your own map control components by consuming MapContext.
Using the MapContext
The following component renders a label "(longitude, latitude)" at the given coordinate:
import * as React from 'react';
 import MapGL, {MapContext} from 'react-map-gl';
 
 function CustomMarker(props) {
@@ -148,4 +148,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <CustomControl />
     </MapGL>
   )
-}
Calling useMapControl(opts) returns an object containing the following fields:
  • context (MapContext) - the current context value
  • containerRef (RefObject) - this should be assigned to the ref prop of the DOM element that the event listeners should attach to.
This hook supports the following options:
  • onScroll (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.
  • onDragStart (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.
  • onClick (Function) - called on click event. Can be used to stop map from calling the onClick callback when this component is clicked.
  • onDoubleClick (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.
  • onPointerMove (Function) - called on pointermove event. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

\ No newline at end of file
+}

Calling useMapControl(opts) returns an object containing the following fields:

  • context (MapContext) - the current context value
  • containerRef (RefObject) - this should be assigned to the ref prop of the DOM element that the event listeners should attach to.

This hook supports the following options:

  • onScroll (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.
  • onDragStart (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.
  • onClick (Function) - called on click event. Can be used to stop map from calling the onClick callback when this component is clicked.
  • onDoubleClick (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.
  • onPointerMove (Function) - called on pointermove event. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
\ No newline at end of file diff --git a/docs/advanced/custom-map-controller/index.html b/docs/advanced/custom-map-controller/index.html index 0e23ecbe..bb1042d7 100644 --- a/docs/advanced/custom-map-controller/index.html +++ b/docs/advanced/custom-map-controller/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Custom Map Controller

Overriding The Default Map Controller

To change the default behavior of map interaction, you can provide a custom map control to the controller prop of InteractiveMap.

This custom map control must offer the following interface:

  • setOptions(options) - called by InteractiveMap when props change.
  const mapController = new MyMapController();
+  
Custom Map Controller
Overriding The Default Map Controller
To change the default behavior of map interaction, you can provide a custom map control to the controller prop of InteractiveMap.
This custom map control must offer the following interface:
  • setOptions(options) - called by InteractiveMap when props change.
  const mapController = new MyMapController();
 
   render() {
     return <ReactMapGL controller={mapController} ... />;
@@ -150,4 +150,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       super._onPanRotate(event);
       this.onRotate();
     }
-  }

\ No newline at end of file
+  }
\ No newline at end of file diff --git a/docs/advanced/viewport-transition/index.html b/docs/advanced/viewport-transition/index.html index 829a8a72..a0c61607 100644 --- a/docs/advanced/viewport-transition/index.html +++ b/docs/advanced/viewport-transition/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Viewport Transition

react-map-gl does not expose the transition API from mapbox-gl-js since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl.

Instead, transitions can be defined using InteractiveMap's transition props.

Example: Fly to a New Location

import * as React from 'react';
+  
Viewport Transition
react-map-gl does not expose the transition API from mapbox-gl-js since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl.
Instead, transitions can be defined using InteractiveMap's transition props.
Example: Fly to a New Location
import * as React from 'react';
 import ReactMapGL, {FlyToInterpolator} from 'react-map-gl';
 // 3rd-party easing functions
 import d3 from 'd3-ease';
@@ -137,4 +137,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       transitionInterpolator: new FlyToInterpolator(),
       transitionEasing: d3.easeCubic
     });
-  };
Documentation of WebMercatorViewport
Controlling Map Transitions
InteractiveMap's Transition Props
See properties of InteractiveMap.
  • transitionDuration (Number)
  • transitionInterpolator (Object)
  • transitionEasing (Function)
  • transitionInterruption (Number)
  • onTransitionStart (Function)
  • onTransitionInterrupt (Function)
  • onTransitionEnd (Function)
Transition and the onViewportChange Callback
InteractiveMap is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the onViewportChange callback:
<ReactMapGL {...viewport} onViewportChange={setViewport} />
Remarks:
  • The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with transitionDuration: 0, meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition.
  • It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration).
  • "Set and forget": the values of the following props at the start of a transition carry through the entire duration of the transition:
    • transitionDuration
    • transitionInterpolator
    • transitionEasing
    • transitionInterruption
  • The default interaction/transition behavior can always be intercepted and overwritten in the handler for onViewportChange. However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition.
  • When using FlyToInterpolator for transitionInterpolator, transitionDuration can be set to 'auto' where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using speed parameter to FlyToInterpolator constructor.
Transition Interpolators
A TransitionInterpolator instance must be supplied to the transitionInterpolator prop. It contains the following methods:
  • arePropsEqual(currentProps, nextProps) - called to determine if transition should be triggered when viewport props update.
  • initiateProps(startProps, endProps) - called before transition starts to pre-process the start and end viewport props.
  • interpolateProps(startProps, endProps, t) - called to get viewport props in transition. t is a time factor between [0, 1].
react-map-gl offers two built-in interpolator classes:

\ No newline at end of file
+  };

Documentation of WebMercatorViewport

Controlling Map Transitions

InteractiveMap's Transition Props

See properties of InteractiveMap.

  • transitionDuration (Number)
  • transitionInterpolator (Object)
  • transitionEasing (Function)
  • transitionInterruption (Number)
  • onTransitionStart (Function)
  • onTransitionInterrupt (Function)
  • onTransitionEnd (Function)

Transition and the onViewportChange Callback

InteractiveMap is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the onViewportChange callback:

<ReactMapGL {...viewport} onViewportChange={setViewport} />

Remarks:

  • The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with transitionDuration: 0, meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition.
  • It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration).
  • "Set and forget": the values of the following props at the start of a transition carry through the entire duration of the transition:
    • transitionDuration
    • transitionInterpolator
    • transitionEasing
    • transitionInterruption
  • The default interaction/transition behavior can always be intercepted and overwritten in the handler for onViewportChange. However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition.
  • When using FlyToInterpolator for transitionInterpolator, transitionDuration can be set to 'auto' where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using speed parameter to FlyToInterpolator constructor.

Transition Interpolators

A TransitionInterpolator instance must be supplied to the transitionInterpolator prop. It contains the following methods:

  • arePropsEqual(currentProps, nextProps) - called to determine if transition should be triggered when viewport props update.
  • initiateProps(startProps, endProps) - called before transition starts to pre-process the start and end viewport props.
  • interpolateProps(startProps, endProps, t) - called to get viewport props in transition. t is a time factor between [0, 1].

react-map-gl offers two built-in interpolator classes:

\ No newline at end of file diff --git a/docs/api-reference/attribution-control/index.html b/docs/api-reference/attribution-control/index.html index e0712a95..a73e6455 100644 --- a/docs/api-reference/attribution-control/index.html +++ b/docs/api-reference/attribution-control/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

AttributionControl

Since v5.3

This is a React equivalent of Mapbox's AttributionControl.

import * as React from 'react';
+  
AttributionControl
Since v5.3
This is a React equivalent of Mapbox's AttributionControl.
import * as React from 'react';
 import ReactMapGL, {AttributionControl} from 'react-map-gl';
 
 const attributionStyle= {
@@ -110,4 +110,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <AttributionControl compact={true} style={attributionStyle} />
     </ReactMapGL>
   );
-}
Properties
toggleLabel (String)
  • default: 'Toggle Attribution'
Label applied to the toggle button.
compact (Boolean)
If true, force a compact attribution that shows the full attribution on mouse hover. If false, force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide.
customAttribution (String|[String])
String or strings to show in addition to any other attributions.
className (String)
Assign a custom class name to the container of this control.
style (Object)
  • default: {position: 'absolute'}
A React style object applied to this control.
captureScroll (Boolean)
  • default: false
Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.
captureDrag (Boolean)
  • default: true
Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.
captureClick (Boolean)
  • default: true
Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.
captureDoubleClick (Boolean)
  • default: true
Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.
capturePointerMove (Boolean)
  • default: false
Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
Styling
Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.
Source
attribution-control.js

\ No newline at end of file
+}

Properties

toggleLabel (String)
  • default: 'Toggle Attribution'

Label applied to the toggle button.

compact (Boolean)

If true, force a compact attribution that shows the full attribution on mouse hover. If false, force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide.

customAttribution (String|[String])

String or strings to show in addition to any other attributions.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

attribution-control.js

\ No newline at end of file diff --git a/docs/api-reference/canvas-overlay/index.html b/docs/api-reference/canvas-overlay/index.html index e7450564..147b2a29 100644 --- a/docs/api-reference/canvas-overlay/index.html +++ b/docs/api-reference/canvas-overlay/index.html @@ -86,4 +86,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

CanvasOverlay

Allows applications to overlay data on top of maps using a canvas.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • ctx {CanvasRenderingContext2D} - rendering context of the canvas
  • width {Number} - width of the viewport
  • height {Number} - height of the viewport
  • project {Function} - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject {Function} - get geo coordinates [lng, lat] from screen position [x, y]
captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

canvas-overlay.js

\ No newline at end of file +

CanvasOverlay

Allows applications to overlay data on top of maps using a canvas.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • ctx {CanvasRenderingContext2D} - rendering context of the canvas
  • width {Number} - width of the viewport
  • height {Number} - height of the viewport
  • project {Function} - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject {Function} - get geo coordinates [lng, lat] from screen position [x, y]
captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

canvas-overlay.js

\ No newline at end of file diff --git a/docs/api-reference/fly-to-interpolator/index.html b/docs/api-reference/fly-to-interpolator/index.html index dcb36c68..9e60af11 100644 --- a/docs/api-reference/fly-to-interpolator/index.html +++ b/docs/api-reference/fly-to-interpolator/index.html @@ -90,9 +90,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

FlyToInterpolator

Since v3.2

Implements the TransitionInterpolator interface. Designed to use with the transitionInterpolator prop of InteractiveMap.

This interpolator offers similar behavior to Mapbox's flyTo method.

import ReactMapGL, {FlyToInterpolator} from 'react-map-gl';
+  
FlyToInterpolator
Since v3.2
Implements the TransitionInterpolator interface. Designed to use with the transitionInterpolator prop of InteractiveMap.
This interpolator offers similar behavior to Mapbox's flyTo method.
import ReactMapGL, {FlyToInterpolator} from 'react-map-gl';
 
 <ReactMapGL
     ...
     transitionDuration={1000}
-    transitionInterpolator={new FlyToInterpolator()} />
Constructor
new FlyToInterpolator([options])
Parameters:
  • options {Object} (optional)
    • curve (Number, optional, default: 1.414) - The zooming "curve" that will occur along the flight path.
    • speed (Number, optional, default: 1.2) - The average speed of the animation defined in relation to options.curve, it linearly affects the duration, higher speed returns smaller durations and vice versa.
    • screenSpeed (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to opts.speed it linearly affects the duration,  when specified opts.speed is ignored.
    • maxDuration (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value, 0 is returned.
Source
viewport-fly-to-interpolator.js

\ No newline at end of file
+    transitionInterpolator={new FlyToInterpolator()} />

Constructor

new FlyToInterpolator([options])

Parameters:

  • options {Object} (optional)
    • curve (Number, optional, default: 1.414) - The zooming "curve" that will occur along the flight path.
    • speed (Number, optional, default: 1.2) - The average speed of the animation defined in relation to options.curve, it linearly affects the duration, higher speed returns smaller durations and vice versa.
    • screenSpeed (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to opts.speed it linearly affects the duration, when specified opts.speed is ignored.
    • maxDuration (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value, 0 is returned.

Source

viewport-fly-to-interpolator.js

\ No newline at end of file diff --git a/docs/api-reference/fullscreen-control/index.html b/docs/api-reference/fullscreen-control/index.html index 8588c526..f6be981f 100644 --- a/docs/api-reference/fullscreen-control/index.html +++ b/docs/api-reference/fullscreen-control/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

FullscreenControl

Since v4.1

This is a React equivalent of Mapbox's FullscreenControl.

import * as React from 'react';
+  
FullscreenControl
Since v4.1
This is a React equivalent of Mapbox's FullscreenControl.
import * as React from 'react';
 import ReactMapGL, {FullscreenControl} from 'react-map-gl';
 
 const fullscreenControlStyle= {
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <FullscreenControl style={fullscreenControlStyle} />
     </ReactMapGL>
   );
-}
Properties
container (HTMLElement)
container is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.
label (String)
  • default: Toggle fullscreen
Label applied to the fullscreen control button.
className (String)
Assign a custom class name to the container of this control.
style (Object)
  • default: {position: 'absolute'}
A React style object applied to this control.
captureScroll (Boolean)
  • default: false
Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.
captureDrag (Boolean)
  • default: true
Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.
captureClick (Boolean)
  • default: true
Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.
captureDoubleClick (Boolean)
  • default: true
Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.
capturePointerMove (Boolean)
  • default: false
Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
Styling
Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.
Source
fullscreen-control.js

\ No newline at end of file
+}

Properties

container (HTMLElement)

container is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.

label (String)
  • default: Toggle fullscreen

Label applied to the fullscreen control button.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

fullscreen-control.js

\ No newline at end of file diff --git a/docs/api-reference/geolocate-control/index.html b/docs/api-reference/geolocate-control/index.html index 65c58d72..fdb45b7b 100644 --- a/docs/api-reference/geolocate-control/index.html +++ b/docs/api-reference/geolocate-control/index.html @@ -92,7 +92,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

GeolocateControl

Since v4.1

This is a React equivalent of Mapbox's GeolocateControl.

import * as React from 'react';
+  
GeolocateControl
Since v4.1
This is a React equivalent of Mapbox's GeolocateControl.
import * as React from 'react';
 import ReactMapGL, {GeolocateControl} from "react-map-gl";
 
 const geolocateControlStyle= {
@@ -116,4 +116,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       />
     </ReactMapGL>
   );
-}
Properties
Accepts all the options of Mapbox GeolocateControl.
onViewportChange (Function, optional)
Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.
onGeolocate (Function, optional)
Callback when Geolocation API position updates. It is called with a Geolocation API PositionOptions object.
positionOptions (Object)
  • default: {enableHighAccuracy: false, timeout: 6000}
A Geolocation API PositionOptions object.
fitBoundsOptions (Object)
  • default: {maxZoom: 15}
A fitBounds options object to use when the map is panned and zoomed to the user's location. The default is to use a  maxZoom of 15 to limit how far the map will zoom in for very accurate locations.
trackUserLocation (Boolean)
  • default: false
If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.
showUserLocation (Boolean)
  • default: true
By default a dot will be shown on the map at the user's location. Set to false to disable.
showAccuracyCircle (Boolean)
  • default: true
By default, if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false.
className (String)
Assign a custom class name to the container of this control.
style (Object)
  • default: {position: 'absolute'}
A React style object applied to this control.
label (String)
  • default: 'Find My Location'
Label applied to the Geolocate control button.
disabledLabel (String)
  • default: 'Location Not Available'
Label applied to the Geolocate control button if geolocation is disabled by the user.
auto (Boolean)
  • default: false
Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside componentDidMount where as changing to true at a later point triggers inside componentDidUpdate. Initally setting as or changing to false has no effect.
captureScroll (Boolean)
  • default: false
Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.
captureDrag (Boolean)
  • default: true
Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.
captureClick (Boolean)
  • default: true
Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.
captureDoubleClick (Boolean)
  • default: true
Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.
capturePointerMove (Boolean)
  • default: false
Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
Styling
Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.
Source
geolocate-control.js

\ No newline at end of file
+}

Properties

Accepts all the options of Mapbox GeolocateControl.

onViewportChange (Function, optional)

Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.

onGeolocate (Function, optional)

Callback when Geolocation API position updates. It is called with a Geolocation API PositionOptions object.

positionOptions (Object)
  • default: {enableHighAccuracy: false, timeout: 6000}

A Geolocation API PositionOptions object.

fitBoundsOptions (Object)
  • default: {maxZoom: 15}

A fitBounds options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.

trackUserLocation (Boolean)
  • default: false

If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.

showUserLocation (Boolean)
  • default: true

By default a dot will be shown on the map at the user's location. Set to false to disable.

showAccuracyCircle (Boolean)
  • default: true

By default, if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

label (String)
  • default: 'Find My Location'

Label applied to the Geolocate control button.

disabledLabel (String)
  • default: 'Location Not Available'

Label applied to the Geolocate control button if geolocation is disabled by the user.

auto (Boolean)
  • default: false

Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside componentDidMount where as changing to true at a later point triggers inside componentDidUpdate. Initally setting as or changing to false has no effect.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

geolocate-control.js

\ No newline at end of file diff --git a/docs/api-reference/html-overlay/index.html b/docs/api-reference/html-overlay/index.html index 84e0000d..5efe2dca 100644 --- a/docs/api-reference/html-overlay/index.html +++ b/docs/api-reference/html-overlay/index.html @@ -86,4 +86,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

HTMLOverlay

Allows applications to overlay data on top of maps using a HTML container.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • width {Number} - width of the viewport
  • height {Number} - height of the viewport
  • project {Function} - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject {Function} - get geo coordinates [lng, lat] from screen position [x, y]
style (Object)

Additional css styles of the div container.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

html-overlay.js

\ No newline at end of file +

HTMLOverlay

Allows applications to overlay data on top of maps using a HTML container.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • width {Number} - width of the viewport
  • height {Number} - height of the viewport
  • project {Function} - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject {Function} - get geo coordinates [lng, lat] from screen position [x, y]
style (Object)

Additional css styles of the div container.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

html-overlay.js

\ No newline at end of file diff --git a/docs/api-reference/interactive-map/index.html b/docs/api-reference/interactive-map/index.html index 78d4dd48..1329fb79 100644 --- a/docs/api-reference/interactive-map/index.html +++ b/docs/api-reference/interactive-map/index.html @@ -94,7 +94,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

InteractiveMap

Since v3.0

This component renders MapboxGL and provides full interactivity support. +

InteractiveMap

Since v3.0

This component renders MapboxGL and provides full interactivity support. It uses StaticMap underneath to render the final map component. This is the default exported component from react-map-gl.

import * as React from 'react';
 import ReactMapGL from 'react-map-gl';
@@ -117,4 +117,4 @@ This is the eventRecognizerOptions={eventRecognizerOptions}
 />

Note that the value of this prop is used once when the component mounts. Subsequent changes will be ignored.

clickRadius (Number)
  • default: 0

Radius to detect features around a clicked point.

controller (Object)

A map controller instance to replace the default map controller.

This object must implement the following interface:

  • events - An array of subscribed events
  • handleEvent(event, context) - A method that handles interactive events
interactiveLayerIds (Array)
  • default: null

A list of layer ids that are interactive. If specified:

  • Pointer event callbacks will only query the features under the pointer of these layers.
  • The getCursor callback will receive isHovering: true when hover over features of these layers.

If not specified:

  • Pointer event callbacks will query the features under the pointer of all layers.
  • The getCursor callback will always receive isHovering: false.

Transitions

transitionDuration (Number)
  • default: 0

Duration of transition in milliseconds. If specified, the map's viewport will smoothly move from the previous props to the current one.

transitionInterpolator (Object)
  • default: new LinearInterpolator()

An interpolator object that defines the transition behavior between two map states. react-map-gl offers two interpolators:

  • LinearInterpolator - similar to Mapbox's easeTo behavior.
  • FlyToInterpolator - similar to Mapbox's flyTo behavior.

You may import them as follows:

import ReactMapGL, {LinearInterpolator, FlyToInterpolator} from 'react-map-gl';
 
-<ReactMapGL transitionDuration={1000} transitionInterpolator={new FlyToInterpolator()}>

For details about using transition interpolators, see transitions.

transitionEasing (Function)
  • default: t => t

Easing function that maps a value from [0, 1] to [0, 1]. Check out http://easings.net/ for common easing curves.

transitionInterruption (Number)
  • default: TRANSITION_EVENTS.BREAK

What to do if an ongoing transition is interrupted by another transition. There are 4 options:

  • TRANSITION_EVENTS.BREAK - Start new transition from the current view.
  • TRANSITION_EVENTS.SNAP_TO_END - Jump to the end of the previous transition before starting the new transition.
  • TRANSITION_EVENTS.IGNORE - Complete the previous transition and ignore the new viewport change.
  • TRANSITION_EVENTS.UPDATE - Continue the ongoing transition but change its destination to the new viewport.

You may import the constants as follows:

import {TRANSITION_EVENTS} from 'react-map-gl';

Callbacks

Inherit the following props from StaticMap:

  • onLoad (Function)
  • onResize (Function)
  • onError (Function)
onViewportChange (Function)

Callback that is fired when the map's viewport properties should be updated. If not supplied, the map is not interactive.

onViewportChange(viewState, interactionState, oldViewState);

Arguments:

  • viewState (Object) The next viewport properties, including: width, height, latitude, longitude, zoom, bearing, pitch, altitude, maxZoom, minZoom, maxPitch, minPitch, transitionDuration, transitionEasing, transitionInterpolator, transitionInterruption.
  • interactionState (Object) The current interaction that caused this viewport change. See onInteractionStateChange for possible fields.
  • oldViewState (Object) The current viewport properties.
onViewStateChange (Function)

A newer version of the onViewportChange callback. Both are supported and provide equivalent functionality.

onViewStateChange({viewState, interactionState, oldViewState});
onInteractionStateChange (Function)

Callback that is fired when the user interacted with the map.

onInteractionStateChange(interactionState)

Possible fields include:

  • interactionState.inTransition (Boolean)
  • interactionState.isDragging (Boolean)
  • interactionState.isPanning (Boolean)
  • interactionState.isRotating (Boolean)
  • interactionState.isZooming (Boolean)

Note:

  • onInteractionStateChange may be fired without onViewportChange. For example, when the pointer is released at the end of a drag-pan, isDragging are reset to false, without the viewport's longitude and latitude changing.
onHover (Function)

Called when the mouse moves over the map (without button pressed). Receives a PointerEvent object.

onClick (Function)

Called when the map is single clicked. Receives a PointerEvent object. This event is not fired on double click therefore there may be a delay between pointer up and the event.

onNativeClick (Function)

Called when the map is clicked. Receives a PointerEvent object. This event is fired twice on double click.

onDblClick (Function)

Called when the map is double clicked. Receives a PointerEvent object.

onMouseDown (Function)

Called when a pointing device (usually a mouse) is pressed within the map. Receives a PointerEvent object.

onMouseMove (Function)

Called when a pointing device (usually a mouse) is moved within the map. Receives a PointerEvent object.

onMouseUp (Function)

Called when a pointing device (usually a mouse) is released within the map. Receives a PointerEvent object.

onTouchStart (Function)

Called when a touchstart event occurs within the map. Receives a PointerEvent object.

onTouchMove (Function)

Called when a touchmove event occurs within the map. Receives a PointerEvent object.

onTouchEnd (Function)

Called when a touchend event occurs within the map. Receives a PointerEvent object.

onMouseEnter (Function)

Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the interactiveLayerIds prop. Receives a PointerEvent object.

onMouseLeave (Function)

Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the interactiveLayerIds prop. Receives a PointerEvent object.

onWheel (Function)

Called when a wheel event occurs within the map. Receives a PointerEvent object.

onMouseOut (Function)

Called when a point device (usually a mouse) leaves the map's canvas. Receives a PointerEvent object.

onContextMenu (Function)

Called when the context menu is activated. Prevent default here to enable right button interaction.

Default: event => event.preventDefault()

onTransitionStart (Function)

Callback that is fired when a transition is triggered.

onTransitionInterrupt (Function)

Callback that is fired when an ongoing transition is interrupted by another transition.

onTransitionEnd (Function)

Callback that is fired when a transition is complete.

Methods

Inherit the following methods from StaticMap:

  • getMap()
  • queryRenderedFeatures(geometry, parameters)

Source

interactive-map.js

\ No newline at end of file +<ReactMapGL transitionDuration={1000} transitionInterpolator={new FlyToInterpolator()}>

For details about using transition interpolators, see transitions.

transitionEasing (Function)
  • default: t => t

Easing function that maps a value from [0, 1] to [0, 1]. Check out http://easings.net/ for common easing curves.

transitionInterruption (Number)
  • default: TRANSITION_EVENTS.BREAK

What to do if an ongoing transition is interrupted by another transition. There are 4 options:

  • TRANSITION_EVENTS.BREAK - Start new transition from the current view.
  • TRANSITION_EVENTS.SNAP_TO_END - Jump to the end of the previous transition before starting the new transition.
  • TRANSITION_EVENTS.IGNORE - Complete the previous transition and ignore the new viewport change.
  • TRANSITION_EVENTS.UPDATE - Continue the ongoing transition but change its destination to the new viewport.

You may import the constants as follows:

import {TRANSITION_EVENTS} from 'react-map-gl';

Callbacks

Inherit the following props from StaticMap:

  • onLoad (Function)
  • onResize (Function)
  • onError (Function)
onViewportChange (Function)

Callback that is fired when the map's viewport properties should be updated. If not supplied, the map is not interactive.

onViewportChange(viewState, interactionState, oldViewState);

Arguments:

  • viewState (Object) The next viewport properties, including: width, height, latitude, longitude, zoom, bearing, pitch, altitude, maxZoom, minZoom, maxPitch, minPitch, transitionDuration, transitionEasing, transitionInterpolator, transitionInterruption.
  • interactionState (Object) The current interaction that caused this viewport change. See onInteractionStateChange for possible fields.
  • oldViewState (Object) The current viewport properties.
onViewStateChange (Function)

A newer version of the onViewportChange callback. Both are supported and provide equivalent functionality.

onViewStateChange({viewState, interactionState, oldViewState});
onInteractionStateChange (Function)

Callback that is fired when the user interacted with the map.

onInteractionStateChange(interactionState)

Possible fields include:

  • interactionState.inTransition (Boolean)
  • interactionState.isDragging (Boolean)
  • interactionState.isPanning (Boolean)
  • interactionState.isRotating (Boolean)
  • interactionState.isZooming (Boolean)

Note:

  • onInteractionStateChange may be fired without onViewportChange. For example, when the pointer is released at the end of a drag-pan, isDragging are reset to false, without the viewport's longitude and latitude changing.
onHover (Function)

Called when the mouse moves over the map (without button pressed). Receives a PointerEvent object.

onClick (Function)

Called when the map is single clicked. Receives a PointerEvent object. This event is not fired on double click therefore there may be a delay between pointer up and the event.

onNativeClick (Function)

Called when the map is clicked. Receives a PointerEvent object. This event is fired twice on double click.

onDblClick (Function)

Called when the map is double clicked. Receives a PointerEvent object.

onMouseDown (Function)

Called when a pointing device (usually a mouse) is pressed within the map. Receives a PointerEvent object.

onMouseMove (Function)

Called when a pointing device (usually a mouse) is moved within the map. Receives a PointerEvent object.

onMouseUp (Function)

Called when a pointing device (usually a mouse) is released within the map. Receives a PointerEvent object.

onTouchStart (Function)

Called when a touchstart event occurs within the map. Receives a PointerEvent object.

onTouchMove (Function)

Called when a touchmove event occurs within the map. Receives a PointerEvent object.

onTouchEnd (Function)

Called when a touchend event occurs within the map. Receives a PointerEvent object.

onMouseEnter (Function)

Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the interactiveLayerIds prop. Receives a PointerEvent object.

onMouseLeave (Function)

Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the interactiveLayerIds prop. Receives a PointerEvent object.

onWheel (Function)

Called when a wheel event occurs within the map. Receives a PointerEvent object.

onMouseOut (Function)

Called when a point device (usually a mouse) leaves the map's canvas. Receives a PointerEvent object.

onContextMenu (Function)

Called when the context menu is activated. Prevent default here to enable right button interaction.

Default: event => event.preventDefault()

onTransitionStart (Function)

Callback that is fired when a transition is triggered.

onTransitionInterrupt (Function)

Callback that is fired when an ongoing transition is interrupted by another transition.

onTransitionEnd (Function)

Callback that is fired when a transition is complete.

Methods

Inherit the following methods from StaticMap:

  • getMap()
  • queryRenderedFeatures(geometry, parameters)

Source

interactive-map.js

\ No newline at end of file diff --git a/docs/api-reference/layer/index.html b/docs/api-reference/layer/index.html index a6541f85..c75d10c9 100644 --- a/docs/api-reference/layer/index.html +++ b/docs/api-reference/layer/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Layer

Since v5.1

This component allows apps to create a map layer using React.

import * as React from 'react';
+  
Layer
Since v5.1
This component allows apps to create a map layer using React.
import * as React from 'react';
 import ReactMapGL, {Layer} from 'react-map-gl';
 
 const parkLayer = {
@@ -114,4 +114,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <Layer {...parkLayer} paint={{'fill-color': parkColor}} />
     </ReactMapGL>
   );
-}
Properties
The props provided to this component should be conforming to the Mapbox layer specification.
When props change shallowly, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.
Identity Properties
Once a <Layer> is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's key prop to give each element a stable identity.
id (String)
Unique identifier of the layer. If not provided, a default id will be assigned.
type (String, required)
Type of the layer.
Options
beforeId (String)
The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.
Note that layers are added by the order that they mount. They are NOT reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate beforeId for consistent behavior.
source (String)
source is required by some layer types in the Mapbox style specification. If <Layer> is used as the child of a Source component, this prop will be overwritten by the id of the parent source.
Source
layer.js

\ No newline at end of file
+}

Properties

The props provided to this component should be conforming to the Mapbox layer specification.

When props change shallowly, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.

Identity Properties

Once a <Layer> is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's key prop to give each element a stable identity.

id (String)

Unique identifier of the layer. If not provided, a default id will be assigned.

type (String, required)

Type of the layer.

Options

beforeId (String)

The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.

Note that layers are added by the order that they mount. They are NOT reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate beforeId for consistent behavior.

source (String)

source is required by some layer types in the Mapbox style specification. If <Layer> is used as the child of a Source component, this prop will be overwritten by the id of the parent source.

Source

layer.js

\ No newline at end of file diff --git a/docs/api-reference/linear-interpolator/index.html b/docs/api-reference/linear-interpolator/index.html index 050b200c..04760568 100644 --- a/docs/api-reference/linear-interpolator/index.html +++ b/docs/api-reference/linear-interpolator/index.html @@ -90,9 +90,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

LinearInterpolator

Since v3.2

Implements the TransitionInterpolator interface. Designed to use with the transitionInterpolator prop of InteractiveMap.

Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox's easeTo when combined with a transitionEasing function. You may optionally limit the transition to selected viewport props, for example new LinearInterpolator(['pitch', 'bearing']) animates pitch and bearing while the user is still allowed to pan and zoom.

import ReactMapGL, {LinearInterpolator} from 'react-map-gl';
+  
LinearInterpolator
Since v3.2
Implements the TransitionInterpolator interface. Designed to use with the transitionInterpolator prop of InteractiveMap.
Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox's easeTo when combined with a transitionEasing function. You may optionally limit the transition to selected viewport props, for example new LinearInterpolator(['pitch', 'bearing']) animates pitch and bearing while the user is still allowed to pan and zoom.
import ReactMapGL, {LinearInterpolator} from 'react-map-gl';
 
 <ReactMapGL
     ...
     transitionDuration={1000}
-    transitionInterpolator={new LinearInterpolator()} />
Constructor
new LinearInterpolator([options])
Parameters:
  • options {Object} (optional)
    • transitionProps {Array} (optional) - list of prop names to interpolate. Default: ['longitude', 'latitude', 'zoom', 'pitch', 'bearing'].
    • around {Array} (optional) - a point to zoom/rotate the map around, as [x, y] in screen position.
Source
linear-interpolator.js

\ No newline at end of file
+    transitionInterpolator={new LinearInterpolator()} />

Constructor

new LinearInterpolator([options])

Parameters:

  • options {Object} (optional)
    • transitionProps {Array} (optional) - list of prop names to interpolate. Default: ['longitude', 'latitude', 'zoom', 'pitch', 'bearing'].
    • around {Array} (optional) - a point to zoom/rotate the map around, as [x, y] in screen position.

Source

linear-interpolator.js

\ No newline at end of file diff --git a/docs/api-reference/map-context/index.html b/docs/api-reference/map-context/index.html index abe5b365..14295688 100644 --- a/docs/api-reference/map-context/index.html +++ b/docs/api-reference/map-context/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

MapContext

Since v5.3

MapContext allows components to interact with InteractiveMap or StaticMap via React's context API.

import * as React from 'react';
+  
MapContext
Since v5.3
MapContext allows components to interact with InteractiveMap or StaticMap via React's context API.
import * as React from 'react';
 import MapGL, {MapContext} from 'react-map-gl';
 
 function CurrentZoomLevel() {
@@ -133,4 +133,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       </div>
     </MapContext.Provider>
   );
-}
Fields
The context value object may contain the following fields:
  • map (Map) - the mapbox-gl Map instance
  • viewport (WebMercatorViewport) - the current viewport
  • container (HTMLDivElement) - the outer container of the map component
  • onViewportChange (Function) - a callback invoked when a map control requests a viewport change, with the signature onViewportChange(viewState, interactionState, oldViewState)
  • onViewStateChange (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature onViewStateChange({viewState, interactionState, oldViewState})
  • eventManager (EventManager) - an EventManager instance used to register all interactive events
Source
map-context.js

\ No newline at end of file
+}

Fields

The context value object may contain the following fields:

  • map (Map) - the mapbox-gl Map instance
  • viewport (WebMercatorViewport) - the current viewport
  • container (HTMLDivElement) - the outer container of the map component
  • onViewportChange (Function) - a callback invoked when a map control requests a viewport change, with the signature onViewportChange(viewState, interactionState, oldViewState)
  • onViewStateChange (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature onViewStateChange({viewState, interactionState, oldViewState})
  • eventManager (EventManager) - an EventManager instance used to register all interactive events

Source

map-context.js

\ No newline at end of file diff --git a/docs/api-reference/map-controller/index.html b/docs/api-reference/map-controller/index.html index 80160df6..50a80f3e 100644 --- a/docs/api-reference/map-controller/index.html +++ b/docs/api-reference/map-controller/index.html @@ -88,4 +88,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

MapController

Since v4.0

The easiest way to create a custom map control is to extend the default MapController class.

Properties

events (Array)

A list of additional event names that this control subscribes to.

Available events: click, dblclick, tap, doubletap, press, pinch, pinchin, pinchout, pinchstart, pinchmove, pinchend, pinchcancel, rotate, rotatestart, rotatemove, rotateend, rotatecancel, pan, panstart, panmove, panup, pandown, panleft, panright, panend, pancancel, swipe, swipeleft, swiperight, swipeup, swipedown, pointerdown, pointermove, pointerup, keydown, and keyup.

The following events are toggled on/off by InteractiveMap props:

  • scrollZoom - ['wheel']
  • dragPan and dragRotate - ['panstart', 'panmove', 'panend']
  • touchZoomRotate - ['pinchstart', 'pinchmove', 'pinchend']
  • doubleClickZoom - ['doubletap']
  • keyboard - ['keydown']

Event object is generated by mjolnir.js. It always has the following properties:

  • type (string) - The event type to which the event handler is subscribed, e.g. 'click' or 'pointermove'
  • center (Object {x, y}) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, clientX/Y)
  • offsetCenter (Object {x, y}) - The center of the event location relative to the map.
  • target (Object) - The target of the event, as specified by the original srcEvent
  • srcEvent (Object) - The original event object dispatched by the browser to the JS runtime

Additionally, event objects for different event types contain a subset of the following properties:

  • key (number) - The keycode of the keyboard event
  • leftButton (boolean) - Flag indicating whether the left button is involved during the event
  • middleButton (boolean) - Flag indicating whether the middle button is involved during the event
  • rightButton (boolean) - Flag indicating whether the right button is involved during the event
  • pointerType (string) - A string indicating the type of input (e.g. 'mouse', 'touch', 'pointer')
  • delta (number) - The scroll magnitude/distance of a wheel event

Methods

handleEvent

handleEvent(event)

Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:

  • _onPanStart(event)
  • _onPan(event)
  • _onPanEnd(event)
  • _onPinchStart(event)
  • _onPinch(event)
  • _onPinchEnd(event)
  • _onDoubleTap(event)
  • _onWheel(event)
  • _onKeyDown(event)
getMapState

getMapState(overrides)

Get a new descriptor object of the map state. If specified, props in the overrides object override the current map props.

setOptions

setOptions(options)

Add/remove event listeners based on the latest InteractiveMap props.

updateViewport

updateViewport(newMapState, extraProps, interactionState)

Invoke onViewportChange callback with a new map state.

Source

map-controller.js

\ No newline at end of file +

MapController

Since v4.0

The easiest way to create a custom map control is to extend the default MapController class.

Properties

events (Array)

A list of additional event names that this control subscribes to.

Available events: click, dblclick, tap, doubletap, press, pinch, pinchin, pinchout, pinchstart, pinchmove, pinchend, pinchcancel, rotate, rotatestart, rotatemove, rotateend, rotatecancel, pan, panstart, panmove, panup, pandown, panleft, panright, panend, pancancel, swipe, swipeleft, swiperight, swipeup, swipedown, pointerdown, pointermove, pointerup, keydown, and keyup.

The following events are toggled on/off by InteractiveMap props:

  • scrollZoom - ['wheel']
  • dragPan and dragRotate - ['panstart', 'panmove', 'panend']
  • touchZoomRotate - ['pinchstart', 'pinchmove', 'pinchend']
  • doubleClickZoom - ['doubletap']
  • keyboard - ['keydown']

Event object is generated by mjolnir.js. It always has the following properties:

  • type (string) - The event type to which the event handler is subscribed, e.g. 'click' or 'pointermove'
  • center (Object {x, y}) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, clientX/Y)
  • offsetCenter (Object {x, y}) - The center of the event location relative to the map.
  • target (Object) - The target of the event, as specified by the original srcEvent
  • srcEvent (Object) - The original event object dispatched by the browser to the JS runtime

Additionally, event objects for different event types contain a subset of the following properties:

  • key (number) - The keycode of the keyboard event
  • leftButton (boolean) - Flag indicating whether the left button is involved during the event
  • middleButton (boolean) - Flag indicating whether the middle button is involved during the event
  • rightButton (boolean) - Flag indicating whether the right button is involved during the event
  • pointerType (string) - A string indicating the type of input (e.g. 'mouse', 'touch', 'pointer')
  • delta (number) - The scroll magnitude/distance of a wheel event

Methods

handleEvent

handleEvent(event)

Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:

  • _onPanStart(event)
  • _onPan(event)
  • _onPanEnd(event)
  • _onPinchStart(event)
  • _onPinch(event)
  • _onPinchEnd(event)
  • _onDoubleTap(event)
  • _onWheel(event)
  • _onKeyDown(event)
getMapState

getMapState(overrides)

Get a new descriptor object of the map state. If specified, props in the overrides object override the current map props.

setOptions

setOptions(options)

Add/remove event listeners based on the latest InteractiveMap props.

updateViewport

updateViewport(newMapState, extraProps, interactionState)

Invoke onViewportChange callback with a new map state.

Source

map-controller.js

\ No newline at end of file diff --git a/docs/api-reference/marker/index.html b/docs/api-reference/marker/index.html index 64e3c2c7..127c195a 100644 --- a/docs/api-reference/marker/index.html +++ b/docs/api-reference/marker/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Marker

Since v3.0

This is a React equivalent of Mapbox's +

Marker

Since v3.0

This is a React equivalent of Mapbox's Marker Control, which can be used to render custom icons at specific locations on the map.

import * as React from 'react';
 import ReactMapGL, {Marker} from 'react-map-gl';
@@ -132,4 +132,4 @@ be used to render custom icons at specific locations on the map.
{markers}
     </ReactMapGL>
   );
-}

Properties

latitude (Number, required)

Latitude of the marker.

longitude (Number, required)

Longitude of the marker.

offsetLeft (Number)
  • default: 0

Offset of the marker from the left in pixels, negative number indicates left.

offsetTop (Number)
  • default: 0

Offset of the marker from the top in pixels, negative number indicates up.

draggable (Boolean)
  • default: false

Allows this marker component to be dragged around the map. (Use onDragEnd to capture the final position and update longitude and latitude).

onDragStart (Function)

Called when a draggable marker starts being dragged.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates where the drag started, as [lng, lat].
onDrag (Function)

Continuously called while a draggable marker is being dragged.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates of the drag event, as [lng, lat].
onDragEnd (Function)

Called when a draggable marker is released at its final position. This is usually a good time to capture event.lngLat and update the marker's longitude and latitude props.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates where the drag ended, as [lng, lat].
className (String)

Assign a custom class name to the container of this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

marker.js

\ No newline at end of file +}

Properties

latitude (Number, required)

Latitude of the marker.

longitude (Number, required)

Longitude of the marker.

offsetLeft (Number)
  • default: 0

Offset of the marker from the left in pixels, negative number indicates left.

offsetTop (Number)
  • default: 0

Offset of the marker from the top in pixels, negative number indicates up.

draggable (Boolean)
  • default: false

Allows this marker component to be dragged around the map. (Use onDragEnd to capture the final position and update longitude and latitude).

onDragStart (Function)

Called when a draggable marker starts being dragged.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates where the drag started, as [lng, lat].
onDrag (Function)

Continuously called while a draggable marker is being dragged.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates of the drag event, as [lng, lat].
onDragEnd (Function)

Called when a draggable marker is released at its final position. This is usually a good time to capture event.lngLat and update the marker's longitude and latitude props.

Parameters:

  • event - The pointer event.
    • event.lngLat - The geo coordinates where the drag ended, as [lng, lat].
className (String)

Assign a custom class name to the container of this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

marker.js

\ No newline at end of file diff --git a/docs/api-reference/navigation-control/index.html b/docs/api-reference/navigation-control/index.html index 523e5fc2..bb86badf 100644 --- a/docs/api-reference/navigation-control/index.html +++ b/docs/api-reference/navigation-control/index.html @@ -92,7 +92,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

NavigationControl

Since v3.0

This is a React equivalent of Mapbox's NavigationControl, +

NavigationControl

Since v3.0

This is a React equivalent of Mapbox's NavigationControl, which provides zoom buttons and a compass button.

import * as React from 'react';
 import ReactMapGL, {NavigationControl} from 'react-map-gl';
 
@@ -112,4 +112,4 @@ which provides zoom buttons and a compass button.
<NavigationControl style={navControlStyle} />
     </ReactMapGL>
   );
-}

Properties

onViewportChange (Function)

Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.

showCompass (Boolean)
  • default: true

Show or hide the compass button

showZoom (Boolean)
  • default: true

Show or hide the zoom buttons

zoomInLabel (String)
  • default: Zoom In

Label applied to the zoom in control button.

zoomOutLabel (String)
  • default: Zoom Out

Label applied to the zoom out control button.

compassLabel (String)
  • default: Reset North

Label applied to the compass control button.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

navigation-control.js

\ No newline at end of file +}

Properties

onViewportChange (Function)

Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.

showCompass (Boolean)
  • default: true

Show or hide the compass button

showZoom (Boolean)
  • default: true

Show or hide the zoom buttons

zoomInLabel (String)
  • default: Zoom In

Label applied to the zoom in control button.

zoomOutLabel (String)
  • default: Zoom Out

Label applied to the zoom out control button.

compassLabel (String)
  • default: Reset North

Label applied to the compass control button.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

navigation-control.js

\ No newline at end of file diff --git a/docs/api-reference/pointer-event/index.html b/docs/api-reference/pointer-event/index.html index 95e9bcd5..f4444a67 100644 --- a/docs/api-reference/pointer-event/index.html +++ b/docs/api-reference/pointer-event/index.html @@ -84,4 +84,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

PointerEvent

Event object passed to some of InteractiveMap's callback props.

Members

type (String)

The name of the event.

point (Array)

The screen coordinates that is being clicked.

lngLat (Array)

The geo coordinates that is being clicked.

target (Element)

The target element of the pointer event.

srcEvent (Object)

The original browser event.

\ No newline at end of file +

PointerEvent

Event object passed to some of InteractiveMap's callback props.

Members

type (String)

The name of the event.

point (Array)

The screen coordinates that is being clicked.

lngLat (Array)

The geo coordinates that is being clicked.

target (Element)

The target element of the pointer event.

srcEvent (Object)

The original browser event.

\ No newline at end of file diff --git a/docs/api-reference/popup/index.html b/docs/api-reference/popup/index.html index a43aebe2..d12535ff 100644 --- a/docs/api-reference/popup/index.html +++ b/docs/api-reference/popup/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Popup

Since v3.0

This is a React equivalent of Mapbox's Popup Control, which can be used to +

Popup

Since v3.0

This is a React equivalent of Mapbox's Popup Control, which can be used to show tooltip popups with custom HTML content at specific locations on the map.

import * as React from 'react';
 import ReactMapGL, {Popup} from 'react-map-gl';
 
@@ -116,4 +116,4 @@ show tooltip popups with custom HTML content at specific locations on the map.</ReactMapGL>
   );
 }

Properties

latitude (Number, required)

Latitude of the anchor.

longitude (Number, required)

Longitude of the anchor.

altitude (Number)
  • default: 0

Altitude of the anchor.

offsetLeft (Number)
  • default: 0

Offset of the anchor from the left in pixels, negative number indicates left.

offsetTop (Number)
  • default: 0

Offset of the anchor from the top in pixels, negative number indicates up.

closeButton (Boolean)
  • default: true

If true, a close button will appear in the top right corner of the popup.

closeOnClick (Boolean)
  • default: true

If true, the popup will closed when the map is clicked.

tipSize (Number)
  • default: 10

Size of the tip pointing to the coordinate.

anchor (String)
  • default: bottom

A string indicating the popup's position relative to the coordinate. -Options are top, bottom, left, right, top-left, top-right, bottom-left, and bottom-right.

dynamicPosition (Boolean)
  • default: true

If true, the anchor will be dynamically adjusted to ensure the popup falls within the map container.

sortByDepth (Boolean)
  • default: false

If true, the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map.

onClose (Function)

Callback when the user closes the popup.

className (String)

Assign a custom class name to the container of this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

popup.js

\ No newline at end of file +Options are top, bottom, left, right, top-left, top-right, bottom-left, and bottom-right.

dynamicPosition (Boolean)
  • default: true

If true, the anchor will be dynamically adjusted to ensure the popup falls within the map container.

sortByDepth (Boolean)
  • default: false

If true, the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map.

onClose (Function)

Callback when the user closes the popup.

className (String)

Assign a custom class name to the container of this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

popup.js

\ No newline at end of file diff --git a/docs/api-reference/scale-control/index.html b/docs/api-reference/scale-control/index.html index c29b3f22..3c5acc35 100644 --- a/docs/api-reference/scale-control/index.html +++ b/docs/api-reference/scale-control/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

ScaleControl

Since v5.2

This is a React equivalent of Mapbox's ScaleControl.

import * as React from 'react';
+  
ScaleControl
Since v5.2
This is a React equivalent of Mapbox's ScaleControl.
import * as React from 'react';
 import ReactMapGL, {ScaleControl} from 'react-map-gl';
 
 const scaleControlStyle= {
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <ScaleControl maxWidth={100} unit="metric" style={scaleControlStyle} />
     </ReactMapGL>
   );
-}
Properties
maxWidth (Number)
  • default: 100
The maximum length of the scale control in pixels.
unit (String)
  • default: 'metric'
Unit of the distance, one of 'imperial', 'metric' or 'nautical'.
className (String)
Assign a custom class name to the container of this control.
style (Object)
  • default: {position: 'absolute'}
A React style object applied to this control.
captureScroll (Boolean)
  • default: false
Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.
captureDrag (Boolean)
  • default: true
Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.
captureClick (Boolean)
  • default: true
Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.
captureDoubleClick (Boolean)
  • default: true
Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.
capturePointerMove (Boolean)
  • default: false
Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
Styling
Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.
Source
scale-control.js

\ No newline at end of file
+}

Properties

maxWidth (Number)
  • default: 100

The maximum length of the scale control in pixels.

unit (String)
  • default: 'metric'

Unit of the distance, one of 'imperial', 'metric' or 'nautical'.

className (String)

Assign a custom class name to the container of this control.

style (Object)
  • default: {position: 'absolute'}

A React style object applied to this control.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

scale-control.js

\ No newline at end of file diff --git a/docs/api-reference/source/index.html b/docs/api-reference/source/index.html index cc76c082..c1a45f7d 100644 --- a/docs/api-reference/source/index.html +++ b/docs/api-reference/source/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Source

Since v5.1

This component allows apps to create a map source using React. It may contain Layer components as children.

import * as React from 'react';
+  
Source
Since v5.1
This component allows apps to create a map source using React. It may contain Layer components as children.
import * as React from 'react';
 import ReactMapGL, {Source, Layer} from 'react-map-gl';
 
 const geojson = {
@@ -126,4 +126,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   layers: []
 };
 
-<ReactMapGL ... mapStyle={EMPTY_STYLE}>
When props change shallowly, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.
Once a <Source> is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity.
id (String)
Unique identifier of the source. If not provided, a default id will be assigned.
type (String, required)
Type of the source.
Source
source.js

\ No newline at end of file
+<ReactMapGL ... mapStyle={EMPTY_STYLE}>

When props change shallowly, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.

Once a <Source> is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity.

id (String)

Unique identifier of the source. If not provided, a default id will be assigned.

type (String, required)

Type of the source.

Source

source.js

\ No newline at end of file diff --git a/docs/api-reference/static-map/index.html b/docs/api-reference/static-map/index.html index 00eadec6..0b59dca7 100644 --- a/docs/api-reference/static-map/index.html +++ b/docs/api-reference/static-map/index.html @@ -96,7 +96,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

StaticMap

Since v3.0

The simplest React wrapper around MapboxGL. This is designed to be completely +

StaticMap

Since v3.0

The simplest React wrapper around MapboxGL. This is designed to be completely static, and should be used to render a map with no interactivity. For a component that supports full user interactivity, see InteractiveMap.

import * as React from 'react';
 import {StaticMap} from 'react-map-gl';
@@ -116,4 +116,4 @@ will take precedence over those same options if set via props.
There are known issues with style diffing. As stopgap, use this option to prevent style diffing.
reuseMaps (Boolean)
  • default: false
This prop is experimental.
If true, when the map component is unmounted, instead of calling remove on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.
Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
transformRequest (Function)
  • default: null
A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
 Expected to return an object with a url property and optionally headers and credentials properties.  Equivalent to Mapbox's transformRequest map option.
Map State
mapStyle (String | Object | Immutable.Map)
  • default: 'mapbox://styles/mapbox/light-v8'
The Mapbox style. A string url or a
 MapboxGL style
-object (regular JS object or Immutable.Map).
Whenever the mapStyle prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the preventStyleDiffing prop.
mapStyle is ignored when explicitly set to null.
width (Number | String, required)
The width of the map. Can be either a number in pixels, or a valid CSS string.
height (Number | String, required)
The height of the map. Can be either a number in pixels, or a valid CSS string.
latitude (Number)
The latitude of the center of the map, as a top level prop. Only used if viewState is not supplied.
longitude (Number)
The longitude of the center of the map, as a top level prop. Only used if viewState is not supplied.
zoom (Number)
The tile zoom level of the map, as a top level prop. Only used if viewState is not supplied.
Bounded implicitly by default minZoom and maxZoom of MapboxGL
bearing (Number)
  • default: 0
Specify the bearing of the viewport, as a top level prop. Only used if viewState is not supplied.
pitch (Number)
  • default: 0
Specify the pitch of the viewport, as a top level prop. Only used if viewState is not supplied..
altitude (Number)
  • default: 1.5
Non-public API, see https://github.com/mapbox/mapbox-gl-js/issues/1137.
Altitude of the viewport camera, relative to screen height.
viewState (Object)
An object containing the view state of the map specified by the following fields:
  • latitude (Number) - The latitude of the center of the map.
  • longitude (Number) - The longitude of the center of the map.
  • zoom (Number) - The tile zoom level of the map. Bounded implicitly by default minZoom and maxZoom of MapboxGL.
  • bearing (Number) - default: 0 - The bearing of the viewport.
  • pitch (Number) - default: 0 - The pitch of the viewport.
  • altitude (Number) - default: 1.5 screen heights
Note: Either the viewState, or the latitude, longitude and zoom properties need to be specified.
Render Options
asyncRender (Boolean)
  • default: false
If true, let Mapbox manage its own render cycle. This is the behavior prior to v4.1.
If false, force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.
style (Object)
The CSS style of the map container.
visible (Boolean)
  • default: true
Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.
visibilityConstraints (Object)
An object that specifies bounds for viewport props with min*, max* keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.
Default: { minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }
Callbacks
onLoad (Function)
  • default: () => {}
A callback run when the map emits a load event. Mapbox docs
onResize (Function)
  • default: () => {}
A callback run when the map size has changed.
onError (Function)
  • default: console.error
A callback run when the map emits an error event. Mapbox docs
Methods
getMap
Returns the Mapbox instance if initialized. The Map instance will have full access to MapboxGL's API.
getMap()
queryRenderedFeatures
Use Mapbox's queryRenderedFeatures API to find features at point or in a bounding box. If the parameters argument is not specified, only queries the layers with the interactive property in the layer style.
queryRenderedFeatures(geometry, parameters)
  • geometry {[Number, Number | [[Number, Number, [Number, Number - Point or an array of two points defining the bounding box. Coordinates in pixels.
  • parameters - Query options. For more details, see Mapbox API documentation.
Source
static-map.js
\ No newline at end of file +object (regular JS object or Immutable.Map).

Whenever the mapStyle prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the preventStyleDiffing prop.

mapStyle is ignored when explicitly set to null.

width (Number | String, required)

The width of the map. Can be either a number in pixels, or a valid CSS string.

height (Number | String, required)

The height of the map. Can be either a number in pixels, or a valid CSS string.

latitude (Number)

The latitude of the center of the map, as a top level prop. Only used if viewState is not supplied.

longitude (Number)

The longitude of the center of the map, as a top level prop. Only used if viewState is not supplied.

zoom (Number)

The tile zoom level of the map, as a top level prop. Only used if viewState is not supplied.

Bounded implicitly by default minZoom and maxZoom of MapboxGL

bearing (Number)
  • default: 0

Specify the bearing of the viewport, as a top level prop. Only used if viewState is not supplied.

pitch (Number)
  • default: 0

Specify the pitch of the viewport, as a top level prop. Only used if viewState is not supplied..

altitude (Number)
  • default: 1.5

Non-public API, see https://github.com/mapbox/mapbox-gl-js/issues/1137.

Altitude of the viewport camera, relative to screen height.

viewState (Object)

An object containing the view state of the map specified by the following fields:

  • latitude (Number) - The latitude of the center of the map.
  • longitude (Number) - The longitude of the center of the map.
  • zoom (Number) - The tile zoom level of the map. Bounded implicitly by default minZoom and maxZoom of MapboxGL.
  • bearing (Number) - default: 0 - The bearing of the viewport.
  • pitch (Number) - default: 0 - The pitch of the viewport.
  • altitude (Number) - default: 1.5 screen heights

Note: Either the viewState, or the latitude, longitude and zoom properties need to be specified.

Render Options

asyncRender (Boolean)
  • default: false

If true, let Mapbox manage its own render cycle. This is the behavior prior to v4.1.

If false, force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.

style (Object)

The CSS style of the map container.

visible (Boolean)
  • default: true

Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.

visibilityConstraints (Object)

An object that specifies bounds for viewport props with min*, max* keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.

Default: { minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }

Callbacks

onLoad (Function)
  • default: () => {}

A callback run when the map emits a load event. Mapbox docs

onResize (Function)
  • default: () => {}

A callback run when the map size has changed.

onError (Function)
  • default: console.error

A callback run when the map emits an error event. Mapbox docs

Methods

getMap

Returns the Mapbox instance if initialized. The Map instance will have full access to MapboxGL's API.

getMap()

queryRenderedFeatures

Use Mapbox's queryRenderedFeatures API to find features at point or in a bounding box. If the parameters argument is not specified, only queries the layers with the interactive property in the layer style.

queryRenderedFeatures(geometry, parameters)

  • geometry {[Number, Number | [[Number, Number, [Number, Number - Point or an array of two points defining the bounding box. Coordinates in pixels.
  • parameters - Query options. For more details, see Mapbox API documentation.

Source

static-map.js

\ No newline at end of file diff --git a/docs/api-reference/svg-overlay/index.html b/docs/api-reference/svg-overlay/index.html index e1cf633d..703cae69 100644 --- a/docs/api-reference/svg-overlay/index.html +++ b/docs/api-reference/svg-overlay/index.html @@ -88,4 +88,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

SVGOverlay

Allows applications to overlay data on top of maps using a SVG container.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • width (Number) - width of the viewport
  • height (Number) - height of the viewport
  • project (Function) - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject (Function) - get geo coordinates [lng, lat] from screen position [x, y]

style (Object)

Additional css styles of the svg container.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

svg-overlay.js

\ No newline at end of file +

SVGOverlay

Allows applications to overlay data on top of maps using a SVG container.

Properties

redraw (Function)

Called every time the map updates.

Parameters:

  • width (Number) - width of the viewport
  • height (Number) - height of the viewport
  • project (Function) - get screen position [x, y] from geo coordinates [lng, lat]
  • unproject (Function) - get geo coordinates [lng, lat] from screen position [x, y]

style (Object)

Additional css styles of the svg container.

captureScroll (Boolean)
  • default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)
  • default: false

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)
  • default: false

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)
  • default: false

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)
  • default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Source

svg-overlay.js

\ No newline at end of file diff --git a/docs/api-reference/web-mercator-viewport/index.html b/docs/api-reference/web-mercator-viewport/index.html index 7ff1194e..1dd94ac7 100644 --- a/docs/api-reference/web-mercator-viewport/index.html +++ b/docs/api-reference/web-mercator-viewport/index.html @@ -94,7 +94,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

WebMercatorViewport

+

WebMercatorViewport

From-v3.1

The WebMercatorViewport class takes map camera states (latitude, longitude, zoom, pitch, bearing etc.), and performs projections between world and screen coordinates.

Constructor

ParameterTypeDefaultDescription
widthnumber1Width of viewport
heightnumber1Height of viewport
latitudenumber0Latitude of viewport center
longitudenumber0Longitude of viewport center
zoomnumber11Map zoom (scale is calculated as 2^zoom)
pitchnumber0The pitch (tilt) of the map from the screen, in degrees (0 is straight down)
bearingnumber0The bearing (rotation) of the map from north, in degrees counter-clockwise (0 means north is up)
altitudenumber1.5Altitude of camera in screen units

Remarks:

  • Altitude has a default value that matches assumptions in mapbox-gl
  • width and height are forced to 1 if supplied as 0, to avoid @@ -104,4 +104,4 @@ latitudes are specified as degrees.

unproject(xyz, options)

Unproject pixel coordinates on screen to longitude and latitude on map.

ParameterTypeDefaultDescription
xyzArray(required)pixel coordinates, [x, y] or [x, y, z] where z is pixel depth
optionsObject{}named options
options.topLeftBooleantrueIf true projected coords are top left, otherwise bottom left
options.targetZnumber0If pixel depth z is not specified in xyz, use options.targetZ as the desired elevation

Returns: [lng, lat] or [longitude, lat, Z] in map coordinates. Z is elevation in meters.

  • If input is [x, y] without specifying options.targetZ: returns [lng, lat].
  • If input is [x, y] with options.targetZ: returns [lng, lat, targetZ].
  • If input is [x, y, z]: returns [lng, lat, Z].
projectFlat(lngLat, scale)

Project longitude and latitude onto Web Mercator coordinates.

ParameterTypeDefaultDescription
lngLatArray(required)map coordinates, [lng, lat]
scalenumberthis.scaleWeb Mercator scale

Returns:

  • [x, y], representing Web Mercator coordinates.
unprojectFlat(xy, scale)

Unprojects a Web Mercator coordinate to longitude and latitude.

ParameterTypeDefaultDescription
xyArray(required)Web Mercator coordinates, [x, y]
scalenumberthis.scaleWeb Mercator scale

Returns:

  • [longitude, latitude]
getBounds(options)

Get the axis-aligned bounding box of the current visible area.

  • options.z (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default 0.

Returns:

  • [[lon, lat], [lon, lat]] as the south west and north east corners of the smallest orthogonal bounds that encompasses the visible region.
getBoundingRegion(options)

Get the vertices of the current visible region.

  • options.z (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding region at a specific elevation. Default 0.

Returns:

  • An array of 4 corners in [longitude, latitude, altitude] that define the visible region.
fitBounds(bounds, options: object)

Get a new flat viewport that fits around the given bounding box.

  • bounds ([[number,number],[number,number]]) - an array of two opposite corners of the bounding box. Each corner is specified in [lon, lat].
  • options.padding (number|{top:number, bottom: number, left: number, right: number}, optional) - The amount of padding in pixels to add to the given bounds from the edge of the viewport. If padding is set as object, all parameters are -required.
  • options.offset ([number,number], optional) - The center of the given bounds relative to the viewport's center, [x, y] measured in pixels.
  • opts.minExtent (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied bounds is smaller than this value.
  • opts.maxZoom=24 (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite zoom when the supplied bounds have zero width or height deltas.

Returns:

  • A new WebMercatorViewport instance
getMapCenterByLngLatPosition(options: object): [number, number]

Get the map center that place a given [lng, lat] coordinate at screen point [x, y].

Parameters:

  • options.lngLat (Array, required) - [lng,lat] coordinates of a location on the sphere.
  • options.pos (Array, required) - [x,y] coordinates of a pixel on screen.

Returns:

  • [longitude, latitude] as the new map center
\ No newline at end of file +required.
  • options.offset ([number,number], optional) - The center of the given bounds relative to the viewport's center, [x, y] measured in pixels.
  • opts.minExtent (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied bounds is smaller than this value.
  • opts.maxZoom=24 (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite zoom when the supplied bounds have zero width or height deltas.

    • Returns:

    • A new WebMercatorViewport instance
    getMapCenterByLngLatPosition(options: object): [number, number]

    Get the map center that place a given [lng, lat] coordinate at screen point [x, y].

    Parameters:

    • options.lngLat (Array, required) - [lng,lat] coordinates of a location on the sphere.
    • options.pos (Array, required) - [x,y] coordinates of a pixel on screen.

    Returns:

    • [longitude, latitude] as the new map center
    \ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index 57093146..0cd6a2bb 100644 --- a/docs/contributing/index.html +++ b/docs/contributing/index.html @@ -88,8 +88,8 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Contributing to react-map-gl

    Thanks for taking the time to contribute!

    PRs and bug reports are welcome, and we are actively looking for new maintainers.

    Setting Up Dev Environment

    The master branch is the active development branch.

    Building react-map-gl locally from the source requires node.js >=8. +

    Contributing to react-map-gl

    Thanks for taking the time to contribute!

    PRs and bug reports are welcome, and we are actively looking for new maintainers.

    Setting Up Dev Environment

    The master branch is the active development branch.

    Building react-map-gl locally from the source requires node.js >=8. We use yarn to manage the dependencies.

    git checkout master
 yarn bootstrap
 yarn test

    Test:

    $ npm run test

    Test in Node:

    $ npm run test node

    Test in browser (can use Chrome dev tools for debugging):

    $ npm run test browser

    Pull Requests

    Any intended change to the code base must open a pull request and be approved.

    Generally speaking, all PRs are open against the master branch, unless the feature being affected no longer exists on master.

    PR Checklist

    • Tests
      • npm run test must be successful.
      • New code should be covered by unit tests whenever possible.
    • Documentation
      • If public APIs are added/modified, update component documentation in docs/api-reference.
      • Breaking changes and deprecations must be added to docs/upgrade-guide.md.
      • Noteworthy new features should be added to docs/whats-new.md.
    • Description on GitHub
      • Link to relevant issue.
      • Label with a milestone (latest release or vNext).
      • If public APIs are added/modified, describe the intended behavior.
      • If visual/interaction is affected, consider attaching a screenshot/GIF.

    Release

    react-map-gl follows the Semantic Versioning guidelines. Steps for publishing releases can be found here.

    Community Governance

    vis.gl is part of the Urban Computing Foundation. See the organization's Technical Charter.

    Technical Steering Committee

    react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).

    Maintainers

    Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.

    If you are interested in becoming a maintainer, read the governance guidelines.

    The vis.gl TSC meets monthly and publishes meeting notes via a mailing list. -This mailing list can also be utilized to reach out to the TSC.

    Code of Conduct

    Please be mindful of and adhere to the Linux Foundation's Code of Conduct when contributing to react-map-gl.

    \ No newline at end of file +This mailing list can also be utilized to reach out to the TSC.

    Code of Conduct

    Please be mindful of and adhere to the Linux Foundation's Code of Conduct when contributing to react-map-gl.

    \ No newline at end of file diff --git a/docs/get-started/adding-custom-data/index.html b/docs/get-started/adding-custom-data/index.html index e730b09a..0f66bb95 100644 --- a/docs/get-started/adding-custom-data/index.html +++ b/docs/get-started/adding-custom-data/index.html @@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Adding Custom Data

    Native Mapbox Layers

    You can inject data and mapbox native layers using the Source and Layer components:

    import * as React from 'react';
+  
    Adding Custom Data
    Native Mapbox Layers
    You can inject data and mapbox native layers using the Source and Layer components:
    import * as React from 'react';
 import ReactMapGL, {Source, Layer} from 'react-map-gl';
 
 const geojson = {
@@ -132,4 +132,4 @@ They are great for creating light-weight custom drawings.
    <MapGL {...viewport}>
   <SVGOverlay redraw={redraw} />
-</MapGL>
    Built-in Overlays
    Example Overlays
    There are a couple of additional overlays in the examples folder that can be copied into applications ScatterplotOverlay, ChoroplethOverlay.
    Third-party overlays are also available. For example, the heatmap-overlay module uses webgl-heatmap to create geographic heatmaps.
    Other vis.gl Libraries
    For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web.
    • deck.gl - WebGL-powered framework for the visualization of large datasets.
    • loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
    • nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.
    
\ No newline at end of file
+</MapGL>

    Built-in Overlays

    Example Overlays

    There are a couple of additional overlays in the examples folder that can be copied into applications ScatterplotOverlay, ChoroplethOverlay.

    Third-party overlays are also available. For example, the heatmap-overlay module uses webgl-heatmap to create geographic heatmaps.

    Other vis.gl Libraries

    For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web.

    • deck.gl - WebGL-powered framework for the visualization of large datasets.
    • loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
    • nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.
    \ No newline at end of file diff --git a/docs/get-started/faq/index.html b/docs/get-started/faq/index.html index 0fb74a4f..fce6af7a 100644 --- a/docs/get-started/faq/index.html +++ b/docs/get-started/faq/index.html @@ -86,7 +86,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    FAQ

    Enable Right-to-Left Language Support

    Since v5.2.2

    import {setRTLTextPlugin} from 'react-map-gl';
+  
    FAQ
    Enable Right-to-Left Language Support
    Since v5.2.2
    import {setRTLTextPlugin} from 'react-map-gl';
 
 setRTLTextPlugin(
   // find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     pitch: 0,
     bearing: 0,
     ...
- */
    Documentation of WebMercatorViewport
    I called flyTo/panTo and all controls went out of sync
    You cannot manipulate the map camera via getMap() and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.
    Instead, use the InteractiveMap's transition props. See viewport transition for examples.
    mapbox-gl-draw does not work with react-map-gl
    Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.
    Short explanation: mapbox-gl is not designed to support React.
    Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's move events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the move events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions here and here.
    Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is react-map-gl-draw. You can find an example here.
    
\ No newline at end of file
+ */

    Documentation of WebMercatorViewport

    I called flyTo/panTo and all controls went out of sync

    You cannot manipulate the map camera via getMap() and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.

    Instead, use the InteractiveMap's transition props. See viewport transition for examples.

    mapbox-gl-draw does not work with react-map-gl

    Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.

    Short explanation: mapbox-gl is not designed to support React.

    Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's move events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the move events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions here and here.

    Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is react-map-gl-draw. You can find an example here.

    \ No newline at end of file diff --git a/docs/get-started/get-started/index.html b/docs/get-started/get-started/index.html index 515b67bd..a8b38d5b 100644 --- a/docs/get-started/get-started/index.html +++ b/docs/get-started/get-started/index.html @@ -86,7 +86,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Get Started

    Installation

    Using react-map-gl requires node >= v4 and react >= 16.3.

    npm install --save react-map-gl

    Example

    import * as React from 'react';
+  
    Get Started
    Installation
    Using react-map-gl requires node >= v4 and react >= 16.3.
    npm install --save react-map-gl
    Example
    import * as React from 'react';
 import { useState } from 'react';
 import ReactMapGL from 'react-map-gl';
 
@@ -128,4 +128,4 @@ module.exports ]
     })
   ]
-};
    
\ No newline at end of file
+};
    \ No newline at end of file diff --git a/docs/get-started/mapbox-tokens/index.html b/docs/get-started/mapbox-tokens/index.html index c40a99ad..85ef4705 100644 --- a/docs/get-started/mapbox-tokens/index.html +++ b/docs/get-started/mapbox-tokens/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    About Mapbox Tokens

    react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects. +

    About Mapbox Tokens

    react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects. Depending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use:

    • react-map-gl@>=6.0.0, depending on mapbox-gl@>=2.0.0 and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps.
    • react-map-gl@5.x, depending on mapbox-gl@1.x - requires an access token only if you load the map styles and tiles from Mapbox's data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.

    To get a Mapbox token, you will need to register on their website. The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.

    There are several ways to provide a token to your app, as showcased in some of the example folders:

    • Provide a mapboxApiAccessToken prop to the map component
    • Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App)
    • Provide it in the URL, e.g ?access_token=TOKEN
    • Provide mapboxApiUrl prop to the map component to override the default mapbox API URL

    But we would recommend using something like dotenv and put your key in an untracked .env file, that will then expose it as a process.env variable, with much less leaking risks.

    Display Maps Without A Mapbox Token

    It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are:

    • Stay on react-map-gl@5.x and mapbox-gl@1.x. react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox.
    • Use a community fork of mapbox-gl, for example maplibre-gl. See using with a mapbox-gl fork for how to configure your project.

    To use your own map service, you will need a custom Mapbox GL style that points to your own vector tile source, and pass it to ReactMapGL using the mapStyle prop. This custom style must match the schema of your tile source.

    Open source tile schemas include:

    Some useful resources for creating your own map service:

    If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to ReactMapGL using the transformRequest prop.

    An example function:

    const transformRequest = (url, resourceType) => {
         if (resourceType === 'Tile' && url.match('yourTileSource.com')) {
             return {
@@ -96,4 +96,4 @@ Depending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox
                 headers: { 'Authorization': 'Bearer ' + yourAuthToken }
             }
         }
-    }
    \ No newline at end of file + }
    \ No newline at end of file diff --git a/docs/get-started/state-management/index.html b/docs/get-started/state-management/index.html index 04536495..cd4e8fef 100644 --- a/docs/get-started/state-management/index.html +++ b/docs/get-started/state-management/index.html @@ -82,7 +82,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    State Management

    InteractiveMap is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of "user intent" by calling the onViewportChange callback, but ultimately the application needs to decide what to do with it.

    The most simple handling of this intent is to save it and pass it back to the component:

    <ReactMapGL
+  
    State Management
    InteractiveMap is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of "user intent" by calling the onViewportChange callback, but ultimately the application needs to decide what to do with it.
    The most simple handling of this intent is to save it and pass it back to the component:
    <ReactMapGL
     {...this.state.viewport}
     onViewportChange={(viewport) => this.setState({viewport})} />
    User interaction and transition will not work without a valid onViewportChange handler.
    The advantage of this practice is that it ensures a single source of truth regarding the viewport state (in the example above, saved in the state of the container component). When you use this viewport state to direct the rendering of other components, it is guaranteed that they will always be synced with the map.
    You may apply additional constraints to the viewport:
    _onViewportChange = viewport => {
     if (viewport.longitude > 0) {
@@ -107,4 +107,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     );
 }
    Using with Redux
    If you're using redux, it is very easy to hook this component up to store state in the redux state tree.
 The simplest way is to take all properties passed to the onViewportChange function property and add them
-directly into the store. This state can then be passed back to the <ReactMapGL> component without any transformation.
    
\ No newline at end of file
+directly into the store. This state can then be passed back to the <ReactMapGL> component without any transformation.
    \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b55ed997..b5390b3d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -90,5 +90,5 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Introduction

    react-map-gl is a suite of React components for -Mapbox GL JS-compatible libraries.

    LibraryDescription
    MapLibreAn open fork of mapbox-gl v1, that can be used without a mapbox token.
    Mapbox GL JS v1The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token.
    Mapbox GL JS v2The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps.
    Other mapbox-gl forksIt may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted.

    For basemaps:

    • You can load map data from Mapbox's own service.
    • You can create and host your own map data using one of the many open source tools.

    New to react-map-gl? Get Started

    Want to contribute? See our Developer Guide

    Design Philosophy

    At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming.

    The stock mapbox-gl APIs are imperative. That is, you instruct the map to do something (for example, map.flyTo), and it will execute the command at its own pace.

    This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with deck.gl. The mapbox maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the move event in the map and tell the other components to update, the other components would always be one frame behind.

    Ultimately, in the spirit of the reactive programming paradigm, data always flows down. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the source of truth in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.

    react-map-gl creates a fully reactive wrapper for mapbox-gl. The InteractiveMap component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications.

    Limitations

    This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the getMap() function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.

    Examples of replacing common native API calls with their React equivalents can be found on the FAQ page.

    \ No newline at end of file +

    Introduction

    react-map-gl is a suite of React components for +Mapbox GL JS-compatible libraries.

    LibraryDescription
    MapLibreAn open fork of mapbox-gl v1, that can be used without a mapbox token.
    Mapbox GL JS v1The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token.
    Mapbox GL JS v2The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps.
    Other mapbox-gl forksIt may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted.

    For basemaps:

    • You can load map data from Mapbox's own service.
    • You can create and host your own map data using one of the many open source tools.

    New to react-map-gl? Get Started

    Want to contribute? See our Developer Guide

    Design Philosophy

    At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming.

    The stock mapbox-gl APIs are imperative. That is, you instruct the map to do something (for example, map.flyTo), and it will execute the command at its own pace.

    This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with deck.gl. The mapbox maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the move event in the map and tell the other components to update, the other components would always be one frame behind.

    Ultimately, in the spirit of the reactive programming paradigm, data always flows down. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the source of truth in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.

    react-map-gl creates a fully reactive wrapper for mapbox-gl. The InteractiveMap component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications.

    Limitations

    This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the getMap() function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.

    Examples of replacing common native API calls with their React equivalents can be found on the FAQ page.

    \ No newline at end of file diff --git a/docs/upgrade-guide/index.html b/docs/upgrade-guide/index.html index c5353408..c98e8319 100644 --- a/docs/upgrade-guide/index.html +++ b/docs/upgrade-guide/index.html @@ -98,7 +98,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Upgrade Guide

    Upgrading to v5.3/v6.1

    • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
    • react-virtualized-auto-sizer is no longer a dependency.
    • Inertia and smooth zooming has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
    const CONTROLLER_OPTS = {
+  
    Upgrade Guide
    Upgrading to v5.3/v6.1
    • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
    • react-virtualized-auto-sizer is no longer a dependency.
    • Inertia and smooth zooming has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
    const CONTROLLER_OPTS = {
   dragPan: {inertia: 0},
   dragRotate: {inertia: 0},
   touchZoom: {inertia: 0},
@@ -120,4 +120,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 
 // v0.6
 import MapGL from 'react-map-gl';
-import SVGOverlay from 'react-map-gl/src/api-reference/svg-overlay';.
    • Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user).
      • This information must be passed back to the react-map-gl component in the next render.
      • To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude, latitude and zoom).
    
\ No newline at end of file
+import SVGOverlay from 'react-map-gl/src/api-reference/svg-overlay';.
    • Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user).
      • This information must be passed back to the react-map-gl component in the next render.
      • To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude, latitude and zoom).
    \ No newline at end of file diff --git a/docs/whats-new/index.html b/docs/whats-new/index.html index 0dd0ea0b..87f718e2 100644 --- a/docs/whats-new/index.html +++ b/docs/whats-new/index.html @@ -90,6 +90,6 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    What's new

    react-map-gl v5.3/v6.1

    Release date: Jan 27, 2020

    Highlights

    • TypeScript and Flow typings are now published with the library
    • More controller customizations. Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated interaction options for details.
    • A new eventRecognizerOptions prop is added for fine-tuning the interaction experience.
    • New component: AttributionControl
    • Promoted to official API: MapContext
    • Resolved React error over attempted state update during render
    • GeolocateControl added supports for showAccuracyCircle
    • All controls now support inline styling with a style prop
    • All components and examples have been rewritten as functional components

    react-map-gl v6.0

    Release date: Dec 16, 2020

    What's Changed

    The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are important changes to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do NOT upgrade to this version, and consider your options discussed in this document.

    See upgrade guide for a complete list of breaking changes.

    react-map-gl v5.2

    Release date: Jan 6, 2020

    Highlights

    • New Components: ScaleControl
    • NavigationControl: new label prop
    • GeolocateControl: new label, onGeolocate, auto props
    • New Export: WebMercatorViewport is re-exported from the viewport-mercator-project library for ease of use. It's recommended to import it from react-map-gl instead to avoid future dependency change.
    • New Example: Clusters

    react-map-gl v5.1

    Release date: Oct 30, 2019

    Highlights

    • New Components: Layer and Source have been added to provide better React parity with the Mapbox GL JS API.
    • Viewport transition: transitionDuration can be set to 'auto' when using FlyToInterpolator.
    • New Example: Add an example with drawing library react-map-gl-draw.

    react-map-gl v5.0

    Release date: May 31, 2019

    What's Changed

    The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's changelog and blog post.

    Alongside Mapbox GL JS's new milestone, we have relaxed the mapbox-gl dependency from locking minor release (~0.53.0) to major release (^1.0.0). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.

    react-map-gl v4.1

    Release date: Mar 14, 2019

    Highlights

    • New Components: FullscreenControl, GeolocateControl have been added to provide better React parity with the Mapbox GL JS API.
    • New callback props InteractiveMap supports more callbacks:
      • onNativeClick

    react-map-gl v4.0

    Release date: Nov 5, 2018

    Highlights

    • Relative dimensions Both InteractiveMap and StaticMap now support CSS strings supplied to map width and height props. New onResize callback is fired when the map resizes.
    • React 16 Upgrade to React 16.3 context and ref patterns
    • Babel 7 Upgrade build system to Babel 7, better support for tree-shaking
    • Style diffing Now use Mapbox's native style diffing. Immutable is no longer required.
    • Draggable Markers Marker component now supports a new prop draggable, along with callbacks onDragStart, onDrag, and onDragEnd.
    • 3d Popups Popup component now supports a new prop sortByDepth to enable proper occlusion when multiple popups are used in a tilted map.
    • Interaction states onViewportChange is now called with richer descriptors of the user interaction, including isPanning, isZooming and isRotating.
    • Interactive layers Dropped the requirement for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable.
    • New callback props InteractiveMap supports more callbacks:
      • onDblClick
      • onMouseDown
      • onMouseMove
      • onMouseUp
      • onTouchStart
      • onTouchMove
      • onTouchEnd
      • onMouseEnter
      • onMouseLeave
      • onWheel
      • onMouseOut

    See upgrade guide for breaking changes.

    react-map-gl v3.3

    Release date: July, 2018

    Highlights

    • New viewState Property: Makes it possible to specify all map state properties (longitude, latitude, zoom, bearing and pitch) as a single property.
    • New onViewStateChange callback: An alternative callback that matches the new viewState prop.

    react-map-gl v3.2

    Realease date: January, 2018

    Highlights

    • Viewport transition: feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.
    • Better parity of Mapbox interaction: navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.
    • Support for Map Reuse (experimental): A new property reuseMaps is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
    • mapbox-gl 0.42.2
    • New props of the InteractiveMap component:
      • Map creation: transformRequest, reuseMaps
      • Interaction: touchZoom, touchRotate
      • Transition: transitionDuration, transitionInterpolator, transitionEasing, transitionInterruption, onTransitionStart, onTransitionInterrupt, onTransitionEnd

    react-map-gl v3.1

    Release date: October 19, 2017

    Highlights

    • Event handling
      • Support right mouse drag to rotate
      • Support keyboard navigation
      • Allow controls and overlays to block map interactions
    • React 16 - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at >=15.4.x.
    • mapbox-gl v0.40.1
    • No Token warning: react-map-gl now renders an HTML message if no mapbox token is supplied.

    react-map-gl v3.0

    Release date: July 27th, 2017

    Highlights

    • Latest Mapbox GL JS: Bumps Mapbox GL JS to 0.38.
    • Multi-Touch Support: Full support for multi-touch gestures such as pinch-to-zoom and rotate.
    • New Components: The MapGL component has been split into StaticMap and InteractiveMap (the default). Also, Popup, Marker, NavigationControl have been added to provide better React parity with the Mapbox GL JS API.
    • Improved Overlay Components: Supplying viewport props (width height zoom longitude and latitude) are no longer required if you render SVGOverlay, CanvasOverlay or HTMLOverlay as a child of the map. Perspective mode is now supported in all overlays.
    • New Props: maxPitch, minPitch, dragPan, doubleClickZoom, touchZoomRotate, +

      What's new

      react-map-gl v5.3/v6.1

      Release date: Jan 27, 2020

      Highlights

      • TypeScript and Flow typings are now published with the library
      • More controller customizations. Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated interaction options for details.
      • A new eventRecognizerOptions prop is added for fine-tuning the interaction experience.
      • New component: AttributionControl
      • Promoted to official API: MapContext
      • Resolved React error over attempted state update during render
      • GeolocateControl added supports for showAccuracyCircle
      • All controls now support inline styling with a style prop
      • All components and examples have been rewritten as functional components

      react-map-gl v6.0

      Release date: Dec 16, 2020

      What's Changed

      The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are important changes to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do NOT upgrade to this version, and consider your options discussed in this document.

      See upgrade guide for a complete list of breaking changes.

      react-map-gl v5.2

      Release date: Jan 6, 2020

      Highlights

      • New Components: ScaleControl
      • NavigationControl: new label prop
      • GeolocateControl: new label, onGeolocate, auto props
      • New Export: WebMercatorViewport is re-exported from the viewport-mercator-project library for ease of use. It's recommended to import it from react-map-gl instead to avoid future dependency change.
      • New Example: Clusters

      react-map-gl v5.1

      Release date: Oct 30, 2019

      Highlights

      • New Components: Layer and Source have been added to provide better React parity with the Mapbox GL JS API.
      • Viewport transition: transitionDuration can be set to 'auto' when using FlyToInterpolator.
      • New Example: Add an example with drawing library react-map-gl-draw.

      react-map-gl v5.0

      Release date: May 31, 2019

      What's Changed

      The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's changelog and blog post.

      Alongside Mapbox GL JS's new milestone, we have relaxed the mapbox-gl dependency from locking minor release (~0.53.0) to major release (^1.0.0). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.

      react-map-gl v4.1

      Release date: Mar 14, 2019

      Highlights

      • New Components: FullscreenControl, GeolocateControl have been added to provide better React parity with the Mapbox GL JS API.
      • New callback props InteractiveMap supports more callbacks:
        • onNativeClick

      react-map-gl v4.0

      Release date: Nov 5, 2018

      Highlights

      • Relative dimensions Both InteractiveMap and StaticMap now support CSS strings supplied to map width and height props. New onResize callback is fired when the map resizes.
      • React 16 Upgrade to React 16.3 context and ref patterns
      • Babel 7 Upgrade build system to Babel 7, better support for tree-shaking
      • Style diffing Now use Mapbox's native style diffing. Immutable is no longer required.
      • Draggable Markers Marker component now supports a new prop draggable, along with callbacks onDragStart, onDrag, and onDragEnd.
      • 3d Popups Popup component now supports a new prop sortByDepth to enable proper occlusion when multiple popups are used in a tilted map.
      • Interaction states onViewportChange is now called with richer descriptors of the user interaction, including isPanning, isZooming and isRotating.
      • Interactive layers Dropped the requirement for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable.
      • New callback props InteractiveMap supports more callbacks:
        • onDblClick
        • onMouseDown
        • onMouseMove
        • onMouseUp
        • onTouchStart
        • onTouchMove
        • onTouchEnd
        • onMouseEnter
        • onMouseLeave
        • onWheel
        • onMouseOut

      See upgrade guide for breaking changes.

      react-map-gl v3.3

      Release date: July, 2018

      Highlights

      • New viewState Property: Makes it possible to specify all map state properties (longitude, latitude, zoom, bearing and pitch) as a single property.
      • New onViewStateChange callback: An alternative callback that matches the new viewState prop.

      react-map-gl v3.2

      Realease date: January, 2018

      Highlights

      • Viewport transition: feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.
      • Better parity of Mapbox interaction: navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.
      • Support for Map Reuse (experimental): A new property reuseMaps is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
      • mapbox-gl 0.42.2
      • New props of the InteractiveMap component:
        • Map creation: transformRequest, reuseMaps
        • Interaction: touchZoom, touchRotate
        • Transition: transitionDuration, transitionInterpolator, transitionEasing, transitionInterruption, onTransitionStart, onTransitionInterrupt, onTransitionEnd

      react-map-gl v3.1

      Release date: October 19, 2017

      Highlights

      • Event handling
        • Support right mouse drag to rotate
        • Support keyboard navigation
        • Allow controls and overlays to block map interactions
      • React 16 - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at >=15.4.x.
      • mapbox-gl v0.40.1
      • No Token warning: react-map-gl now renders an HTML message if no mapbox token is supplied.

      react-map-gl v3.0

      Release date: July 27th, 2017

      Highlights

      • Latest Mapbox GL JS: Bumps Mapbox GL JS to 0.38.
      • Multi-Touch Support: Full support for multi-touch gestures such as pinch-to-zoom and rotate.
      • New Components: The MapGL component has been split into StaticMap and InteractiveMap (the default). Also, Popup, Marker, NavigationControl have been added to provide better React parity with the Mapbox GL JS API.
      • Improved Overlay Components: Supplying viewport props (width height zoom longitude and latitude) are no longer required if you render SVGOverlay, CanvasOverlay or HTMLOverlay as a child of the map. Perspective mode is now supported in all overlays.
      • New Props: maxPitch, minPitch, dragPan, doubleClickZoom, touchZoomRotate, scrollZoom are now provided to allow granular control of map interactivity.
      • Documentation: Significantly expanded and linked with our other geospatial frameworks.
      • Examples: New stand-alone examples to get you started instantly with the new features.
      • Event Handling: New event handling architecture that enables full customization of event handling (experimental).

      Components

      InteractiveMap (New, MapGL replacement)

      This is a wrapper on top of StaticMap. It takes all the props of StaticMap and additional ones such as onViewportChange, scrollZoom, dragRotate, etc. to control interactivity on the map. See Source Code for more information.

      StaticMap (New)

      This is the React wrapper around Mapbox GL JS and takes in viewport properties such as width, height, latitude, longitude. Style diffing and updating logic also live here. See Source Code for more information.

      Overlays

      • Three overlays (ScatterplotOverlay, DraggablePointsOverlay, ChoroplethOverlay), have been moved out of the library and are now only provided as examples.

      Property Changes

      • Property Names - some prop names have been modernized, the old ones will still work for now with a warning.
      • Internal Properties such as isHovering, isDragging, startDragLngLat have been removed. -These were never meant to be useful publicly and have caused confusions in the past.

      Utilities

      • fitBounds: fitBounds has been moved to another repository and has been rewritten to provide a more logical interface.

      For more information, see the Upgrade Guide.

      react-map-gl v2.0

      Date: Jan 17, 2017

      Highlights

      • Latest mapbox-gl: Bump mapbox-gl to v0.31.0
      • new maxZoom prop - Add maxZoom prop and defaults to 20
      • New onLoad prop - Add onLoad event handler
      • new onClick prop - Add onClick prop handler (#140)

      react-map-gl v1.0

      • Perspective Mode - Now supports bearing and pitch properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided
      • Support for ES6 imports - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'.

      react-map-gl v0.6

      Initial public version

      \ No newline at end of file +These were never meant to be useful publicly and have caused confusions in the past.

    Utilities

    • fitBounds: fitBounds has been moved to another repository and has been rewritten to provide a more logical interface.

    For more information, see the Upgrade Guide.

    react-map-gl v2.0

    Date: Jan 17, 2017

    Highlights

    • Latest mapbox-gl: Bump mapbox-gl to v0.31.0
    • new maxZoom prop - Add maxZoom prop and defaults to 20
    • New onLoad prop - Add onLoad event handler
    • new onClick prop - Add onClick prop handler (#140)

    react-map-gl v1.0

    • Perspective Mode - Now supports bearing and pitch properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided
    • Support for ES6 imports - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'.

    react-map-gl v0.6

    Initial public version

    \ No newline at end of file diff --git a/examples/clusters/index.html b/examples/clusters/index.html index 20f5e739..8a0f3095 100644 --- a/examples/clusters/index.html +++ b/examples/clusters/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/controls/index.html b/examples/controls/index.html index 5839fb7c..a6c2034b 100644 --- a/examples/controls/index.html +++ b/examples/controls/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Marker, Popup, NavigationControl and FullscreenControl

    Map showing top 20 most populated cities of the United States. Click on a marker to learn more.

    Data source: Wikipedia

    View Code ↗
    \ No newline at end of file +

    Marker, Popup, NavigationControl and FullscreenControl

    Map showing top 20 most populated cities of the United States. Click on a marker to learn more.

    Data source: Wikipedia

    View Code ↗
    \ No newline at end of file diff --git a/examples/custom-cursor/index.html b/examples/custom-cursor/index.html index 48975f6b..05bfd788 100644 --- a/examples/custom-cursor/index.html +++ b/examples/custom-cursor/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/draggable-markers/index.html b/examples/draggable-markers/index.html index e584959b..29db4661 100644 --- a/examples/draggable-markers/index.html +++ b/examples/draggable-markers/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/draw-polygon/index.html b/examples/draw-polygon/index.html index e8fb8bc7..6deee65e 100644 --- a/examples/draw-polygon/index.html +++ b/examples/draw-polygon/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/filter/index.html b/examples/filter/index.html index 72be09e6..97f4e38a 100644 --- a/examples/filter/index.html +++ b/examples/filter/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/geojson-animation/index.html b/examples/geojson-animation/index.html index b3f54741..22876865 100644 --- a/examples/geojson-animation/index.html +++ b/examples/geojson-animation/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/geojson/index.html b/examples/geojson/index.html index b38f1b6a..29793d6d 100644 --- a/examples/geojson/index.html +++ b/examples/geojson/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/heatmap/index.html b/examples/heatmap/index.html index c59356c8..d388e2f2 100644 --- a/examples/heatmap/index.html +++ b/examples/heatmap/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 58aff95f..a4f7232f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -76,4 +76,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/interaction/index.html b/examples/interaction/index.html index 49074c69..234929de 100644 --- a/examples/interaction/index.html +++ b/examples/interaction/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Limit Map Interaction

    Turn interactive features off/on.

    View Code ↗
    \ No newline at end of file +

    Limit Map Interaction

    Turn interactive features off/on.

    View Code ↗
    \ No newline at end of file diff --git a/examples/layers/index.html b/examples/layers/index.html index 65ee6315..a2e39b07 100644 --- a/examples/layers/index.html +++ b/examples/layers/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    Dynamic Styling

    Dynamically show/hide map layers and change color with Immutable map style.

    View Code ↗
    \ No newline at end of file +

    Dynamic Styling

    Dynamically show/hide map layers and change color with Immutable map style.

    View Code ↗
    \ No newline at end of file diff --git a/examples/locate-user/index.html b/examples/locate-user/index.html index 688beb34..7a85aa8b 100644 --- a/examples/locate-user/index.html +++ b/examples/locate-user/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/viewport-animation/index.html b/examples/viewport-animation/index.html index d66d176c..de119b21 100644 --- a/examples/viewport-animation/index.html +++ b/examples/viewport-animation/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/examples/zoom-to-bounds/index.html b/examples/zoom-to-bounds/index.html index bbed8c93..f53f5671 100644 --- a/examples/zoom-to-bounds/index.html +++ b/examples/zoom-to-bounds/index.html @@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/index.html b/index.html index 19bde1d5..4f24905c 100644 --- a/index.html +++ b/index.html @@ -84,4 +84,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

    react-map-gl

    React wrapper for Mapbox GL JS

    GET STARTED

    react-map-gl makes using Mapbox GL JS in React applications easy.

    React Integration

    Integration on browser and Node.js, exposing the full power of mapbox-gl.

    Component Library

    react-map-gl comes with additional React components that synchronize with the map camera system. Use one of the supported overlays to visualize data, or build your own.

    Part of vis.gl's Framework Suite

    Use together with e.g. deck.gl to render performant and compelling 2D and 3D WebGL visualizations on top of your Mapbox GL JS based maps.

    Contributors

    Made by
    logo
    \ No newline at end of file +

    react-map-gl

    React wrapper for Mapbox GL JS

    GET STARTED

    react-map-gl makes using Mapbox GL JS in React applications easy.

    React Integration

    Integration on browser and Node.js, exposing the full power of mapbox-gl.

    Component Library

    react-map-gl comes with additional React components that synchronize with the map camera system. Use one of the supported overlays to visualize data, or build your own.

    Part of vis.gl's Framework Suite

    Use together with e.g. deck.gl to render performant and compelling 2D and 3D WebGL visualizations on top of your Mapbox GL JS based maps.

    Contributors

    Made by
    logo
    \ No newline at end of file diff --git a/page-data/app-data.json b/page-data/app-data.json index b02898fc..96eb67fe 100644 --- a/page-data/app-data.json +++ b/page-data/app-data.json @@ -1 +1 @@ -{"webpackCompilationHash":"cf6221334ebecb8494a6"} +{"webpackCompilationHash":"976978866d3840425166"} diff --git a/page-data/docs/get-started/faq/page-data.json b/page-data/docs/get-started/faq/page-data.json index d9cb313f..457d8e31 100644 --- a/page-data/docs/get-started/faq/page-data.json +++ b/page-data/docs/get-started/faq/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/faq","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"faq\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h1\"\n }, {\n \"href\": \"#faq\",\n \"aria-label\": \"faq permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"FAQ\"), mdx(\"h2\", {\n \"id\": \"enable-right-to-left-language-support\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#enable-right-to-left-language-support\",\n \"aria-label\": \"enable right to left language support permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Enable Right-to-Left Language Support\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://img.shields.io/badge/since-v5.2.2-green\",\n \"alt\": \"Since v5.2.2\"\n }))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"setRTLTextPlugin\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"setRTLTextPlugin\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"// find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"null\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"// lazy: only load when the map first encounters Hebrew or Arabic text\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token boolean\"\n }), \"true\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\")))), mdx(\"p\", null, \"This is the same as \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"import {setRTLTextPlugin} from 'mapbox-gl'\"), \" in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering.\"), mdx(\"p\", null, \"To use this API, consult Mapbox's \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#setrtltextplugin\"\n }), \"setRTLTextPlugin\"), \" documentation.\"), mdx(\"h2\", {\n \"id\": \"where-is-fitbounds\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#where-is-fitbounds\",\n \"aria-label\": \"where is fitbounds permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Where is fitBounds?\"), mdx(\"p\", null, \"You can use the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"WebMercatorViewport\"), \" utility to find the target viewport that fits around a longitude-latitude bounding box:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"WebMercatorViewport\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"const\"), \" viewport \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"new\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token class-name\"\n }), \"WebMercatorViewport\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"width\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"800\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" height\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"600\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"fitBounds\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.4\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.7\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.5\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.8\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n padding\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"20\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n offset\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"0\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"100\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"/* viewport is a WebMercatorViewport instance, containing these fields:\\n latitude: 37.75001689223574,\\n longitude: -122.44999999999976,\\n zoom: 10.966817190981073,\\n pitch: 0,\\n bearing: 0,\\n ...\\n */\")))), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"docs/api-reference/web-mercator-viewport.md\"\n }), \"Documentation of WebMercatorViewport\")), mdx(\"h2\", {\n \"id\": \"i-called-flytopanto-and-all-controls-went-out-of-sync\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#i-called-flytopanto-and-all-controls-went-out-of-sync\",\n \"aria-label\": \"i called flytopanto and all controls went out of sync permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"I called flyTo/panTo and all controls went out of sync\"), mdx(\"p\", null, \"You cannot manipulate the map camera via \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"getMap()\"), \" and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.\"), mdx(\"p\", null, \"Instead, use the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }), \"InteractiveMap\"), \"'s transition props. See \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"docs/advanced/viewport-transition.md\"\n }), \"viewport transition\"), \" for examples.\"), mdx(\"h2\", {\n \"id\": \"mapbox-gl-draw-does-not-work-with-react-map-gl\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#mapbox-gl-draw-does-not-work-with-react-map-gl\",\n \"aria-label\": \"mapbox gl draw does not work with react map gl permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"mapbox-gl-draw does not work with react-map-gl\"), mdx(\"p\", null, \"Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.\"), mdx(\"p\", null, \"Short explanation: mapbox-gl is not designed to support React.\"), mdx(\"p\", null, \"Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"move\"), \" events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"move\"), \" events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/visgl/react-map-gl/issues/569\"\n }), \"here\"), \" and \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/3746\"\n }), \"here\"), \".\"), mdx(\"p\", null, \"Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.npmjs.com/package/react-map-gl-draw\"\n }), \"react-map-gl-draw\"), \". You can find an example \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"http://visgl.github.io/react-map-gl/examples/draw-polygon\"\n }), \"here\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"FAQ Enable Right-to-Left Language Support This is the same as import {setRTLTextPlugin} from 'mapbox-gl' in the browser, but will not…","frontmatter":{"title":"FAQ"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../../api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../../api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../../api-reference/html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../../api-reference/interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../../api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../../api-reference/map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../../api-reference/map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../../api-reference/pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../../api-reference/source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../../api-reference/static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../../api-reference/svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../../api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../state-management":"/docs/get-started/state-management"},"title":"FAQ","slug":"docs/get-started/faq","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/faq","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"faq\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h1\"\n }, {\n \"href\": \"#faq\",\n \"aria-label\": \"faq permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"FAQ\"), mdx(\"h2\", {\n \"id\": \"enable-right-to-left-language-support\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#enable-right-to-left-language-support\",\n \"aria-label\": \"enable right to left language support permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Enable Right-to-Left Language Support\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://img.shields.io/badge/since-v5.2.2-green\",\n \"alt\": \"Since v5.2.2\"\n }))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"setRTLTextPlugin\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"setRTLTextPlugin\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"// find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"null\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"// lazy: only load when the map first encounters Hebrew or Arabic text\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token boolean\"\n }), \"true\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\")))), mdx(\"p\", null, \"This is the same as \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"import {setRTLTextPlugin} from 'mapbox-gl'\"), \" in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering.\"), mdx(\"p\", null, \"To use this API, consult Mapbox's \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#setrtltextplugin\"\n }), \"setRTLTextPlugin\"), \" documentation.\"), mdx(\"h2\", {\n \"id\": \"where-is-fitbounds\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#where-is-fitbounds\",\n \"aria-label\": \"where is fitbounds permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Where is fitBounds?\"), mdx(\"p\", null, \"You can use the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"WebMercatorViewport\"), \" utility to find the target viewport that fits around a longitude-latitude bounding box:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"WebMercatorViewport\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"const\"), \" viewport \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"new\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token class-name\"\n }), \"WebMercatorViewport\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"width\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"800\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" height\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"600\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"fitBounds\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.4\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.7\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.5\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.8\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n padding\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"20\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n offset\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"0\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"100\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"/* viewport is a WebMercatorViewport instance, containing these fields:\\n latitude: 37.75001689223574,\\n longitude: -122.44999999999976,\\n zoom: 10.966817190981073,\\n pitch: 0,\\n bearing: 0,\\n ...\\n */\")))), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"docs/api-reference/web-mercator-viewport.md\"\n }), \"Documentation of WebMercatorViewport\")), mdx(\"h2\", {\n \"id\": \"i-called-flytopanto-and-all-controls-went-out-of-sync\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#i-called-flytopanto-and-all-controls-went-out-of-sync\",\n \"aria-label\": \"i called flytopanto and all controls went out of sync permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"I called flyTo/panTo and all controls went out of sync\"), mdx(\"p\", null, \"You cannot manipulate the map camera via \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"getMap()\"), \" and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.\"), mdx(\"p\", null, \"Instead, use the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }), \"InteractiveMap\"), \"'s transition props. See \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/react-map-gl/docs/advanced/viewport-transition.md\"\n }), \"viewport transition\"), \" for examples.\"), mdx(\"h2\", {\n \"id\": \"mapbox-gl-draw-does-not-work-with-react-map-gl\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#mapbox-gl-draw-does-not-work-with-react-map-gl\",\n \"aria-label\": \"mapbox gl draw does not work with react map gl permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"mapbox-gl-draw does not work with react-map-gl\"), mdx(\"p\", null, \"Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.\"), mdx(\"p\", null, \"Short explanation: mapbox-gl is not designed to support React.\"), mdx(\"p\", null, \"Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"move\"), \" events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"move\"), \" events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/visgl/react-map-gl/issues/569\"\n }), \"here\"), \" and \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/3746\"\n }), \"here\"), \".\"), mdx(\"p\", null, \"Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.npmjs.com/package/react-map-gl-draw\"\n }), \"react-map-gl-draw\"), \". You can find an example \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"http://visgl.github.io/react-map-gl/examples/draw-polygon\"\n }), \"here\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"FAQ Enable Right-to-Left Language Support This is the same as import {setRTLTextPlugin} from 'mapbox-gl' in the browser, but will not…","frontmatter":{"title":"FAQ"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../../api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../../api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../../api-reference/html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../../api-reference/interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../../api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../../api-reference/map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../../api-reference/map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../../api-reference/pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../../api-reference/source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../../api-reference/static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../../api-reference/svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../../api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../state-management":"/docs/get-started/state-management"},"title":"FAQ","slug":"docs/get-started/faq","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/search/index.html b/search/index.html index db2ed09d..aed8c41f 100644 --- a/search/index.html +++ b/search/index.html @@ -64,4 +64,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
    Search
    32 articles indexed.
    \ No newline at end of file +
    Search
    32 articles indexed.
    \ No newline at end of file diff --git a/webpack-runtime-8ddac0bbcb1c3efe550d.js b/webpack-runtime-a47292676d6534678190.js similarity index 98% rename from webpack-runtime-8ddac0bbcb1c3efe550d.js rename to webpack-runtime-a47292676d6534678190.js index 3ff2e97e..00043a7b 100644 --- a/webpack-runtime-8ddac0bbcb1c3efe550d.js +++ b/webpack-runtime-a47292676d6534678190.js @@ -1 +1 @@ -!function(e){function o(o){for(var t,c,s=o[0],p=o[1],f=o[2],d=0,u=[];d