From 7287c7cfb5b1cefcaedba2055b698520470dca9f Mon Sep 17 00:00:00 2001 From: Pessimistress Date: Thu, 21 Apr 2022 19:07:17 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=2058057?= =?UTF-8?q?a8ec80c58a6febb56fc84cbb7b3817caf6d=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 27-9fafbe3fd9a64912bea8.js | 1 + 27-df9d495cc4e63fdeea88.js | 1 - ...2aef29032efb222d04-4987a42f9d9cc122e5b3.js | 1 - ...2aef29032efb222d04-4e76f239aae33ea4a1cd.js | 1 + chunk-map.json | 2 +- ...ntrols-src-app-tsx-0fc6f5753e0415fde950.js | 2 +- ...ocoder-src-app-tsx-244936683de9dee32672.js | 4 +-- ...pp-tsx-244936683de9dee32672.js.LICENSE.txt | 0 ...errain-src-app-tsx-66f43d9bdd9acd36ee6b.js | 1 - ...errain-src-app-tsx-7b12f3bb393a8bb524f0.js | 1 + .../attribution-control/index.html | 10 +++--- .../fullscreen-control/index.html | 10 +++--- .../geolocate-control/index.html | 10 +++--- docs/api-reference/layer/index.html | 24 ++++++------- docs/api-reference/map-provider/index.html | 4 +-- docs/api-reference/map/index.html | 12 +++---- docs/api-reference/marker/index.html | 10 +++--- .../navigation-control/index.html | 10 +++--- docs/api-reference/popup/index.html | 10 +++--- docs/api-reference/scale-control/index.html | 10 +++--- docs/api-reference/source/index.html | 26 +++++++------- docs/api-reference/types/index.html | 2 +- docs/api-reference/use-control/index.html | 24 ++++++------- docs/api-reference/use-map/index.html | 12 +++---- docs/contributing/index.html | 6 ++-- .../get-started/adding-custom-data/index.html | 26 +++++++------- docs/get-started/get-started/index.html | 12 +++---- docs/get-started/mapbox-tokens/index.html | 8 ++--- docs/get-started/state-management/index.html | 24 ++++++------- docs/get-started/tips-and-tricks/index.html | 34 ++++++++++++------- docs/index.html | 4 +-- docs/upgrade-guide/index.html | 14 ++++---- 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/geocoder/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/side-by-side/index.html | 2 +- examples/terrain/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 +- .../attribution-control/page-data.json | 2 +- .../fullscreen-control/page-data.json | 2 +- .../geolocate-control/page-data.json | 2 +- .../docs/api-reference/layer/page-data.json | 2 +- .../docs/api-reference/map/page-data.json | 2 +- .../docs/api-reference/marker/page-data.json | 2 +- .../navigation-control/page-data.json | 2 +- .../docs/api-reference/popup/page-data.json | 2 +- .../scale-control/page-data.json | 2 +- .../docs/api-reference/source/page-data.json | 2 +- .../api-reference/use-control/page-data.json | 2 +- .../docs/api-reference/use-map/page-data.json | 2 +- page-data/docs/contributing/page-data.json | 2 +- .../adding-custom-data/page-data.json | 2 +- .../get-started/get-started/page-data.json | 2 +- .../get-started/mapbox-tokens/page-data.json | 2 +- .../state-management/page-data.json | 2 +- .../tips-and-tricks/page-data.json | 2 +- page-data/docs/upgrade-guide/page-data.json | 2 +- page-data/search/page-data.json | 2 +- search/index.html | 2 +- ...=> webpack-runtime-53e1d5786ef6c6593773.js | 2 +- webpack.stats.json | 2 +- 75 files changed, 206 insertions(+), 198 deletions(-) create mode 100644 27-9fafbe3fd9a64912bea8.js delete mode 100644 27-df9d495cc4e63fdeea88.js delete mode 100644 834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js create mode 100644 834b8338ea35f2c3d17eb82aef29032efb222d04-4e76f239aae33ea4a1cd.js rename component---examples-controls-src-app-tsx-d64f7d83a89165ad193f.js => component---examples-controls-src-app-tsx-0fc6f5753e0415fde950.js (78%) rename component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js => component---examples-geocoder-src-app-tsx-244936683de9dee32672.js (95%) rename component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js.LICENSE.txt => component---examples-geocoder-src-app-tsx-244936683de9dee32672.js.LICENSE.txt (100%) delete mode 100644 component---examples-terrain-src-app-tsx-66f43d9bdd9acd36ee6b.js create mode 100644 component---examples-terrain-src-app-tsx-7b12f3bb393a8bb524f0.js rename webpack-runtime-90ed2a39a8a927f3d2d9.js => webpack-runtime-53e1d5786ef6c6593773.js (84%) diff --git a/27-9fafbe3fd9a64912bea8.js b/27-9fafbe3fd9a64912bea8.js new file mode 100644 index 00000000..131bc923 --- /dev/null +++ b/27-9fafbe3fd9a64912bea8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{bhPm:function(e,t,i){e.exports=function(){"use strict";var e,t,i;function r(r,n){if(e)if(t){var o="self.onerror = function() { console.error('An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling'); }; var sharedChunk = {}; ("+e+")(sharedChunk); ("+t+")(sharedChunk); self.onerror = null;",s={};e(s),i=n(s),"undefined"!=typeof window&&window&&window.URL&&window.URL.createObjectURL&&(i.workerUrl=window.URL.createObjectURL(new Blob([o],{type:"text/javascript"})))}else t=n;else e=n}return r(0,(function(e){var t="2.8.0",i=r;function r(e,t,i,r){this.cx=3*e,this.bx=3*(i-e)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*t,this.by=3*(r-t)-this.cy,this.ay=1-this.cy-this.by,this.p1x=e,this.p1y=r,this.p2x=i,this.p2y=r}r.prototype.sampleCurveX=function(e){return((this.ax*e+this.bx)*e+this.cx)*e},r.prototype.sampleCurveY=function(e){return((this.ay*e+this.by)*e+this.cy)*e},r.prototype.sampleCurveDerivativeX=function(e){return(3*this.ax*e+2*this.bx)*e+this.cx},r.prototype.solveCurveX=function(e,t){var i,r,n,o,s;for(void 0===t&&(t=1e-6),n=e,s=0;s<8;s++){if(o=this.sampleCurveX(n)-e,Math.abs(o)(r=1))return r;for(;io?i=n:r=n,n=.5*(r-i)+i}return n},r.prototype.solve=function(e,t){return this.sampleCurveY(this.solveCurveX(e,t))};var n=o;function o(e,t){this.x=e,this.y=t}o.prototype={clone:function(){return new o(this.x,this.y)},add:function(e){return this.clone()._add(e)},sub:function(e){return this.clone()._sub(e)},multByPoint:function(e){return this.clone()._multByPoint(e)},divByPoint:function(e){return this.clone()._divByPoint(e)},mult:function(e){return this.clone()._mult(e)},div:function(e){return this.clone()._div(e)},rotate:function(e){return this.clone()._rotate(e)},rotateAround:function(e,t){return this.clone()._rotateAround(e,t)},matMult:function(e){return this.clone()._matMult(e)},unit:function(){return this.clone()._unit()},perp:function(){return this.clone()._perp()},round:function(){return this.clone()._round()},mag:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},equals:function(e){return this.x===e.x&&this.y===e.y},dist:function(e){return Math.sqrt(this.distSqr(e))},distSqr:function(e){var t=e.x-this.x,i=e.y-this.y;return t*t+i*i},angle:function(){return Math.atan2(this.y,this.x)},angleTo:function(e){return Math.atan2(this.y-e.y,this.x-e.x)},angleWith:function(e){return this.angleWithSep(e.x,e.y)},angleWithSep:function(e,t){return Math.atan2(this.x*t-this.y*e,this.x*e+this.y*t)},_matMult:function(e){var t=e[2]*this.x+e[3]*this.y;return this.x=e[0]*this.x+e[1]*this.y,this.y=t,this},_add:function(e){return this.x+=e.x,this.y+=e.y,this},_sub:function(e){return this.x-=e.x,this.y-=e.y,this},_mult:function(e){return this.x*=e,this.y*=e,this},_div:function(e){return this.x/=e,this.y/=e,this},_multByPoint:function(e){return this.x*=e.x,this.y*=e.y,this},_divByPoint:function(e){return this.x/=e.x,this.y/=e.y,this},_unit:function(){return this._div(this.mag()),this},_perp:function(){var e=this.y;return this.y=this.x,this.x=-e,this},_rotate:function(e){var t=Math.cos(e),i=Math.sin(e),r=i*this.x+t*this.y;return this.x=t*this.x-i*this.y,this.y=r,this},_rotateAround:function(e,t){var i=Math.cos(e),r=Math.sin(e),n=t.y+r*(this.x-t.x)+i*(this.y-t.y);return this.x=t.x+i*(this.x-t.x)-r*(this.y-t.y),this.y=n,this},_round:function(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this}},o.convert=function(e){return e instanceof o?e:Array.isArray(e)?new o(e[0],e[1]):e};var s="undefined"!=typeof self?self:{};const a=Math.PI/180,l=180/Math.PI;function c(e){return e*a}function h(e){return e*l}const u=[[0,0],[1,0],[1,1],[0,1]];function p(e){if(e<=0)return 0;if(e>=1)return 1;const t=e*e,i=t*e;return 4*(e<.5?i:3*(e-t)+i-.75)}function d(e,t,r,n){const o=new i(e,t,r,n);return function(e){return o.solve(e)}}const f=d(.25,.1,.25,1);function m(e,t,i){return Math.min(i,Math.max(t,e))}function _(e,t,i){return(i=m((i-e)/(t-e),0,1))*i*(3-2*i)}function g(e,t,i){const r=i-t,n=((e-t)%r+r)%r+t;return n===t?i:n}function y(e,t,i){if(!e.length)return i(null,[]);let r=e.length;const n=new Array(e.length);let o=null;e.forEach((e,s)=>{t(e,(e,t)=>{e&&(o=e),n[s]=t,0==--r&&i(o,n)})})}function x(e){const t=[];for(const i in e)t.push(e[i]);return t}function v(e,...t){for(const i of t)for(const t in i)e[t]=i[t];return e}let b=1;function w(){return b++}function T(){return function e(t){return t?(t^Math.random()*(16>>t/4)).toString(16):([1e7]+-[1e3]+-4e3+-8e3+-1e11).replace(/[018]/g,e)}()}function E(e){return e<=1?1:Math.pow(2,Math.ceil(Math.log(e)/Math.LN2))}function S(e){return!!e&&/^[0-9a-f]{8}-[0-9a-f]{4}-[4][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(e)}function I(e,t){e.forEach(e=>{t[e]&&(t[e]=t[e].bind(t))})}function M(e,t){return-1!==e.indexOf(t,e.length-t.length)}function A(e,t,i){const r={};for(const n in e)r[n]=t.call(i||this,e[n],n,e);return r}function z(e,t,i){const r={};for(const n in e)t.call(i||this,e[n],n,e)&&(r[n]=e[n]);return r}function C(e){return Array.isArray(e)?e.map(C):"object"==typeof e&&e?A(e,C):e}const k={};function D(e){k[e]||("undefined"!=typeof console&&console.warn(e),k[e]=!0)}function P(e,t,i){return(i.y-e.y)*(t.x-e.x)>(t.y-e.y)*(i.x-e.x)}function L(e){let t=0;for(let i,r,n=0,o=e.length,s=o-1;n@\,;\:\\"\/\[\]\?\=\{\}\x7F]+)(?:\=(?:([^\x00-\x20\(\)<>@\,;\:\\"\/\[\]\?\=\{\}\x7F]+)|(?:\"((?:[^"\\]|\\.)*)\")))?/g,(e,i,r,n)=>{const o=r||n;return t[i]=!o||o.toLowerCase(),""}),t["max-age"]){const e=parseInt(t["max-age"],10);isNaN(e)?delete t["max-age"]:t["max-age"]=e}return t}let F,O,U,V,N=null;function j(e){if(null==N){const t=e.navigator?e.navigator.userAgent:null;N=!!e.safari||!(!t||!(/\b(iPad|iPhone|iPod)\b/.test(t)||t.match("Safari")&&!t.match("Chrome")))}return N}function G(e){try{const t=s[e];return t.setItem("_mapbox_test_",1),t.removeItem("_mapbox_test_"),!0}catch(e){return!1}}const Z={now:()=>void 0!==U?U:s.performance.now(),setNow(e){U=e},restoreNow(){U=void 0},frame(e){const t=s.requestAnimationFrame(e);return{cancel:()=>s.cancelAnimationFrame(t)}},getImageData(e,t=0){const{width:i,height:r}=e;V||(V=s.document.createElement("canvas"));const n=V.getContext("2d");if(!n)throw new Error("failed to create canvas 2d context");return(i>V.width||r>V.height)&&(V.width=i,V.height=r),n.clearRect(-t,-t,i+2*t,r+2*t),n.drawImage(e,0,0,i,r),n.getImageData(-t,-t,i+2*t,r+2*t)},resolveURL:e=>(F||(F=s.document.createElement("a")),F.href=e,F.href),get devicePixelRatio(){return s.devicePixelRatio},get prefersReducedMotion(){return!!s.matchMedia&&(null==O&&(O=s.matchMedia("(prefers-reduced-motion: reduce)")),O.matches)}};let q;const $={API_URL:"https://api.mapbox.com",get API_URL_REGEX(){if(null==q){const e=/^((https?:)?\/\/)?([^\/]+\.)?mapbox\.c(n|om)(\/|\?|$)/i;try{q=null!={}.API_URL_REGEX?new RegExp({}.API_URL_REGEX):e}catch(t){q=e}}return q},get EVENTS_URL(){return this.API_URL?0===this.API_URL.indexOf("https://api.mapbox.cn")?"https://events.mapbox.cn/events/v2":0===this.API_URL.indexOf("https://api.mapbox.com")?"https://events.mapbox.com/events/v2":null:null},SESSION_PATH:"/map-sessions/v1",FEEDBACK_URL:"https://apps.mapbox.com/feedback",TILE_URL_VERSION:"v4",RASTER_URL_PREFIX:"raster/v1",REQUIRE_ACCESS_TOKEN:!0,ACCESS_TOKEN:null,MAX_PARALLEL_IMAGE_REQUESTS:16},X={supported:!1,testSupport:function(e){!Y&&H&&(K?J(e):W=e)}};let W,H,Y=!1,K=!1;function J(e){const t=e.createTexture();e.bindTexture(e.TEXTURE_2D,t);try{if(e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,H),e.isContextLost())return;X.supported=!0}catch(e){}e.deleteTexture(t),Y=!0}s.document&&(H=s.document.createElement("img"),H.onload=function(){W&&J(W),W=null,K=!0},H.onerror=function(){Y=!0,W=null},H.src="data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=");const Q="01",ee="NO_ACCESS_TOKEN";function te(e){return 0===e.indexOf("mapbox:")}function ie(e){return $.API_URL_REGEX.test(e)}const re=/^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/;function ne(e){const t=e.match(re);if(!t)throw new Error("Unable to parse URL object");return{protocol:t[1],authority:t[2],path:t[3]||"/",params:t[4]?t[4].split("&"):[]}}function oe(e){const t=e.params.length?"?"+e.params.join("&"):"";return`${e.protocol}://${e.authority}${e.path}${t}`}function se(e){if(!e)return null;const t=e.split(".");if(!t||3!==t.length)return null;try{return JSON.parse(decodeURIComponent(s.atob(t[1]).split("").map(e=>"%"+("00"+e.charCodeAt(0).toString(16)).slice(-2)).join("")))}catch(e){return null}}class ae{constructor(e){this.type=e,this.anonId=null,this.eventData={},this.queue=[],this.pendingRequest=null}getStorageKey(e){const t=se($.ACCESS_TOKEN);let i="";return i=t&&t.u?s.btoa(encodeURIComponent(t.u).replace(/%([0-9A-F]{2})/g,(e,t)=>String.fromCharCode(Number("0x"+t)))):$.ACCESS_TOKEN||"",e?`mapbox.eventData.${e}:${i}`:"mapbox.eventData:"+i}fetchEventData(){const e=G("localStorage"),t=this.getStorageKey(),i=this.getStorageKey("uuid");if(e)try{const e=s.localStorage.getItem(t);e&&(this.eventData=JSON.parse(e));const r=s.localStorage.getItem(i);r&&(this.anonId=r)}catch(e){D("Unable to read from LocalStorage")}}saveEventData(){const e=G("localStorage"),t=this.getStorageKey(),i=this.getStorageKey("uuid");if(e)try{s.localStorage.setItem(i,this.anonId),Object.keys(this.eventData).length>=1&&s.localStorage.setItem(t,JSON.stringify(this.eventData))}catch(e){D("Unable to write to LocalStorage")}}processRequests(e){}postEvent(e,i,r,n){if(!$.EVENTS_URL)return;const o=ne($.EVENTS_URL);o.params.push("access_token="+(n||$.ACCESS_TOKEN||""));const s={event:this.type,created:new Date(e).toISOString(),sdkIdentifier:"mapbox-gl-js",sdkVersion:t,skuId:Q,userId:this.anonId},a=i?v(s,i):s,l={url:oe(o),headers:{"Content-Type":"text/plain"},body:JSON.stringify([a])};this.pendingRequest=Ae(l,e=>{this.pendingRequest=null,r(e),this.saveEventData(),this.processRequests(n)})}queueRequest(e,t){this.queue.push(e),this.processRequests(t)}}const le=new class extends ae{constructor(e){super("appUserTurnstile"),this._customAccessToken=e}postTurnstileEvent(e,t){$.EVENTS_URL&&$.ACCESS_TOKEN&&Array.isArray(e)&&e.some(e=>te(e)||ie(e))&&this.queueRequest(Date.now(),t)}processRequests(e){if(this.pendingRequest||0===this.queue.length)return;this.anonId&&this.eventData.lastSuccess&&this.eventData.tokenU||this.fetchEventData();const t=se($.ACCESS_TOKEN),i=t?t.u:$.ACCESS_TOKEN;let r=i!==this.eventData.tokenU;S(this.anonId)||(this.anonId=T(),r=!0);const n=this.queue.shift();if(this.eventData.lastSuccess){const e=new Date(this.eventData.lastSuccess),t=new Date(n),i=(n-this.eventData.lastSuccess)/864e5;r=r||i>=1||i<-1||e.getDate()!==t.getDate()}else r=!0;r?this.postEvent(n,{"enabled.telemetry":!1},e=>{e||(this.eventData.lastSuccess=n,this.eventData.tokenU=i)},e):this.processRequests()}},ce=le.postTurnstileEvent.bind(le),he=new class extends ae{constructor(){super("map.load"),this.success={},this.skuToken=""}postMapLoadEvent(e,t,i,r){this.skuToken=t,this.errorCb=r,$.EVENTS_URL&&(i||$.ACCESS_TOKEN?this.queueRequest({id:e,timestamp:Date.now()},i):this.errorCb(new Error(ee)))}processRequests(e){if(this.pendingRequest||0===this.queue.length)return;const{id:t,timestamp:i}=this.queue.shift();t&&this.success[t]||(this.anonId||this.fetchEventData(),S(this.anonId)||(this.anonId=T()),this.postEvent(i,{skuToken:this.skuToken},e=>{e?this.errorCb(e):t&&(this.success[t]=!0)},e))}},ue=he.postMapLoadEvent.bind(he),pe=new class extends ae{constructor(){super("map.auth"),this.success={},this.skuToken=""}getSession(e,t,i,r){if(!$.API_URL||!$.SESSION_PATH)return;const n=ne($.API_URL+$.SESSION_PATH);n.params.push("sku="+(t||"")),n.params.push("access_token="+(r||$.ACCESS_TOKEN||""));const o={url:oe(n),headers:{"Content-Type":"text/plain"}};this.pendingRequest=ze(o,e=>{this.pendingRequest=null,i(e),this.saveEventData(),this.processRequests(r)})}getSessionAPI(e,t,i,r){this.skuToken=t,this.errorCb=r,$.SESSION_PATH&&$.API_URL&&(i||$.ACCESS_TOKEN?this.queueRequest({id:e,timestamp:Date.now()},i):this.errorCb(new Error(ee)))}processRequests(e){if(this.pendingRequest||0===this.queue.length)return;const{id:t,timestamp:i}=this.queue.shift();t&&this.success[t]||this.getSession(i,this.skuToken,e=>{e?this.errorCb(e):t&&(this.success[t]=!0)},e)}},de=pe.getSessionAPI.bind(pe),fe=new Set,me="mapbox-tiles";let _e,ge,ye=500,xe=50;function ve(){s.caches&&!_e&&(_e=s.caches.open(me))}function be(e){const t=e.indexOf("?");return t<0?e:e.slice(0,t)}let we=1/0;const Te={Unknown:"Unknown",Style:"Style",Source:"Source",Tile:"Tile",Glyphs:"Glyphs",SpriteImage:"SpriteImage",SpriteJSON:"SpriteJSON",Image:"Image"};"function"==typeof Object.freeze&&Object.freeze(Te);class Ee extends Error{constructor(e,t,i){401===t&&ie(i)&&(e+=": you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes"),super(e),this.status=t,this.url=i}toString(){return`${this.name}: ${this.message} (${this.status}): ${this.url}`}}const Se=B()?()=>self.worker&&self.worker.referrer:()=>("blob:"===s.location.protocol?s.parent:s).location.href,Ie=function(e,t){if(!(/^file:/.test(i=e.url)||/^file:/.test(Se())&&!/^\w+:/.test(i))){if(s.fetch&&s.Request&&s.AbortController&&s.Request.prototype.hasOwnProperty("signal"))return function(e,t){const i=new s.AbortController,r=new s.Request(e.url,{method:e.method||"GET",body:e.body,credentials:e.credentials,headers:e.headers,referrer:Se(),signal:i.signal});let n=!1,o=!1;const a=(l=r.url).indexOf("sku=")>0&&ie(l);var l;"json"===e.type&&r.headers.set("Accept","application/json");const c=(i,n,l)=>{if(o)return;if(i&&"SecurityError"!==i.message&&D(i),n&&l)return h(n);const c=Date.now();s.fetch(r).then(i=>{if(i.ok){const e=a?i.clone():null;return h(i,e,c)}return t(new Ee(i.statusText,i.status,e.url))}).catch(e=>{20!==e.code&&t(new Error(e.message))})},h=(i,a,l)=>{("arrayBuffer"===e.type?i.arrayBuffer():"json"===e.type?i.json():i.text()).then(e=>{o||(a&&l&&function(e,t,i){if(ve(),!_e)return;const r={status:t.status,statusText:t.statusText,headers:new s.Headers};t.headers.forEach((e,t)=>r.headers.set(t,e));const n=R(t.headers.get("Cache-Control")||"");if(n["no-store"])return;n["max-age"]&&r.headers.set("Expires",new Date(i+1e3*n["max-age"]).toUTCString());const o=r.headers.get("Expires");o&&(new Date(o).getTime()-i<42e4||function(e,t){if(void 0===ge)try{new Response(new ReadableStream),ge=!0}catch(e){ge=!1}ge?t(e.body):e.blob().then(t)}(t,t=>{const i=new s.Response(t,r);ve(),_e&&_e.then(t=>t.put(be(e.url),i)).catch(e=>D(e.message))}))}(r,a,l),n=!0,t(null,e,i.headers.get("Cache-Control"),i.headers.get("Expires")))}).catch(e=>{o||t(new Error(e.message))})};return a?function(e,t){if(ve(),!_e)return t(null);const i=be(e.url);_e.then(e=>{e.match(i).then(r=>{const n=function(e){if(!e)return!1;const t=new Date(e.headers.get("Expires")||0),i=R(e.headers.get("Cache-Control")||"");return t>Date.now()&&!i["no-cache"]}(r);e.delete(i),n&&e.put(i,r.clone()),t(null,r,n)}).catch(t)}).catch(t)}(r,c):c(null,null),{cancel:()=>{o=!0,n||i.abort()}}}(e,t);if(B()&&self.worker&&self.worker.actor)return self.worker.actor.send("getResource",e,t,void 0,!0)}var i;return function(e,t){const i=new s.XMLHttpRequest;i.open(e.method||"GET",e.url,!0),"arrayBuffer"===e.type&&(i.responseType="arraybuffer");for(const r in e.headers)i.setRequestHeader(r,e.headers[r]);return"json"===e.type&&(i.responseType="text",i.setRequestHeader("Accept","application/json")),i.withCredentials="include"===e.credentials,i.onerror=()=>{t(new Error(i.statusText))},i.onload=()=>{if((i.status>=200&&i.status<300||0===i.status)&&null!==i.response){let r=i.response;if("json"===e.type)try{r=JSON.parse(i.response)}catch(e){return t(e)}t(null,r,i.getResponseHeader("Cache-Control"),i.getResponseHeader("Expires"))}else t(new Ee(i.statusText,i.status,e.url))},i.send(e.body),{cancel:()=>i.abort()}}(e,t)},Me=function(e,t){return Ie(v(e,{type:"arrayBuffer"}),t)},Ae=function(e,t){return Ie(v(e,{method:"POST"}),t)},ze=function(e,t){return Ie(v(e,{method:"GET"}),t)};function Ce(e){const t=s.document.createElement("a");return t.href=e,t.protocol===s.document.location.protocol&&t.host===s.document.location.host}const ke="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=";let De,Pe;De=[],Pe=0;const Le=function(e,t){if(X.supported&&(e.headers||(e.headers={}),e.headers.accept="image/webp,*/*"),Pe>=$.MAX_PARALLEL_IMAGE_REQUESTS){const i={requestParameters:e,callback:t,cancelled:!1,cancel(){this.cancelled=!0}};return De.push(i),i}Pe++;let i=!1;const r=()=>{if(!i)for(i=!0,Pe--;De.length&&Pe<$.MAX_PARALLEL_IMAGE_REQUESTS;){const e=De.shift(),{requestParameters:t,callback:i,cancelled:r}=e;r||(e.cancel=Le(t,i).cancel)}},n=Me(e,(e,i,n,o)=>{r(),e?t(e):i&&(s.createImageBitmap?function(e,t){const i=new s.Blob([new Uint8Array(e)],{type:"image/png"});s.createImageBitmap(i).then(e=>{t(null,e)}).catch(e=>{t(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`))})}(i,(e,i)=>t(e,i,n,o)):function(e,t){const i=new s.Image,r=s.URL;i.onload=()=>{t(null,i),r.revokeObjectURL(i.src),i.onload=null,s.requestAnimationFrame(()=>{i.src=ke})},i.onerror=()=>t(new Error("Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported."));const n=new s.Blob([new Uint8Array(e)],{type:"image/png"});i.src=e.byteLength?r.createObjectURL(n):ke}(i,(e,i)=>t(e,i,n,o)))});return{cancel:()=>{n.cancel(),r()}}};function Be(e,t,i){i[e]&&-1!==i[e].indexOf(t)||(i[e]=i[e]||[],i[e].push(t))}function Re(e,t,i){if(i&&i[e]){const r=i[e].indexOf(t);-1!==r&&i[e].splice(r,1)}}class Fe{constructor(e,t={}){v(this,t),this.type=e}}class Oe extends Fe{constructor(e,t={}){super("error",v({error:e},t))}}class Ue{on(e,t){return this._listeners=this._listeners||{},Be(e,t,this._listeners),this}off(e,t){return Re(e,t,this._listeners),Re(e,t,this._oneTimeListeners),this}once(e,t){return t?(this._oneTimeListeners=this._oneTimeListeners||{},Be(e,t,this._oneTimeListeners),this):new Promise(t=>this.once(e,t))}fire(e,t){"string"==typeof e&&(e=new Fe(e,t||{}));const i=e.type;if(this.listens(i)){e.target=this;const t=this._listeners&&this._listeners[i]?this._listeners[i].slice():[];for(const i of t)i.call(this,e);const r=this._oneTimeListeners&&this._oneTimeListeners[i]?this._oneTimeListeners[i].slice():[];for(const o of r)Re(i,o,this._oneTimeListeners),o.call(this,e);const n=this._eventedParent;n&&(v(e,"function"==typeof this._eventedParentData?this._eventedParentData():this._eventedParentData),n.fire(e))}else e instanceof Oe&&console.error(e.error);return this}listens(e){return!!(this._listeners&&this._listeners[e]&&this._listeners[e].length>0||this._oneTimeListeners&&this._oneTimeListeners[e]&&this._oneTimeListeners[e].length>0||this._eventedParent&&this._eventedParent.listens(e))}setEventedParent(e,t){return this._eventedParent=e,this._eventedParentData=t,this}}var Ve=JSON.parse('{"$version":8,"$root":{"version":{"required":true,"type":"enum","values":[8]},"name":{"type":"string"},"metadata":{"type":"*"},"center":{"type":"array","value":"number"},"zoom":{"type":"number"},"bearing":{"type":"number","default":0,"period":360,"units":"degrees"},"pitch":{"type":"number","default":0,"units":"degrees"},"light":{"type":"light"},"terrain":{"type":"terrain"},"fog":{"type":"fog"},"sources":{"required":true,"type":"sources"},"sprite":{"type":"string"},"glyphs":{"type":"string"},"transition":{"type":"transition"},"projection":{"type":"projection"},"layers":{"required":true,"type":"array","value":"layer"}},"sources":{"*":{"type":"source"}},"source":["source_vector","source_raster","source_raster_dem","source_geojson","source_video","source_image"],"source_vector":{"type":{"required":true,"type":"enum","values":{"vector":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"scheme":{"type":"enum","values":{"xyz":{},"tms":{}},"default":"xyz"},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"attribution":{"type":"string"},"promoteId":{"type":"promoteId"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_raster":{"type":{"required":true,"type":"enum","values":{"raster":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"tileSize":{"type":"number","default":512,"units":"pixels"},"scheme":{"type":"enum","values":{"xyz":{},"tms":{}},"default":"xyz"},"attribution":{"type":"string"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_raster_dem":{"type":{"required":true,"type":"enum","values":{"raster-dem":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"tileSize":{"type":"number","default":512,"units":"pixels"},"attribution":{"type":"string"},"encoding":{"type":"enum","values":{"terrarium":{},"mapbox":{}},"default":"mapbox"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_geojson":{"type":{"required":true,"type":"enum","values":{"geojson":{}}},"data":{"type":"*"},"maxzoom":{"type":"number","default":18},"attribution":{"type":"string"},"buffer":{"type":"number","default":128,"maximum":512,"minimum":0},"filter":{"type":"*"},"tolerance":{"type":"number","default":0.375},"cluster":{"type":"boolean","default":false},"clusterRadius":{"type":"number","default":50,"minimum":0},"clusterMaxZoom":{"type":"number"},"clusterMinPoints":{"type":"number"},"clusterProperties":{"type":"*"},"lineMetrics":{"type":"boolean","default":false},"generateId":{"type":"boolean","default":false},"promoteId":{"type":"promoteId"}},"source_video":{"type":{"required":true,"type":"enum","values":{"video":{}}},"urls":{"required":true,"type":"array","value":"string"},"coordinates":{"required":true,"type":"array","length":4,"value":{"type":"array","length":2,"value":"number"}}},"source_image":{"type":{"required":true,"type":"enum","values":{"image":{}}},"url":{"required":true,"type":"string"},"coordinates":{"required":true,"type":"array","length":4,"value":{"type":"array","length":2,"value":"number"}}},"layer":{"id":{"type":"string","required":true},"type":{"type":"enum","values":{"fill":{},"line":{},"symbol":{},"circle":{},"heatmap":{},"fill-extrusion":{},"raster":{},"hillshade":{},"background":{},"sky":{}},"required":true},"metadata":{"type":"*"},"source":{"type":"string"},"source-layer":{"type":"string"},"minzoom":{"type":"number","minimum":0,"maximum":24},"maxzoom":{"type":"number","minimum":0,"maximum":24},"filter":{"type":"filter"},"layout":{"type":"layout"},"paint":{"type":"paint"}},"layout":["layout_fill","layout_line","layout_circle","layout_heatmap","layout_fill-extrusion","layout_symbol","layout_raster","layout_hillshade","layout_background","layout_sky"],"layout_background":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_sky":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_fill":{"fill-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_circle":{"circle-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_heatmap":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_fill-extrusion":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_line":{"line-cap":{"type":"enum","values":{"butt":{},"round":{},"square":{}},"default":"butt","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"line-join":{"type":"enum","values":{"bevel":{},"round":{},"miter":{}},"default":"miter","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"line-miter-limit":{"type":"number","default":2,"requires":[{"line-join":"miter"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-round-limit":{"type":"number","default":1.05,"requires":[{"line-join":"round"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_symbol":{"symbol-placement":{"type":"enum","values":{"point":{},"line":{},"line-center":{}},"default":"point","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-spacing":{"type":"number","default":250,"minimum":1,"units":"pixels","requires":[{"symbol-placement":"line"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-avoid-edges":{"type":"boolean","default":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"symbol-z-order":{"type":"enum","values":{"auto":{},"viewport-y":{},"source":{}},"default":"auto","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-allow-overlap":{"type":"boolean","default":false,"requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-ignore-placement":{"type":"boolean","default":false,"requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-optional":{"type":"boolean","default":false,"requires":["icon-image","text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-rotation-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-size":{"type":"number","default":1,"minimum":0,"units":"factor of the original icon size","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-text-fit":{"type":"enum","values":{"none":{},"width":{},"height":{},"both":{}},"default":"none","requires":["icon-image","text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-text-fit-padding":{"type":"array","value":"number","length":4,"default":[0,0,0,0],"units":"pixels","requires":["icon-image","text-field",{"icon-text-fit":["both","width","height"]}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-image":{"type":"resolvedImage","tokens":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-rotate":{"type":"number","default":0,"period":360,"units":"degrees","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-padding":{"type":"number","default":2,"minimum":0,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-keep-upright":{"type":"boolean","default":false,"requires":["icon-image",{"icon-rotation-alignment":"map"},{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-offset":{"type":"array","value":"number","length":2,"default":[0,0],"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-anchor":{"type":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"default":"center","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-rotation-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-field":{"type":"formatted","default":"","tokens":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-font":{"type":"array","value":"string","default":["Open Sans Regular","Arial Unicode MS Regular"],"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-size":{"type":"number","default":16,"minimum":0,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-max-width":{"type":"number","default":10,"minimum":0,"units":"ems","requires":["text-field",{"symbol-placement":["point"]}],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-line-height":{"type":"number","default":1.2,"units":"ems","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-letter-spacing":{"type":"number","default":0,"units":"ems","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-justify":{"type":"enum","values":{"auto":{},"left":{},"center":{},"right":{}},"default":"center","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-radial-offset":{"type":"number","units":"ems","default":0,"requires":["text-field"],"property-type":"data-driven","expression":{"interpolated":true,"parameters":["zoom","feature"]}},"text-variable-anchor":{"type":"array","value":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"requires":["text-field",{"symbol-placement":["point"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-anchor":{"type":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"default":"center","requires":["text-field",{"!":"text-variable-anchor"}],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-max-angle":{"type":"number","default":45,"units":"degrees","requires":["text-field",{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-writing-mode":{"type":"array","value":"enum","values":{"horizontal":{},"vertical":{}},"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-rotate":{"type":"number","default":0,"period":360,"units":"degrees","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-padding":{"type":"number","default":2,"minimum":0,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-keep-upright":{"type":"boolean","default":true,"requires":["text-field",{"text-rotation-alignment":"map"},{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-transform":{"type":"enum","values":{"none":{},"uppercase":{},"lowercase":{}},"default":"none","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-offset":{"type":"array","value":"number","units":"ems","length":2,"default":[0,0],"requires":["text-field",{"!":"text-radial-offset"}],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-allow-overlap":{"type":"boolean","default":false,"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-ignore-placement":{"type":"boolean","default":false,"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-optional":{"type":"boolean","default":false,"requires":["text-field","icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_raster":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_hillshade":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"filter":{"type":"array","value":"*"},"filter_symbol":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature","pitch","distance-from-center"]}},"filter_fill":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_line":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_circle":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_fill-extrusion":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_heatmap":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_operator":{"type":"enum","values":{"==":{},"!=":{},">":{},">=":{},"<":{},"<=":{},"in":{},"!in":{},"all":{},"any":{},"none":{},"has":{},"!has":{},"within":{}}},"geometry_type":{"type":"enum","values":{"Point":{},"LineString":{},"Polygon":{}}},"function":{"expression":{"type":"expression"},"stops":{"type":"array","value":"function_stop"},"base":{"type":"number","default":1,"minimum":0},"property":{"type":"string","default":"$zoom"},"type":{"type":"enum","values":{"identity":{},"exponential":{},"interval":{},"categorical":{}},"default":"exponential"},"colorSpace":{"type":"enum","values":{"rgb":{},"lab":{},"hcl":{}},"default":"rgb"},"default":{"type":"*","required":false}},"function_stop":{"type":"array","minimum":0,"maximum":24,"value":["number","color"],"length":2},"expression":{"type":"array","value":"*","minimum":1},"fog":{"range":{"type":"array","default":[0.5,10],"minimum":-20,"maximum":20,"length":2,"value":"number","property-type":"data-constant","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]}},"color":{"type":"color","property-type":"data-constant","default":"#ffffff","expression":{"interpolated":true,"parameters":["zoom"]},"transition":true},"horizon-blend":{"type":"number","property-type":"data-constant","default":0.1,"minimum":0,"maximum":1,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"light":{"anchor":{"type":"enum","default":"viewport","values":{"map":{},"viewport":{}},"property-type":"data-constant","transition":false,"expression":{"interpolated":false,"parameters":["zoom"]}},"position":{"type":"array","default":[1.15,210,30],"length":3,"value":"number","property-type":"data-constant","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]}},"color":{"type":"color","property-type":"data-constant","default":"#ffffff","expression":{"interpolated":true,"parameters":["zoom"]},"transition":true},"intensity":{"type":"number","property-type":"data-constant","default":0.5,"minimum":0,"maximum":1,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"projection":{"name":{"type":"enum","values":{"albers":{},"equalEarth":{},"equirectangular":{},"lambertConformalConic":{},"mercator":{},"naturalEarth":{},"winkelTripel":{}},"default":"mercator","required":true},"center":{"type":"array","length":2,"value":"number","property-type":"data-constant","transition":false,"requires":[{"name":["albers","lambertConformalConic"]}]},"parallels":{"type":"array","length":2,"value":"number","property-type":"data-constant","transition":false,"requires":[{"name":["albers","lambertConformalConic"]}]}},"terrain":{"source":{"type":"string","required":true},"exaggeration":{"type":"number","property-type":"data-constant","default":1,"minimum":0,"maximum":1000,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"paint":["paint_fill","paint_line","paint_circle","paint_heatmap","paint_fill-extrusion","paint_symbol","paint_raster","paint_hillshade","paint_background","paint_sky"],"paint_fill":{"fill-antialias":{"type":"boolean","default":true,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"fill-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-outline-color":{"type":"color","transition":true,"requires":[{"!":"fill-pattern"},{"fill-antialias":true}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["fill-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"}},"paint_fill-extrusion":{"fill-extrusion-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"fill-extrusion-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["fill-extrusion-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"fill-extrusion-height":{"type":"number","default":0,"minimum":0,"units":"meters","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-base":{"type":"number","default":0,"minimum":0,"units":"meters","transition":true,"requires":["fill-extrusion-height"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-vertical-gradient":{"type":"boolean","default":true,"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_line":{"line-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"line-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["line-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"line-width":{"type":"number","default":1,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-gap-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-offset":{"type":"number","default":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-dasharray":{"type":"array","value":"number","minimum":0,"transition":true,"units":"line widths","requires":[{"!":"line-pattern"}],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"line-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"line-gradient":{"type":"color","transition":false,"requires":[{"!":"line-pattern"},{"source":"geojson","has":{"lineMetrics":true}}],"expression":{"interpolated":true,"parameters":["line-progress"]},"property-type":"color-ramp"}},"paint_circle":{"circle-radius":{"type":"number","default":5,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-blur":{"type":"number","default":0,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"circle-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["circle-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-pitch-scale":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{}},"default":"viewport","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-stroke-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-stroke-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-stroke-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"}},"paint_heatmap":{"heatmap-radius":{"type":"number","default":30,"minimum":1,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"heatmap-weight":{"type":"number","default":1,"minimum":0,"transition":false,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"heatmap-intensity":{"type":"number","default":1,"minimum":0,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"heatmap-color":{"type":"color","default":["interpolate",["linear"],["heatmap-density"],0,"rgba(0, 0, 255, 0)",0.1,"royalblue",0.3,"cyan",0.5,"lime",0.7,"yellow",1,"red"],"transition":false,"expression":{"interpolated":true,"parameters":["heatmap-density"]},"property-type":"color-ramp"},"heatmap-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_symbol":{"icon-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-color":{"type":"color","default":"#000000","transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-color":{"type":"color","default":"rgba(0, 0, 0, 0)","transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["icon-image","icon-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-color":{"type":"color","default":"#000000","transition":true,"overridable":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-color":{"type":"color","default":"rgba(0, 0, 0, 0)","transition":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["text-field","text-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_raster":{"raster-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-hue-rotate":{"type":"number","default":0,"period":360,"transition":true,"units":"degrees","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-brightness-min":{"type":"number","default":0,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-brightness-max":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-saturation":{"type":"number","default":0,"minimum":-1,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-contrast":{"type":"number","default":0,"minimum":-1,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-resampling":{"type":"enum","values":{"linear":{},"nearest":{}},"default":"linear","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"raster-fade-duration":{"type":"number","default":300,"minimum":0,"transition":false,"units":"milliseconds","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_hillshade":{"hillshade-illumination-direction":{"type":"number","default":335,"minimum":0,"maximum":359,"transition":false,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-illumination-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"viewport","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-exaggeration":{"type":"number","default":0.5,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-shadow-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-highlight-color":{"type":"color","default":"#FFFFFF","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-accent-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_background":{"background-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"background-pattern"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"background-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"cross-faded"},"background-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_sky":{"sky-type":{"type":"enum","values":{"gradient":{},"atmosphere":{}},"default":"atmosphere","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-atmosphere-sun":{"type":"array","value":"number","length":2,"units":"degrees","minimum":[0,0],"maximum":[360,180],"transition":false,"requires":[{"sky-type":"atmosphere"}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-atmosphere-sun-intensity":{"type":"number","requires":[{"sky-type":"atmosphere"}],"default":10,"minimum":0,"maximum":100,"transition":false,"property-type":"data-constant"},"sky-gradient-center":{"type":"array","requires":[{"sky-type":"gradient"}],"value":"number","default":[0,0],"length":2,"units":"degrees","minimum":[0,0],"maximum":[360,180],"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-gradient-radius":{"type":"number","requires":[{"sky-type":"gradient"}],"default":90,"minimum":0,"maximum":180,"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-gradient":{"type":"color","default":["interpolate",["linear"],["sky-radial-progress"],0.8,"#87ceeb",1,"white"],"transition":false,"requires":[{"sky-type":"gradient"}],"expression":{"interpolated":true,"parameters":["sky-radial-progress"]},"property-type":"color-ramp"},"sky-atmosphere-halo-color":{"type":"color","default":"white","transition":false,"requires":[{"sky-type":"atmosphere"}],"property-type":"data-constant"},"sky-atmosphere-color":{"type":"color","default":"white","transition":false,"requires":[{"sky-type":"atmosphere"}],"property-type":"data-constant"},"sky-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"transition":{"duration":{"type":"number","default":300,"minimum":0,"units":"milliseconds"},"delay":{"type":"number","default":0,"minimum":0,"units":"milliseconds"}},"property-type":{"data-driven":{"type":"property-type"},"cross-faded":{"type":"property-type"},"cross-faded-data-driven":{"type":"property-type"},"color-ramp":{"type":"property-type"},"data-constant":{"type":"property-type"},"constant":{"type":"property-type"}},"promoteId":{"*":{"type":"string"}}}');function Ne(e,...t){for(const i of t)for(const t in i)e[t]=i[t];return e}function je(e){return e instanceof Number||e instanceof String||e instanceof Boolean?e.valueOf():e}function Ge(e){if(Array.isArray(e))return e.map(Ge);if(e instanceof Object&&!(e instanceof Number||e instanceof String||e instanceof Boolean)){const t={};for(const i in e)t[i]=Ge(e[i]);return t}return je(e)}class Ze extends Error{constructor(e,t){super(t),this.message=t,this.key=e}}class qe{constructor(e,t=[]){this.parent=e,this.bindings={};for(const[i,r]of t)this.bindings[i]=r}concat(e){return new qe(this,e)}get(e){if(this.bindings[e])return this.bindings[e];if(this.parent)return this.parent.get(e);throw new Error(e+" not found in scope.")}has(e){return!!this.bindings[e]||!!this.parent&&this.parent.has(e)}}const $e={kind:"null"},Xe={kind:"number"},We={kind:"string"},He={kind:"boolean"},Ye={kind:"color"},Ke={kind:"object"},Je={kind:"value"},Qe={kind:"collator"},et={kind:"formatted"},tt={kind:"resolvedImage"};function it(e,t){return{kind:"array",itemType:e,N:t}}function rt(e){if("array"===e.kind){const t=rt(e.itemType);return"number"==typeof e.N?`array<${t}, ${e.N}>`:"value"===e.itemType.kind?"array":`array<${t}>`}return e.kind}const nt=[$e,Xe,We,He,Ye,et,Ke,it(Je),tt];function ot(e,t){if("error"===t.kind)return null;if("array"===e.kind){if("array"===t.kind&&(0===t.N&&"value"===t.itemType.kind||!ot(e.itemType,t.itemType))&&("number"!=typeof e.N||e.N===t.N))return null}else{if(e.kind===t.kind)return null;if("value"===e.kind)for(const e of nt)if(!ot(e,t))return null}return`Expected ${rt(e)} but found ${rt(t)} instead.`}function st(e,t){return t.some(t=>t.kind===e.kind)}function at(e,t){return t.some(t=>"null"===t?null===e:"array"===t?Array.isArray(e):"object"===t?e&&!Array.isArray(e)&&"object"==typeof e:t===typeof e)}function lt(e){var t={exports:{}};return e(t,t.exports),t.exports}var ct=lt((function(e,t){var i={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],rebeccapurple:[102,51,153,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function r(e){return(e=Math.round(e))<0?0:e>255?255:e}function n(e){return r("%"===e[e.length-1]?parseFloat(e)/100*255:parseInt(e))}function o(e){return(t="%"===e[e.length-1]?parseFloat(e)/100:parseFloat(e))<0?0:t>1?1:t;var t}function s(e,t,i){return i<0?i+=1:i>1&&(i-=1),6*i<1?e+(t-e)*i*6:2*i<1?t:3*i<2?e+(t-e)*(2/3-i)*6:e}try{t.parseCSSColor=function(e){var t,a=e.replace(/ /g,"").toLowerCase();if(a in i)return i[a].slice();if("#"===a[0])return 4===a.length?(t=parseInt(a.substr(1),16))>=0&&t<=4095?[(3840&t)>>4|(3840&t)>>8,240&t|(240&t)>>4,15&t|(15&t)<<4,1]:null:7===a.length&&(t=parseInt(a.substr(1),16))>=0&&t<=16777215?[(16711680&t)>>16,(65280&t)>>8,255&t,1]:null;var l=a.indexOf("("),c=a.indexOf(")");if(-1!==l&&c+1===a.length){var h=a.substr(0,l),u=a.substr(l+1,c-(l+1)).split(","),p=1;switch(h){case"rgba":if(4!==u.length)return null;p=o(u.pop());case"rgb":return 3!==u.length?null:[n(u[0]),n(u[1]),n(u[2]),p];case"hsla":if(4!==u.length)return null;p=o(u.pop());case"hsl":if(3!==u.length)return null;var d=(parseFloat(u[0])%360+360)%360/360,f=o(u[1]),m=o(u[2]),_=m<=.5?m*(f+1):m+f-m*f,g=2*m-_;return[r(255*s(g,_,d+1/3)),r(255*s(g,_,d)),r(255*s(g,_,d-1/3)),p];default:return null}}return null}}catch(e){}}));class ht{constructor(e,t,i,r=1){this.r=e,this.g=t,this.b=i,this.a=r}static parse(e){if(!e)return;if(e instanceof ht)return e;if("string"!=typeof e)return;const t=ct.parseCSSColor(e);return t?new ht(t[0]/255*t[3],t[1]/255*t[3],t[2]/255*t[3],t[3]):void 0}toString(){const[e,t,i,r]=this.toArray();return`rgba(${Math.round(e)},${Math.round(t)},${Math.round(i)},${r})`}toArray(){const{r:e,g:t,b:i,a:r}=this;return 0===r?[0,0,0,0]:[255*e/r,255*t/r,255*i/r,r]}}ht.black=new ht(0,0,0,1),ht.white=new ht(1,1,1,1),ht.transparent=new ht(0,0,0,0),ht.red=new ht(1,0,0,1),ht.blue=new ht(0,0,1,1);class ut{constructor(e,t,i){this.sensitivity=e?t?"variant":"case":t?"accent":"base",this.locale=i,this.collator=new Intl.Collator(this.locale?this.locale:[],{sensitivity:this.sensitivity,usage:"search"})}compare(e,t){return this.collator.compare(e,t)}resolvedLocale(){return new Intl.Collator(this.locale?this.locale:[]).resolvedOptions().locale}}class pt{constructor(e,t,i,r,n){this.text=e.normalize?e.normalize():e,this.image=t,this.scale=i,this.fontStack=r,this.textColor=n}}class dt{constructor(e){this.sections=e}static fromString(e){return new dt([new pt(e,null,null,null,null)])}isEmpty(){return 0===this.sections.length||!this.sections.some(e=>0!==e.text.length||e.image&&0!==e.image.name.length)}static factory(e){return e instanceof dt?e:dt.fromString(e)}toString(){return 0===this.sections.length?"":this.sections.map(e=>e.text).join("")}serialize(){const e=["format"];for(const t of this.sections){if(t.image){e.push(["image",t.image.name]);continue}e.push(t.text);const i={};t.fontStack&&(i["text-font"]=["literal",t.fontStack.split(",")]),t.scale&&(i["font-scale"]=t.scale),t.textColor&&(i["text-color"]=["rgba"].concat(t.textColor.toArray())),e.push(i)}return e}}class ft{constructor(e){this.name=e.name,this.available=e.available}toString(){return this.name}static fromString(e){return e?new ft({name:e,available:!1}):null}serialize(){return["image",this.name]}}function mt(e,t,i,r){return"number"==typeof e&&e>=0&&e<=255&&"number"==typeof t&&t>=0&&t<=255&&"number"==typeof i&&i>=0&&i<=255?void 0===r||"number"==typeof r&&r>=0&&r<=1?null:`Invalid rgba value [${[e,t,i,r].join(", ")}]: 'a' must be between 0 and 1.`:`Invalid rgba value [${("number"==typeof r?[e,t,i,r]:[e,t,i]).join(", ")}]: 'r', 'g', and 'b' must be between 0 and 255.`}function _t(e){if(null===e)return!0;if("string"==typeof e)return!0;if("boolean"==typeof e)return!0;if("number"==typeof e)return!0;if(e instanceof ht)return!0;if(e instanceof ut)return!0;if(e instanceof dt)return!0;if(e instanceof ft)return!0;if(Array.isArray(e)){for(const t of e)if(!_t(t))return!1;return!0}if("object"==typeof e){for(const t in e)if(!_t(e[t]))return!1;return!0}return!1}function gt(e){if(null===e)return $e;if("string"==typeof e)return We;if("boolean"==typeof e)return He;if("number"==typeof e)return Xe;if(e instanceof ht)return Ye;if(e instanceof ut)return Qe;if(e instanceof dt)return et;if(e instanceof ft)return tt;if(Array.isArray(e)){const t=e.length;let i;for(const r of e){const e=gt(r);if(i){if(i===e)continue;i=Je;break}i=e}return it(i||Je,t)}return Ke}function yt(e){const t=typeof e;return null===e?"":"string"===t||"number"===t||"boolean"===t?String(e):e instanceof ht||e instanceof dt||e instanceof ft?e.toString():JSON.stringify(e)}class xt{constructor(e,t){this.type=e,this.value=t}static parse(e,t){if(2!==e.length)return t.error(`'literal' expression requires exactly one argument, but found ${e.length-1} instead.`);if(!_t(e[1]))return t.error("invalid value");const i=e[1];let r=gt(i);const n=t.expectedType;return"array"!==r.kind||0!==r.N||!n||"array"!==n.kind||"number"==typeof n.N&&0!==n.N||(r=n),new xt(r,i)}evaluate(){return this.value}eachChild(){}outputDefined(){return!0}serialize(){return"array"===this.type.kind||"object"===this.type.kind?["literal",this.value]:this.value instanceof ht?["rgba"].concat(this.value.toArray()):this.value instanceof dt?this.value.serialize():this.value}}class vt{constructor(e){this.name="ExpressionEvaluationError",this.message=e}toJSON(){return this.message}}const bt={string:We,number:Xe,boolean:He,object:Ke};class wt{constructor(e,t){this.type=e,this.args=t}static parse(e,t){if(e.length<2)return t.error("Expected at least one argument.");let i,r=1;const n=e[0];if("array"===n){let n,o;if(e.length>2){const i=e[1];if("string"!=typeof i||!(i in bt)||"object"===i)return t.error('The item type argument of "array" must be one of string, number, boolean',1);n=bt[i],r++}else n=Je;if(e.length>3){if(null!==e[2]&&("number"!=typeof e[2]||e[2]<0||e[2]!==Math.floor(e[2])))return t.error('The length argument to "array" must be a positive integer literal',2);o=e[2],r++}i=it(n,o)}else i=bt[n];const o=[];for(;re.outputDefined())}serialize(){const e=this.type,t=[e.kind];if("array"===e.kind){const i=e.itemType;if("string"===i.kind||"number"===i.kind||"boolean"===i.kind){t.push(i.kind);const r=e.N;("number"==typeof r||this.args.length>1)&&t.push(r)}}return t.concat(this.args.map(e=>e.serialize()))}}class Tt{constructor(e){this.type=et,this.sections=e}static parse(e,t){if(e.length<2)return t.error("Expected at least one argument.");const i=e[1];if(!Array.isArray(i)&&"object"==typeof i)return t.error("First argument must be an image or text section.");const r=[];let n=!1;for(let o=1;o<=e.length-1;++o){const i=e[o];if(n&&"object"==typeof i&&!Array.isArray(i)){n=!1;let e=null;if(i["font-scale"]&&(e=t.parse(i["font-scale"],1,Xe),!e))return null;let o=null;if(i["text-font"]&&(o=t.parse(i["text-font"],1,it(We)),!o))return null;let s=null;if(i["text-color"]&&(s=t.parse(i["text-color"],1,Ye),!s))return null;const a=r[r.length-1];a.scale=e,a.font=o,a.textColor=s}else{const i=t.parse(e[o],1,Je);if(!i)return null;const s=i.type.kind;if("string"!==s&&"value"!==s&&"null"!==s&&"resolvedImage"!==s)return t.error("Formatted text type must be 'string', 'value', 'image' or 'null'.");n=!0,r.push({content:i,scale:null,font:null,textColor:null})}}return new Tt(r)}evaluate(e){return new dt(this.sections.map(t=>{const i=t.content.evaluate(e);return gt(i)===tt?new pt("",i,null,null,null):new pt(yt(i),null,t.scale?t.scale.evaluate(e):null,t.font?t.font.evaluate(e).join(","):null,t.textColor?t.textColor.evaluate(e):null)}))}eachChild(e){for(const t of this.sections)e(t.content),t.scale&&e(t.scale),t.font&&e(t.font),t.textColor&&e(t.textColor)}outputDefined(){return!1}serialize(){const e=["format"];for(const t of this.sections){e.push(t.content.serialize());const i={};t.scale&&(i["font-scale"]=t.scale.serialize()),t.font&&(i["text-font"]=t.font.serialize()),t.textColor&&(i["text-color"]=t.textColor.serialize()),e.push(i)}return e}}class Et{constructor(e){this.type=tt,this.input=e}static parse(e,t){if(2!==e.length)return t.error("Expected two arguments.");const i=t.parse(e[1],1,We);return i?new Et(i):t.error("No image name provided.")}evaluate(e){const t=this.input.evaluate(e),i=ft.fromString(t);return i&&e.availableImages&&(i.available=e.availableImages.indexOf(t)>-1),i}eachChild(e){e(this.input)}outputDefined(){return!1}serialize(){return["image",this.input.serialize()]}}const St={"to-boolean":He,"to-color":Ye,"to-number":Xe,"to-string":We};class It{constructor(e,t){this.type=e,this.args=t}static parse(e,t){if(e.length<2)return t.error("Expected at least one argument.");const i=e[0];if(("to-boolean"===i||"to-string"===i)&&2!==e.length)return t.error("Expected one argument.");const r=St[i],n=[];for(let o=1;o4?`Invalid rbga value ${JSON.stringify(t)}: expected an array containing either three or four numeric values.`:mt(t[0],t[1],t[2],t[3]),!i))return new ht(t[0]/255,t[1]/255,t[2]/255,t[3])}throw new vt(i||`Could not parse color from value '${"string"==typeof t?t:String(JSON.stringify(t))}'`)}if("number"===this.type.kind){let t=null;for(const i of this.args){if(t=i.evaluate(e),null===t)return 0;const r=Number(t);if(!isNaN(r))return r}throw new vt(`Could not convert ${JSON.stringify(t)} to number.`)}return"formatted"===this.type.kind?dt.fromString(yt(this.args[0].evaluate(e))):"resolvedImage"===this.type.kind?ft.fromString(yt(this.args[0].evaluate(e))):yt(this.args[0].evaluate(e))}eachChild(e){this.args.forEach(e)}outputDefined(){return this.args.every(e=>e.outputDefined())}serialize(){if("formatted"===this.type.kind)return new Tt([{content:this.args[0],scale:null,font:null,textColor:null}]).serialize();if("resolvedImage"===this.type.kind)return new Et(this.args[0]).serialize();const e=["to-"+this.type.kind];return this.eachChild(t=>{e.push(t.serialize())}),e}}const Mt=["Unknown","Point","LineString","Polygon"];class At{constructor(){this.globals=null,this.feature=null,this.featureState=null,this.formattedSection=null,this._parseColorCache={},this.availableImages=null,this.canonical=null,this.featureTileCoord=null,this.featureDistanceData=null}id(){return this.feature&&"id"in this.feature&&this.feature.id?this.feature.id:null}geometryType(){return this.feature?"number"==typeof this.feature.type?Mt[this.feature.type]:this.feature.type:null}geometry(){return this.feature&&"geometry"in this.feature?this.feature.geometry:null}canonicalID(){return this.canonical}properties(){return this.feature&&this.feature.properties||{}}distanceFromCenter(){if(this.featureTileCoord&&this.featureDistanceData){const e=this.featureDistanceData.center,t=this.featureDistanceData.scale,{x:i,y:r}=this.featureTileCoord;return this.featureDistanceData.bearing[0]*(i*t-e[0])+this.featureDistanceData.bearing[1]*(r*t-e[1])}return 0}parseColor(e){let t=this._parseColorCache[e];return t||(t=this._parseColorCache[e]=ht.parse(e)),t}}class zt{constructor(e,t,i,r){this.name=e,this.type=t,this._evaluate=i,this.args=r}evaluate(e){return this._evaluate(e,this.args)}eachChild(e){this.args.forEach(e)}outputDefined(){return!1}serialize(){return[this.name].concat(this.args.map(e=>e.serialize()))}static parse(e,t){const i=e[0],r=zt.definitions[i];if(!r)return t.error(`Unknown expression "${i}". If you wanted a literal array, use ["literal", [...]].`,0);const n=Array.isArray(r)?r[0]:r.type,o=Array.isArray(r)?[[r[1],r[2]]]:r.overloads,s=o.filter(([t])=>!Array.isArray(t)||t.length===e.length-1);let a=null;for(const[l,c]of s){a=new Jt(t.registry,t.path,null,t.scope);const r=[];let o=!1;for(let t=1;t{return t=e,Array.isArray(t)?`(${t.map(rt).join(", ")})`:`(${rt(t.type)}...)`;var t}).join(" | "),r=[];for(let n=1;n=t[2]||e[1]<=t[1]||e[3]>=t[3])}function Lt(e,t){const i=(180+e[0])/360,r=(180-180/Math.PI*Math.log(Math.tan(Math.PI/4+e[1]*Math.PI/360)))/360,n=Math.pow(2,t.z);return[Math.round(i*n*kt),Math.round(r*n*kt)]}function Bt(e,t,i){const r=e[0]-t[0],n=e[1]-t[1],o=e[0]-i[0],s=e[1]-i[1];return r*s-o*n==0&&r*o<=0&&n*s<=0}function Rt(e,t){let i=!1;for(let s=0,a=t.length;s(r=e)[1]!=(o=a[t+1])[1]>r[1]&&r[0]<(o[0]-n[0])*(r[1]-n[1])/(o[1]-n[1])+n[0]&&(i=!i)}}var r,n,o;return i}function Ft(e,t){for(let i=0;i0&&a<0||s<0&&a>0}function Ut(e,t,i){for(const c of i)for(let i=0;ii[2]){const t=.5*r;let n=e[0]-i[0]>t?-r:i[0]-e[0]>t?r:0;0===n&&(n=e[0]-i[2]>t?-r:i[2]-e[0]>t?r:0),e[0]+=n}Dt(t,e)}function qt(e,t,i,r){const n=Math.pow(2,r.z)*kt,o=[r.x*kt,r.y*kt],s=[];if(!e)return s;for(const a of e)for(const e of a){const r=[e.x+o[0],e.y+o[1]];Zt(r,t,i,n),s.push(r)}return s}function $t(e,t,i,r){const n=Math.pow(2,r.z)*kt,o=[r.x*kt,r.y*kt],s=[];if(!e)return s;for(const l of e){const e=[];for(const i of l){const r=[i.x+o[0],i.y+o[1]];Dt(t,r),e.push(r)}s.push(e)}if(t[2]-t[0]<=n/2){(a=t)[0]=a[1]=1/0,a[2]=a[3]=-1/0;for(const e of s)for(const r of e)Zt(r,t,i,n)}var a;return s}class Xt{constructor(e,t){this.type=He,this.geojson=e,this.geometries=t}static parse(e,t){if(2!==e.length)return t.error(`'within' expression requires exactly one argument, but found ${e.length-1} instead.`);if(_t(e[1])){const t=e[1];if("FeatureCollection"===t.type)for(let e=0;e{t&&!Wt(e)&&(t=!1)}),t}function Ht(e){if(e instanceof zt&&"feature-state"===e.name)return!1;let t=!0;return e.eachChild(e=>{t&&!Ht(e)&&(t=!1)}),t}function Yt(e,t){if(e instanceof zt&&t.indexOf(e.name)>=0)return!1;let i=!0;return e.eachChild(e=>{i&&!Yt(e,t)&&(i=!1)}),i}class Kt{constructor(e,t){this.type=t.type,this.name=e,this.boundExpression=t}static parse(e,t){if(2!==e.length||"string"!=typeof e[1])return t.error("'var' expression requires exactly one string literal argument.");const i=e[1];return t.scope.has(i)?new Kt(i,t.scope.get(i)):t.error(`Unknown variable "${i}". Make sure "${i}" has been bound in an enclosing "let" expression before using it.`,1)}evaluate(e){return this.boundExpression.evaluate(e)}eachChild(){}outputDefined(){return!1}serialize(){return["var",this.name]}}class Jt{constructor(e,t=[],i,r=new qe,n=[]){this.registry=e,this.path=t,this.key=t.map(e=>`[${e}]`).join(""),this.scope=r,this.errors=n,this.expectedType=i}parse(e,t,i,r,n={}){return t?this.concat(t,i,r)._parse(e,n):this._parse(e,n)}_parse(e,t){function i(e,t,i){return"assert"===i?new wt(t,[e]):"coerce"===i?new It(t,[e]):e}if(null!==e&&"string"!=typeof e&&"boolean"!=typeof e&&"number"!=typeof e||(e=["literal",e]),Array.isArray(e)){if(0===e.length)return this.error('Expected an array with at least one element. If you wanted a literal array, use ["literal", []].');const r=e[0];if("string"!=typeof r)return this.error(`Expression name must be a string, but found ${typeof r} instead. If you wanted a literal array, use ["literal", [...]].`,0),null;const n=this.registry[r];if(n){let r=n.parse(e,this);if(!r)return null;if(this.expectedType){const e=this.expectedType,n=r.type;if("string"!==e.kind&&"number"!==e.kind&&"boolean"!==e.kind&&"object"!==e.kind&&"array"!==e.kind||"value"!==n.kind)if("color"!==e.kind&&"formatted"!==e.kind&&"resolvedImage"!==e.kind||"value"!==n.kind&&"string"!==n.kind){if(this.checkSubtype(e,n))return null}else r=i(r,e,t.typeAnnotation||"coerce");else r=i(r,e,t.typeAnnotation||"assert")}if(!(r instanceof xt)&&"resolvedImage"!==r.type.kind&&function e(t){if(t instanceof Kt)return e(t.boundExpression);if(t instanceof zt&&"error"===t.name)return!1;if(t instanceof Ct)return!1;if(t instanceof Xt)return!1;const i=t instanceof It||t instanceof wt;let r=!0;return t.eachChild(t=>{r=i?r&&e(t):r&&t instanceof xt}),!!r&&Wt(t)&&Yt(t,["zoom","heatmap-density","line-progress","sky-radial-progress","accumulated","is-supported-script","pitch","distance-from-center"])}(r)){const t=new At;try{r=new xt(r.type,r.evaluate(t))}catch(e){return this.error(e.message),null}}return r}return this.error(`Unknown expression "${r}". If you wanted a literal array, use ["literal", [...]].`,0)}return this.error(void 0===e?"'undefined' value invalid. Use null instead.":"object"==typeof e?'Bare objects invalid. Use ["literal", {...}] instead.':`Expected an array, but found ${typeof e} instead.`)}concat(e,t,i){const r="number"==typeof e?this.path.concat(e):this.path,n=i?this.scope.concat(i):this.scope;return new Jt(this.registry,r,t||null,n,this.errors)}error(e,...t){const i=`${this.key}${t.map(e=>`[${e}]`).join("")}`;this.errors.push(new Ze(i,e))}checkSubtype(e,t){const i=ot(e,t);return i&&this.error(i),i}}function Qt(e,t){const i=e.length-1;let r,n,o=0,s=i,a=0;for(;o<=s;)if(a=Math.floor((o+s)/2),r=e[a],n=e[a+1],r<=t){if(a===i||tt))throw new vt("Input is not a number.");s=a-1}return 0}class ei{constructor(e,t,i){this.type=e,this.input=t,this.labels=[],this.outputs=[];for(const[r,n]of i)this.labels.push(r),this.outputs.push(n)}static parse(e,t){if(e.length-1<4)return t.error(`Expected at least 4 arguments, but found only ${e.length-1}.`);if((e.length-1)%2!=0)return t.error("Expected an even number of arguments.");const i=t.parse(e[1],1,Xe);if(!i)return null;const r=[];let n=null;t.expectedType&&"value"!==t.expectedType.kind&&(n=t.expectedType);for(let o=1;o=i)return t.error('Input/output pairs for "step" expressions must be arranged with input values in strictly ascending order.',a);const c=t.parse(s,l,n);if(!c)return null;n=n||c.type,r.push([i,c])}return new ei(n,i,r)}evaluate(e){const t=this.labels,i=this.outputs;if(1===t.length)return i[0].evaluate(e);const r=this.input.evaluate(e);if(r<=t[0])return i[0].evaluate(e);const n=t.length;return r>=t[n-1]?i[n-1].evaluate(e):i[Qt(t,r)].evaluate(e)}eachChild(e){e(this.input);for(const t of this.outputs)e(t)}outputDefined(){return this.outputs.every(e=>e.outputDefined())}serialize(){const e=["step",this.input.serialize()];for(let t=0;t0&&e.push(this.labels[t]),e.push(this.outputs[t].serialize());return e}}function ti(e,t,i){return e*(1-i)+t*i}var ii=Object.freeze({__proto__:null,number:ti,color:function(e,t,i){return new ht(ti(e.r,t.r,i),ti(e.g,t.g,i),ti(e.b,t.b,i),ti(e.a,t.a,i))},array:function(e,t,i){return e.map((e,r)=>ti(e,t[r],i))}});const ri=6/29*3*(6/29),ni=Math.PI/180,oi=180/Math.PI;function si(e){return e>.008856451679035631?Math.pow(e,1/3):e/ri+4/29}function ai(e){return e>6/29?e*e*e:ri*(e-4/29)}function li(e){return 255*(e<=.0031308?12.92*e:1.055*Math.pow(e,1/2.4)-.055)}function ci(e){return(e/=255)<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)}function hi(e){const t=ci(e.r),i=ci(e.g),r=ci(e.b),n=si((.4124564*t+.3575761*i+.1804375*r)/.95047),o=si((.2126729*t+.7151522*i+.072175*r)/1);return{l:116*o-16,a:500*(n-o),b:200*(o-si((.0193339*t+.119192*i+.9503041*r)/1.08883)),alpha:e.a}}function ui(e){let t=(e.l+16)/116,i=isNaN(e.a)?t:t+e.a/500,r=isNaN(e.b)?t:t-e.b/200;return t=1*ai(t),i=.95047*ai(i),r=1.08883*ai(r),new ht(li(3.2404542*i-1.5371385*t-.4985314*r),li(-.969266*i+1.8760108*t+.041556*r),li(.0556434*i-.2040259*t+1.0572252*r),e.alpha)}function pi(e,t,i){const r=t-e;return e+i*(r>180||r<-180?r-360*Math.round(r/360):r)}const di={forward:hi,reverse:ui,interpolate:function(e,t,i){return{l:ti(e.l,t.l,i),a:ti(e.a,t.a,i),b:ti(e.b,t.b,i),alpha:ti(e.alpha,t.alpha,i)}}},fi={forward:function(e){const{l:t,a:i,b:r}=hi(e),n=Math.atan2(r,i)*oi;return{h:n<0?n+360:n,c:Math.sqrt(i*i+r*r),l:t,alpha:e.a}},reverse:function(e){const t=e.h*ni,i=e.c;return ui({l:e.l,a:Math.cos(t)*i,b:Math.sin(t)*i,alpha:e.alpha})},interpolate:function(e,t,i){return{h:pi(e.h,t.h,i),c:ti(e.c,t.c,i),l:ti(e.l,t.l,i),alpha:ti(e.alpha,t.alpha,i)}}};var mi=Object.freeze({__proto__:null,lab:di,hcl:fi});class _i{constructor(e,t,i,r,n){this.type=e,this.operator=t,this.interpolation=i,this.input=r,this.labels=[],this.outputs=[];for(const[o,s]of n)this.labels.push(o),this.outputs.push(s)}static interpolationFactor(e,t,r,n){let o=0;if("exponential"===e.name)o=gi(t,e.base,r,n);else if("linear"===e.name)o=gi(t,1,r,n);else if("cubic-bezier"===e.name){const s=e.controlPoints;o=new i(s[0],s[1],s[2],s[3]).solve(gi(t,1,r,n))}return o}static parse(e,t){let[i,r,n,...o]=e;if(!Array.isArray(r)||0===r.length)return t.error("Expected an interpolation type expression.",1);if("linear"===r[0])r={name:"linear"};else if("exponential"===r[0]){const e=r[1];if("number"!=typeof e)return t.error("Exponential interpolation requires a numeric base.",1,1);r={name:"exponential",base:e}}else{if("cubic-bezier"!==r[0])return t.error("Unknown interpolation type "+String(r[0]),1,0);{const e=r.slice(1);if(4!==e.length||e.some(e=>"number"!=typeof e||e<0||e>1))return t.error("Cubic bezier interpolation requires four numeric arguments with values between 0 and 1.",1);r={name:"cubic-bezier",controlPoints:e}}}if(e.length-1<4)return t.error(`Expected at least 4 arguments, but found only ${e.length-1}.`);if((e.length-1)%2!=0)return t.error("Expected an even number of arguments.");if(n=t.parse(n,2,Xe),!n)return null;const s=[];let a=null;"interpolate-hcl"===i||"interpolate-lab"===i?a=Ye:t.expectedType&&"value"!==t.expectedType.kind&&(a=t.expectedType);for(let l=0;l=e)return t.error('Input/output pairs for "interpolate" expressions must be arranged with input values in strictly ascending order.',r);const c=t.parse(i,n,a);if(!c)return null;a=a||c.type,s.push([e,c])}return"number"===a.kind||"color"===a.kind||"array"===a.kind&&"number"===a.itemType.kind&&"number"==typeof a.N?new _i(a,i,r,n,s):t.error(`Type ${rt(a)} is not interpolatable.`)}evaluate(e){const t=this.labels,i=this.outputs;if(1===t.length)return i[0].evaluate(e);const r=this.input.evaluate(e);if(r<=t[0])return i[0].evaluate(e);const n=t.length;if(r>=t[n-1])return i[n-1].evaluate(e);const o=Qt(t,r),s=_i.interpolationFactor(this.interpolation,r,t[o],t[o+1]),a=i[o].evaluate(e),l=i[o+1].evaluate(e);return"interpolate"===this.operator?ii[this.type.kind.toLowerCase()](a,l,s):"interpolate-hcl"===this.operator?fi.reverse(fi.interpolate(fi.forward(a),fi.forward(l),s)):di.reverse(di.interpolate(di.forward(a),di.forward(l),s))}eachChild(e){e(this.input);for(const t of this.outputs)e(t)}outputDefined(){return this.outputs.every(e=>e.outputDefined())}serialize(){let e;e="linear"===this.interpolation.name?["linear"]:"exponential"===this.interpolation.name?1===this.interpolation.base?["linear"]:["exponential",this.interpolation.base]:["cubic-bezier"].concat(this.interpolation.controlPoints);const t=[this.operator,e,this.input.serialize()];for(let i=0;iot(r,e.type));return new yi(o?Je:i,n)}evaluate(e){let t,i=null,r=0;for(const n of this.args){if(r++,i=n.evaluate(e),i&&i instanceof ft&&!i.available&&(t||(t=i),i=null,r===this.args.length))return t;if(null!==i)break}return i}eachChild(e){this.args.forEach(e)}outputDefined(){return this.args.every(e=>e.outputDefined())}serialize(){const e=["coalesce"];return this.eachChild(t=>{e.push(t.serialize())}),e}}class xi{constructor(e,t){this.type=t.type,this.bindings=[].concat(e),this.result=t}evaluate(e){return this.result.evaluate(e)}eachChild(e){for(const t of this.bindings)e(t[1]);e(this.result)}static parse(e,t){if(e.length<4)return t.error(`Expected at least 3 arguments, but found ${e.length-1} instead.`);const i=[];for(let n=1;n=i.length)throw new vt(`Array index out of bounds: ${t} > ${i.length-1}.`);if(t!==Math.floor(t))throw new vt(`Array index must be an integer, but found ${t} instead.`);return i[t]}eachChild(e){e(this.index),e(this.input)}outputDefined(){return!1}serialize(){return["at",this.index.serialize(),this.input.serialize()]}}class bi{constructor(e,t){this.type=He,this.needle=e,this.haystack=t}static parse(e,t){if(3!==e.length)return t.error(`Expected 2 arguments, but found ${e.length-1} instead.`);const i=t.parse(e[1],1,Je),r=t.parse(e[2],2,Je);return i&&r?st(i.type,[He,We,Xe,$e,Je])?new bi(i,r):t.error(`Expected first argument to be of type boolean, string, number or null, but found ${rt(i.type)} instead`):null}evaluate(e){const t=this.needle.evaluate(e),i=this.haystack.evaluate(e);if(null==i)return!1;if(!at(t,["boolean","string","number","null"]))throw new vt(`Expected first argument to be of type boolean, string, number or null, but found ${rt(gt(t))} instead.`);if(!at(i,["string","array"]))throw new vt(`Expected second argument to be of type array or string, but found ${rt(gt(i))} instead.`);return i.indexOf(t)>=0}eachChild(e){e(this.needle),e(this.haystack)}outputDefined(){return!0}serialize(){return["in",this.needle.serialize(),this.haystack.serialize()]}}class wi{constructor(e,t,i){this.type=Xe,this.needle=e,this.haystack=t,this.fromIndex=i}static parse(e,t){if(e.length<=2||e.length>=5)return t.error(`Expected 3 or 4 arguments, but found ${e.length-1} instead.`);const i=t.parse(e[1],1,Je),r=t.parse(e[2],2,Je);if(!i||!r)return null;if(!st(i.type,[He,We,Xe,$e,Je]))return t.error(`Expected first argument to be of type boolean, string, number or null, but found ${rt(i.type)} instead`);if(4===e.length){const n=t.parse(e[3],3,Xe);return n?new wi(i,r,n):null}return new wi(i,r)}evaluate(e){const t=this.needle.evaluate(e),i=this.haystack.evaluate(e);if(!at(t,["boolean","string","number","null"]))throw new vt(`Expected first argument to be of type boolean, string, number or null, but found ${rt(gt(t))} instead.`);if(!at(i,["string","array"]))throw new vt(`Expected second argument to be of type array or string, but found ${rt(gt(i))} instead.`);if(this.fromIndex){const r=this.fromIndex.evaluate(e);return i.indexOf(t,r)}return i.indexOf(t)}eachChild(e){e(this.needle),e(this.haystack),this.fromIndex&&e(this.fromIndex)}outputDefined(){return!1}serialize(){if(null!=this.fromIndex&&void 0!==this.fromIndex){const e=this.fromIndex.serialize();return["index-of",this.needle.serialize(),this.haystack.serialize(),e]}return["index-of",this.needle.serialize(),this.haystack.serialize()]}}class Ti{constructor(e,t,i,r,n,o){this.inputType=e,this.type=t,this.input=i,this.cases=r,this.outputs=n,this.otherwise=o}static parse(e,t){if(e.length<5)return t.error(`Expected at least 4 arguments, but found only ${e.length-1}.`);if(e.length%2!=1)return t.error("Expected an even number of arguments.");let i,r;t.expectedType&&"value"!==t.expectedType.kind&&(r=t.expectedType);const n={},o=[];for(let l=2;lNumber.MAX_SAFE_INTEGER)return c.error(`Branch labels must be integers no larger than ${Number.MAX_SAFE_INTEGER}.`);if("number"==typeof e&&Math.floor(e)!==e)return c.error("Numeric branch labels must be integer values.");if(i){if(c.checkSubtype(i,gt(e)))return null}else i=gt(e);if(void 0!==n[String(e)])return c.error("Branch labels must be unique.");n[String(e)]=o.length}const h=t.parse(a,l,r);if(!h)return null;r=r||h.type,o.push(h)}const s=t.parse(e[1],1,Je);if(!s)return null;const a=t.parse(e[e.length-1],e.length-1,r);return a?"value"!==s.type.kind&&t.concat(1).checkSubtype(i,s.type)?null:new Ti(i,r,s,n,o,a):null}evaluate(e){const t=this.input.evaluate(e);return(gt(t)===this.inputType&&this.outputs[this.cases[t]]||this.otherwise).evaluate(e)}eachChild(e){e(this.input),this.outputs.forEach(e),e(this.otherwise)}outputDefined(){return this.outputs.every(e=>e.outputDefined())&&this.otherwise.outputDefined()}serialize(){const e=["match",this.input.serialize()],t=Object.keys(this.cases).sort(),i=[],r={};for(const o of t){const e=r[this.cases[o]];void 0===e?(r[this.cases[o]]=i.length,i.push([this.cases[o],[o]])):i[e][1].push(o)}const n=e=>"number"===this.inputType.kind?Number(e):e;for(const[o,s]of i)e.push(1===s.length?n(s[0]):s.map(n)),e.push(this.outputs[o].serialize());return e.push(this.otherwise.serialize()),e}}class Ei{constructor(e,t,i){this.type=e,this.branches=t,this.otherwise=i}static parse(e,t){if(e.length<4)return t.error(`Expected at least 3 arguments, but found only ${e.length-1}.`);if(e.length%2!=0)return t.error("Expected an odd number of arguments.");let i;t.expectedType&&"value"!==t.expectedType.kind&&(i=t.expectedType);const r=[];for(let o=1;ot.outputDefined())&&this.otherwise.outputDefined()}serialize(){const e=["case"];return this.eachChild(t=>{e.push(t.serialize())}),e}}class Si{constructor(e,t,i,r){this.type=e,this.input=t,this.beginIndex=i,this.endIndex=r}static parse(e,t){if(e.length<=2||e.length>=5)return t.error(`Expected 3 or 4 arguments, but found ${e.length-1} instead.`);const i=t.parse(e[1],1,Je),r=t.parse(e[2],2,Xe);if(!i||!r)return null;if(!st(i.type,[it(Je),We,Je]))return t.error(`Expected first argument to be of type array or string, but found ${rt(i.type)} instead`);if(4===e.length){const n=t.parse(e[3],3,Xe);return n?new Si(i.type,i,r,n):null}return new Si(i.type,i,r)}evaluate(e){const t=this.input.evaluate(e),i=this.beginIndex.evaluate(e);if(!at(t,["string","array"]))throw new vt(`Expected first argument to be of type array or string, but found ${rt(gt(t))} instead.`);if(this.endIndex){const r=this.endIndex.evaluate(e);return t.slice(i,r)}return t.slice(i)}eachChild(e){e(this.input),e(this.beginIndex),this.endIndex&&e(this.endIndex)}outputDefined(){return!1}serialize(){if(null!=this.endIndex&&void 0!==this.endIndex){const e=this.endIndex.serialize();return["slice",this.input.serialize(),this.beginIndex.serialize(),e]}return["slice",this.input.serialize(),this.beginIndex.serialize()]}}function Ii(e,t){return"=="===e||"!="===e?"boolean"===t.kind||"string"===t.kind||"number"===t.kind||"null"===t.kind||"value"===t.kind:"string"===t.kind||"number"===t.kind||"value"===t.kind}function Mi(e,t,i,r){return 0===r.compare(t,i)}function Ai(e,t,i){const r="=="!==e&&"!="!==e;return class n{constructor(e,t,i){this.type=He,this.lhs=e,this.rhs=t,this.collator=i,this.hasUntypedArgument="value"===e.type.kind||"value"===t.type.kind}static parse(e,t){if(3!==e.length&&4!==e.length)return t.error("Expected two or three arguments.");const i=e[0];let o=t.parse(e[1],1,Je);if(!o)return null;if(!Ii(i,o.type))return t.concat(1).error(`"${i}" comparisons are not supported for type '${rt(o.type)}'.`);let s=t.parse(e[2],2,Je);if(!s)return null;if(!Ii(i,s.type))return t.concat(2).error(`"${i}" comparisons are not supported for type '${rt(s.type)}'.`);if(o.type.kind!==s.type.kind&&"value"!==o.type.kind&&"value"!==s.type.kind)return t.error(`Cannot compare types '${rt(o.type)}' and '${rt(s.type)}'.`);r&&("value"===o.type.kind&&"value"!==s.type.kind?o=new wt(s.type,[o]):"value"!==o.type.kind&&"value"===s.type.kind&&(s=new wt(o.type,[s])));let a=null;if(4===e.length){if("string"!==o.type.kind&&"string"!==s.type.kind&&"value"!==o.type.kind&&"value"!==s.type.kind)return t.error("Cannot use collator to compare non-string types.");if(a=t.parse(e[3],3,Qe),!a)return null}return new n(o,s,a)}evaluate(n){const o=this.lhs.evaluate(n),s=this.rhs.evaluate(n);if(r&&this.hasUntypedArgument){const t=gt(o),i=gt(s);if(t.kind!==i.kind||"string"!==t.kind&&"number"!==t.kind)throw new vt(`Expected arguments for "${e}" to be (string, string) or (number, number), but found (${t.kind}, ${i.kind}) instead.`)}if(this.collator&&!r&&this.hasUntypedArgument){const e=gt(o),i=gt(s);if("string"!==e.kind||"string"!==i.kind)return t(n,o,s)}return this.collator?i(n,o,s,this.collator.evaluate(n)):t(n,o,s)}eachChild(e){e(this.lhs),e(this.rhs),this.collator&&e(this.collator)}outputDefined(){return!0}serialize(){const t=[e];return this.eachChild(e=>{t.push(e.serialize())}),t}}}const zi=Ai("==",(function(e,t,i){return t===i}),Mi),Ci=Ai("!=",(function(e,t,i){return t!==i}),(function(e,t,i,r){return!Mi(0,t,i,r)})),ki=Ai("<",(function(e,t,i){return t",(function(e,t,i){return t>i}),(function(e,t,i,r){return r.compare(t,i)>0})),Pi=Ai("<=",(function(e,t,i){return t<=i}),(function(e,t,i,r){return r.compare(t,i)<=0})),Li=Ai(">=",(function(e,t,i){return t>=i}),(function(e,t,i,r){return r.compare(t,i)>=0}));class Bi{constructor(e,t,i,r,n){this.type=We,this.number=e,this.locale=t,this.currency=i,this.minFractionDigits=r,this.maxFractionDigits=n}static parse(e,t){if(3!==e.length)return t.error("Expected two arguments.");const i=t.parse(e[1],1,Xe);if(!i)return null;const r=e[2];if("object"!=typeof r||Array.isArray(r))return t.error("NumberFormat options argument must be an object.");let n=null;if(r.locale&&(n=t.parse(r.locale,1,We),!n))return null;let o=null;if(r.currency&&(o=t.parse(r.currency,1,We),!o))return null;let s=null;if(r["min-fraction-digits"]&&(s=t.parse(r["min-fraction-digits"],1,Xe),!s))return null;let a=null;return r["max-fraction-digits"]&&(a=t.parse(r["max-fraction-digits"],1,Xe),!a)?null:new Bi(i,n,o,s,a)}evaluate(e){return new Intl.NumberFormat(this.locale?this.locale.evaluate(e):[],{style:this.currency?"currency":"decimal",currency:this.currency?this.currency.evaluate(e):void 0,minimumFractionDigits:this.minFractionDigits?this.minFractionDigits.evaluate(e):void 0,maximumFractionDigits:this.maxFractionDigits?this.maxFractionDigits.evaluate(e):void 0}).format(this.number.evaluate(e))}eachChild(e){e(this.number),this.locale&&e(this.locale),this.currency&&e(this.currency),this.minFractionDigits&&e(this.minFractionDigits),this.maxFractionDigits&&e(this.maxFractionDigits)}outputDefined(){return!1}serialize(){const e={};return this.locale&&(e.locale=this.locale.serialize()),this.currency&&(e.currency=this.currency.serialize()),this.minFractionDigits&&(e["min-fraction-digits"]=this.minFractionDigits.serialize()),this.maxFractionDigits&&(e["max-fraction-digits"]=this.maxFractionDigits.serialize()),["number-format",this.number.serialize(),e]}}class Ri{constructor(e){this.type=Xe,this.input=e}static parse(e,t){if(2!==e.length)return t.error(`Expected 1 argument, but found ${e.length-1} instead.`);const i=t.parse(e[1],1);return i?"array"!==i.type.kind&&"string"!==i.type.kind&&"value"!==i.type.kind?t.error(`Expected argument of type string or array, but found ${rt(i.type)} instead.`):new Ri(i):null}evaluate(e){const t=this.input.evaluate(e);if("string"==typeof t)return t.length;if(Array.isArray(t))return t.length;throw new vt(`Expected value to be of type string or array, but found ${rt(gt(t))} instead.`)}eachChild(e){e(this.input)}outputDefined(){return!1}serialize(){const e=["length"];return this.eachChild(t=>{e.push(t.serialize())}),e}}const Fi={"==":zi,"!=":Ci,">":Di,"<":ki,">=":Li,"<=":Pi,array:wt,at:vi,boolean:wt,case:Ei,coalesce:yi,collator:Ct,format:Tt,image:Et,in:bi,"index-of":wi,interpolate:_i,"interpolate-hcl":_i,"interpolate-lab":_i,length:Ri,let:xi,literal:xt,match:Ti,number:wt,"number-format":Bi,object:wt,slice:Si,step:ei,string:wt,"to-boolean":It,"to-color":It,"to-number":It,"to-string":It,var:Kt,within:Xt};function Oi(e,[t,i,r,n]){t=t.evaluate(e),i=i.evaluate(e),r=r.evaluate(e);const o=n?n.evaluate(e):1,s=mt(t,i,r,o);if(s)throw new vt(s);return new ht(t/255*o,i/255*o,r/255*o,o)}function Ui(e,t){return e in t}function Vi(e,t){const i=t[e];return void 0===i?null:i}function Ni(e){return{type:e}}function ji(e){return{result:"success",value:e}}function Gi(e){return{result:"error",value:e}}function Zi(e){return"data-driven"===e["property-type"]||"cross-faded-data-driven"===e["property-type"]}function qi(e){return!!e.expression&&e.expression.parameters.indexOf("zoom")>-1}function $i(e){return!!e.expression&&e.expression.interpolated}function Xi(e){return e instanceof Number?"number":e instanceof String?"string":e instanceof Boolean?"boolean":Array.isArray(e)?"array":null===e?"null":typeof e}function Wi(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}function Hi(e){return e}function Yi(e,t,i){return void 0!==e?e:void 0!==t?t:void 0!==i?i:void 0}function Ki(e,t,i,r,n){return Yi(typeof i===n?r[i]:void 0,e.default,t.default)}function Ji(e,t,i){if("number"!==Xi(i))return Yi(e.default,t.default);const r=e.stops.length;if(1===r)return e.stops[0][1];if(i<=e.stops[0][0])return e.stops[0][1];if(i>=e.stops[r-1][0])return e.stops[r-1][1];const n=Qt(e.stops.map(e=>e[0]),i);return e.stops[n][1]}function Qi(e,t,i){const r=void 0!==e.base?e.base:1;if("number"!==Xi(i))return Yi(e.default,t.default);const n=e.stops.length;if(1===n)return e.stops[0][1];if(i<=e.stops[0][0])return e.stops[0][1];if(i>=e.stops[n-1][0])return e.stops[n-1][1];const o=Qt(e.stops.map(e=>e[0]),i),s=function(e,t,i,r){const n=r-i,o=e-i;return 0===n?0:1===t?o/n:(Math.pow(t,o)-1)/(Math.pow(t,n)-1)}(i,r,e.stops[o][0],e.stops[o+1][0]),a=e.stops[o][1],l=e.stops[o+1][1];let c=ii[t.type]||Hi;if(e.colorSpace&&"rgb"!==e.colorSpace){const t=mi[e.colorSpace];c=(e,i)=>t.reverse(t.interpolate(t.forward(e),t.forward(i),s))}return"function"==typeof a.evaluate?{evaluate(...e){const t=a.evaluate.apply(void 0,e),i=l.evaluate.apply(void 0,e);if(void 0!==t&&void 0!==i)return c(t,i,s)}}:c(a,l,s)}function er(e,t,i){return"color"===t.type?i=ht.parse(i):"formatted"===t.type?i=dt.fromString(i.toString()):"resolvedImage"===t.type?i=ft.fromString(i.toString()):Xi(i)===t.type||"enum"===t.type&&t.values[i]||(i=void 0),Yi(i,e.default,t.default)}zt.register(Fi,{error:[{kind:"error"},[We],(e,[t])=>{throw new vt(t.evaluate(e))}],typeof:[We,[Je],(e,[t])=>rt(gt(t.evaluate(e)))],"to-rgba":[it(Xe,4),[Ye],(e,[t])=>t.evaluate(e).toArray()],rgb:[Ye,[Xe,Xe,Xe],Oi],rgba:[Ye,[Xe,Xe,Xe,Xe],Oi],has:{type:He,overloads:[[[We],(e,[t])=>Ui(t.evaluate(e),e.properties())],[[We,Ke],(e,[t,i])=>Ui(t.evaluate(e),i.evaluate(e))]]},get:{type:Je,overloads:[[[We],(e,[t])=>Vi(t.evaluate(e),e.properties())],[[We,Ke],(e,[t,i])=>Vi(t.evaluate(e),i.evaluate(e))]]},"feature-state":[Je,[We],(e,[t])=>Vi(t.evaluate(e),e.featureState||{})],properties:[Ke,[],e=>e.properties()],"geometry-type":[We,[],e=>e.geometryType()],id:[Je,[],e=>e.id()],zoom:[Xe,[],e=>e.globals.zoom],pitch:[Xe,[],e=>e.globals.pitch||0],"distance-from-center":[Xe,[],e=>e.distanceFromCenter()],"heatmap-density":[Xe,[],e=>e.globals.heatmapDensity||0],"line-progress":[Xe,[],e=>e.globals.lineProgress||0],"sky-radial-progress":[Xe,[],e=>e.globals.skyRadialProgress||0],accumulated:[Je,[],e=>void 0===e.globals.accumulated?null:e.globals.accumulated],"+":[Xe,Ni(Xe),(e,t)=>{let i=0;for(const r of t)i+=r.evaluate(e);return i}],"*":[Xe,Ni(Xe),(e,t)=>{let i=1;for(const r of t)i*=r.evaluate(e);return i}],"-":{type:Xe,overloads:[[[Xe,Xe],(e,[t,i])=>t.evaluate(e)-i.evaluate(e)],[[Xe],(e,[t])=>-t.evaluate(e)]]},"/":[Xe,[Xe,Xe],(e,[t,i])=>t.evaluate(e)/i.evaluate(e)],"%":[Xe,[Xe,Xe],(e,[t,i])=>t.evaluate(e)%i.evaluate(e)],ln2:[Xe,[],()=>Math.LN2],pi:[Xe,[],()=>Math.PI],e:[Xe,[],()=>Math.E],"^":[Xe,[Xe,Xe],(e,[t,i])=>Math.pow(t.evaluate(e),i.evaluate(e))],sqrt:[Xe,[Xe],(e,[t])=>Math.sqrt(t.evaluate(e))],log10:[Xe,[Xe],(e,[t])=>Math.log(t.evaluate(e))/Math.LN10],ln:[Xe,[Xe],(e,[t])=>Math.log(t.evaluate(e))],log2:[Xe,[Xe],(e,[t])=>Math.log(t.evaluate(e))/Math.LN2],sin:[Xe,[Xe],(e,[t])=>Math.sin(t.evaluate(e))],cos:[Xe,[Xe],(e,[t])=>Math.cos(t.evaluate(e))],tan:[Xe,[Xe],(e,[t])=>Math.tan(t.evaluate(e))],asin:[Xe,[Xe],(e,[t])=>Math.asin(t.evaluate(e))],acos:[Xe,[Xe],(e,[t])=>Math.acos(t.evaluate(e))],atan:[Xe,[Xe],(e,[t])=>Math.atan(t.evaluate(e))],min:[Xe,Ni(Xe),(e,t)=>Math.min(...t.map(t=>t.evaluate(e)))],max:[Xe,Ni(Xe),(e,t)=>Math.max(...t.map(t=>t.evaluate(e)))],abs:[Xe,[Xe],(e,[t])=>Math.abs(t.evaluate(e))],round:[Xe,[Xe],(e,[t])=>{const i=t.evaluate(e);return i<0?-Math.round(-i):Math.round(i)}],floor:[Xe,[Xe],(e,[t])=>Math.floor(t.evaluate(e))],ceil:[Xe,[Xe],(e,[t])=>Math.ceil(t.evaluate(e))],"filter-==":[He,[We,Je],(e,[t,i])=>e.properties()[t.value]===i.value],"filter-id-==":[He,[Je],(e,[t])=>e.id()===t.value],"filter-type-==":[He,[We],(e,[t])=>e.geometryType()===t.value],"filter-<":[He,[We,Je],(e,[t,i])=>{const r=e.properties()[t.value],n=i.value;return typeof r==typeof n&&r{const i=e.id(),r=t.value;return typeof i==typeof r&&i":[He,[We,Je],(e,[t,i])=>{const r=e.properties()[t.value],n=i.value;return typeof r==typeof n&&r>n}],"filter-id->":[He,[Je],(e,[t])=>{const i=e.id(),r=t.value;return typeof i==typeof r&&i>r}],"filter-<=":[He,[We,Je],(e,[t,i])=>{const r=e.properties()[t.value],n=i.value;return typeof r==typeof n&&r<=n}],"filter-id-<=":[He,[Je],(e,[t])=>{const i=e.id(),r=t.value;return typeof i==typeof r&&i<=r}],"filter->=":[He,[We,Je],(e,[t,i])=>{const r=e.properties()[t.value],n=i.value;return typeof r==typeof n&&r>=n}],"filter-id->=":[He,[Je],(e,[t])=>{const i=e.id(),r=t.value;return typeof i==typeof r&&i>=r}],"filter-has":[He,[Je],(e,[t])=>t.value in e.properties()],"filter-has-id":[He,[],e=>null!==e.id()&&void 0!==e.id()],"filter-type-in":[He,[it(We)],(e,[t])=>t.value.indexOf(e.geometryType())>=0],"filter-id-in":[He,[it(Je)],(e,[t])=>t.value.indexOf(e.id())>=0],"filter-in-small":[He,[We,it(Je)],(e,[t,i])=>i.value.indexOf(e.properties()[t.value])>=0],"filter-in-large":[He,[We,it(Je)],(e,[t,i])=>function(e,t,i,r){for(;i<=r;){const n=i+r>>1;if(t[n]===e)return!0;t[n]>e?r=n-1:i=n+1}return!1}(e.properties()[t.value],i.value,0,i.value.length-1)],all:{type:He,overloads:[[[He,He],(e,[t,i])=>t.evaluate(e)&&i.evaluate(e)],[Ni(He),(e,t)=>{for(const i of t)if(!i.evaluate(e))return!1;return!0}]]},any:{type:He,overloads:[[[He,He],(e,[t,i])=>t.evaluate(e)||i.evaluate(e)],[Ni(He),(e,t)=>{for(const i of t)if(i.evaluate(e))return!0;return!1}]]},"!":[He,[He],(e,[t])=>!t.evaluate(e)],"is-supported-script":[He,[We],(e,[t])=>{const i=e.globals&&e.globals.isSupportedScript;return!i||i(t.evaluate(e))}],upcase:[We,[We],(e,[t])=>t.evaluate(e).toUpperCase()],downcase:[We,[We],(e,[t])=>t.evaluate(e).toLowerCase()],concat:[We,Ni(Je),(e,t)=>t.map(t=>yt(t.evaluate(e))).join("")],"resolved-locale":[We,[Qe],(e,[t])=>t.evaluate(e).resolvedLocale()]});class tr{constructor(e,t){this.expression=e,this._warningHistory={},this._evaluator=new At,this._defaultValue=t?function(e){return"color"===e.type&&Wi(e.default)?new ht(0,0,0,0):"color"===e.type?ht.parse(e.default)||null:void 0===e.default?null:e.default}(t):null,this._enumValues=t&&"enum"===t.type?t.values:null}evaluateWithoutErrorHandling(e,t,i,r,n,o,s,a){return this._evaluator.globals=e,this._evaluator.feature=t,this._evaluator.featureState=i,this._evaluator.canonical=r||null,this._evaluator.availableImages=n||null,this._evaluator.formattedSection=o,this._evaluator.featureTileCoord=s||null,this._evaluator.featureDistanceData=a||null,this.expression.evaluate(this._evaluator)}evaluate(e,t,i,r,n,o,s,a){this._evaluator.globals=e,this._evaluator.feature=t||null,this._evaluator.featureState=i||null,this._evaluator.canonical=r||null,this._evaluator.availableImages=n||null,this._evaluator.formattedSection=o||null,this._evaluator.featureTileCoord=s||null,this._evaluator.featureDistanceData=a||null;try{const e=this.expression.evaluate(this._evaluator);if(null==e||"number"==typeof e&&e!=e)return this._defaultValue;if(this._enumValues&&!(e in this._enumValues))throw new vt(`Expected value to be one of ${Object.keys(this._enumValues).map(e=>JSON.stringify(e)).join(", ")}, but found ${JSON.stringify(e)} instead.`);return e}catch(e){return this._warningHistory[e.message]||(this._warningHistory[e.message]=!0,"undefined"!=typeof console&&console.warn(e.message)),this._defaultValue}}}function ir(e){return Array.isArray(e)&&e.length>0&&"string"==typeof e[0]&&e[0]in Fi}function rr(e,t){const i=new Jt(Fi,[],t?function(e){const t={color:Ye,string:We,number:Xe,enum:We,boolean:He,formatted:et,resolvedImage:tt};return"array"===e.type?it(t[e.value]||Je,e.length):t[e.type]}(t):void 0),r=i.parse(e,void 0,void 0,void 0,t&&"string"===t.type?{typeAnnotation:"coerce"}:void 0);return r?ji(new tr(r,t)):Gi(i.errors)}class nr{constructor(e,t){this.kind=e,this._styleExpression=t,this.isStateDependent="constant"!==e&&!Ht(t.expression)}evaluateWithoutErrorHandling(e,t,i,r,n,o){return this._styleExpression.evaluateWithoutErrorHandling(e,t,i,r,n,o)}evaluate(e,t,i,r,n,o){return this._styleExpression.evaluate(e,t,i,r,n,o)}}class or{constructor(e,t,i,r){this.kind=e,this.zoomStops=i,this._styleExpression=t,this.isStateDependent="camera"!==e&&!Ht(t.expression),this.interpolationType=r}evaluateWithoutErrorHandling(e,t,i,r,n,o){return this._styleExpression.evaluateWithoutErrorHandling(e,t,i,r,n,o)}evaluate(e,t,i,r,n,o){return this._styleExpression.evaluate(e,t,i,r,n,o)}interpolationFactor(e,t,i){return this.interpolationType?_i.interpolationFactor(this.interpolationType,e,t,i):0}}function sr(e,t){if("error"===(e=rr(e,t)).result)return e;const i=e.value.expression,r=Wt(i);if(!r&&!Zi(t))return Gi([new Ze("","data expressions not supported")]);const n=Yt(i,["zoom","pitch","distance-from-center"]);if(!n&&!qi(t))return Gi([new Ze("","zoom expressions not supported")]);const o=function e(t){let i=null;if(t instanceof xi)i=e(t.result);else if(t instanceof yi){for(const r of t.args)if(i=e(r),i)break}else(t instanceof ei||t instanceof _i)&&t.input instanceof zt&&"zoom"===t.input.name&&(i=t);return i instanceof Ze||t.eachChild(t=>{const r=e(t);r instanceof Ze?i=r:!i&&r?i=new Ze("",'"zoom" expression may only be used as input to a top-level "step" or "interpolate" expression.'):i&&r&&i!==r&&(i=new Ze("",'Only one zoom-based "step" or "interpolate" subexpression may be used in an expression.'))}),i}(i);return o||n?o instanceof Ze?Gi([o]):o instanceof _i&&!$i(t)?Gi([new Ze("",'"interpolate" expressions cannot be used with this property')]):ji(o?new or(r?"camera":"composite",e.value,o.labels,o instanceof _i?o.interpolation:void 0):new nr(r?"constant":"source",e.value)):Gi([new Ze("",'"zoom" expression may only be used as input to a top-level "step" or "interpolate" expression.')])}class ar{constructor(e,t){this._parameters=e,this._specification=t,Ne(this,function e(t,i){const r="color"===i.type,n=t.stops&&"object"==typeof t.stops[0][0],o=n||!(n||void 0!==t.property),s=t.type||($i(i)?"exponential":"interval");if(r&&((t=Ne({},t)).stops&&(t.stops=t.stops.map(e=>[e[0],ht.parse(e[1])])),t.default=ht.parse(t.default?t.default:i.default)),t.colorSpace&&"rgb"!==t.colorSpace&&!mi[t.colorSpace])throw new Error("Unknown color space: "+t.colorSpace);let a,l,c;if("exponential"===s)a=Qi;else if("interval"===s)a=Ji;else if("categorical"===s){a=Ki,l=Object.create(null);for(const e of t.stops)l[e[0]]=e[1];c=typeof t.stops[0][0]}else{if("identity"!==s)throw new Error(`Unknown function type "${s}"`);a=er}if(n){const r={},n=[];for(let e=0;ee[0]),evaluate:({zoom:e},r)=>Qi({stops:o,base:t.base},i,e).evaluate(e,r)}}if(o){const e="exponential"===s?{name:"exponential",base:void 0!==t.base?t.base:1}:null;return{kind:"camera",interpolationType:e,interpolationFactor:_i.interpolationFactor.bind(void 0,e),zoomStops:t.stops.map(e=>e[0]),evaluate:({zoom:e})=>a(t,i,e,l,c)}}return{kind:"source",evaluate(e,r){const n=r&&r.properties?r.properties[t.property]:void 0;return void 0===n?Yi(t.default,i.default):a(t,i,n,l,c)}}}(this._parameters,this._specification))}static deserialize(e){return new ar(e._parameters,e._specification)}static serialize(e){return{_parameters:e._parameters,_specification:e._specification}}}class lr{constructor(e,t,i,r){this.message=(e?e+": ":"")+i,r&&(this.identifier=r),null!=t&&t.__line__&&(this.line=t.__line__)}}function cr(e){const t=e.key,i=e.value,r=e.valueSpec||{},n=e.objectElementValidators||{},o=e.style,s=e.styleSpec;let a=[];const l=Xi(i);if("object"!==l)return[new lr(t,i,`object expected, ${l} found`)];for(const c in i){const e=c.split(".")[0],l=r[e]||r["*"];let h;n[e]?h=n[e]:r[e]?h=Or:n["*"]?h=n["*"]:r["*"]&&(h=Or),h?a=a.concat(h({key:(t?t+".":t)+c,value:i[c],valueSpec:l,style:o,styleSpec:s,object:i,objectKey:c},i)):a.push(new lr(t,i[c],`unknown property "${c}"`))}for(const c in r)n[c]||r[c].required&&void 0===r[c].default&&void 0===i[c]&&a.push(new lr(t,i,`missing required property "${c}"`));return a}function hr(e){const t=e.value,i=e.valueSpec,r=e.style,n=e.styleSpec,o=e.key,s=e.arrayElementValidator||Or;if("array"!==Xi(t))return[new lr(o,t,`array expected, ${Xi(t)} found`)];if(i.length&&t.length!==i.length)return[new lr(o,t,`array length ${i.length} expected, length ${t.length} found`)];if(i["min-length"]&&t.lengthn)return[new lr(t,i,`${i} is greater than the maximum value ${n}`)]}return[]}function pr(e){const t=e.valueSpec,i=je(e.value.type);let r,n,o,s={};const a="categorical"!==i&&void 0===e.value.property,l=!a,c="array"===Xi(e.value.stops)&&"array"===Xi(e.value.stops[0])&&"object"===Xi(e.value.stops[0][0]),h=cr({key:e.key,value:e.value,valueSpec:e.styleSpec.function,style:e.style,styleSpec:e.styleSpec,objectElementValidators:{stops:function(e){if("identity"===i)return[new lr(e.key,e.value,'identity function may not have a "stops" property')];let t=[];const r=e.value;return t=t.concat(hr({key:e.key,value:r,valueSpec:e.valueSpec,style:e.style,styleSpec:e.styleSpec,arrayElementValidator:u})),"array"===Xi(r)&&0===r.length&&t.push(new lr(e.key,r,"array must have at least one stop")),t},default:function(e){return Or({key:e.key,value:e.value,valueSpec:t,style:e.style,styleSpec:e.styleSpec})}}});return"identity"===i&&a&&h.push(new lr(e.key,e.value,'missing required property "property"')),"identity"===i||e.value.stops||h.push(new lr(e.key,e.value,'missing required property "stops"')),"exponential"===i&&e.valueSpec.expression&&!$i(e.valueSpec)&&h.push(new lr(e.key,e.value,"exponential functions not supported")),e.styleSpec.$version>=8&&(l&&!Zi(e.valueSpec)?h.push(new lr(e.key,e.value,"property functions not supported")):a&&!qi(e.valueSpec)&&h.push(new lr(e.key,e.value,"zoom functions not supported"))),"categorical"!==i&&!c||void 0!==e.value.property||h.push(new lr(e.key,e.value,'"property" property is required')),h;function u(e){let i=[];const r=e.value,a=e.key;if("array"!==Xi(r))return[new lr(a,r,`array expected, ${Xi(r)} found`)];if(2!==r.length)return[new lr(a,r,`array length 2 expected, length ${r.length} found`)];if(c){if("object"!==Xi(r[0]))return[new lr(a,r,`object expected, ${Xi(r[0])} found`)];if(void 0===r[0].zoom)return[new lr(a,r,"object stop key must have zoom")];if(void 0===r[0].value)return[new lr(a,r,"object stop key must have value")];const t=je(r[0].zoom);if("number"!=typeof t)return[new lr(a,r[0].zoom,"stop zoom values must be numbers")];if(o&&o>t)return[new lr(a,r[0].zoom,"stop zoom values must appear in ascending order")];t!==o&&(o=t,n=void 0,s={}),i=i.concat(cr({key:a+"[0]",value:r[0],valueSpec:{zoom:{}},style:e.style,styleSpec:e.styleSpec,objectElementValidators:{zoom:ur,value:p}}))}else i=i.concat(p({key:a+"[0]",value:r[0],valueSpec:{},style:e.style,styleSpec:e.styleSpec},r));return ir(Ge(r[1]))?i.concat([new lr(a+"[1]",r[1],"expressions are not allowed in function stops.")]):i.concat(Or({key:a+"[1]",value:r[1],valueSpec:t,style:e.style,styleSpec:e.styleSpec}))}function p(e,o){const a=Xi(e.value),l=je(e.value),c=null!==e.value?e.value:o;if(r){if(a!==r)return[new lr(e.key,c,`${a} stop domain type must match previous stop domain type ${r}`)]}else r=a;if("number"!==a&&"string"!==a&&"boolean"!==a&&"number"!=typeof l&&"string"!=typeof l&&"boolean"!=typeof l)return[new lr(e.key,c,"stop domain value must be a number, string, or boolean")];if("number"!==a&&"categorical"!==i){let r=`number expected, ${a} found`;return Zi(t)&&void 0===i&&(r+='\nIf you intended to use a categorical function, specify `"type": "categorical"`.'),[new lr(e.key,c,r)]}return"categorical"!==i||"number"!==a||"number"==typeof l&&isFinite(l)&&Math.floor(l)===l?"categorical"!==i&&"number"===a&&"number"==typeof l&&"number"==typeof n&&void 0!==n&&lnew lr(`${e.key}${t.key}`,e.value,t.message));const i=t.value.expression||t.value._styleExpression.expression;if("property"===e.expressionContext&&"text-font"===e.propertyKey&&!i.outputDefined())return[new lr(e.key,e.value,`Invalid data expression for "${e.propertyKey}". Output values must be contained as literals within the expression.`)];if("property"===e.expressionContext&&"layout"===e.propertyType&&!Ht(i))return[new lr(e.key,e.value,'"feature-state" data expressions are not supported with layout properties.')];if("filter"===e.expressionContext)return function e(t,i){const r=new Set(["zoom","feature-state","pitch","distance-from-center"]);if(i.valueSpec&&i.valueSpec.expression)for(const o of i.valueSpec.expression.parameters)r.delete(o);if(0===r.size)return[];const n=[];return t instanceof zt&&r.has(t.name)?[new lr(i.key,i.value,`["${t.name}"] expression is not supported in a filter for a ${i.object.type} layer with id: ${i.object.id}`)]:(t.eachChild(t=>{n.push(...e(t,i))}),n)}(i,e);if(e.expressionContext&&0===e.expressionContext.indexOf("cluster")){if(!Yt(i,["zoom","feature-state"]))return[new lr(e.key,e.value,'"zoom" and "feature-state" expressions are not supported with cluster properties.')];if("cluster-initial"===e.expressionContext&&!Wt(i))return[new lr(e.key,e.value,"Feature data expressions are not supported with initial expression part of cluster properties.")]}return[]}function fr(e){const t=e.key,i=e.value,r=e.valueSpec,n=[];return Array.isArray(r.values)?-1===r.values.indexOf(je(i))&&n.push(new lr(t,i,`expected one of [${r.values.join(", ")}], ${JSON.stringify(i)} found`)):-1===Object.keys(r.values).indexOf(je(i))&&n.push(new lr(t,i,`expected one of [${Object.keys(r.values).join(", ")}], ${JSON.stringify(i)} found`)),n}function mr(e){if(!0===e||!1===e)return!0;if(!Array.isArray(e)||0===e.length)return!1;switch(e[0]){case"has":return e.length>=2&&"$id"!==e[1]&&"$type"!==e[1];case"in":return e.length>=3&&("string"!=typeof e[1]||Array.isArray(e[2]));case"!in":case"!has":case"none":return!1;case"==":case"!=":case">":case">=":case"<":case"<=":return 3!==e.length||Array.isArray(e[1])||Array.isArray(e[2]);case"any":case"all":for(const t of e.slice(1))if(!mr(t)&&"boolean"!=typeof t)return!1;return!0;default:return!0}}function _r(e,t="fill"){if(null==e)return{filter:()=>!0,needGeometry:!1,needFeature:!1};mr(e)||(e=br(e));const i=e;let r=!0;try{r=function(e){if(!gr(e))return e;let t=Ge(e);return function e(t){let i=!1;const r=[];if("case"===t[0]){for(let e=1;ee(t))}(t),t}(i)}catch(e){console.warn(`Failed to extract static filter. Filter will continue working, but at higher memory usage and slower framerate.\nThis is most likely a bug, please report this via https://github.com/mapbox/mapbox-gl-js/issues/new?assignees=&labels=&template=Bug_report.md\nand paste the contents of this message in the report.\nThank you!\nFilter Expression:\n${JSON.stringify(i,null,2)}\n `)}const n=Ve["filter_"+t],o=rr(r,n);let s=null;if("error"===o.result)throw new Error(o.value.map(e=>`${e.key}: ${e.message}`).join(", "));s=(e,t,i)=>o.value.evaluate(e,t,{},i);let a=null,l=null;if(r!==i){const e=rr(i,n);if("error"===e.result)throw new Error(e.value.map(e=>`${e.key}: ${e.message}`).join(", "));a=(t,i,r,n,o)=>e.value.evaluate(t,i,{},r,void 0,void 0,n,o),l=!Wt(e.value.expression)}return s=s,{filter:s,dynamicFilter:a||void 0,needGeometry:vr(r),needFeature:!!l}}function gr(e){if(!Array.isArray(e))return!1;if("pitch"===(t=e[0])||"distance-from-center"===t)return!0;var t;for(let i=1;i",">=","<","<=","to-boolean"]);function xr(e,t){return et?1:0}function vr(e){if(!Array.isArray(e))return!1;if("within"===e[0])return!0;for(let t=1;t"===t||"<="===t||">="===t?wr(e[1],e[2],t):"any"===t?(i=e.slice(1),["any"].concat(i.map(br))):"all"===t?["all"].concat(e.slice(1).map(br)):"none"===t?["all"].concat(e.slice(1).map(br).map(Sr)):"in"===t?Tr(e[1],e.slice(2)):"!in"===t?Sr(Tr(e[1],e.slice(2))):"has"===t?Er(e[1]):"!has"===t?Sr(Er(e[1])):"within"!==t||e;var i}function wr(e,t,i){switch(e){case"$type":return["filter-type-"+i,t];case"$id":return["filter-id-"+i,t];default:return["filter-"+i,e,t]}}function Tr(e,t){if(0===t.length)return!1;switch(e){case"$type":return["filter-type-in",["literal",t]];case"$id":return["filter-id-in",["literal",t]];default:return t.length>200&&!t.some(e=>typeof e!=typeof t[0])?["filter-in-large",e,["literal",t.sort(xr)]]:["filter-in-small",e,["literal",t]]}}function Er(e){switch(e){case"$type":return!0;case"$id":return["filter-has-id"];default:return["filter-has",e]}}function Sr(e){return["!",e]}function Ir(e){return mr(Ge(e.value))?dr(Ne({},e,{expressionContext:"filter",valueSpec:e.styleSpec["filter_"+(e.layerType||"fill")]})):function e(t){const i=t.value,r=t.key;if("array"!==Xi(i))return[new lr(r,i,`array expected, ${Xi(i)} found`)];const n=t.styleSpec;let o,s=[];if(i.length<1)return[new lr(r,i,"filter array must have at least 1 element")];switch(s=s.concat(fr({key:r+"[0]",value:i[0],valueSpec:n.filter_operator,style:t.style,styleSpec:t.styleSpec})),je(i[0])){case"<":case"<=":case">":case">=":i.length>=2&&"$type"===je(i[1])&&s.push(new lr(r,i,`"$type" cannot be use with operator "${i[0]}"`));case"==":case"!=":3!==i.length&&s.push(new lr(r,i,`filter array for operator "${i[0]}" must have 3 elements`));case"in":case"!in":i.length>=2&&(o=Xi(i[1]),"string"!==o&&s.push(new lr(r+"[1]",i[1],`string expected, ${o} found`)));for(let e=2;e{e in i&&t.push(new lr(r,i[e],`"${e}" is prohibited for ref layers`))}),n.layers.forEach(t=>{je(t.id)===a&&(e=t)}),e?e.ref?t.push(new lr(r,i.ref,"ref cannot reference another ref layer")):s=je(e.type):"string"==typeof a&&t.push(new lr(r,i.ref,`ref layer "${a}" not found`))}else if("background"!==s&&"sky"!==s)if(i.source){const e=n.sources&&n.sources[i.source],o=e&&je(e.type);e?"vector"===o&&"raster"===s?t.push(new lr(r,i.source,`layer "${i.id}" requires a raster source`)):"raster"===o&&"raster"!==s?t.push(new lr(r,i.source,`layer "${i.id}" requires a vector source`)):"vector"!==o||i["source-layer"]?"raster-dem"===o&&"hillshade"!==s?t.push(new lr(r,i.source,"raster-dem source can only be used with layer type 'hillshade'.")):"line"!==s||!i.paint||!i.paint["line-gradient"]||"geojson"===o&&e.lineMetrics||t.push(new lr(r,i,`layer "${i.id}" specifies a line-gradient, which requires a GeoJSON source with \`lineMetrics\` enabled.`)):t.push(new lr(r,i,`layer "${i.id}" must specify a "source-layer"`)):t.push(new lr(r,i.source,`source "${i.source}" not found`))}else t.push(new lr(r,i,'missing required property "source"'));return t=t.concat(cr({key:r,value:i,valueSpec:o.layer,style:e.style,styleSpec:e.styleSpec,objectElementValidators:{"*":()=>[],type:()=>Or({key:r+".type",value:i.type,valueSpec:o.layer.type,style:e.style,styleSpec:e.styleSpec,object:i,objectKey:"type"}),filter:e=>Ir(Ne({layerType:s},e)),layout:e=>cr({layer:i,key:e.key,value:e.value,valueSpec:{},style:e.style,styleSpec:e.styleSpec,objectElementValidators:{"*":e=>zr(Ne({layerType:s},e))}}),paint:e=>cr({layer:i,key:e.key,value:e.value,valueSpec:{},style:e.style,styleSpec:e.styleSpec,objectElementValidators:{"*":e=>Ar(Ne({layerType:s},e))}})}})),t}function kr(e){const t=e.value,i=e.key,r=Xi(t);return"string"!==r?[new lr(i,t,`string expected, ${r} found`)]:[]}const Dr={promoteId:function({key:e,value:t}){if("string"===Xi(t))return kr({key:e,value:t});{const i=[];for(const r in t)i.push(...kr({key:`${e}.${r}`,value:t[r]}));return i}}};function Pr(e){const t=e.value,i=e.key,r=e.styleSpec,n=e.style;if(!t.type)return[new lr(i,t,'"type" is required')];const o=je(t.type);let s;switch(o){case"vector":case"raster":case"raster-dem":return s=cr({key:i,value:t,valueSpec:r["source_"+o.replace("-","_")],style:e.style,styleSpec:r,objectElementValidators:Dr}),s;case"geojson":if(s=cr({key:i,value:t,valueSpec:r.source_geojson,style:n,styleSpec:r,objectElementValidators:Dr}),t.cluster)for(const e in t.clusterProperties){const[r,n]=t.clusterProperties[e],o="string"==typeof r?[r,["accumulated"],["get",e]]:r;s.push(...dr({key:`${i}.${e}.map`,value:n,expressionContext:"cluster-map"})),s.push(...dr({key:`${i}.${e}.reduce`,value:o,expressionContext:"cluster-reduce"}))}return s;case"video":return cr({key:i,value:t,valueSpec:r.source_video,style:n,styleSpec:r});case"image":return cr({key:i,value:t,valueSpec:r.source_image,style:n,styleSpec:r});case"canvas":return[new lr(i,null,"Please use runtime APIs to add canvas sources, rather than including them in stylesheets.","source.canvas")];default:return fr({key:i+".type",value:t.type,valueSpec:{values:["vector","raster","raster-dem","geojson","video","image"]},style:n,styleSpec:r})}}function Lr(e){const t=e.value,i=e.styleSpec,r=i.light,n=e.style;let o=[];const s=Xi(t);if(void 0===t)return o;if("object"!==s)return o=o.concat([new lr("light",t,`object expected, ${s} found`)]),o;for(const a in t){const e=a.match(/^(.*)-transition$/);o=o.concat(e&&r[e[1]]&&r[e[1]].transition?Or({key:a,value:t[a],valueSpec:i.transition,style:n,styleSpec:i}):r[a]?Or({key:a,value:t[a],valueSpec:r[a],style:n,styleSpec:i}):[new lr(a,t[a],`unknown property "${a}"`)])}return o}function Br(e){const t=e.value,i=e.key,r=e.style,n=e.styleSpec,o=n.terrain;let s=[];const a=Xi(t);if(void 0===t)return s;if("object"!==a)return s=s.concat([new lr("terrain",t,`object expected, ${a} found`)]),s;for(const l in t){const e=l.match(/^(.*)-transition$/);s=s.concat(e&&o[e[1]]&&o[e[1]].transition?Or({key:l,value:t[l],valueSpec:n.transition,style:r,styleSpec:n}):o[l]?Or({key:l,value:t[l],valueSpec:o[l],style:r,styleSpec:n}):[new lr(l,t[l],`unknown property "${l}"`)])}if(t.source){const e=r.sources&&r.sources[t.source],n=e&&je(e.type);e?"raster-dem"!==n&&s.push(new lr(i,t.source,`terrain cannot be used with a source of type ${String(n)}, it only be used with a "raster-dem" source type`)):s.push(new lr(i,t.source,`source "${t.source}" not found`))}else s.push(new lr(i,t,'terrain is missing required property "source"'));return s}function Rr(e){const t=e.value,i=e.style,r=e.styleSpec,n=r.fog;let o=[];const s=Xi(t);if(void 0===t)return o;if("object"!==s)return o=o.concat([new lr("fog",t,`object expected, ${s} found`)]),o;for(const a in t){const e=a.match(/^(.*)-transition$/);o=o.concat(e&&n[e[1]]&&n[e[1]].transition?Or({key:a,value:t[a],valueSpec:r.transition,style:i,styleSpec:r}):n[a]?Or({key:a,value:t[a],valueSpec:n[a],style:i,styleSpec:r}):[new lr(a,t[a],`unknown property "${a}"`)])}return o}const Fr={"*":()=>[],array:hr,boolean:function(e){const t=e.value,i=e.key,r=Xi(t);return"boolean"!==r?[new lr(i,t,`boolean expected, ${r} found`)]:[]},number:ur,color:function(e){const t=e.key,i=e.value,r=Xi(i);return"string"!==r?[new lr(t,i,`color expected, ${r} found`)]:null===ct.parseCSSColor(i)?[new lr(t,i,`color expected, "${i}" found`)]:[]},enum:fr,filter:Ir,function:pr,layer:Cr,object:cr,source:Pr,light:Lr,terrain:Br,fog:Rr,string:kr,formatted:function(e){return 0===kr(e).length?[]:dr(e)},resolvedImage:function(e){return 0===kr(e).length?[]:dr(e)},projection:function(e){const t=e.value,i=e.styleSpec,r=i.projection,n=e.style;let o=[];const s=Xi(t);if("object"===s)for(const a in t)o=o.concat(Or({key:a,value:t[a],valueSpec:r[a],style:n,styleSpec:i}));else"string"!==s&&(o=o.concat([new lr("projection",t,`object or string expected, ${s} found`)]));return o}};function Or(e){const t=e.value,i=e.valueSpec,r=e.styleSpec;return i.expression&&Wi(je(t))?pr(e):i.expression&&ir(Ge(t))?dr(e):i.type&&Fr[i.type]?Fr[i.type](e):cr(Ne({},e,{valueSpec:i.type?r[i.type]:i}))}function Ur(e){const t=e.value,i=e.key,r=kr(e);return r.length||(-1===t.indexOf("{fontstack}")&&r.push(new lr(i,t,'"glyphs" url must include a "{fontstack}" token')),-1===t.indexOf("{range}")&&r.push(new lr(i,t,'"glyphs" url must include a "{range}" token'))),r}function Vr(e,t=Ve){return Gr(Or({key:"",value:e,valueSpec:t.$root,styleSpec:t,style:e,objectElementValidators:{glyphs:Ur,"*":()=>[]}}))}const Nr=e=>Gr(Ar(e)),jr=e=>Gr(zr(e));function Gr(e){return e.slice().sort((e,t)=>e.line&&t.line?e.line-t.line:0)}function Zr(e,t){let i=!1;if(t&&t.length)for(const r of t)e.fire(new Oe(new Error(r.message))),i=!0;return i}var qr=$r;function $r(e,t,i){var r=this.cells=[];if(e instanceof ArrayBuffer){this.arrayBuffer=e;var n=new Int32Array(this.arrayBuffer);e=n[0],this.d=(t=n[1])+2*(i=n[2]);for(var o=0;o=h[d+0]&&r>=h[d+1])?(s[p]=!0,o.push(c[p])):s[p]=!1}}},$r.prototype._forEachCell=function(e,t,i,r,n,o,s,a){for(var l=this._convertToCellCoord(e),c=this._convertToCellCoord(t),h=this._convertToCellCoord(i),u=this._convertToCellCoord(r),p=l;p<=h;p++)for(var d=c;d<=u;d++){var f=this.d*d+p;if((!a||a(this._convertFromCellCoord(p),this._convertFromCellCoord(d),this._convertFromCellCoord(p+1),this._convertFromCellCoord(d+1)))&&n.call(this,e,t,i,r,f,o,s,a))return}},$r.prototype._convertFromCellCoord=function(e){return(e-this.padding)/this.scale},$r.prototype._convertToCellCoord=function(e){return Math.max(0,Math.min(this.d-1,Math.floor(e*this.scale)+this.padding))},$r.prototype.toArrayBuffer=function(){if(this.arrayBuffer)return this.arrayBuffer;for(var e=this.cells,t=3+this.cells.length+1+1,i=0,r=0;r=0||(n[i]=Kr(e[i],t)));e instanceof Error&&(n.message=e.message)}if(n.$name)throw new Error("$name property is reserved for worker serialization logic.");return"Object"!==r&&(n.$name=r),n}throw new Error("can't serialize object of type "+typeof e)}function Jr(e){if(null==e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||e instanceof Boolean||e instanceof Number||e instanceof String||e instanceof Date||e instanceof RegExp||Hr(e)||Yr(e)||ArrayBuffer.isView(e)||e instanceof s.ImageData)return e;if(Array.isArray(e))return e.map(Jr);if("object"==typeof e){const t=e.$name||"Object",{klass:i}=Xr[t];if(!i)throw new Error("can't deserialize unregistered class "+t);if(i.deserialize)return i.deserialize(e);const r=Object.create(i.prototype);for(const n of Object.keys(e))"$name"!==n&&(r[n]=Jr(e[n]));return r}throw new Error("can't deserialize object of type "+typeof e)}class Qr{constructor(){this.first=!0}update(e,t){const i=Math.floor(e);return this.first?(this.first=!1,this.lastIntegerZoom=i,this.lastIntegerZoomTime=0,this.lastZoom=e,this.lastFloorZoom=i,!0):(this.lastFloorZoom>i?(this.lastIntegerZoom=i+1,this.lastIntegerZoomTime=t):this.lastFloorZoome>=1536&&e<=1791,tn=e=>e>=1872&&e<=1919,rn=e=>e>=2208&&e<=2303,nn=e=>e>=11904&&e<=12031,on=e=>e>=12032&&e<=12255,sn=e=>e>=12272&&e<=12287,an=e=>e>=12288&&e<=12351,ln=e=>e>=12352&&e<=12447,cn=e=>e>=12448&&e<=12543,hn=e=>e>=12544&&e<=12591,un=e=>e>=12704&&e<=12735,pn=e=>e>=12736&&e<=12783,dn=e=>e>=12784&&e<=12799,fn=e=>e>=12800&&e<=13055,mn=e=>e>=13056&&e<=13311,_n=e=>e>=13312&&e<=19903,gn=e=>e>=19968&&e<=40959,yn=e=>e>=40960&&e<=42127,xn=e=>e>=42128&&e<=42191,vn=e=>e>=44032&&e<=55215,bn=e=>e>=63744&&e<=64255,wn=e=>e>=64336&&e<=65023,Tn=e=>e>=65040&&e<=65055,En=e=>e>=65072&&e<=65103,Sn=e=>e>=65104&&e<=65135,In=e=>e>=65136&&e<=65279,Mn=e=>e>=65280&&e<=65519;function An(e){for(const t of e)if(kn(t.charCodeAt(0)))return!0;return!1}function zn(e){for(const t of e)if(!Cn(t.charCodeAt(0)))return!1;return!0}function Cn(e){return!(en(e)||tn(e)||rn(e)||wn(e)||In(e))}function kn(e){return!(746!==e&&747!==e&&(e<4352||!(un(e)||hn(e)||En(e)&&!(e>=65097&&e<=65103)||bn(e)||mn(e)||nn(e)||pn(e)||!(!an(e)||e>=12296&&e<=12305||e>=12308&&e<=12319||12336===e)||_n(e)||gn(e)||fn(e)||(e=>e>=12592&&e<=12687)(e)||(e=>e>=43360&&e<=43391)(e)||(e=>e>=55216&&e<=55295)(e)||(e=>e>=4352&&e<=4607)(e)||vn(e)||ln(e)||sn(e)||(e=>e>=12688&&e<=12703)(e)||on(e)||dn(e)||cn(e)&&12540!==e||!(!Mn(e)||65288===e||65289===e||65293===e||e>=65306&&e<=65310||65339===e||65341===e||65343===e||e>=65371&&e<=65503||65507===e||e>=65512&&e<=65519)||!(!Sn(e)||e>=65112&&e<=65118||e>=65123&&e<=65126)||(e=>e>=5120&&e<=5759)(e)||(e=>e>=6320&&e<=6399)(e)||Tn(e)||(e=>e>=19904&&e<=19967)(e)||yn(e)||xn(e))))}function Dn(e){return!(kn(e)||function(e){return!!((e=>e>=128&&e<=255)(e)&&(167===e||169===e||174===e||177===e||188===e||189===e||190===e||215===e||247===e)||(e=>e>=8192&&e<=8303)(e)&&(8214===e||8224===e||8225===e||8240===e||8241===e||8251===e||8252===e||8258===e||8263===e||8264===e||8265===e||8273===e)||(e=>e>=8448&&e<=8527)(e)||(e=>e>=8528&&e<=8591)(e)||(e=>e>=8960&&e<=9215)(e)&&(e>=8960&&e<=8967||e>=8972&&e<=8991||e>=8996&&e<=9e3||9003===e||e>=9085&&e<=9114||e>=9150&&e<=9165||9167===e||e>=9169&&e<=9179||e>=9186&&e<=9215)||(e=>e>=9216&&e<=9279)(e)&&9251!==e||(e=>e>=9280&&e<=9311)(e)||(e=>e>=9312&&e<=9471)(e)||(e=>e>=9632&&e<=9727)(e)||(e=>e>=9728&&e<=9983)(e)&&!(e>=9754&&e<=9759)||(e=>e>=11008&&e<=11263)(e)&&(e>=11026&&e<=11055||e>=11088&&e<=11097||e>=11192&&e<=11243)||an(e)||cn(e)||(e=>e>=57344&&e<=63743)(e)||En(e)||Sn(e)||Mn(e)||8734===e||8756===e||8757===e||e>=9984&&e<=10087||e>=10102&&e<=10131||65532===e||65533===e)}(e))}function Pn(e){return e>=1424&&e<=2303||wn(e)||In(e)}function Ln(e,t){return!(!t&&Pn(e)||e>=2304&&e<=3583||e>=3840&&e<=4255||(e=>e>=6016&&e<=6143)(e))}function Bn(e){for(const t of e)if(Pn(t.charCodeAt(0)))return!0;return!1}const Rn="deferred",Fn="loading",On="loaded";let Un=null,Vn="unavailable",Nn=null;const jn=function(e){e&&"string"==typeof e&&e.indexOf("NetworkError")>-1&&(Vn="error"),Un&&Un(e)};function Gn(){Zn.fire(new Fe("pluginStateChange",{pluginStatus:Vn,pluginURL:Nn}))}const Zn=new Ue,qn=function(){return Vn},$n=function(){if(Vn!==Rn||!Nn)throw new Error("rtl-text-plugin cannot be downloaded unless a pluginURL is specified");Vn=Fn,Gn(),Nn&&Me({url:Nn},e=>{e?jn(e):(Vn=On,Gn())})},Xn={applyArabicShaping:null,processBidirectionalText:null,processStyledBidirectionalText:null,isLoaded:()=>Vn===On||null!=Xn.applyArabicShaping,isLoading:()=>Vn===Fn,setState(e){Vn=e.pluginStatus,Nn=e.pluginURL},isParsed:()=>null!=Xn.applyArabicShaping&&null!=Xn.processBidirectionalText&&null!=Xn.processStyledBidirectionalText,getPluginURL:()=>Nn};class Wn{constructor(e,t){this.zoom=e,t?(this.now=t.now,this.fadeDuration=t.fadeDuration,this.zoomHistory=t.zoomHistory,this.transition=t.transition,this.pitch=t.pitch):(this.now=0,this.fadeDuration=0,this.zoomHistory=new Qr,this.transition={},this.pitch=0)}isSupportedScript(e){return function(e,t){for(const i of e)if(!Ln(i.charCodeAt(0),t))return!1;return!0}(e,Xn.isLoaded())}crossFadingFactor(){return 0===this.fadeDuration?1:Math.min((this.now-this.zoomHistory.lastIntegerZoomTime)/this.fadeDuration,1)}getCrossfadeParameters(){const e=this.zoom,t=e-Math.floor(e),i=this.crossFadingFactor();return e>this.zoomHistory.lastIntegerZoom?{fromScale:2,toScale:1,t:t+(1-t)*i}:{fromScale:.5,toScale:1,t:1-(1-i)*t}}}class Hn{constructor(e,t){this.property=e,this.value=t,this.expression=function(e,t){if(Wi(e))return new ar(e,t);if(ir(e)){const i=sr(e,t);if("error"===i.result)throw new Error(i.value.map(e=>`${e.key}: ${e.message}`).join(", "));return i.value}{let i=e;return"string"==typeof e&&"color"===t.type&&(i=ht.parse(e)),{kind:"constant",evaluate:()=>i}}}(void 0===t?e.specification.default:t,e.specification)}isDataDriven(){return"source"===this.expression.kind||"composite"===this.expression.kind}possiblyEvaluate(e,t,i){return this.property.possiblyEvaluate(this,e,t,i)}}class Yn{constructor(e){this.property=e,this.value=new Hn(e,void 0)}transitioned(e,t){return new Jn(this.property,this.value,t,v({},e.transition,this.transition),e.now)}untransitioned(){return new Jn(this.property,this.value,null,{},0)}}class Kn{constructor(e){this._properties=e,this._values=Object.create(e.defaultTransitionablePropertyValues)}getValue(e){return C(this._values[e].value.value)}setValue(e,t){this._values.hasOwnProperty(e)||(this._values[e]=new Yn(this._values[e].property)),this._values[e].value=new Hn(this._values[e].property,null===t?void 0:C(t))}getTransition(e){return C(this._values[e].transition)}setTransition(e,t){this._values.hasOwnProperty(e)||(this._values[e]=new Yn(this._values[e].property)),this._values[e].transition=C(t)||void 0}serialize(){const e={};for(const t of Object.keys(this._values)){const i=this.getValue(t);void 0!==i&&(e[t]=i);const r=this.getTransition(t);void 0!==r&&(e[t+"-transition"]=r)}return e}transitioned(e,t){const i=new Qn(this._properties);for(const r of Object.keys(this._values))i._values[r]=this._values[r].transitioned(e,t._values[r]);return i}untransitioned(){const e=new Qn(this._properties);for(const t of Object.keys(this._values))e._values[t]=this._values[t].untransitioned();return e}}class Jn{constructor(e,t,i,r,n){const o=r.delay||0,s=r.duration||0;n=n||0,this.property=e,this.value=t,this.begin=n+o,this.end=this.begin+s,e.specification.transition&&(r.delay||r.duration)&&(this.prior=i)}possiblyEvaluate(e,t,i){const r=e.now||0,n=this.value.possiblyEvaluate(e,t,i),o=this.prior;if(o){if(r>this.end)return this.prior=null,n;if(this.value.isDataDriven())return this.prior=null,n;if(rr.zoomHistory.lastIntegerZoom?{from:e,to:t,other:i}:{from:i,to:t,other:e}}interpolate(e){return e}}class so{constructor(e){this.specification=e}possiblyEvaluate(e,t,i,r){if(void 0!==e.value){if("constant"===e.expression.kind){const n=e.expression.evaluate(t,null,{},i,r);return this._calculate(n,n,n,t)}return this._calculate(e.expression.evaluate(new Wn(Math.floor(t.zoom-1),t)),e.expression.evaluate(new Wn(Math.floor(t.zoom),t)),e.expression.evaluate(new Wn(Math.floor(t.zoom+1),t)),t)}}_calculate(e,t,i,r){return r.zoom>r.zoomHistory.lastIntegerZoom?{from:e,to:t}:{from:i,to:t}}interpolate(e){return e}}class ao{constructor(e){this.specification=e}possiblyEvaluate(e,t,i,r){return!!e.expression.evaluate(t,null,{},i,r)}interpolate(){return!1}}class lo{constructor(e){this.properties=e,this.defaultPropertyValues={},this.defaultTransitionablePropertyValues={},this.defaultTransitioningPropertyValues={},this.defaultPossiblyEvaluatedValues={},this.overridableProperties=[];for(const t in e){const i=e[t];i.specification.overridable&&this.overridableProperties.push(t);const r=this.defaultPropertyValues[t]=new Hn(i,void 0),n=this.defaultTransitionablePropertyValues[t]=new Yn(i);this.defaultTransitioningPropertyValues[t]=n.untransitioned(),this.defaultPossiblyEvaluatedValues[t]=r.possiblyEvaluate({})}}}function co(e,t){return 256*(e=m(Math.floor(e),0,255))+m(Math.floor(t),0,255)}Wr(no),Wr(ro),Wr(oo),Wr(so),Wr(ao);const ho={Int8:Int8Array,Uint8:Uint8Array,Int16:Int16Array,Uint16:Uint16Array,Int32:Int32Array,Uint32:Uint32Array,Float32:Float32Array};class uo{constructor(e,t){this._structArray=e,this._pos1=t*this.size,this._pos2=this._pos1/2,this._pos4=this._pos1/4,this._pos8=this._pos1/8}}class po{constructor(){this.isTransferred=!1,this.capacity=-1,this.resize(0)}static serialize(e,t){return e._trim(),t&&(e.isTransferred=!0,t.push(e.arrayBuffer)),{length:e.length,arrayBuffer:e.arrayBuffer}}static deserialize(e){const t=Object.create(this.prototype);return t.arrayBuffer=e.arrayBuffer,t.length=e.length,t.capacity=e.arrayBuffer.byteLength/t.bytesPerElement,t._refreshViews(),t}_trim(){this.length!==this.capacity&&(this.capacity=this.length,this.arrayBuffer=this.arrayBuffer.slice(0,this.length*this.bytesPerElement),this._refreshViews())}clear(){this.length=0}resize(e){this.reserve(e),this.length=e}reserve(e){if(e>this.capacity){this.capacity=Math.max(e,Math.floor(5*this.capacity),128),this.arrayBuffer=new ArrayBuffer(this.capacity*this.bytesPerElement);const t=this.uint8;this._refreshViews(),t&&this.uint8.set(t)}}_refreshViews(){throw new Error("_refreshViews() must be implemented by each concrete StructArray layout")}destroy(){this.int8=this.uint8=this.int16=this.uint16=this.int32=this.uint32=this.float32=null,this.arrayBuffer=null}}function fo(e,t=1){let i=0,r=0;return{members:e.map(e=>{const n=ho[e.type].BYTES_PER_ELEMENT,o=i=mo(i,Math.max(t,n)),s=e.components||1;return r=Math.max(r,n),i+=n*s,{name:e.name,type:e.type,components:s,offset:o}}),size:mo(i,Math.max(r,t)),alignment:t}}function mo(e,t){return Math.ceil(e/t)*t}class _o extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t){const i=this.length;return this.resize(i+1),this.emplace(i,e,t)}emplace(e,t,i){const r=2*e;return this.int16[r+0]=t,this.int16[r+1]=i,e}}_o.prototype.bytesPerElement=4,Wr(_o);class go extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t,i){const r=this.length;return this.resize(r+1),this.emplace(r,e,t,i)}emplace(e,t,i,r){const n=3*e;return this.int16[n+0]=t,this.int16[n+1]=i,this.int16[n+2]=r,e}}go.prototype.bytesPerElement=6,Wr(go);class yo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,e,t,i,r)}emplace(e,t,i,r,n){const o=4*e;return this.int16[o+0]=t,this.int16[o+1]=i,this.int16[o+2]=r,this.int16[o+3]=n,e}}yo.prototype.bytesPerElement=8,Wr(yo);class xo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,e,t,i,r,n,o,s)}emplace(e,t,i,r,n,o,s,a){const l=6*e,c=12*e,h=3*e;return this.int16[l+0]=t,this.int16[l+1]=i,this.uint8[c+4]=r,this.uint8[c+5]=n,this.uint8[c+6]=o,this.uint8[c+7]=s,this.float32[h+2]=a,e}}xo.prototype.bytesPerElement=12,Wr(xo);class vo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i){const r=this.length;return this.resize(r+1),this.emplace(r,e,t,i)}emplace(e,t,i,r){const n=3*e;return this.float32[n+0]=t,this.float32[n+1]=i,this.float32[n+2]=r,e}}vo.prototype.bytesPerElement=12,Wr(vo);class bo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a,l,c){const h=this.length;return this.resize(h+1),this.emplace(h,e,t,i,r,n,o,s,a,l,c)}emplace(e,t,i,r,n,o,s,a,l,c,h){const u=10*e;return this.uint16[u+0]=t,this.uint16[u+1]=i,this.uint16[u+2]=r,this.uint16[u+3]=n,this.uint16[u+4]=o,this.uint16[u+5]=s,this.uint16[u+6]=a,this.uint16[u+7]=l,this.uint16[u+8]=c,this.uint16[u+9]=h,e}}bo.prototype.bytesPerElement=20,Wr(bo);class wo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a){const l=this.length;return this.resize(l+1),this.emplace(l,e,t,i,r,n,o,s,a)}emplace(e,t,i,r,n,o,s,a,l){const c=8*e;return this.uint16[c+0]=t,this.uint16[c+1]=i,this.uint16[c+2]=r,this.uint16[c+3]=n,this.uint16[c+4]=o,this.uint16[c+5]=s,this.uint16[c+6]=a,this.uint16[c+7]=l,e}}wo.prototype.bytesPerElement=16,Wr(wo);class To extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o){const s=this.length;return this.resize(s+1),this.emplace(s,e,t,i,r,n,o)}emplace(e,t,i,r,n,o,s){const a=6*e;return this.int16[a+0]=t,this.int16[a+1]=i,this.int16[a+2]=r,this.int16[a+3]=n,this.int16[a+4]=o,this.int16[a+5]=s,e}}To.prototype.bytesPerElement=12,Wr(To);class Eo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m){const _=this.length;return this.resize(_+1),this.emplace(_,e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m)}emplace(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_){const g=16*e;return this.int16[g+0]=t,this.int16[g+1]=i,this.int16[g+2]=r,this.int16[g+3]=n,this.uint16[g+4]=o,this.uint16[g+5]=s,this.uint16[g+6]=a,this.uint16[g+7]=l,this.int16[g+8]=c,this.int16[g+9]=h,this.int16[g+10]=u,this.int16[g+11]=p,this.int16[g+12]=d,this.int16[g+13]=f,this.int16[g+14]=m,this.int16[g+15]=_,e}}Eo.prototype.bytesPerElement=32,Wr(Eo);class So extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(e){const t=this.length;return this.resize(t+1),this.emplace(t,e)}emplace(e,t){return this.uint32[1*e+0]=t,e}}So.prototype.bytesPerElement=4,Wr(So);class Io extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a,l,c,h,u,p){const d=this.length;return this.resize(d+1),this.emplace(d,e,t,i,r,n,o,s,a,l,c,h,u,p)}emplace(e,t,i,r,n,o,s,a,l,c,h,u,p,d){const f=20*e,m=10*e;return this.int16[f+0]=t,this.int16[f+1]=i,this.int16[f+2]=r,this.int16[f+3]=n,this.int16[f+4]=o,this.float32[m+3]=s,this.float32[m+4]=a,this.float32[m+5]=l,this.float32[m+6]=c,this.int16[f+14]=h,this.uint32[m+8]=u,this.uint16[f+18]=p,this.uint16[f+19]=d,e}}Io.prototype.bytesPerElement=40,Wr(Io);class Mo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,e,t,i,r,n,o,s)}emplace(e,t,i,r,n,o,s,a){const l=8*e;return this.int16[l+0]=t,this.int16[l+1]=i,this.int16[l+2]=r,this.int16[l+4]=n,this.int16[l+5]=o,this.int16[l+6]=s,this.int16[l+7]=a,e}}Mo.prototype.bytesPerElement=16,Wr(Mo);class Ao extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n){const o=this.length;return this.resize(o+1),this.emplace(o,e,t,i,r,n)}emplace(e,t,i,r,n,o){const s=4*e,a=8*e;return this.float32[s+0]=t,this.float32[s+1]=i,this.float32[s+2]=r,this.int16[a+6]=n,this.int16[a+7]=o,e}}Ao.prototype.bytesPerElement=16,Wr(Ao);class zo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,e,t,i,r)}emplace(e,t,i,r,n){const o=12*e,s=3*e;return this.uint8[o+0]=t,this.uint8[o+1]=i,this.float32[s+1]=r,this.float32[s+2]=n,e}}zo.prototype.bytesPerElement=12,Wr(zo);class Co extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i){const r=this.length;return this.resize(r+1),this.emplace(r,e,t,i)}emplace(e,t,i,r){const n=3*e;return this.uint16[n+0]=t,this.uint16[n+1]=i,this.uint16[n+2]=r,e}}Co.prototype.bytesPerElement=6,Wr(Co);class ko extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v){const b=this.length;return this.resize(b+1),this.emplace(b,e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v)}emplace(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v,b){const w=30*e,T=15*e,E=60*e;return this.int16[w+0]=t,this.int16[w+1]=i,this.int16[w+2]=r,this.float32[T+2]=n,this.float32[T+3]=o,this.uint16[w+8]=s,this.uint16[w+9]=a,this.uint32[T+5]=l,this.uint32[T+6]=c,this.uint32[T+7]=h,this.uint16[w+16]=u,this.uint16[w+17]=p,this.uint16[w+18]=d,this.float32[T+10]=f,this.float32[T+11]=m,this.uint8[E+48]=_,this.uint8[E+49]=g,this.uint8[E+50]=y,this.uint32[T+13]=x,this.int16[w+28]=v,this.uint8[E+58]=b,e}}ko.prototype.bytesPerElement=60,Wr(ko);class Do extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v,b,w,T,E,S,I,M,A,z){const C=this.length;return this.resize(C+1),this.emplace(C,e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v,b,w,T,E,S,I,M,A,z)}emplace(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v,b,w,T,E,S,I,M,A,z,C){const k=38*e,D=19*e;return this.int16[k+0]=t,this.int16[k+1]=i,this.int16[k+2]=r,this.float32[D+2]=n,this.float32[D+3]=o,this.int16[k+8]=s,this.int16[k+9]=a,this.int16[k+10]=l,this.int16[k+11]=c,this.int16[k+12]=h,this.int16[k+13]=u,this.uint16[k+14]=p,this.uint16[k+15]=d,this.uint16[k+16]=f,this.uint16[k+17]=m,this.uint16[k+18]=_,this.uint16[k+19]=g,this.uint16[k+20]=y,this.uint16[k+21]=x,this.uint16[k+22]=v,this.uint16[k+23]=b,this.uint16[k+24]=w,this.uint16[k+25]=T,this.uint16[k+26]=E,this.uint16[k+27]=S,this.uint16[k+28]=I,this.uint32[D+15]=M,this.float32[D+16]=A,this.float32[D+17]=z,this.float32[D+18]=C,e}}Do.prototype.bytesPerElement=76,Wr(Do);class Po extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e){const t=this.length;return this.resize(t+1),this.emplace(t,e)}emplace(e,t){return this.float32[1*e+0]=t,e}}Po.prototype.bytesPerElement=4,Wr(Po);class Lo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,e,t,i,r,n,o,s)}emplace(e,t,i,r,n,o,s,a){const l=7*e;return this.float32[l+0]=t,this.float32[l+1]=i,this.float32[l+2]=r,this.float32[l+3]=n,this.float32[l+4]=o,this.float32[l+5]=s,this.float32[l+6]=a,e}}Lo.prototype.bytesPerElement=28,Wr(Lo);class Bo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n){const o=this.length;return this.resize(o+1),this.emplace(o,e,t,i,r,n)}emplace(e,t,i,r,n,o){const s=5*e;return this.float32[s+0]=t,this.float32[s+1]=i,this.float32[s+2]=r,this.float32[s+3]=n,this.float32[s+4]=o,e}}Bo.prototype.bytesPerElement=20,Wr(Bo);class Ro extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,e,t,i,r)}emplace(e,t,i,r,n){const o=6*e;return this.uint32[3*e+0]=t,this.uint16[o+2]=i,this.uint16[o+3]=r,this.uint16[o+4]=n,e}}Ro.prototype.bytesPerElement=12,Wr(Ro);class Fo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e,t){const i=this.length;return this.resize(i+1),this.emplace(i,e,t)}emplace(e,t,i){const r=2*e;return this.uint16[r+0]=t,this.uint16[r+1]=i,e}}Fo.prototype.bytesPerElement=4,Wr(Fo);class Oo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(e){const t=this.length;return this.resize(t+1),this.emplace(t,e)}emplace(e,t){return this.uint16[1*e+0]=t,e}}Oo.prototype.bytesPerElement=2,Wr(Oo);class Uo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t){const i=this.length;return this.resize(i+1),this.emplace(i,e,t)}emplace(e,t,i){const r=2*e;return this.float32[r+0]=t,this.float32[r+1]=i,e}}Uo.prototype.bytesPerElement=8,Wr(Uo);class Vo extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,e,t,i,r)}emplace(e,t,i,r,n){const o=4*e;return this.float32[o+0]=t,this.float32[o+1]=i,this.float32[o+2]=r,this.float32[o+3]=n,e}}Vo.prototype.bytesPerElement=16,Wr(Vo);class No extends po{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(e,t,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,e,t,i,r,n,o,s)}emplace(e,t,i,r,n,o,s,a){const l=8*e,c=4*e;return this.int16[l+0]=t,this.int16[l+1]=i,this.int16[l+2]=r,this.int16[l+3]=n,this.int16[l+4]=o,this.int16[l+5]=s,this.float32[c+3]=a,e}}No.prototype.bytesPerElement=16,Wr(No);class jo extends uo{get a_pos_30(){return this._structArray.int16[this._pos2+0]}get a_pos_31(){return this._structArray.int16[this._pos2+1]}get a_pos_32(){return this._structArray.int16[this._pos2+2]}get a_pos_normal_30(){return this._structArray.int16[this._pos2+3]}get a_pos_normal_31(){return this._structArray.int16[this._pos2+4]}get a_pos_normal_32(){return this._structArray.int16[this._pos2+5]}}jo.prototype.size=12;class Go extends To{get(e){return new jo(this,e)}}Wr(Go);class Zo extends uo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.int16[this._pos2+3]}get tileAnchorY(){return this._structArray.int16[this._pos2+4]}get x1(){return this._structArray.float32[this._pos4+3]}get y1(){return this._structArray.float32[this._pos4+4]}get x2(){return this._structArray.float32[this._pos4+5]}get y2(){return this._structArray.float32[this._pos4+6]}get padding(){return this._structArray.int16[this._pos2+14]}get featureIndex(){return this._structArray.uint32[this._pos4+8]}get sourceLayerIndex(){return this._structArray.uint16[this._pos2+18]}get bucketIndex(){return this._structArray.uint16[this._pos2+19]}}Zo.prototype.size=40;class qo extends Io{get(e){return new Zo(this,e)}}Wr(qo);class $o extends uo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.float32[this._pos4+2]}get tileAnchorY(){return this._structArray.float32[this._pos4+3]}get glyphStartIndex(){return this._structArray.uint16[this._pos2+8]}get numGlyphs(){return this._structArray.uint16[this._pos2+9]}get vertexStartIndex(){return this._structArray.uint32[this._pos4+5]}get lineStartIndex(){return this._structArray.uint32[this._pos4+6]}get lineLength(){return this._structArray.uint32[this._pos4+7]}get segment(){return this._structArray.uint16[this._pos2+16]}get lowerSize(){return this._structArray.uint16[this._pos2+17]}get upperSize(){return this._structArray.uint16[this._pos2+18]}get lineOffsetX(){return this._structArray.float32[this._pos4+10]}get lineOffsetY(){return this._structArray.float32[this._pos4+11]}get writingMode(){return this._structArray.uint8[this._pos1+48]}get placedOrientation(){return this._structArray.uint8[this._pos1+49]}set placedOrientation(e){this._structArray.uint8[this._pos1+49]=e}get hidden(){return this._structArray.uint8[this._pos1+50]}set hidden(e){this._structArray.uint8[this._pos1+50]=e}get crossTileID(){return this._structArray.uint32[this._pos4+13]}set crossTileID(e){this._structArray.uint32[this._pos4+13]=e}get associatedIconIndex(){return this._structArray.int16[this._pos2+28]}get flipState(){return this._structArray.uint8[this._pos1+58]}set flipState(e){this._structArray.uint8[this._pos1+58]=e}}$o.prototype.size=60;class Xo extends ko{get(e){return new $o(this,e)}}Wr(Xo);class Wo extends uo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.float32[this._pos4+2]}get tileAnchorY(){return this._structArray.float32[this._pos4+3]}get rightJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+8]}get centerJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+9]}get leftJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+10]}get verticalPlacedTextSymbolIndex(){return this._structArray.int16[this._pos2+11]}get placedIconSymbolIndex(){return this._structArray.int16[this._pos2+12]}get verticalPlacedIconSymbolIndex(){return this._structArray.int16[this._pos2+13]}get key(){return this._structArray.uint16[this._pos2+14]}get textBoxStartIndex(){return this._structArray.uint16[this._pos2+15]}get textBoxEndIndex(){return this._structArray.uint16[this._pos2+16]}get verticalTextBoxStartIndex(){return this._structArray.uint16[this._pos2+17]}get verticalTextBoxEndIndex(){return this._structArray.uint16[this._pos2+18]}get iconBoxStartIndex(){return this._structArray.uint16[this._pos2+19]}get iconBoxEndIndex(){return this._structArray.uint16[this._pos2+20]}get verticalIconBoxStartIndex(){return this._structArray.uint16[this._pos2+21]}get verticalIconBoxEndIndex(){return this._structArray.uint16[this._pos2+22]}get featureIndex(){return this._structArray.uint16[this._pos2+23]}get numHorizontalGlyphVertices(){return this._structArray.uint16[this._pos2+24]}get numVerticalGlyphVertices(){return this._structArray.uint16[this._pos2+25]}get numIconVertices(){return this._structArray.uint16[this._pos2+26]}get numVerticalIconVertices(){return this._structArray.uint16[this._pos2+27]}get useRuntimeCollisionCircles(){return this._structArray.uint16[this._pos2+28]}get crossTileID(){return this._structArray.uint32[this._pos4+15]}set crossTileID(e){this._structArray.uint32[this._pos4+15]=e}get textOffset0(){return this._structArray.float32[this._pos4+16]}get textOffset1(){return this._structArray.float32[this._pos4+17]}get collisionCircleDiameter(){return this._structArray.float32[this._pos4+18]}}Wo.prototype.size=76;class Ho extends Do{get(e){return new Wo(this,e)}}Wr(Ho);class Yo extends Po{getoffsetX(e){return this.float32[1*e+0]}}Wr(Yo);class Ko extends go{getx(e){return this.int16[3*e+0]}gety(e){return this.int16[3*e+1]}gettileUnitDistanceFromAnchor(e){return this.int16[3*e+2]}}Wr(Ko);class Jo extends uo{get featureIndex(){return this._structArray.uint32[this._pos4+0]}get sourceLayerIndex(){return this._structArray.uint16[this._pos2+2]}get bucketIndex(){return this._structArray.uint16[this._pos2+3]}get layoutVertexArrayOffset(){return this._structArray.uint16[this._pos2+4]}}Jo.prototype.size=12;class Qo extends Ro{get(e){return new Jo(this,e)}}Wr(Qo);class es extends uo{get a_centroid_pos0(){return this._structArray.uint16[this._pos2+0]}get a_centroid_pos1(){return this._structArray.uint16[this._pos2+1]}}es.prototype.size=4;class ts extends Fo{get(e){return new es(this,e)}}Wr(ts);class is extends uo{get a_pos_30(){return this._structArray.int16[this._pos2+0]}get a_pos_31(){return this._structArray.int16[this._pos2+1]}get a_pos_32(){return this._structArray.int16[this._pos2+2]}get a_pos_normal_30(){return this._structArray.int16[this._pos2+3]}get a_pos_normal_31(){return this._structArray.int16[this._pos2+4]}get a_pos_normal_32(){return this._structArray.int16[this._pos2+5]}get a_scale(){return this._structArray.float32[this._pos4+3]}}is.prototype.size=16;class rs extends No{get(e){return new is(this,e)}}Wr(rs);const ns=fo([{name:"a_pattern_to",components:4,type:"Uint16"},{name:"a_pattern_from",components:4,type:"Uint16"},{name:"a_pixel_ratio_to",components:1,type:"Uint16"},{name:"a_pixel_ratio_from",components:1,type:"Uint16"}]),os=fo([{name:"a_dash_to",components:4,type:"Uint16"},{name:"a_dash_from",components:4,type:"Uint16"}]);var ss=lt((function(e){e.exports=function(e,t){var i,r,n,o,s,a,l,c;for(r=e.length-(i=3&e.length),n=t,s=3432918353,a=461845907,c=0;c>>16)*s&65535)<<16)&4294967295)<<15|l>>>17))*a+(((l>>>16)*a&65535)<<16)&4294967295)<<13|n>>>19))+((5*(n>>>16)&65535)<<16)&4294967295))+((58964+(o>>>16)&65535)<<16);switch(l=0,i){case 3:l^=(255&e.charCodeAt(c+2))<<16;case 2:l^=(255&e.charCodeAt(c+1))<<8;case 1:n^=l=(65535&(l=(l=(65535&(l^=255&e.charCodeAt(c)))*s+(((l>>>16)*s&65535)<<16)&4294967295)<<15|l>>>17))*a+(((l>>>16)*a&65535)<<16)&4294967295}return n^=e.length,n=2246822507*(65535&(n^=n>>>16))+((2246822507*(n>>>16)&65535)<<16)&4294967295,n=3266489909*(65535&(n^=n>>>13))+((3266489909*(n>>>16)&65535)<<16)&4294967295,(n^=n>>>16)>>>0}})),as=lt((function(e){e.exports=function(e,t){for(var i,r=e.length,n=t^r,o=0;r>=4;)i=1540483477*(65535&(i=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(i>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(i=1540483477*(65535&(i^=i>>>24))+((1540483477*(i>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),(n^=n>>>15)>>>0}})),ls=ss,cs=as;ls.murmur3=ss,ls.murmur2=cs;class hs{constructor(){this.ids=[],this.positions=[],this.indexed=!1}add(e,t,i,r){this.ids.push(us(e)),this.positions.push(t,i,r)}getPositions(e){const t=us(e);let i=0,r=this.ids.length-1;for(;i>1;this.ids[e]>=t?r=e:i=e+1}const n=[];for(;this.ids[i]===t;)n.push({index:this.positions[3*i],start:this.positions[3*i+1],end:this.positions[3*i+2]}),i++;return n}static serialize(e,t){const i=new Float64Array(e.ids),r=new Uint32Array(e.positions);return function e(t,i,r,n){for(;r>1];let s=r-1,a=n+1;for(;;){do{s++}while(t[s]o);if(s>=a)break;ps(t,s,a),ps(i,3*s,3*a),ps(i,3*s+1,3*a+1),ps(i,3*s+2,3*a+2)}a-r"u_"+e),this.type=i}setUniform(e,t,i){e.set(i.constantOr(this.value))}getBinding(e,t,i){return"color"===this.type?new _s(e,t):new fs(e,t)}}class ws{constructor(e,t){this.uniformNames=t.map(e=>"u_"+e),this.patternFrom=null,this.patternTo=null,this.pixelRatioFrom=1,this.pixelRatioTo=1}setConstantPatternPositions(e,t){this.pixelRatioFrom=t.pixelRatio||1,this.pixelRatioTo=e.pixelRatio||1,this.patternFrom=t.tl.concat(t.br),this.patternTo=e.tl.concat(e.br)}setUniform(e,t,i,r){const n="u_pattern_to"===r||"u_dash_to"===r?this.patternTo:"u_pattern_from"===r||"u_dash_from"===r?this.patternFrom:"u_pixel_ratio_to"===r?this.pixelRatioTo:"u_pixel_ratio_from"===r?this.pixelRatioFrom:null;n&&e.set(n)}getBinding(e,t,i){return"u_pattern_from"===i||"u_pattern_to"===i||"u_dash_from"===i||"u_dash_to"===i?new ms(e,t):new fs(e,t)}}class Ts{constructor(e,t,i,r){this.expression=e,this.type=i,this.maxValue=0,this.paintVertexAttributes=t.map(e=>({name:"a_"+e,type:"Float32",components:"color"===i?2:1,offset:0})),this.paintVertexArray=new r}populatePaintArray(e,t,i,r,n,o){const s=this.paintVertexArray.length,a=this.expression.evaluate(new Wn(0),t,{},n,r,o);this.paintVertexArray.resize(e),this._setPaintValue(s,e,a)}updatePaintArray(e,t,i,r,n){const o=this.expression.evaluate({zoom:0},i,r,void 0,n);this._setPaintValue(e,t,o)}_setPaintValue(e,t,i){if("color"===this.type){const r=vs(i);for(let i=e;i`u_${e}_t`),this.type=i,this.useIntegerZoom=r,this.zoom=n,this.maxValue=0,this.paintVertexAttributes=t.map(e=>({name:"a_"+e,type:"Float32",components:"color"===i?4:2,offset:0})),this.paintVertexArray=new o}populatePaintArray(e,t,i,r,n,o){const s=this.expression.evaluate(new Wn(this.zoom),t,{},n,r,o),a=this.expression.evaluate(new Wn(this.zoom+1),t,{},n,r,o),l=this.paintVertexArray.length;this.paintVertexArray.resize(e),this._setPaintValue(l,e,s,a)}updatePaintArray(e,t,i,r,n){const o=this.expression.evaluate({zoom:this.zoom},i,r,void 0,n),s=this.expression.evaluate({zoom:this.zoom+1},i,r,void 0,n);this._setPaintValue(e,t,o,s)}_setPaintValue(e,t,i,r){if("color"===this.type){const n=vs(i),o=vs(r);for(let i=e;i!0)){this.binders={},this._buffers=[];const r=[];for(const n in e.paint._values){if(!i(n))continue;const o=e.paint.get(n);if(!(o instanceof to&&Zi(o.property.specification)))continue;const s=zs(n,e.type),a=o.value,l=o.property.specification.type,c=o.property.useIntegerZoom,h=o.property.specification["property-type"],u="cross-faded"===h||"cross-faded-data-driven"===h,p="line-dasharray"===String(n)&&"constant"!==e.layout.get("line-cap").value.kind;if("constant"!==a.kind||p)if("source"===a.kind||p||u){const i=Ds(n,l,"source");this.binders[n]=u?new Ss(a,s,l,c,t,i,e.id):new Ts(a,s,l,i),r.push("/a_"+n)}else{const e=Ds(n,l,"composite");this.binders[n]=new Es(a,s,l,c,t,e),r.push("/z_"+n)}else this.binders[n]=u?new ws(a.value,s):new bs(a.value,s,l),r.push("/u_"+n)}this.cacheKey=r.sort().join("")}getMaxValue(e){const t=this.binders[e];return t instanceof Ts||t instanceof Es?t.maxValue:0}populatePaintArrays(e,t,i,r,n,o){for(const s in this.binders){const a=this.binders[s];(a instanceof Ts||a instanceof Es||a instanceof Ss)&&a.populatePaintArray(e,t,i,r,n,o)}}setConstantPatternPositions(e,t){for(const i in this.binders){const r=this.binders[i];r instanceof ws&&r.setConstantPatternPositions(e,t)}}updatePaintArrays(e,t,i,r,n,o){let s=!1;for(const a in e){const l=t.getPositions(a);for(const t of l){const l=i.feature(t.index);for(const i in this.binders){const c=this.binders[i];if((c instanceof Ts||c instanceof Es||c instanceof Ss)&&!0===c.expression.isStateDependent){const h=r.paint.get(i);c.expression=h.value,c.updatePaintArray(t.start,t.end,l,e[a],n,o),s=!0}}}}return s}defines(){const e=[];for(const t in this.binders){const i=this.binders[t];(i instanceof bs||i instanceof ws)&&e.push(...i.uniformNames.map(e=>"#define HAS_UNIFORM_"+e))}return e}getBinderAttributes(){const e=[];for(const t in this.binders){const i=this.binders[t];if(i instanceof Ts||i instanceof Es||i instanceof Ss)for(let t=0;t!0)){this.programConfigurations={};for(const r of e)this.programConfigurations[r.id]=new Is(r,t,i);this.needsUpload=!1,this._featureMap=new hs,this._bufferOffset=0}populatePaintArrays(e,t,i,r,n,o,s){for(const a in this.programConfigurations)this.programConfigurations[a].populatePaintArrays(e,t,r,n,o,s);void 0!==t.id&&this._featureMap.add(t.id,i,this._bufferOffset,e),this._bufferOffset=e,this.needsUpload=!0}updatePaintArrays(e,t,i,r,n){for(const o of i)this.needsUpload=this.programConfigurations[o.id].updatePaintArrays(e,this._featureMap,t,o,r,n)||this.needsUpload}get(e){return this.programConfigurations[e]}upload(e){if(this.needsUpload){for(const t in this.programConfigurations)this.programConfigurations[t].upload(e);this.needsUpload=!1}}destroy(){for(const e in this.programConfigurations)this.programConfigurations[e].destroy()}}const As={"text-opacity":["opacity"],"icon-opacity":["opacity"],"text-color":["fill_color"],"icon-color":["fill_color"],"text-halo-color":["halo_color"],"icon-halo-color":["halo_color"],"text-halo-blur":["halo_blur"],"icon-halo-blur":["halo_blur"],"text-halo-width":["halo_width"],"icon-halo-width":["halo_width"],"line-gap-width":["gapwidth"],"line-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"fill-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"fill-extrusion-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"line-dasharray":["dash_to","dash_from"]};function zs(e,t){return As[e]||[e.replace(t+"-","").replace(/-/g,"_")]}const Cs={"line-pattern":{source:bo,composite:bo},"fill-pattern":{source:bo,composite:bo},"fill-extrusion-pattern":{source:bo,composite:bo},"line-dasharray":{source:wo,composite:wo}},ks={color:{source:Uo,composite:Vo},number:{source:Po,composite:Uo}};function Ds(e,t,i){const r=Cs[e];return r&&r[i]||ks[t][i]}Wr(bs),Wr(ws),Wr(Ts),Wr(Ss),Wr(Es),Wr(Is,{omit:["_buffers"]}),Wr(Ms);const Ps="-transition";class Ls extends Ue{constructor(e,t){if(super(),this.id=e.id,this.type=e.type,this._featureFilter={filter:()=>!0,needGeometry:!1,needFeature:!1},this._filterCompiled=!1,"custom"!==e.type&&(this.metadata=(e=e).metadata,this.minzoom=e.minzoom,this.maxzoom=e.maxzoom,"background"!==e.type&&"sky"!==e.type&&(this.source=e.source,this.sourceLayer=e["source-layer"],this.filter=e.filter),t.layout&&(this._unevaluatedLayout=new eo(t.layout)),t.paint)){this._transitionablePaint=new Kn(t.paint);for(const t in e.paint)this.setPaintProperty(t,e.paint[t],{validate:!1});for(const t in e.layout)this.setLayoutProperty(t,e.layout[t],{validate:!1});this._transitioningPaint=this._transitionablePaint.untransitioned(),this.paint=new io(t.paint)}}getCrossfadeParameters(){return this._crossfadeParameters}getLayoutProperty(e){return"visibility"===e?this.visibility:this._unevaluatedLayout.getValue(e)}setLayoutProperty(e,t,i={}){null!=t&&this._validate(jr,`layers.${this.id}.layout.${e}`,e,t,i)||("visibility"!==e?this._unevaluatedLayout.setValue(e,t):this.visibility=t)}getPaintProperty(e){return M(e,Ps)?this._transitionablePaint.getTransition(e.slice(0,-Ps.length)):this._transitionablePaint.getValue(e)}setPaintProperty(e,t,i={}){if(null!=t&&this._validate(Nr,`layers.${this.id}.paint.${e}`,e,t,i))return!1;if(M(e,Ps))return this._transitionablePaint.setTransition(e.slice(0,-Ps.length),t||void 0),!1;{const i=this._transitionablePaint._values[e],r="cross-faded-data-driven"===i.property.specification["property-type"],n=i.value.isDataDriven(),o=i.value;this._transitionablePaint.setValue(e,t),this._handleSpecialPaintPropertyUpdate(e);const s=this._transitionablePaint._values[e].value;return s.isDataDriven()||n||r||this._handleOverridablePaintPropertyUpdate(e,o,s)}}_handleSpecialPaintPropertyUpdate(e){}getProgramIds(){return null}getProgramConfiguration(e){return null}_handleOverridablePaintPropertyUpdate(e,t,i){return!1}isHidden(e){return!!(this.minzoom&&e=this.maxzoom)||"none"===this.visibility}updateTransitions(e){this._transitioningPaint=this._transitionablePaint.transitioned(e,this._transitioningPaint)}hasTransition(){return this._transitioningPaint.hasTransition()}recalculate(e,t){e.getCrossfadeParameters&&(this._crossfadeParameters=e.getCrossfadeParameters()),this._unevaluatedLayout&&(this.layout=this._unevaluatedLayout.possiblyEvaluate(e,void 0,t)),this.paint=this._transitioningPaint.possiblyEvaluate(e,void 0,t)}serialize(){const e={id:this.id,type:this.type,source:this.source,"source-layer":this.sourceLayer,metadata:this.metadata,minzoom:this.minzoom,maxzoom:this.maxzoom,filter:this.filter,layout:this._unevaluatedLayout&&this._unevaluatedLayout.serialize(),paint:this._transitionablePaint&&this._transitionablePaint.serialize()};return this.visibility&&(e.layout=e.layout||{},e.layout.visibility=this.visibility),z(e,(e,t)=>!(void 0===e||"layout"===t&&!Object.keys(e).length||"paint"===t&&!Object.keys(e).length))}_validate(e,t,i,r,n={}){return(!n||!1!==n.validate)&&Zr(this,e.call(Vr,{key:t,layerType:this.type,objectKey:i,value:r,styleSpec:Ve,style:{glyphs:!0,sprite:!0}}))}is3D(){return!1}isSky(){return!1}isTileClipped(){return!1}hasOffscreenPass(){return!1}resize(){}isStateDependent(){for(const e in this.paint._values){const t=this.paint.get(e);if(t instanceof to&&Zi(t.property.specification)&&("source"===t.value.kind||"composite"===t.value.kind)&&t.value.isStateDependent)return!0}return!1}compileFilter(){this._filterCompiled||(this._featureFilter=_r(this.filter),this._filterCompiled=!0)}invalidateCompiledFilter(){this._filterCompiled=!1}dynamicFilter(){return this._featureFilter.dynamicFilter}dynamicFilterNeedsFeature(){return this._featureFilter.needFeature}}const Bs=fo([{name:"a_pos",components:2,type:"Int16"}],4),Rs=fo([{name:"a_pos_3",components:3,type:"Int16"},{name:"a_pos_normal_3",components:3,type:"Int16"},{name:"a_scale",components:1,type:"Float32"}]);class Fs{constructor(e=[]){this.segments=e}prepareSegment(e,t,i,r){let n=this.segments[this.segments.length-1];return e>Fs.MAX_VERTEX_ARRAY_LENGTH&&D(`Max vertices per segment is ${Fs.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${e}`),(!n||n.vertexLength+e>Fs.MAX_VERTEX_ARRAY_LENGTH||n.sortKey!==r)&&(n={vertexOffset:t.length,primitiveOffset:i.length,vertexLength:0,primitiveLength:0},void 0!==r&&(n.sortKey=r),this.segments.push(n)),n}get(){return this.segments}destroy(){for(const e of this.segments)for(const t in e.vaos)e.vaos[t].destroy()}static simpleSegment(e,t,i,r){return new Fs([{vertexOffset:e,primitiveOffset:t,vertexLength:i,primitiveLength:r,vaos:{},sortKey:0}])}}Fs.MAX_VERTEX_ARRAY_LENGTH=Math.pow(2,16)-1,Wr(Fs);var Os=8192;class Us{constructor(e,t){e&&(t?this.setSouthWest(e).setNorthEast(t):4===e.length?this.setSouthWest([e[0],e[1]]).setNorthEast([e[2],e[3]]):this.setSouthWest(e[0]).setNorthEast(e[1]))}setNorthEast(e){return this._ne=e instanceof Ns?new Ns(e.lng,e.lat):Ns.convert(e),this}setSouthWest(e){return this._sw=e instanceof Ns?new Ns(e.lng,e.lat):Ns.convert(e),this}extend(e){const t=this._sw,i=this._ne;let r,n;if(e instanceof Ns)r=e,n=e;else{if(!(e instanceof Us))return Array.isArray(e)?4===e.length||e.every(Array.isArray)?this.extend(Us.convert(e)):this.extend(Ns.convert(e)):this;if(r=e._sw,n=e._ne,!r||!n)return this}return t||i?(t.lng=Math.min(r.lng,t.lng),t.lat=Math.min(r.lat,t.lat),i.lng=Math.max(n.lng,i.lng),i.lat=Math.max(n.lat,i.lat)):(this._sw=new Ns(r.lng,r.lat),this._ne=new Ns(n.lng,n.lat)),this}getCenter(){return new Ns((this._sw.lng+this._ne.lng)/2,(this._sw.lat+this._ne.lat)/2)}getSouthWest(){return this._sw}getNorthEast(){return this._ne}getNorthWest(){return new Ns(this.getWest(),this.getNorth())}getSouthEast(){return new Ns(this.getEast(),this.getSouth())}getWest(){return this._sw.lng}getSouth(){return this._sw.lat}getEast(){return this._ne.lng}getNorth(){return this._ne.lat}toArray(){return[this._sw.toArray(),this._ne.toArray()]}toString(){return`LngLatBounds(${this._sw.toString()}, ${this._ne.toString()})`}isEmpty(){return!(this._sw&&this._ne)}contains(e){const{lng:t,lat:i}=Ns.convert(e);let r=this._sw.lng<=t&&t<=this._ne.lng;return this._sw.lng>this._ne.lng&&(r=this._sw.lng>=t&&t>=this._ne.lng),this._sw.lat<=i&&i<=this._ne.lat&&r}static convert(e){return!e||e instanceof Us?e:new Us(e)}}const Vs=6371008.8;class Ns{constructor(e,t){if(isNaN(e)||isNaN(t))throw new Error(`Invalid LngLat object: (${e}, ${t})`);if(this.lng=+e,this.lat=+t,this.lat>90||this.lat<-90)throw new Error("Invalid LngLat latitude value: must be between -90 and 90")}wrap(){return new Ns(g(this.lng,-180,180),this.lat)}toArray(){return[this.lng,this.lat]}toString(){return`LngLat(${this.lng}, ${this.lat})`}distanceTo(e){const t=Math.PI/180,i=this.lat*t,r=e.lat*t,n=Math.sin(i)*Math.sin(r)+Math.cos(i)*Math.cos(r)*Math.cos((e.lng-this.lng)*t);return Vs*Math.acos(Math.min(n,1))}toBounds(e=0){const t=360*e/40075017,i=t/Math.cos(Math.PI/180*this.lat);return new Us(new Ns(this.lng-i,this.lat-t),new Ns(this.lng+i,this.lat+t))}static convert(e){if(e instanceof Ns)return e;if(Array.isArray(e)&&(2===e.length||3===e.length))return new Ns(Number(e[0]),Number(e[1]));if(!Array.isArray(e)&&"object"==typeof e&&null!==e)return new Ns(Number("lng"in e?e.lng:e.lon),Number(e.lat));throw new Error("`LngLatLike` argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]")}}const js=2*Math.PI*Vs;function Gs(e){return js*Math.cos(e*Math.PI/180)}function Zs(e){return(180+e)/360}function qs(e){return(180-180/Math.PI*Math.log(Math.tan(Math.PI/4+e*Math.PI/360)))/360}function $s(e,t){return e/Gs(t)}function Xs(e){return 360*e-180}function Ws(e){return 360/Math.PI*Math.atan(Math.exp((180-360*e)*Math.PI/180))-90}function Hs(e,t){return e*Gs(Ws(t))}const Ys=85.051129;class Ks{constructor(e,t,i=0){this.x=+e,this.y=+t,this.z=+i}static fromLngLat(e,t=0){const i=Ns.convert(e);return new Ks(Zs(i.lng),qs(i.lat),$s(t,i.lat))}toLngLat(){return new Ns(Xs(this.x),Ws(this.y))}toAltitude(){return Hs(this.z,this.y)}meterInMercatorCoordinateUnits(){return 1/js*(e=Ws(this.y),1/Math.cos(e*Math.PI/180));var e}}function Js(e,t,i,r,o,s,a,l,c){const h=(t+r)/2,u=(i+o)/2,p=new n(h,u);l(p),function(e,t,i,r,n,o){const s=i-n,a=r-o;return Math.abs((r-t)*s-(i-e)*a)/Math.hypot(s,a)}(p.x,p.y,s.x,s.y,a.x,a.y)>=c?(Js(e,t,i,h,u,s,p,l,c),Js(e,h,u,r,o,p,a,l,c)):e.push(a)}function Qs(e,t,i){let r=e[0],n=r.x,o=r.y;t(r);const s=[r];for(let a=1;ae.x+1||re.y+1)&&D("Geometry exceeds allowed extent, reduce your vector tile buffer size"),e}function ra(e,t,i){const r=e.loadGeometry(),n=e.extent,o=Os/n;if(t&&i&&i.projection.isReprojectedInTileSpace){const o=1<{const i=Xs((t.x+e.x/n)/o),r=Ws((t.y+e.y/n)/o),h=c.project(i,r);e.x=(h.x*s-a)*n,e.y=(h.y*s-l)*n};for(let t=0;t=n||i.y<0||i.y>=n||(h(i),e.push(i));r[t]=e}}for(const s of r)for(const e of s)ia(e,o);return r}function na(e,t){return{type:e.type,id:e.id,properties:e.properties,geometry:t?ra(e):[]}}function oa(e,t,i,r,n){e.emplaceBack(2*t+(r+1)/2,2*i+(n+1)/2)}function sa(e,t,i,r){const n=16384;e.emplaceBack(t.x,t.y,t.z,i[0]*n,i[1]*n,i[2]*n,r)}class aa{constructor(e){this.zoom=e.zoom,this.overscaling=e.overscaling,this.layers=e.layers,this.layerIds=this.layers.map(e=>e.id),this.index=e.index,this.hasPattern=!1,this.projection=e.projection,this.layoutVertexArray=new _o,this.indexArray=new Co,this.segments=new Fs,this.programConfigurations=new Ms(e.layers,e.zoom),this.stateDependentLayerIds=this.layers.filter(e=>e.isStateDependent()).map(e=>e.id)}populate(e,t,i,r){const n=this.layers[0],o=[];let s=null;"circle"===n.type&&(s=n.layout.get("circle-sort-key"));for(const{feature:l,id:c,index:h,sourceLayerIndex:u}of e){const e=this.layers[0]._featureFilter.needGeometry,t=na(l,e);if(!this.layers[0]._featureFilter.filter(new Wn(this.zoom),t,i))continue;const n=s?s.evaluate(t,{},i):void 0,a={id:c,properties:l.properties,type:l.type,sourceLayerIndex:u,index:h,geometry:e?t.geometry:ra(l,i,r),patterns:{},sortKey:n};o.push(a)}s&&o.sort((e,t)=>e.sortKey-t.sortKey);let a=null;"globe"===r.projection.name&&(this.globeExtVertexArray=new rs,a=r.projection);for(const l of o){const{geometry:r,index:n,sourceLayerIndex:o}=l,s=e[n].feature;this.addFeature(l,r,n,t.availableImages,i,a),t.featureIndex.insert(s,r,n,o,this.index)}}update(e,t,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(e,t,this.stateDependentLayers,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(e){this.uploaded||(this.layoutVertexBuffer=e.createVertexBuffer(this.layoutVertexArray,Bs.members),this.indexBuffer=e.createIndexBuffer(this.indexArray),this.globeExtVertexArray&&(this.globeExtVertexBuffer=e.createVertexBuffer(this.globeExtVertexArray,Rs.members))),this.programConfigurations.upload(e),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.programConfigurations.destroy(),this.segments.destroy(),this.globeExtVertexBuffer&&this.globeExtVertexBuffer.destroy())}addFeature(e,t,i,r,n,o){for(const s of t)for(const t of s){const i=t.x,r=t.y;if(i<0||i>=Os||r<0||r>=Os)continue;if(o){const e=o.projectTilePoint(i,r,n),t=o.upVector(n,i,r),s=Ws((r/Os+n.y)/(1<1){if(pa(e,t))return!0;for(let r=0;r1?i:i.sub(t)._mult(n)._add(t))}function _a(e,t){let i,r,n,o=!1;for(let s=0;st.y!=n.y>t.y&&t.x<(n.x-r.x)*(t.y-r.y)/(n.y-r.y)+r.x&&(o=!o)}return o}function ga(e,t){let i=!1;for(let r=0,n=e.length-1;rt.y!=s.y>t.y&&t.x<(s.x-o.x)*(t.y-o.y)/(s.y-o.y)+o.x&&(i=!i)}return i}function ya(e,t,i,r,o){for(const n of e)if(t<=n.x&&i<=n.y&&r>=n.x&&o>=n.y)return!0;const s=[new n(t,i),new n(t,o),new n(r,o),new n(r,i)];if(e.length>2)for(const n of s)if(ga(e,n))return!0;for(let n=0;nn.x&&t.x>n.x||e.yn.y&&t.y>n.y)return!1;const o=P(e,t,i[0]);return o!==P(e,t,i[1])||o!==P(e,t,i[2])||o!==P(e,t,i[3])}function va(e,t,i){const r=t.paint.get(e).value;return"constant"===r.kind?r.value:i.programConfigurations.get(t.id).getMaxValue(e)}function ba(e){return Math.sqrt(e[0]*e[0]+e[1]*e[1])}function wa(e,t,i,r,o){if(!t[0]&&!t[1])return e;const s=n.convert(t)._mult(o);"viewport"===i&&s._rotate(-r);const a=[];for(let n=0;n0&&(o=1/Math.sqrt(o)),e[0]=t[0]*o,e[1]=t[1]*o,e[2]=t[2]*o,e}function Wa(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]}function Ha(e,t,i){var r=t[0],n=t[1],o=t[2],s=i[0],a=i[1],l=i[2];return e[0]=n*l-o*a,e[1]=o*s-r*l,e[2]=r*a-n*s,e}function Ya(e,t,i){var r=t[0],n=t[1],o=t[2],s=i[3]*r+i[7]*n+i[11]*o+i[15];return e[0]=(i[0]*r+i[4]*n+i[8]*o+i[12])/(s=s||1),e[1]=(i[1]*r+i[5]*n+i[9]*o+i[13])/s,e[2]=(i[2]*r+i[6]*n+i[10]*o+i[14])/s,e}function Ka(e,t,i){var r=i[0],n=i[1],o=i[2],s=t[0],a=t[1],l=t[2],c=n*l-o*a,h=o*s-r*l,u=r*a-n*s,p=n*u-o*h,d=o*c-r*u,f=r*h-n*c,m=2*i[3];return h*=m,u*=m,d*=2,f*=2,e[0]=s+(c*=m)+(p*=2),e[1]=a+h+d,e[2]=l+u+f,e}var Ja,Qa=Na,el=ja,tl=Oa;function il(e,t,i){var r=t[0],n=t[1],o=t[2],s=t[3];return e[0]=i[0]*r+i[4]*n+i[8]*o+i[12]*s,e[1]=i[1]*r+i[5]*n+i[9]*o+i[13]*s,e[2]=i[2]*r+i[6]*n+i[10]*o+i[14]*s,e[3]=i[3]*r+i[7]*n+i[11]*o+i[15]*s,e}function rl(){var e=new Ma(4);return Ma!=Float32Array&&(e[0]=0,e[1]=0,e[2]=0),e[3]=1,e}function nl(e){return e[0]=0,e[1]=0,e[2]=0,e[3]=1,e}function ol(e,t,i){i*=.5;var r=t[0],n=t[1],o=t[2],s=t[3],a=Math.sin(i),l=Math.cos(i);return e[0]=r*l+s*a,e[1]=n*l+o*a,e[2]=o*l-n*a,e[3]=s*l-r*a,e}Ra(),Ja=new Ma(4),Ma!=Float32Array&&(Ja[0]=0,Ja[1]=0,Ja[2]=0,Ja[3]=0),Ra(),Ua(1,0,0),Ua(0,1,0),rl(),rl(),Aa();class sl{constructor(e,t){this.points=e,this.planes=t}static fromInvProjectionMatrix(e,t,i,r){const n=Math.pow(2,i),o=[[-1,1,-1,1],[1,1,-1,1],[1,-1,-1,1],[-1,-1,-1,1],[-1,1,1,1],[1,1,1,1],[1,-1,1,1],[-1,-1,1,1]].map(i=>{const o=il([],i,e),s=1/o[3]/t*n;return function(e,t,i){return e[0]=t[0]*i[0],e[1]=t[1]*i[1],e[2]=t[2]*i[2],e[3]=t[3]*i[3],e}(o,o,[s,s,r?1/o[3]:s,s])}),s=[[0,1,2],[6,5,4],[0,3,7],[2,1,5],[3,2,6],[0,4,5]].map(e=>{const t=Xa([],Ha([],Qa([],o[e[0]],o[e[1]]),Qa([],o[e[2]],o[e[1]]))),i=-Wa(t,o[e[1]]);return t.concat(i)});return new sl(o,s)}}class al{constructor(e,t){this.min=e,this.max=t,this.center=qa([],Va([],this.min,this.max),.5)}quadrant(e){const t=[e%2==0,e<2],i=Fa(this.min),r=Fa(this.max);for(let n=0;n=0;if(0===o)return 0;o!==t.length&&(i=!1)}if(i)return 2;for(let r=0;r<3;r++){let t=Number.MAX_VALUE,i=-Number.MAX_VALUE;for(let n=0;nthis.max[r]-this.min[r])return 0}return 1}}function ll(e,t,i,r,n,o,s,a,l){if(o&&e.queryGeometry.isAboveHorizon)return!1;o&&(l*=e.pixelToTileUnitsFactor);for(const c of t)for(const t of c){const c=t.add(a),h=n&&i.elevation?i.elevation.exaggeration()*n.getElevationAt(c.x,c.y,!0):0,u=o?c:cl(c,h,r),p=o?e.tilespaceRays.map(e=>pl(e,h)):e.queryGeometry.screenGeometry,d=il([],[t.x,t.y,h,1],r);if(!s&&o?l*=d[3]/i.cameraToCenterDistance:s&&!o&&(l*=i.cameraToCenterDistance/d[3]),ca(p,u,l))return!0}return!1}function cl(e,t,i){const r=il([],[e.x,e.y,t,1],i);return new n(r[0]/r[3],r[1]/r[3])}const hl=Ua(0,0,0),ul=Ua(0,0,1);function pl(e,t){const i=Ra();return hl[2]=t,e.intersectsPlane(hl,ul,i),new n(i[0],i[1])}class dl extends aa{}function fl(e,{width:t,height:i},r,n){if(n){if(n instanceof Uint8ClampedArray)n=new Uint8Array(n.buffer);else if(n.length!==t*i*r)throw new RangeError("mismatched image size")}else n=new Uint8Array(t*i*r);return e.width=t,e.height=i,e.data=n,e}function ml(e,t,i){const{width:r,height:n}=t;r===e.width&&n===e.height||(_l(e,t,{x:0,y:0},{x:0,y:0},{width:Math.min(e.width,r),height:Math.min(e.height,n)},i),e.width=r,e.height=n,e.data=t.data)}function _l(e,t,i,r,n,o){if(0===n.width||0===n.height)return t;if(n.width>e.width||n.height>e.height||i.x>e.width-n.width||i.y>e.height-n.height)throw new RangeError("out of range source coordinates for image copy");if(n.width>t.width||n.height>t.height||r.x>t.width-n.width||r.y>t.height-n.height)throw new RangeError("out of range destination coordinates for image copy");const s=e.data,a=t.data;for(let l=0;l{t[e.evaluationKey]=o;const s=e.expression.evaluate(t);n.data[i+r+0]=Math.floor(255*s.r/s.a),n.data[i+r+1]=Math.floor(255*s.g/s.a),n.data[i+r+2]=Math.floor(255*s.b/s.a),n.data[i+r+3]=Math.floor(255*s.a)};if(e.clips)for(let s=0,a=0;s80*i){r=o=e[0],n=s=e[1];for(var f=i;fo&&(o=a),l>s&&(s=l);c=0!==(c=Math.max(o-r,s-n))?1/c:0}return zl(p,d,i,r,n,c),d}function Ml(e,t,i,r,n){var o,s;if(n===Kl(e,t,i,r)>0)for(o=t;o=t;o-=r)s=Wl(o,e[o],e[o+1],s);return s&&jl(s,s.next)&&(Hl(s),s=s.next),s}function Al(e,t){if(!e)return e;t||(t=e);var i,r=e;do{if(i=!1,r.steiner||!jl(r,r.next)&&0!==Nl(r.prev,r,r.next))r=r.next;else{if(Hl(r),(r=t=r.prev)===r.next)break;i=!0}}while(i||r!==t);return t}function zl(e,t,i,r,n,o,s){if(e){!s&&o&&function(e,t,i,r){var n=e;do{null===n.z&&(n.z=Fl(n.x,n.y,t,i,r)),n.prevZ=n.prev,n.nextZ=n.next,n=n.next}while(n!==e);n.prevZ.nextZ=null,n.prevZ=null,function(e){var t,i,r,n,o,s,a,l,c=1;do{for(i=e,e=null,o=null,s=0;i;){for(s++,r=i,a=0,t=0;t0||l>0&&r;)0!==a&&(0===l||!r||i.z<=r.z)?(n=i,i=i.nextZ,a--):(n=r,r=r.nextZ,l--),o?o.nextZ=n:e=n,n.prevZ=o,o=n;i=r}o.nextZ=null,c*=2}while(s>1)}(n)}(e,r,n,o);for(var a,l,c=e;e.prev!==e.next;)if(a=e.prev,l=e.next,o?kl(e,r,n,o):Cl(e))t.push(a.i/i),t.push(e.i/i),t.push(l.i/i),Hl(e),e=l.next,c=l.next;else if((e=l)===c){s?1===s?zl(e=Dl(Al(e),t,i),t,i,r,n,o,2):2===s&&Pl(e,t,i,r,n,o):zl(Al(e),t,i,r,n,o,1);break}}}function Cl(e){var t=e.prev,i=e,r=e.next;if(Nl(t,i,r)>=0)return!1;for(var n=e.next.next;n!==e.prev;){if(Ul(t.x,t.y,i.x,i.y,r.x,r.y,n.x,n.y)&&Nl(n.prev,n,n.next)>=0)return!1;n=n.next}return!0}function kl(e,t,i,r){var n=e.prev,o=e,s=e.next;if(Nl(n,o,s)>=0)return!1;for(var a=n.x>o.x?n.x>s.x?n.x:s.x:o.x>s.x?o.x:s.x,l=n.y>o.y?n.y>s.y?n.y:s.y:o.y>s.y?o.y:s.y,c=Fl(n.x=c&&p&&p.z<=h;){if(u!==e.prev&&u!==e.next&&Ul(n.x,n.y,o.x,o.y,s.x,s.y,u.x,u.y)&&Nl(u.prev,u,u.next)>=0)return!1;if(u=u.prevZ,p!==e.prev&&p!==e.next&&Ul(n.x,n.y,o.x,o.y,s.x,s.y,p.x,p.y)&&Nl(p.prev,p,p.next)>=0)return!1;p=p.nextZ}for(;u&&u.z>=c;){if(u!==e.prev&&u!==e.next&&Ul(n.x,n.y,o.x,o.y,s.x,s.y,u.x,u.y)&&Nl(u.prev,u,u.next)>=0)return!1;u=u.prevZ}for(;p&&p.z<=h;){if(p!==e.prev&&p!==e.next&&Ul(n.x,n.y,o.x,o.y,s.x,s.y,p.x,p.y)&&Nl(p.prev,p,p.next)>=0)return!1;p=p.nextZ}return!0}function Dl(e,t,i){var r=e;do{var n=r.prev,o=r.next.next;!jl(n,o)&&Gl(n,r,r.next,o)&&$l(n,o)&&$l(o,n)&&(t.push(n.i/i),t.push(r.i/i),t.push(o.i/i),Hl(r),Hl(r.next),r=e=o),r=r.next}while(r!==e);return Al(r)}function Pl(e,t,i,r,n,o){var s=e;do{for(var a=s.next.next;a!==s.prev;){if(s.i!==a.i&&Vl(s,a)){var l=Xl(s,a);return s=Al(s,s.next),l=Al(l,l.next),zl(s,t,i,r,n,o),void zl(l,t,i,r,n,o)}a=a.next}s=s.next}while(s!==e)}function Ll(e,t){return e.x-t.x}function Bl(e,t){var i=function(e,t){var i,r=t,n=e.x,o=e.y,s=-1/0;do{if(o<=r.y&&o>=r.next.y&&r.next.y!==r.y){var a=r.x+(o-r.y)*(r.next.x-r.x)/(r.next.y-r.y);if(a<=n&&a>s){if(s=a,a===n){if(o===r.y)return r;if(o===r.next.y)return r.next}i=r.x=r.x&&r.x>=h&&n!==r.x&&Ul(oi.x||r.x===i.x&&Rl(i,r)))&&(i=r,p=l)),r=r.next}while(r!==c);return i}(e,t);if(!i)return t;var r=Xl(i,e),n=Al(i,i.next);return Al(r,r.next),t===i?n:t}function Rl(e,t){return Nl(e.prev,e,t.prev)<0&&Nl(t.next,e,e.next)<0}function Fl(e,t,i,r,n){return(e=1431655765&((e=858993459&((e=252645135&((e=16711935&((e=32767*(e-i)*n)|e<<8))|e<<4))|e<<2))|e<<1))|(t=1431655765&((t=858993459&((t=252645135&((t=16711935&((t=32767*(t-r)*n)|t<<8))|t<<4))|t<<2))|t<<1))<<1}function Ol(e){var t=e,i=e;do{(t.x=0&&(e-s)*(r-a)-(i-s)*(t-a)>=0&&(i-s)*(o-a)-(n-s)*(r-a)>=0}function Vl(e,t){return e.next.i!==t.i&&e.prev.i!==t.i&&!function(e,t){var i=e;do{if(i.i!==e.i&&i.next.i!==e.i&&i.i!==t.i&&i.next.i!==t.i&&Gl(i,i.next,e,t))return!0;i=i.next}while(i!==e);return!1}(e,t)&&($l(e,t)&&$l(t,e)&&function(e,t){var i=e,r=!1,n=(e.x+t.x)/2,o=(e.y+t.y)/2;do{i.y>o!=i.next.y>o&&i.next.y!==i.y&&n<(i.next.x-i.x)*(o-i.y)/(i.next.y-i.y)+i.x&&(r=!r),i=i.next}while(i!==e);return r}(e,t)&&(Nl(e.prev,e,t.prev)||Nl(e,t.prev,t))||jl(e,t)&&Nl(e.prev,e,e.next)>0&&Nl(t.prev,t,t.next)>0)}function Nl(e,t,i){return(t.y-e.y)*(i.x-t.x)-(t.x-e.x)*(i.y-t.y)}function jl(e,t){return e.x===t.x&&e.y===t.y}function Gl(e,t,i,r){var n=ql(Nl(e,t,i)),o=ql(Nl(e,t,r)),s=ql(Nl(i,r,e)),a=ql(Nl(i,r,t));return n!==o&&s!==a||!(0!==n||!Zl(e,i,t))||!(0!==o||!Zl(e,r,t))||!(0!==s||!Zl(i,e,r))||!(0!==a||!Zl(i,t,r))}function Zl(e,t,i){return t.x<=Math.max(e.x,i.x)&&t.x>=Math.min(e.x,i.x)&&t.y<=Math.max(e.y,i.y)&&t.y>=Math.min(e.y,i.y)}function ql(e){return e>0?1:e<0?-1:0}function $l(e,t){return Nl(e.prev,e,e.next)<0?Nl(e,t,e.next)>=0&&Nl(e,e.prev,t)>=0:Nl(e,t,e.prev)<0||Nl(e,e.next,t)<0}function Xl(e,t){var i=new Yl(e.i,e.x,e.y),r=new Yl(t.i,t.x,t.y),n=e.next,o=t.prev;return e.next=t,t.prev=e,i.next=n,n.prev=i,r.next=i,i.prev=r,o.next=r,r.prev=o,r}function Wl(e,t,i,r){var n=new Yl(e,t,i);return r?(n.next=r.next,n.prev=r,r.next.prev=n,r.next=n):(n.prev=n,n.next=n),n}function Hl(e){e.next.prev=e.prev,e.prev.next=e.next,e.prevZ&&(e.prevZ.nextZ=e.nextZ),e.nextZ&&(e.nextZ.prevZ=e.prevZ)}function Yl(e,t,i){this.i=e,this.x=t,this.y=i,this.prev=null,this.next=null,this.z=null,this.prevZ=null,this.nextZ=null,this.steiner=!1}function Kl(e,t,i,r){for(var n=0,o=t,s=i-r;or;){if(n-r>600){var s=n-r+1,a=i-r+1,l=Math.log(s),c=.5*Math.exp(2*l/3),h=.5*Math.sqrt(l*c*(s-c)/s)*(a-s/2<0?-1:1);e(t,i,Math.max(r,Math.floor(i-a*c/s+h)),Math.min(n,Math.floor(i+(s-a)*c/s+h)),o)}var u=t[i],p=r,d=n;for(Ql(t,r,i),o(t[n],u)>0&&Ql(t,r,n);p0;)d--}0===o(t[r],u)?Ql(t,r,d):Ql(t,++d,n),d<=i&&(r=d+1),i<=d&&(n=d-1)}}(e,t,i||0,r||e.length-1,n||ec)}function Ql(e,t,i){var r=e[t];e[t]=e[i],e[i]=r}function ec(e,t){return et?1:0}function tc(e,t){const i=e.length;if(i<=1)return[e];const r=[];let n,o;for(let s=0;s1)for(let s=0;s0&&i.holes.push(r+=e[n-1].length)}return i},El.default=Sl;class oc{constructor(e){this.zoom=e.zoom,this.overscaling=e.overscaling,this.layers=e.layers,this.layerIds=this.layers.map(e=>e.id),this.index=e.index,this.hasPattern=!1,this.patternFeatures=[],this.layoutVertexArray=new _o,this.indexArray=new Co,this.indexArray2=new Fo,this.programConfigurations=new Ms(e.layers,e.zoom),this.segments=new Fs,this.segments2=new Fs,this.stateDependentLayerIds=this.layers.filter(e=>e.isStateDependent()).map(e=>e.id),this.projection=e.projection}populate(e,t,i,r){this.hasPattern=rc("fill",this.layers,t);const n=this.layers[0].layout.get("fill-sort-key"),o=[];for(const{feature:s,id:a,index:l,sourceLayerIndex:c}of e){const e=this.layers[0]._featureFilter.needGeometry,h=na(s,e);if(!this.layers[0]._featureFilter.filter(new Wn(this.zoom),h,i))continue;const u=n?n.evaluate(h,{},i,t.availableImages):void 0,p={id:a,properties:s.properties,type:s.type,sourceLayerIndex:c,index:l,geometry:e?h.geometry:ra(s,i,r),patterns:{},sortKey:u};o.push(p)}n&&o.sort((e,t)=>e.sortKey-t.sortKey);for(const s of o){const{geometry:r,index:n,sourceLayerIndex:o}=s;if(this.hasPattern){const e=nc("fill",this.layers,s,this.zoom,t);this.patternFeatures.push(e)}else this.addFeature(s,r,n,i,{},t.availableImages);t.featureIndex.insert(e[n].feature,r,n,o,this.index)}}update(e,t,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(e,t,this.stateDependentLayers,i,r)}addFeatures(e,t,i,r,n){for(const o of this.patternFeatures)this.addFeature(o,o.geometry,o.index,t,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(e){this.uploaded||(this.layoutVertexBuffer=e.createVertexBuffer(this.layoutVertexArray,Tl),this.indexBuffer=e.createIndexBuffer(this.indexArray),this.indexBuffer2=e.createIndexBuffer(this.indexArray2)),this.programConfigurations.upload(e),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.indexBuffer2.destroy(),this.programConfigurations.destroy(),this.segments.destroy(),this.segments2.destroy())}addFeature(e,t,i,r,n,o=[]){for(const s of tc(t,500)){let e=0;for(const a of s)e+=a.length;const t=this.segments.prepareSegment(e,this.layoutVertexArray,this.indexArray),i=t.vertexLength,r=[],n=[];for(const a of s){if(0===a.length)continue;a!==s[0]&&n.push(r.length/2);const e=this.segments2.prepareSegment(a.length,this.layoutVertexArray,this.indexArray2),t=e.vertexLength;this.layoutVertexArray.emplaceBack(a[0].x,a[0].y),this.indexArray2.emplaceBack(t+a.length-1,t),r.push(a[0].x),r.push(a[0].y);for(let i=1;i>3}if(o--,1===r||2===r)s+=e.readSVarint(),a+=e.readSVarint(),1===r&&(t&&l.push(t),t=[]),t.push(new n(s,a));else{if(7!==r)throw new Error("unknown command "+r);t&&t.push(t[0].clone())}}return t&&l.push(t),l},dc.prototype.bbox=function(){var e=this._pbf;e.pos=this._geometry;for(var t=e.readVarint()+e.pos,i=1,r=0,n=0,o=0,s=1/0,a=-1/0,l=1/0,c=-1/0;e.pos>3}if(r--,1===i||2===i)(n+=e.readSVarint())a&&(a=n),(o+=e.readSVarint())c&&(c=o);else if(7!==i)throw new Error("unknown command "+i)}return[s,l,a,c]},dc.prototype.toGeoJSON=function(e,t,i){var r,n,o=this.extent*Math.pow(2,i),s=this.extent*e,a=this.extent*t,l=this.loadGeometry(),c=dc.types[this.type];function h(e){for(var t=0;t>3;t=1===r?e.readString():2===r?e.readFloat():3===r?e.readDouble():4===r?e.readVarint64():5===r?e.readVarint():6===r?e.readSVarint():7===r?e.readBoolean():null}return t}(i))}function xc(e,t,i){if(3===e){var r=new _c(i,i.readVarint()+i.pos);r.length&&(t[r.name]=r)}}gc.prototype.feature=function(e){if(e<0||e>=this._features.length)throw new Error("feature index out of bounds");this._pbf.pos=this._features[e];var t=this._pbf.readVarint()+this._pbf.pos;return new pc(this._pbf,t,this.extent,this._keys,this._values)};var vc={VectorTile:function(e,t){this.layers=e.readFields(xc,{},t)},VectorTileFeature:pc,VectorTileLayer:_c};function bc(e,t,i,r){const o=[],s=0===r?(e,t,i,r,o,s)=>{e.push(new n(s,i+(s-t)/(r-t)*(o-i)))}:(e,t,i,r,o,s)=>{e.push(new n(t+(s-i)/(o-i)*(r-t),s))};for(const n of e){const e=[];for(const o of n){if(o.length<=2)continue;const n=[];for(let e=0;et&&s(n,a,l,c,h,t):u>i?p=t&&s(n,a,l,c,h,t),p>i&&u<=i&&s(n,a,l,c,h,i)}let a=o[o.length-1];const l=0===r?a.x:a.y;l>=t&&l<=i&&n.push(a),n.length&&(a=n[n.length-1],n[0].x===a.x&&n[0].y===a.y||n.push(n[0]),e.push(n))}e.length&&o.push(e)}return o}const wc=vc.VectorTileFeature.types,Tc=Math.pow(2,13);function Ec(e,t,i,r,n,o,s,a){e.emplaceBack((t<<1)+s,(i<<1)+o,(Math.floor(r*Tc)<<1)+n,Math.round(a))}function Sc(e,t,i){const r=16384;e.emplaceBack(t.x,t.y,t.z,i[0]*r,i[1]*r,i[2]*r)}class Ic{constructor(){this.acc=new n(0,0),this.polyCount=[]}startRing(e){this.currentPolyCount={edges:0,top:0},this.polyCount.push(this.currentPolyCount),this.min||(this.min=new n(e.x,e.y),this.max=new n(e.x,e.y))}append(e,t){this.currentPolyCount.edges++,this.acc._add(e);const i=this.min,r=this.max;e.xr.x&&(r.x=e.x),e.yr.y&&(r.y=e.y),((0===e.x||e.x===Os)&&e.x===t.x)!=((0===e.y||e.y===Os)&&e.y===t.y)&&this.processBorderOverlap(e,t),t.x<0!=e.x<0&&this.addBorderIntersection(0,ti(t.y,e.y,(0-t.x)/(e.x-t.x))),t.x>Os!=e.x>Os&&this.addBorderIntersection(1,ti(t.y,e.y,(Os-t.x)/(e.x-t.x))),t.y<0!=e.y<0&&this.addBorderIntersection(2,ti(t.x,e.x,(0-t.y)/(e.y-t.y))),t.y>Os!=e.y>Os&&this.addBorderIntersection(3,ti(t.x,e.x,(Os-t.y)/(e.y-t.y)))}addBorderIntersection(e,t){this.borders||(this.borders=[[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE]]);const i=this.borders[e];ti[1]&&(i[1]=t)}processBorderOverlap(e,t){if(e.x===t.x){if(e.y===t.y)return;const i=0===e.x?0:1;this.addBorderIntersection(i,t.y),this.addBorderIntersection(i,e.y)}else{const i=0===e.y?2:3;this.addBorderIntersection(i,t.x),this.addBorderIntersection(i,e.x)}}centroid(){const e=this.polyCount.reduce((e,t)=>e+t.edges,0);return 0!==e?this.acc.div(e)._round():new n(0,0)}span(){return new n(this.max.x-this.min.x,this.max.y-this.min.y)}intersectsCount(){return this.borders.reduce((e,t)=>e+ +(t[0]!==Number.MAX_VALUE),0)}}class Mc{constructor(e){this.zoom=e.zoom,this.canonical=e.canonical,this.overscaling=e.overscaling,this.layers=e.layers,this.layerIds=this.layers.map(e=>e.id),this.index=e.index,this.hasPattern=!1,this.projection=e.projection,this.layoutVertexArray=new yo,this.centroidVertexArray=new ts,this.indexArray=new Co,this.programConfigurations=new Ms(e.layers,e.zoom),this.segments=new Fs,this.stateDependentLayerIds=this.layers.filter(e=>e.isStateDependent()).map(e=>e.id),this.enableTerrain=e.enableTerrain}populate(e,t,i,r){this.features=[],this.hasPattern=rc("fill-extrusion",this.layers,t),this.featuresOnBorder=[],this.borders=[[],[],[],[]],this.borderDoneWithNeighborZ=[-1,-1,-1,-1],this.tileToMeter=function(e){const t=Math.exp(Math.PI*(1-e.y/(1<=0;n--){const e=p[n];(0===e.length||(d=e[0]).every(e=>e.x<=0)||d.every(e=>e.x>=Os)||d.every(e=>e.y<=0)||d.every(e=>e.y>=Os))&&p.splice(n,1)}var d;let f;if(h){const e=11.25,t=1<{for(const i of e)a.push({polygon:i,bounds:t})},c=Math.ceil(Math.log2(i)),h=Math.ceil(Math.log2(r)),u=c-h,p=[];for(let n=0;n0?0:1);for(let n=0;nt+1?f.push({polygons:d,bounds:e,depth:t+1}):l(d,e)}if(m.length){const e=[new n(0===i?u:r.x,1===i?u:r.y),a];p.length>t+1?f.push({polygons:m,bounds:e,depth:t+1}):l(m,e)}}return a}(p,l,Math.ceil((o-i)/e),Math.ceil((s-a)/e),1,(e,i,n)=>{if(0===e)return.5*(i+n);{const e=Ws((r.y+i/Os)/t);return(qs(.5*(Ws((r.y+n/Os)/t)+e))*t-r.y)*Os}})}else{f=[];for(const e of p)f.push({polygon:e,bounds:l})}for(const n of f){const t=n.polygon;let i=0,o=this.segments.prepareSegment(4,this.layoutVertexArray,this.indexArray);for(let e=0;e=1){const i=s[e-1];if(!Ac(t,i,n.bounds)){u&&u.append(t,i),o.vertexLength+4>Fs.MAX_VERTEX_ARRAY_LENGTH&&(o=this.segments.prepareSegment(4,this.layoutVertexArray,this.indexArray));const e=t.sub(i)._perp(),n=e.x/(Math.abs(e.x)+Math.abs(e.y)),s=e.y>0?1:0,l=i.dist(t);a+l>32768&&(a=0),Ec(this.layoutVertexArray,t.x,t.y,n,s,0,0,a),Ec(this.layoutVertexArray,t.x,t.y,n,s,0,1,a),a+=l,Ec(this.layoutVertexArray,i.x,i.y,n,s,0,0,a),Ec(this.layoutVertexArray,i.x,i.y,n,s,0,1,a);const p=o.vertexLength;if(this.indexArray.emplaceBack(p,p+2,p+1),this.indexArray.emplaceBack(p+1,p+2,p+3),o.vertexLength+=4,o.primitiveLength+=2,h){const e=this.layoutVertexExtArray,n=c.projectTilePoint(t.x,t.y,r),o=c.projectTilePoint(i.x,i.y,r),s=c.upVector(r,t.x,t.y),a=c.upVector(r,i.x,i.y);Sc(e,n,s),Sc(e,n,s),Sc(e,o,a),Sc(e,o,a)}}}}}if(o.vertexLength+i>Fs.MAX_VERTEX_ARRAY_LENGTH&&(o=this.segments.prepareSegment(i,this.layoutVertexArray,this.indexArray)),"Polygon"!==wc[e.type])continue;const s=[],a=[],l=o.vertexLength;for(let e=0;e0){if(u.borders){u.vertexArrayOffset=this.centroidVertexArray.length;const e=u.borders,t=this.featuresOnBorder.push(u)-1;for(let i=0;i<4;i++)e[i][0]!==Number.MAX_VALUE&&this.borders[i].push(t)}this.encodeCentroid(u.borders?void 0:u.centroid(),u)}this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length,e,i,o,s,r)}sortBorders(){for(let e=0;e<4;e++)this.borders[e].sort((t,i)=>this.featuresOnBorder[t].borders[e][0]-this.featuresOnBorder[i].borders[e][0])}encodeCentroid(e,t,i=!0){let r,n;if(e)if(0!==e.y){const i=t.span()._mult(this.tileToMeter);r=(Math.max(e.x,1)<<3)+Math.min(7,Math.round(i.x/10)),n=(Math.max(e.y,1)<<3)+Math.min(7,Math.round(i.y/10))}else r=Math.ceil(7*(e.x+450)),n=0;else r=0,n=+i;let o=i?this.centroidVertexArray.length:t.vertexArrayOffset;for(const s of t.polyCount){i&&this.centroidVertexArray.resize(this.centroidVertexArray.length+4*s.edges+s.top);for(let e=0;e<2*s.edges;e++)this.centroidVertexArray.emplace(o++,0,n),this.centroidVertexArray.emplace(o++,r,n);for(let e=0;ei[1].x)||e.y===t.y&&(e.yi[1].y)}Wr(Mc,{omit:["layers","features"]}),Wr(Ic);var zc={paint:new lo({"fill-extrusion-opacity":new ro(Ve["paint_fill-extrusion"]["fill-extrusion-opacity"]),"fill-extrusion-color":new no(Ve["paint_fill-extrusion"]["fill-extrusion-color"]),"fill-extrusion-translate":new ro(Ve["paint_fill-extrusion"]["fill-extrusion-translate"]),"fill-extrusion-translate-anchor":new ro(Ve["paint_fill-extrusion"]["fill-extrusion-translate-anchor"]),"fill-extrusion-pattern":new oo(Ve["paint_fill-extrusion"]["fill-extrusion-pattern"]),"fill-extrusion-height":new no(Ve["paint_fill-extrusion"]["fill-extrusion-height"]),"fill-extrusion-base":new no(Ve["paint_fill-extrusion"]["fill-extrusion-base"]),"fill-extrusion-vertical-gradient":new ro(Ve["paint_fill-extrusion"]["fill-extrusion-vertical-gradient"])})};function Cc(e,t){return e.x*t.x+e.y*t.y}function kc(e,t){if(1===e.length){let i=0;const r=t[i++];let n;for(;!n||r.equals(n);)if(n=t[i++],!n)return 1/0;for(;ie.id),this.index=e.index,this.projection=e.projection,this.hasPattern=!1,this.patternFeatures=[],this.lineClipsArray=[],this.gradients={},this.layers.forEach(e=>{this.gradients[e.id]={}}),this.layoutVertexArray=new xo,this.layoutVertexArray2=new vo,this.indexArray=new Co,this.programConfigurations=new Ms(e.layers,e.zoom),this.segments=new Fs,this.maxLineLength=0,this.stateDependentLayerIds=this.layers.filter(e=>e.isStateDependent()).map(e=>e.id)}populate(e,t,i,r){this.hasPattern=rc("line",this.layers,t);const n=this.layers[0].layout.get("line-sort-key"),o=[];for(const{feature:c,id:h,index:u,sourceLayerIndex:p}of e){const e=this.layers[0]._featureFilter.needGeometry,t=na(c,e);if(!this.layers[0]._featureFilter.filter(new Wn(this.zoom),t,i))continue;const s=n?n.evaluate(t,{},i):void 0,a={id:h,properties:c.properties,type:c.type,sourceLayerIndex:p,index:u,geometry:e?t.geometry:ra(c,i,r),patterns:{},sortKey:s};o.push(a)}n&&o.sort((e,t)=>e.sortKey-t.sortKey);const{lineAtlas:s,featureIndex:a}=t,l=this.addConstantDashes(s);for(const c of o){const{geometry:r,index:n,sourceLayerIndex:o}=c;if(l&&this.addFeatureDashes(c,s),this.hasPattern){const e=nc("line",this.layers,c,this.zoom,t);this.patternFeatures.push(e)}else this.addFeature(c,r,n,i,s.positions,t.availableImages);a.insert(e[n].feature,r,n,o,this.index)}}addConstantDashes(e){let t=!1;for(const i of this.layers){const r=i.paint.get("line-dasharray").value,n=i.layout.get("line-cap").value;if("constant"!==r.kind||"constant"!==n.kind)t=!0;else{const t=n.value,i=r.value;if(!i)continue;e.addDash(i.from,t),e.addDash(i.to,t),i.other&&e.addDash(i.other,t)}}return t}addFeatureDashes(e,t){const i=this.zoom;for(const r of this.layers){const n=r.paint.get("line-dasharray").value,o=r.layout.get("line-cap").value;if("constant"===n.kind&&"constant"===o.kind)continue;let s,a,l,c,h,u;if("constant"===n.kind){const e=n.value;if(!e)continue;s=e.other||e.to,a=e.to,l=e.from}else s=n.evaluate({zoom:i-1},e),a=n.evaluate({zoom:i},e),l=n.evaluate({zoom:i+1},e);"constant"===o.kind?c=h=u=o.value:(c=o.evaluate({zoom:i-1},e),h=o.evaluate({zoom:i},e),u=o.evaluate({zoom:i+1},e)),t.addDash(s,c),t.addDash(a,h),t.addDash(l,u);const p=t.getKey(s,c),d=t.getKey(a,h),f=t.getKey(l,u);e.patterns[r.id]={min:p,mid:d,max:f}}}update(e,t,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(e,t,this.stateDependentLayers,i,r)}addFeatures(e,t,i,r,n){for(const o of this.patternFeatures)this.addFeature(o,o.geometry,o.index,t,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(e){this.uploaded||(0!==this.layoutVertexArray2.length&&(this.layoutVertexBuffer2=e.createVertexBuffer(this.layoutVertexArray2,Fc)),this.layoutVertexBuffer=e.createVertexBuffer(this.layoutVertexArray,Bc),this.indexBuffer=e.createIndexBuffer(this.indexArray)),this.programConfigurations.upload(e),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.programConfigurations.destroy(),this.segments.destroy())}lineFeatureClips(e){if(e.properties&&e.properties.hasOwnProperty("mapbox_clip_start")&&e.properties.hasOwnProperty("mapbox_clip_end"))return{start:+e.properties.mapbox_clip_start,end:+e.properties.mapbox_clip_end}}addFeature(e,t,i,r,n,o){const s=this.layers[0].layout,a=s.get("line-join").evaluate(e,{}),l=s.get("line-cap").evaluate(e,{}),c=s.get("line-miter-limit"),h=s.get("line-round-limit");this.lineClips=this.lineFeatureClips(e);for(const u of t)this.addLine(u,e,a,l,c,h);this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length,e,i,n,o,r)}addLine(e,t,i,r,n,o){if(this.distance=0,this.scaledDistance=0,this.totalDistance=0,this.lineSoFar=0,this.lineClips){this.lineClipsArray.push(this.lineClips);for(let t=0;t=2&&e[a-1].equals(e[a-2]);)a--;let l=0;for(;l0;if(b&&_>l){const e=u.dist(p);if(e>2*c){const t=u.sub(u.sub(p)._mult(c/e)._round());this.updateDistance(p,t),this.addCurrentVertex(t,f,0,0,h),p=t}}const T=p&&d;let E=T?i:s?"butt":r;if(T&&"round"===E&&(xn&&(E="bevel"),"bevel"===E&&(x>2&&(E="flipbevel"),x100)t=m.mult(-1);else{const e=x*f.add(m).mag()/f.sub(m).mag();t._perp()._mult(e*(w?-1:1))}this.addCurrentVertex(u,t,0,0,h),this.addCurrentVertex(u,t.mult(-1),0,0,h)}else if("bevel"===E||"fakeround"===E){const e=-Math.sqrt(x*x-1),t=w?e:0,i=w?0:e;if(p&&this.addCurrentVertex(u,f,t,i,h),"fakeround"===E){const e=Math.round(180*v/Math.PI/20);for(let t=1;t2*c){const t=u.add(d.sub(u)._mult(c/e)._round());this.updateDistance(u,t),this.addCurrentVertex(t,m,0,0,h),u=t}}}}addCurrentVertex(e,t,i,r,n,o=!1){const s=t.y*r-t.x,a=-t.y-t.x*r;this.addHalfVertex(e,t.x+t.y*i,t.y-t.x*i,o,!1,i,n),this.addHalfVertex(e,s,a,o,!0,-r,n)}addHalfVertex({x:e,y:t},i,r,n,o,s,a){this.layoutVertexArray.emplaceBack((e<<1)+(n?1:0),(t<<1)+(o?1:0),Math.round(63*i)+128,Math.round(63*r)+128,1+(0===s?0:s<0?-1:1),0,this.lineSoFar),this.lineClips&&this.layoutVertexArray2.emplaceBack(this.scaledDistance,this.lineClipsArray.length,this.lineSoFar);const l=a.vertexLength++;this.e1>=0&&this.e2>=0&&(this.indexArray.emplaceBack(this.e1,this.e2,l),a.primitiveLength++),o?this.e2=l:this.e1=l}updateScaledDistance(){if(this.lineClips){const e=this.totalDistance/(this.lineClips.end-this.lineClips.start);this.scaledDistance=this.distance/this.totalDistance,this.lineSoFar=e*this.lineClips.start+this.distance}else this.lineSoFar=this.distance}updateDistance(e,t){this.distance+=e.dist(t),this.updateScaledDistance()}}Wr(Vc,{omit:["layers","patternFeatures"]});const Nc=new lo({"line-cap":new no(Ve.layout_line["line-cap"]),"line-join":new no(Ve.layout_line["line-join"]),"line-miter-limit":new ro(Ve.layout_line["line-miter-limit"]),"line-round-limit":new ro(Ve.layout_line["line-round-limit"]),"line-sort-key":new no(Ve.layout_line["line-sort-key"])});var jc={paint:new lo({"line-opacity":new no(Ve.paint_line["line-opacity"]),"line-color":new no(Ve.paint_line["line-color"]),"line-translate":new ro(Ve.paint_line["line-translate"]),"line-translate-anchor":new ro(Ve.paint_line["line-translate-anchor"]),"line-width":new no(Ve.paint_line["line-width"]),"line-gap-width":new no(Ve.paint_line["line-gap-width"]),"line-offset":new no(Ve.paint_line["line-offset"]),"line-blur":new no(Ve.paint_line["line-blur"]),"line-dasharray":new oo(Ve.paint_line["line-dasharray"]),"line-pattern":new oo(Ve.paint_line["line-pattern"]),"line-gradient":new ao(Ve.paint_line["line-gradient"])}),layout:Nc};const Gc=new class extends no{possiblyEvaluate(e,t){return t=new Wn(Math.floor(t.zoom),{now:t.now,fadeDuration:t.fadeDuration,zoomHistory:t.zoomHistory,transition:t.transition}),super.possiblyEvaluate(e,t)}evaluate(e,t,i,r){return t=v({},t,{zoom:Math.floor(t.zoom)}),super.evaluate(e,t,i,r)}}(jc.paint.properties["line-width"].specification);function Zc(e,t){return t>0?t+2*e:e}Gc.useIntegerZoom=!0;const qc=fo([{name:"a_pos_offset",components:4,type:"Int16"},{name:"a_tex_size",components:4,type:"Uint16"},{name:"a_pixeloffset",components:4,type:"Int16"},{name:"a_z_tile_anchor",components:4,type:"Int16"}],4),$c=fo([{name:"a_projected_pos",components:3,type:"Float32"}],4);fo([{name:"a_fade_opacity",components:1,type:"Uint32"}],4);const Xc=fo([{name:"a_placed",components:2,type:"Uint8"},{name:"a_shift",components:2,type:"Float32"}]),Wc=fo([{name:"a_size_scale",components:1,type:"Float32"},{name:"a_padding",components:2,type:"Float32"}]);fo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Int16",name:"tileAnchorX"},{type:"Int16",name:"tileAnchorY"},{type:"Float32",name:"x1"},{type:"Float32",name:"y1"},{type:"Float32",name:"x2"},{type:"Float32",name:"y2"},{type:"Int16",name:"padding"},{type:"Uint32",name:"featureIndex"},{type:"Uint16",name:"sourceLayerIndex"},{type:"Uint16",name:"bucketIndex"}]);const Hc=fo([{name:"a_pos",components:3,type:"Int16"},{name:"a_anchor_pos",components:2,type:"Int16"},{name:"a_extrude",components:2,type:"Int16"}],4),Yc=fo([{name:"a_pos_2f",components:2,type:"Float32"},{name:"a_radius",components:1,type:"Float32"},{name:"a_flags",components:2,type:"Int16"}],4);fo([{name:"triangle",components:3,type:"Uint16"}]),fo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Float32",name:"tileAnchorX"},{type:"Float32",name:"tileAnchorY"},{type:"Uint16",name:"glyphStartIndex"},{type:"Uint16",name:"numGlyphs"},{type:"Uint32",name:"vertexStartIndex"},{type:"Uint32",name:"lineStartIndex"},{type:"Uint32",name:"lineLength"},{type:"Uint16",name:"segment"},{type:"Uint16",name:"lowerSize"},{type:"Uint16",name:"upperSize"},{type:"Float32",name:"lineOffsetX"},{type:"Float32",name:"lineOffsetY"},{type:"Uint8",name:"writingMode"},{type:"Uint8",name:"placedOrientation"},{type:"Uint8",name:"hidden"},{type:"Uint32",name:"crossTileID"},{type:"Int16",name:"associatedIconIndex"},{type:"Uint8",name:"flipState"}]),fo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Float32",name:"tileAnchorX"},{type:"Float32",name:"tileAnchorY"},{type:"Int16",name:"rightJustifiedTextSymbolIndex"},{type:"Int16",name:"centerJustifiedTextSymbolIndex"},{type:"Int16",name:"leftJustifiedTextSymbolIndex"},{type:"Int16",name:"verticalPlacedTextSymbolIndex"},{type:"Int16",name:"placedIconSymbolIndex"},{type:"Int16",name:"verticalPlacedIconSymbolIndex"},{type:"Uint16",name:"key"},{type:"Uint16",name:"textBoxStartIndex"},{type:"Uint16",name:"textBoxEndIndex"},{type:"Uint16",name:"verticalTextBoxStartIndex"},{type:"Uint16",name:"verticalTextBoxEndIndex"},{type:"Uint16",name:"iconBoxStartIndex"},{type:"Uint16",name:"iconBoxEndIndex"},{type:"Uint16",name:"verticalIconBoxStartIndex"},{type:"Uint16",name:"verticalIconBoxEndIndex"},{type:"Uint16",name:"featureIndex"},{type:"Uint16",name:"numHorizontalGlyphVertices"},{type:"Uint16",name:"numVerticalGlyphVertices"},{type:"Uint16",name:"numIconVertices"},{type:"Uint16",name:"numVerticalIconVertices"},{type:"Uint16",name:"useRuntimeCollisionCircles"},{type:"Uint32",name:"crossTileID"},{type:"Float32",components:2,name:"textOffset"},{type:"Float32",name:"collisionCircleDiameter"}]),fo([{type:"Float32",name:"offsetX"}]),fo([{type:"Int16",name:"x"},{type:"Int16",name:"y"},{type:"Int16",name:"tileUnitDistanceFromAnchor"}]);const Kc=128;function Jc(e,t){const{expression:i}=t;if("constant"===i.kind)return{kind:"constant",layoutSize:i.evaluate(new Wn(e+1))};if("source"===i.kind)return{kind:"source"};{const{zoomStops:t,interpolationType:r}=i;let n=0;for(;n{e.text=function(e,t,i){const r=t.layout.get("text-transform").evaluate(i,{});return"uppercase"===r?e=e.toLocaleUpperCase():"lowercase"===r&&(e=e.toLocaleLowerCase()),Xn.applyArabicShaping&&(e=Xn.applyArabicShaping(e)),e}(e.text,t,i)}),e}const rh={"!":"︕","#":"＃",$:"＄","%":"％","&":"＆","(":"︵",")":"︶","*":"＊","+":"＋",",":"︐","-":"︲",".":"・","/":"／",":":"︓",";":"︔","<":"︿","=":"＝",">":"﹀","?":"︖","@":"＠","[":"﹇","\\":"＼","]":"﹈","^":"＾",_:"︳","`":"｀","{":"︷","|":"―","}":"︸","~":"～","¢":"￠","£":"￡","¥":"￥","¦":"￤","¬":"￢","¯":"￣","–":"︲","—":"︱","‘":"﹃","’":"﹄","“":"﹁","”":"﹂","…":"︙","‧":"・","₩":"￦","、":"︑","。":"︒","〈":"︿","〉":"﹀","《":"︽","》":"︾","「":"﹁","」":"﹂","『":"﹃","』":"﹄","【":"︻","】":"︼","〔":"︹","〕":"︺","〖":"︗","〗":"︘","！":"︕","（":"︵","）":"︶","，":"︐","－":"︲","．":"・","：":"︓","；":"︔","＜":"︿","＞":"﹀","？":"︖","［":"﹇","］":"﹈","＿":"︳","｛":"︷","｜":"―","｝":"︸","｟":"︵","｠":"︶","｡":"︒","｢":"﹁","｣":"﹂"};function nh(e){return"︶"===e||"﹈"===e||"︸"===e||"﹄"===e||"﹂"===e||"︾"===e||"︼"===e||"︺"===e||"︘"===e||"﹀"===e||"︐"===e||"︓"===e||"︔"===e||"｀"===e||"￣"===e||"︑"===e||"︒"===e}function oh(e){return"︵"===e||"﹇"===e||"︷"===e||"﹃"===e||"﹁"===e||"︽"===e||"︻"===e||"︹"===e||"︗"===e||"︿"===e}var sh=function(e,t,i,r,n){var o,s,a=8*n-r-1,l=(1<>1,h=-7,u=i?n-1:0,p=i?-1:1,d=e[t+u];for(u+=p,o=d&(1<<-h)-1,d>>=-h,h+=a;h>0;o=256*o+e[t+u],u+=p,h-=8);for(s=o&(1<<-h)-1,o>>=-h,h+=r;h>0;s=256*s+e[t+u],u+=p,h-=8);if(0===o)o=1-c;else{if(o===l)return s?NaN:1/0*(d?-1:1);s+=Math.pow(2,r),o-=c}return(d?-1:1)*s*Math.pow(2,o-r)},ah=function(e,t,i,r,n,o){var s,a,l,c=8*o-n-1,h=(1<>1,p=23===n?Math.pow(2,-24)-Math.pow(2,-77):0,d=r?0:o-1,f=r?1:-1,m=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(a=isNaN(t)?1:0,s=h):(s=Math.floor(Math.log(t)/Math.LN2),t*(l=Math.pow(2,-s))<1&&(s--,l*=2),(t+=s+u>=1?p/l:p*Math.pow(2,1-u))*l>=2&&(s++,l/=2),s+u>=h?(a=0,s=h):s+u>=1?(a=(t*l-1)*Math.pow(2,n),s+=u):(a=t*Math.pow(2,u-1)*Math.pow(2,n),s=0));n>=8;e[i+d]=255&a,d+=f,a/=256,n-=8);for(s=s<0;e[i+d]=255&s,d+=f,s/=256,c-=8);e[i+d-f]|=128*m},lh=ch;function ch(e){this.buf=ArrayBuffer.isView&&ArrayBuffer.isView(e)?e:new Uint8Array(e||0),this.pos=0,this.type=0,this.length=this.buf.length}ch.Varint=0,ch.Fixed64=1,ch.Bytes=2,ch.Fixed32=5;var hh=4294967296,uh=1/hh,ph="undefined"==typeof TextDecoder?null:new TextDecoder("utf8");function dh(e){return e.type===ch.Bytes?e.readVarint()+e.pos:e.pos+1}function fh(e,t,i){return i?4294967296*t+(e>>>0):4294967296*(t>>>0)+(e>>>0)}function mh(e,t,i){var r=t<=16383?1:t<=2097151?2:t<=268435455?3:Math.floor(Math.log(t)/(7*Math.LN2));i.realloc(r);for(var n=i.pos-1;n>=e;n--)i.buf[n+r]=i.buf[n]}function _h(e,t){for(var i=0;i>>8,e[i+2]=t>>>16,e[i+3]=t>>>24}function Mh(e,t){return(e[t]|e[t+1]<<8|e[t+2]<<16)+(e[t+3]<<24)}function Ah(e,t,i){t.glyphs=[],1===e&&i.readMessage(zh,t)}function zh(e,t,i){if(3===e){const{id:e,bitmap:r,width:n,height:o,left:s,top:a,advance:l}=i.readMessage(Ch,{});t.glyphs.push({id:e,bitmap:new gl({width:n+6,height:o+6},r),metrics:{width:n,height:o,left:s,top:a,advance:l}})}else 4===e?t.ascender=i.readSVarint():5===e&&(t.descender=i.readSVarint())}function Ch(e,t,i){1===e?t.id=i.readVarint():2===e?t.bitmap=i.readBytes():3===e?t.width=i.readVarint():4===e?t.height=i.readVarint():5===e?t.left=i.readSVarint():6===e?t.top=i.readSVarint():7===e&&(t.advance=i.readVarint())}function kh(e){let t=0,i=0;for(const s of e)t+=s.w*s.h,i=Math.max(i,s.w);e.sort((e,t)=>t.h-e.h);const r=[{x:0,y:0,w:Math.max(Math.ceil(Math.sqrt(t/.95)),i),h:1/0}];let n=0,o=0;for(const s of e)for(let e=r.length-1;e>=0;e--){const t=r[e];if(!(s.w>t.w||s.h>t.h)){if(s.x=t.x,s.y=t.y,o=Math.max(o,s.y+s.h),n=Math.max(n,s.x+s.w),s.w===t.w&&s.h===t.h){const t=r.pop();e>3,o=this.pos;this.type=7&r,e(n,t,this),this.pos===o&&this.skip(r)}return t},readMessage:function(e,t){return this.readFields(e,t,this.readVarint()+this.pos)},readFixed32:function(){var e=Sh(this.buf,this.pos);return this.pos+=4,e},readSFixed32:function(){var e=Mh(this.buf,this.pos);return this.pos+=4,e},readFixed64:function(){var e=Sh(this.buf,this.pos)+Sh(this.buf,this.pos+4)*hh;return this.pos+=8,e},readSFixed64:function(){var e=Sh(this.buf,this.pos)+Mh(this.buf,this.pos+4)*hh;return this.pos+=8,e},readFloat:function(){var e=sh(this.buf,this.pos,!0,23,4);return this.pos+=4,e},readDouble:function(){var e=sh(this.buf,this.pos,!0,52,8);return this.pos+=8,e},readVarint:function(e){var t,i,r=this.buf;return t=127&(i=r[this.pos++]),i<128?t:(t|=(127&(i=r[this.pos++]))<<7,i<128?t:(t|=(127&(i=r[this.pos++]))<<14,i<128?t:(t|=(127&(i=r[this.pos++]))<<21,i<128?t:function(e,t,i){var r,n,o=i.buf;if(r=(112&(n=o[i.pos++]))>>4,n<128)return fh(e,r,t);if(r|=(127&(n=o[i.pos++]))<<3,n<128)return fh(e,r,t);if(r|=(127&(n=o[i.pos++]))<<10,n<128)return fh(e,r,t);if(r|=(127&(n=o[i.pos++]))<<17,n<128)return fh(e,r,t);if(r|=(127&(n=o[i.pos++]))<<24,n<128)return fh(e,r,t);if(r|=(1&(n=o[i.pos++]))<<31,n<128)return fh(e,r,t);throw new Error("Expected varint not more than 10 bytes")}(t|=(15&(i=r[this.pos]))<<28,e,this))))},readVarint64:function(){return this.readVarint(!0)},readSVarint:function(){var e=this.readVarint();return e%2==1?(e+1)/-2:e/2},readBoolean:function(){return Boolean(this.readVarint())},readString:function(){var e=this.readVarint()+this.pos,t=this.pos;return this.pos=e,e-t>=12&&ph?function(e,t,i){return ph.decode(e.subarray(t,i))}(this.buf,t,e):function(e,t,i){for(var r="",n=t;n239?4:l>223?3:l>191?2:1;if(n+h>i)break;1===h?l<128&&(c=l):2===h?128==(192&(o=e[n+1]))&&(c=(31&l)<<6|63&o)<=127&&(c=null):3===h?(s=e[n+2],128==(192&(o=e[n+1]))&&128==(192&s)&&((c=(15&l)<<12|(63&o)<<6|63&s)<=2047||c>=55296&&c<=57343)&&(c=null)):4===h&&(s=e[n+2],a=e[n+3],128==(192&(o=e[n+1]))&&128==(192&s)&&128==(192&a)&&((c=(15&l)<<18|(63&o)<<12|(63&s)<<6|63&a)<=65535||c>=1114112)&&(c=null)),null===c?(c=65533,h=1):c>65535&&(c-=65536,r+=String.fromCharCode(c>>>10&1023|55296),c=56320|1023&c),r+=String.fromCharCode(c),n+=h}return r}(this.buf,t,e)},readBytes:function(){var e=this.readVarint()+this.pos,t=this.buf.subarray(this.pos,e);return this.pos=e,t},readPackedVarint:function(e,t){if(this.type!==ch.Bytes)return e.push(this.readVarint(t));var i=dh(this);for(e=e||[];this.pos127;);else if(t===ch.Bytes)this.pos=this.readVarint()+this.pos;else if(t===ch.Fixed32)this.pos+=4;else{if(t!==ch.Fixed64)throw new Error("Unimplemented type: "+t);this.pos+=8}},writeTag:function(e,t){this.writeVarint(e<<3|t)},realloc:function(e){for(var t=this.length||16;t268435455||e<0?function(e,t){var i,r;if(e>=0?(i=e%4294967296|0,r=e/4294967296|0):(r=~(-e/4294967296),4294967295^(i=~(-e%4294967296))?i=i+1|0:(i=0,r=r+1|0)),e>=0x10000000000000000||e<-0x10000000000000000)throw new Error("Given varint doesn't fit into 10 bytes");t.realloc(10),function(e,t,i){i.buf[i.pos++]=127&e|128,e>>>=7,i.buf[i.pos++]=127&e|128,e>>>=7,i.buf[i.pos++]=127&e|128,e>>>=7,i.buf[i.pos++]=127&e|128,i.buf[i.pos]=127&(e>>>=7)}(i,0,t),function(e,t){var i=(7&e)<<4;t.buf[t.pos++]|=i|((e>>>=3)?128:0),e&&(t.buf[t.pos++]=127&e|((e>>>=7)?128:0),e&&(t.buf[t.pos++]=127&e|((e>>>=7)?128:0),e&&(t.buf[t.pos++]=127&e|((e>>>=7)?128:0),e&&(t.buf[t.pos++]=127&e|((e>>>=7)?128:0),e&&(t.buf[t.pos++]=127&e)))))}(r,t)}(e,this):(this.realloc(4),this.buf[this.pos++]=127&e|(e>127?128:0),e<=127||(this.buf[this.pos++]=127&(e>>>=7)|(e>127?128:0),e<=127||(this.buf[this.pos++]=127&(e>>>=7)|(e>127?128:0),e<=127||(this.buf[this.pos++]=e>>>7&127))))},writeSVarint:function(e){this.writeVarint(e<0?2*-e-1:2*e)},writeBoolean:function(e){this.writeVarint(Boolean(e))},writeString:function(e){e=String(e),this.realloc(4*e.length),this.pos++;var t=this.pos;this.pos=function(e,t,i){for(var r,n,o=0;o55295&&r<57344){if(!n){r>56319||o+1===t.length?(e[i++]=239,e[i++]=191,e[i++]=189):n=r;continue}if(r<56320){e[i++]=239,e[i++]=191,e[i++]=189,n=r;continue}r=n-55296<<10|r-56320|65536,n=null}else n&&(e[i++]=239,e[i++]=191,e[i++]=189,n=null);r<128?e[i++]=r:(r<2048?e[i++]=r>>6|192:(r<65536?e[i++]=r>>12|224:(e[i++]=r>>18|240,e[i++]=r>>12&63|128),e[i++]=r>>6&63|128),e[i++]=63&r|128)}return i}(this.buf,e,this.pos);var i=this.pos-t;i>=128&&mh(t,i,this),this.pos=t-1,this.writeVarint(i),this.pos+=i},writeFloat:function(e){this.realloc(4),ah(this.buf,e,this.pos,!0,23,4),this.pos+=4},writeDouble:function(e){this.realloc(8),ah(this.buf,e,this.pos,!0,52,8),this.pos+=8},writeBytes:function(e){var t=e.length;this.writeVarint(t),this.realloc(t);for(var i=0;i=128&&mh(i,r,this),this.pos=i-1,this.writeVarint(r),this.pos+=r},writeMessage:function(e,t,i){this.writeTag(e,ch.Bytes),this.writeRawMessage(t,i)},writePackedVarint:function(e,t){t.length&&this.writeMessage(e,_h,t)},writePackedSVarint:function(e,t){t.length&&this.writeMessage(e,gh,t)},writePackedBoolean:function(e,t){t.length&&this.writeMessage(e,vh,t)},writePackedFloat:function(e,t){t.length&&this.writeMessage(e,yh,t)},writePackedDouble:function(e,t){t.length&&this.writeMessage(e,xh,t)},writePackedFixed32:function(e,t){t.length&&this.writeMessage(e,bh,t)},writePackedSFixed32:function(e,t){t.length&&this.writeMessage(e,wh,t)},writePackedFixed64:function(e,t){t.length&&this.writeMessage(e,Th,t)},writePackedSFixed64:function(e,t){t.length&&this.writeMessage(e,Eh,t)},writeBytesField:function(e,t){this.writeTag(e,ch.Bytes),this.writeBytes(t)},writeFixed32Field:function(e,t){this.writeTag(e,ch.Fixed32),this.writeFixed32(t)},writeSFixed32Field:function(e,t){this.writeTag(e,ch.Fixed32),this.writeSFixed32(t)},writeFixed64Field:function(e,t){this.writeTag(e,ch.Fixed64),this.writeFixed64(t)},writeSFixed64Field:function(e,t){this.writeTag(e,ch.Fixed64),this.writeSFixed64(t)},writeVarintField:function(e,t){this.writeTag(e,ch.Varint),this.writeVarint(t)},writeSVarintField:function(e,t){this.writeTag(e,ch.Varint),this.writeSVarint(t)},writeStringField:function(e,t){this.writeTag(e,ch.Bytes),this.writeString(t)},writeFloatField:function(e,t){this.writeTag(e,ch.Fixed32),this.writeFloat(t)},writeDoubleField:function(e,t){this.writeTag(e,ch.Fixed64),this.writeDouble(t)},writeBooleanField:function(e,t){this.writeVarintField(e,Boolean(t))}};class Dh{constructor(e,{pixelRatio:t,version:i,stretchX:r,stretchY:n,content:o}){this.paddedRect=e,this.pixelRatio=t,this.stretchX=r,this.stretchY=n,this.content=o,this.version=i}get tl(){return[this.paddedRect.x+1,this.paddedRect.y+1]}get br(){return[this.paddedRect.x+this.paddedRect.w-1,this.paddedRect.y+this.paddedRect.h-1]}get displaySize(){return[(this.paddedRect.w-2)/this.pixelRatio,(this.paddedRect.h-2)/this.pixelRatio]}}class Ph{constructor(e,t){const i={},r={};this.haveRenderCallbacks=[];const n=[];this.addImages(e,i,n),this.addImages(t,r,n);const{w:o,h:s}=kh(n),a=new yl({width:o||1,height:s||1});for(const l in e){const t=e[l],r=i[l].paddedRect;yl.copy(t.data,a,{x:0,y:0},{x:r.x+1,y:r.y+1},t.data)}for(const l in t){const e=t[l],i=r[l].paddedRect,n=i.x+1,o=i.y+1,s=e.data.width,c=e.data.height;yl.copy(e.data,a,{x:0,y:0},{x:n,y:o},e.data),yl.copy(e.data,a,{x:0,y:c-1},{x:n,y:o-1},{width:s,height:1}),yl.copy(e.data,a,{x:0,y:0},{x:n,y:o+c},{width:s,height:1}),yl.copy(e.data,a,{x:s-1,y:0},{x:n-1,y:o},{width:1,height:c}),yl.copy(e.data,a,{x:0,y:0},{x:n+s,y:o},{width:1,height:c})}this.image=a,this.iconPositions=i,this.patternPositions=r}addImages(e,t,i){for(const r in e){const n=e[r],o={x:0,y:0,w:n.data.width+2,h:n.data.height+2};i.push(o),t[r]=new Dh(o,n),n.hasRenderCallback&&this.haveRenderCallbacks.push(r)}}patchUpdatedImages(e,t){this.haveRenderCallbacks=this.haveRenderCallbacks.filter(t=>e.hasImage(t)),e.dispatchRenderCallbacks(this.haveRenderCallbacks);for(const i in e.updatedImages)this.patchUpdatedImage(this.iconPositions[i],e.getImage(i),t),this.patchUpdatedImage(this.patternPositions[i],e.getImage(i),t)}patchUpdatedImage(e,t,i){if(!e||!t)return;if(e.version===t.version)return;e.version=t.version;const[r,n]=e.tl;i.update(t.data,void 0,{x:r,y:n})}}Wr(Dh),Wr(Ph);const Lh={horizontal:1,vertical:2,horizontalOnly:3};class Bh{constructor(){this.scale=1,this.fontStack="",this.imageName=null}static forText(e,t){const i=new Bh;return i.scale=e||1,i.fontStack=t,i}static forImage(e){const t=new Bh;return t.imageName=e,t}}class Rh{constructor(){this.text="",this.sectionIndex=[],this.sections=[],this.imageSectionID=null}static fromFeature(e,t){const i=new Rh;for(let r=0;r=0&&i>=e&&Oh[this.text.charCodeAt(i)];i--)t--;this.text=this.text.substring(e,t),this.sectionIndex=this.sectionIndex.slice(e,t)}substring(e,t){const i=new Rh;return i.text=this.text.substring(e,t),i.sectionIndex=this.sectionIndex.slice(e,t),i.sections=this.sections,i}toString(){return this.text}getMaxScale(){return this.sectionIndex.reduce((e,t)=>Math.max(e,this.sections[t].scale),0)}addTextSection(e,t){this.text+=e.text,this.sections.push(Bh.forText(e.scale,e.fontStack||t));const i=this.sections.length-1;for(let r=0;r=63743?null:++this.imageSectionID:(this.imageSectionID=57344,this.imageSectionID)}}function Fh(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m){const _=Rh.fromFeature(e,n);let g;u===Lh.vertical&&_.verticalizePunctuation(p);const{processBidirectionalText:y,processStyledBidirectionalText:x}=Xn;if(y&&1===_.sections.length){g=[];const e=y(_.toString(),Zh(_,c,o,t,r,d,f));for(const t of e){const e=new Rh;e.text=t,e.sections=_.sections;for(let i=0;i0&&o>v&&(v=o)}else{const e=i[s.fontStack];if(!e)continue;e[f]&&(E=e[f]);const r=t[s.fontStack];if(!r)continue;const o=r.glyphs[f];if(!o)continue;if(g=o.metrics,I=8203!==f?24:0,_){const e=void 0!==r.ascender?Math.abs(r.ascender):0,t=void 0!==r.descender?Math.abs(r.descender):0,i=(e+t)*m;b=0;let h=0;for(let p=0;p-i/2;){if(s--,s<0)return!1;a-=e[s].dist(o),o=e[s]}a+=e[s].dist(e[s+1]),s++;const l=[];let c=0;for(;ar;)c-=l.shift().angleDelta;if(c>n)return!1;s++,a+=t.dist(i)}return!0}function Kh(e){let t=0;for(let i=0;ic){const o=(c-l)/n,u=ti(i.x,r.x,o),p=ti(i.y,r.y,o),d=new Hh(u,p,0,r.angleTo(i),h);return!s||Yh(e,d,a,s,t)?d:void 0}l+=n}}function tu(e,t,i,r,n,o,s,a,l){const c=Jh(r,o,s),h=Qh(r,n),u=h*s,p=0===e[0].x||e[0].x===l||0===e[0].y||e[0].y===l;return t-u=0&&g=0&&y=0&&d+h<=u){const e=new Hh(g,y,0,l,m);e._round(),n&&!Yh(t,e,s,n,o)||f.push(e)}}p+=a}return l||f.length||a||(f=e(t,p/2,r,n,o,s,a,!0,c)),f}(e,p?t/2*a%t:(h/2+2*o)*s*a%t,t,c,i,u,p,!1,l)}function iu(e,t,i,r,o){const s=[];for(let a=0;a=r&&h.x>=r||(a.x>=r?a=new n(r,a.y+(r-a.x)/(h.x-a.x)*(h.y-a.y))._round():h.x>=r&&(h=new n(r,a.y+(r-a.x)/(h.x-a.x)*(h.y-a.y))._round()),a.y>=o&&h.y>=o||(a.y>=o?a=new n(a.x+(o-a.y)/(h.y-a.y)*(h.x-a.x),o)._round():h.y>=o&&(h=new n(a.x+(o-a.y)/(h.y-a.y)*(h.x-a.x),o)._round()),c&&a.equals(c[c.length-1])||(c=[a],s.push(c)),c.push(h)))))}}return s}Wr(Hh);const ru=1e20;function nu(e,t,i,r,n,o,s,a,l){for(let c=t;c-1);l++,o[l]=a,s[l]=c,s[l+1]=ru}for(let a=0,l=0;a{let r=this.entries[e];r||(r=this.entries[e]={glyphs:{},requests:{},ranges:{},ascender:void 0,descender:void 0});let n=r.glyphs[t];if(void 0!==n)return void i(null,{stack:e,id:t,glyph:n});if(n=this._tinySDF(r,e,t),n)return r.glyphs[t]=n,void i(null,{stack:e,id:t,glyph:n});const o=Math.floor(t/256);if(256*o>65535)return void i(new Error("glyphs > 65535 not supported"));if(r.ranges[o])return void i(null,{stack:e,id:t,glyph:n});let s=r.requests[o];s||(s=r.requests[o]=[],au.loadGlyphRange(e,o,this.url,this.requestManager,(e,t)=>{if(t){r.ascender=t.ascender,r.descender=t.descender;for(const e in t.glyphs)this._doesCharSupportLocalGlyph(+e)||(r.glyphs[+e]=t.glyphs[+e]);r.ranges[o]=!0}for(const i of s)i(e,t);delete r.requests[o]})),s.push((r,n)=>{r?i(r):n&&i(null,{stack:e,id:t,glyph:n.glyphs[t]||null})})},(e,i)=>{if(e)t(e);else if(i){const e={};for(const{stack:t,id:r,glyph:n}of i)void 0===e[t]&&(e[t]={}),void 0===e[t].glyphs&&(e[t].glyphs={}),e[t].glyphs[r]=n&&{id:n.id,bitmap:n.bitmap.clone(),metrics:n.metrics},e[t].ascender=this.entries[t].ascender,e[t].descender=this.entries[t].descender;t(null,e)}})}_doesCharSupportLocalGlyph(e){return this.localGlyphMode!==su.none&&(this.localGlyphMode===su.all?!!this.localFontFamily:!!this.localFontFamily&&(gn(e)||vn(e)||ln(e)||cn(e)||an(e)))}_tinySDF(e,t,i){const r=this.localFontFamily;if(!r||!this._doesCharSupportLocalGlyph(i))return;let n=e.tinySDF;if(!n){let i="400";/bold/i.test(t)?i="900":/medium/i.test(t)?i="500":/light/i.test(t)&&(i="200"),n=e.tinySDF=new au.TinySDF({fontFamily:r,fontWeight:i,fontSize:48,buffer:6,radius:16}),n.fontWeight=i}if(this.localGlyphs[n.fontWeight][i])return this.localGlyphs[n.fontWeight][i];const o=String.fromCharCode(i),{data:s,width:a,height:l,glyphWidth:c,glyphHeight:h,glyphLeft:u,glyphTop:p,glyphAdvance:d}=n.draw(o);return this.localGlyphs[n.fontWeight][i]={id:i,bitmap:new gl({width:a,height:l},s),metrics:{width:c/2,height:h/2,left:u/2,top:p/2-27,advance:d/2,localGlyph:!0}}}}function lu(e,t,i,r){const o=[],s=e.image,a=s.pixelRatio,l=s.paddedRect.w-2,c=s.paddedRect.h-2,h=e.right-e.left,u=e.bottom-e.top,p=s.stretchX||[[0,l]],d=s.stretchY||[[0,c]],f=(e,t)=>e+t[1]-t[0],m=p.reduce(f,0),_=d.reduce(f,0),g=l-m,y=c-_;let x=0,v=m,b=0,w=_,T=0,E=g,S=0,I=y;if(s.content&&r){const e=s.content;x=cu(p,0,e[0]),b=cu(d,0,e[1]),v=cu(p,e[0],e[2]),w=cu(d,e[1],e[3]),T=e[0]-x,S=e[1]-b,E=e[2]-e[0]-v,I=e[3]-e[1]-w}const M=(r,o,l,c)=>{const p=uu(r.stretch-x,v,h,e.left),d=pu(r.fixed-T,E,r.stretch,m),f=uu(o.stretch-b,w,u,e.top),g=pu(o.fixed-S,I,o.stretch,_),y=uu(l.stretch-x,v,h,e.left),M=pu(l.fixed-T,E,l.stretch,m),A=uu(c.stretch-b,w,u,e.top),z=pu(c.fixed-S,I,c.stretch,_),C=new n(p,f),k=new n(y,f),D=new n(y,A),P=new n(p,A),L=new n(d/a,g/a),B=new n(M/a,z/a),R=t*Math.PI/180;if(R){const e=Math.sin(R),t=Math.cos(R),i=[t,-e,e,t];C._matMult(i),k._matMult(i),P._matMult(i),D._matMult(i)}const F=r.stretch+r.fixed,O=o.stretch+o.fixed;return{tl:C,tr:k,bl:P,br:D,tex:{x:s.paddedRect.x+1+F,y:s.paddedRect.y+1+O,w:l.stretch+l.fixed-F,h:c.stretch+c.fixed-O},writingMode:void 0,glyphOffset:[0,0],sectionIndex:0,pixelOffsetTL:L,pixelOffsetBR:B,minFontScaleX:E/a/h,minFontScaleY:I/a/u,isSDF:i}};if(r&&(s.stretchX||s.stretchY)){const e=hu(p,g,m),t=hu(d,y,_);for(let i=0;i{if(e)n(e);else if(t){const e={},i=function(e){return new lh(e).readFields(Ah,{})}(t);for(const t of i.glyphs)e[t.id]=t;n(null,{glyphs:e,ascender:i.ascender,descender:i.descender})}})},au.TinySDF=class{constructor({fontSize:e=24,buffer:t=3,radius:i=8,cutoff:r=.25,fontFamily:n="sans-serif",fontWeight:o="normal",fontStyle:s="normal"}){this.buffer=t,this.cutoff=r,this.radius=i;const a=this.size=e+4*t,l=this._createCanvas(a),c=this.ctx=l.getContext("2d",{willReadFrequently:!0});c.font=`${s} ${o} ${e}px ${n}`,c.textBaseline="alphabetic",c.textAlign="left",c.fillStyle="black",this.gridOuter=new Float64Array(a*a),this.gridInner=new Float64Array(a*a),this.f=new Float64Array(a),this.z=new Float64Array(a+1),this.v=new Uint16Array(a)}_createCanvas(e){const t=document.createElement("canvas");return t.width=t.height=e,t}draw(e){const{width:t,actualBoundingBoxAscent:i,actualBoundingBoxDescent:r,actualBoundingBoxLeft:n,actualBoundingBoxRight:o}=this.ctx.measureText(e),s=Math.floor(i),a=Math.min(this.size-this.buffer,Math.ceil(o-n)),l=Math.min(this.size-this.buffer,Math.ceil(i)+Math.ceil(r)),c=a+2*this.buffer,h=l+2*this.buffer,u=c*h,p=new Uint8ClampedArray(u),d={data:p,width:c,height:h,glyphWidth:a,glyphHeight:l,glyphTop:s,glyphLeft:0,glyphAdvance:t};if(0===a||0===l)return d;const{ctx:f,buffer:m,gridInner:_,gridOuter:g}=this;f.clearRect(m,m,a,l),f.fillText(e,m,m+s+1);const y=f.getImageData(m,m,a,l);g.fill(ru,0,u),_.fill(0,0,u);for(let x=0;x0?e*e:0,_[i]=e<0?e*e:0}}nu(g,0,0,c,h,c,this.f,this.v,this.z),nu(_,m,m,a,l,c,this.f,this.v,this.z);for(let x=0;x0)for(let i=(this.length>>1)-1;i>=0;i--)this._down(i)}push(e){this.data.push(e),this.length++,this._up(this.length-1)}pop(){if(0===this.length)return;const e=this.data[0],t=this.data.pop();return this.length--,this.length>0&&(this.data[0]=t,this._down(0)),e}peek(){return this.data[0]}_up(e){const{data:t,compare:i}=this,r=t[e];for(;e>0;){const n=e-1>>1,o=t[n];if(i(r,o)>=0)break;t[e]=o,e=n}t[e]=r}_down(e){const{data:t,compare:i}=this,r=this.length>>1,n=t[e];for(;e=0)break;t[e]=o,e=r}t[e]=n}}function mu(e,t){return et?1:0}function _u(e,t=1,i=!1){let r=1/0,o=1/0,s=-1/0,a=-1/0;const l=e[0];for(let n=0;ns)&&(s=e.x),(!n||e.y>a)&&(a=e.y)}const c=Math.min(s-r,a-o);let h=c/2;const u=new fu([],gu);if(0===c)return new n(r,o);for(let n=r;np.d||!p.d)&&(p=r,i&&console.log("found best %d after %d probes",Math.round(1e4*r.d)/1e4,d)),r.max-p.d<=t||(h=r.h/2,u.push(new yu(r.p.x-h,r.p.y-h,h,e)),u.push(new yu(r.p.x+h,r.p.y-h,h,e)),u.push(new yu(r.p.x-h,r.p.y+h,h,e)),u.push(new yu(r.p.x+h,r.p.y+h,h,e)),d+=4)}return i&&(console.log("num probes: "+d),console.log("best distance: "+p.d)),p.p}function gu(e,t){return t.max-e.max}function yu(e,t,i,r){this.p=new n(e,t),this.h=i,this.d=function(e,t){let i=!1,r=1/0;for(let n=0;ne.y!=a.y>e.y&&e.x<(a.x-n.x)*(e.y-n.y)/(a.y-n.y)+n.x&&(i=!i),r=Math.min(r,ma(e,n,a))}}return(i?1:-1)*Math.sqrt(r)}(this.p,r),this.max=this.d+this.h*Math.SQRT2}const xu=Number.POSITIVE_INFINITY,vu=Math.sqrt(2);function bu(e,t){return t[1]!==xu?function(e,t,i){let r=0,n=0;switch(t=Math.abs(t),i=Math.abs(i),e){case"top-right":case"top-left":case"top":n=i-7;break;case"bottom-right":case"bottom-left":case"bottom":n=7-i}switch(e){case"top-right":case"bottom-right":case"right":r=-t;break;case"top-left":case"bottom-left":case"left":r=t}return[r,n]}(e,t[0],t[1]):function(e,t){let i=0,r=0;t<0&&(t=0);const n=t/vu;switch(e){case"top-right":case"top-left":r=n-7;break;case"bottom-right":case"bottom-left":r=7-n;break;case"bottom":r=7-t;break;case"top":r=t-7}switch(e){case"top-right":case"bottom-right":i=-n;break;case"top-left":case"bottom-left":i=n;break;case"left":i=t;break;case"right":i=-t}return[i,r]}(e,t[0])}function wu(e,t,i,r,n,o,s,a,l,c){e.createArrays(),e.tilePixelRatio=Os/(512*e.overscaling),e.compareText={},e.iconsNeedLinear=!1;const h=e.layers[0].layout,u=e.layers[0]._unevaluatedLayout._values,p={};if("composite"===e.textSizeData.kind){const{minZoom:t,maxZoom:i}=e.textSizeData;p.compositeTextSizes=[u["text-size"].possiblyEvaluate(new Wn(t),a),u["text-size"].possiblyEvaluate(new Wn(i),a)]}if("composite"===e.iconSizeData.kind){const{minZoom:t,maxZoom:i}=e.iconSizeData;p.compositeIconSizes=[u["icon-size"].possiblyEvaluate(new Wn(t),a),u["icon-size"].possiblyEvaluate(new Wn(i),a)]}p.layoutTextSize=u["text-size"].possiblyEvaluate(new Wn(l+1),a),p.layoutIconSize=u["icon-size"].possiblyEvaluate(new Wn(l+1),a),p.textMaxSize=u["text-size"].possiblyEvaluate(new Wn(18),a);const d="map"===h.get("text-rotation-alignment")&&"point"!==h.get("symbol-placement"),f=h.get("text-size");for(const m of e.features){const o=h.get("text-font").evaluate(m,{},a).join(","),l=f.evaluate(m,{},a),u=p.layoutTextSize.evaluate(m,{},a),_=(p.layoutIconSize.evaluate(m,{},a),{horizontal:{},vertical:void 0}),g=m.text;let y,x=[0,0];if(g){const r=g.toString(),s=24*h.get("text-letter-spacing").evaluate(m,{},a),c=24*h.get("text-line-height").evaluate(m,{},a),p=zn(r)?s:0,f=h.get("text-anchor").evaluate(m,{},a),y=h.get("text-variable-anchor");if(!y){const e=h.get("text-radial-offset").evaluate(m,{},a);x=e?bu(f,[24*e,xu]):h.get("text-offset").evaluate(m,{},a).map(e=>24*e)}let v=d?"center":h.get("text-justify").evaluate(m,{},a);const b=h.get("symbol-placement"),w="point"===b,T="point"===b?24*h.get("text-max-width").evaluate(m,{},a):0,E=s=>{e.allowVerticalPlacement&&An(r)&&(_.vertical=Fh(g,t,i,n,o,T,c,f,s,p,x,Lh.vertical,!0,b,u,l))};if(!d&&y){const e="auto"===v?y.map(e=>Tu(e)):[v];let r=!1;for(let s=0;s=0||!An(r)){const e=Fh(g,t,i,n,o,T,c,f,v,p,x,Lh.horizontal,!1,b,u,l);e&&(_.horizontal[v]=e)}E("point"===b?"left":v)}}let v=!1;if(m.icon&&m.icon.name){const t=r[m.icon.name];t&&(y=Xh(n[m.icon.name],h.get("icon-offset").evaluate(m,{},a),h.get("icon-anchor").evaluate(m,{},a)),v=t.sdf,void 0===e.sdfIcons?e.sdfIcons=t.sdf:e.sdfIcons!==t.sdf&&D("Style sheet warning: Cannot mix SDF and non-SDF icons in one buffer"),(t.pixelRatio!==e.pixelRatio||0!==h.get("icon-rotate").constantOr(1))&&(e.iconsNeedLinear=!0))}const b=Mu(_.horizontal)||_.vertical;e.iconsInText||(e.iconsInText=!!b&&b.iconsInText),(b||y)&&Eu(e,m,_,y,r,p,u,0,x,v,s,a,c)}o&&e.generateCollisionDebugBuffers(l,e.collisionBoxArray)}function Tu(e){switch(e){case"right":case"top-right":case"bottom-right":return"right";case"left":case"top-left":case"bottom-left":return"left"}return"center"}function Eu(e,t,i,r,n,o,s,a,l,h,u,p,d){let f=o.textMaxSize.evaluate(t,{},p);void 0===f&&(f=s);const m=e.layers[0].layout,_=m.get("icon-offset").evaluate(t,{},p),g=Mu(i.horizontal)||i.vertical,y=s/24,x=e.tilePixelRatio*f/24,v=(A=e.overscaling,e.zoom>18&&A>2&&(A>>=1),Math.max(Os/(512*A),1)*m.get("symbol-spacing")),b=m.get("text-padding")*e.tilePixelRatio,w=m.get("icon-padding")*e.tilePixelRatio,T=c(m.get("text-max-angle")),E="map"===m.get("text-rotation-alignment")&&"point"!==m.get("symbol-placement"),S="map"===m.get("icon-rotation-alignment")&&"point"!==m.get("symbol-placement"),I=m.get("symbol-placement"),M=v/2;var A;const z=m.get("icon-text-fit");let C;r&&"none"!==z&&(e.allowVerticalPlacement&&i.vertical&&(C=Wh(r,i.vertical,z,m.get("icon-text-fit-padding"),_,y)),g&&(r=Wh(r,g,z,m.get("icon-text-fit-padding"),_,y)));const k=(s,a,c)=>{if(a.x<0||a.x>=Os||a.y<0||a.y>=Os)return;const{x:f,y:m,z:g}=d.projectTilePoint(a.x,a.y,c),y=new Hh(f,m,g,0,void 0);!function(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g,y,x,v,b,w,T,E){const S=e.addToLineVertexArray(t,r);let I,M,A,z,C,k,P,L=0,B=0,R=0,F=0,O=-1,U=-1;const V={};let N=ls(""),j=0,G=0;if(void 0===l._unevaluatedLayout.getValue("text-radial-offset")?[j,G]=l.layout.get("text-offset").evaluate(v,{},E).map(e=>24*e):(j=24*l.layout.get("text-radial-offset").evaluate(v,{},E),G=xu),e.allowVerticalPlacement&&n.vertical){const e=n.vertical;if(f)k=zu(e),a&&(P=zu(a));else{const r=l.layout.get("text-rotate").evaluate(v,{},E)+90;A=Au(c,i,t,h,u,p,e,d,r,m),a&&(z=Au(c,i,t,h,u,p,a,g,r))}}if(o){const r=l.layout.get("icon-rotate").evaluate(v,{},E),n="none"!==l.layout.get("icon-text-fit"),s=lu(o,r,w,n),d=a?lu(a,r,w,n):void 0;M=Au(c,i,t,h,u,p,o,g,r),L=4*s.length;const f=e.iconSizeData;let m=null;"source"===f.kind?(m=[Kc*l.layout.get("icon-size").evaluate(v,{},E)],m[0]>Su&&D(e.layerIds[0]+': Value for "icon-size" is >= 255. Reduce your "icon-size".')):"composite"===f.kind&&(m=[Kc*b.compositeIconSizes[0].evaluate(v,{},E),Kc*b.compositeIconSizes[1].evaluate(v,{},E)],(m[0]>Su||m[1]>Su)&&D(e.layerIds[0]+': Value for "icon-size" is >= 255. Reduce your "icon-size".')),e.addSymbols(e.icon,s,m,x,y,v,!1,i,t,S.lineStartIndex,S.lineLength,-1,T,E),O=e.icon.placedSymbolArray.length-1,d&&(B=4*d.length,e.addSymbols(e.icon,d,m,x,y,v,Lh.vertical,i,t,S.lineStartIndex,S.lineLength,-1,T,E),U=e.icon.placedSymbolArray.length-1)}for(const D in n.horizontal){const r=n.horizontal[D];I||(N=ls(r.text),f?C=zu(r):I=Au(c,i,t,h,u,p,r,d,l.layout.get("text-rotate").evaluate(v,{},E),m));const o=1===r.positionedLines.length;if(R+=Iu(e,i,t,r,s,l,f,v,m,S,n.vertical?Lh.horizontal:Lh.horizontalOnly,o?Object.keys(n.horizontal):[D],V,O,b,T,E),o)break}n.vertical&&(F+=Iu(e,i,t,n.vertical,s,l,f,v,m,S,Lh.vertical,["vertical"],V,U,b,T,E));let Z=-1;const q=(e,t)=>e?Math.max(e,t):t;Z=q(C,Z),Z=q(k,Z),Z=q(P,Z);const $=Z>-1?1:0;e.glyphOffsetArray.length>=Ou.MAX_GLYPHS&&D("Too many glyphs being rendered in a tile. See https://github.com/mapbox/mapbox-gl-js/issues/2907"),void 0!==v.sortKey&&e.addToSortKeyRanges(e.symbolInstances.length,v.sortKey),e.symbolInstances.emplaceBack(i.x,i.y,i.z,t.x,t.y,V.right>=0?V.right:-1,V.center>=0?V.center:-1,V.left>=0?V.left:-1,V.vertical>=0?V.vertical:-1,O,U,N,void 0!==I?I:e.collisionBoxArray.length,void 0!==I?I+1:e.collisionBoxArray.length,void 0!==A?A:e.collisionBoxArray.length,void 0!==A?A+1:e.collisionBoxArray.length,void 0!==M?M:e.collisionBoxArray.length,void 0!==M?M+1:e.collisionBoxArray.length,z||e.collisionBoxArray.length,z?z+1:e.collisionBoxArray.length,h,R,F,L,B,$,0,j,G,Z)}(e,a,y,s,i,r,n,C,e.layers[0],e.collisionBoxArray,t.index,t.sourceLayerIndex,e.index,b,E,l,0,w,S,_,t,o,h,u,p)};if("line"===I)for(const c of iu(t.geometry,0,0,Os,Os)){const t=tu(c,v,T,i.vertical||g,r,24,x,e.overscaling,Os);for(const i of t){const t=g;t&&Cu(e,t.text,M,i)||k(c,i,p)}}else if("line-center"===I){for(const c of t.geometry)if(c.length>1){const e=eu(c,T,i.vertical||g,r,24,x);e&&k(c,e,p)}}else if("Polygon"===t.type)for(const c of tc(t.geometry,0)){const e=_u(c,16);k(c[0],new Hh(e.x,e.y,0,0,void 0),p)}else if("LineString"===t.type)for(const c of t.geometry)k(c,new Hh(c[0].x,c[0].y,0,0,void 0),p);else if("Point"===t.type)for(const c of t.geometry)for(const e of c)k([e],new Hh(e.x,e.y,0,0,void 0),p)}const Su=32640;function Iu(e,t,i,r,o,s,a,l,c,h,u,p,d,f,m,_,g){const y=function(e,t,i,r,o,s,a,l){const c=[];if(0===t.positionedLines.length)return c;const h=r.layout.get("text-rotate").evaluate(s,{})*Math.PI/180,u=function(e){const t=e[0],i=e[1],r=t*i;return r>0?[t,-i]:r<0?[-t,i]:0===t?[i,t]:[i,-t]}(i);let p=Math.abs(t.top-t.bottom);for(const n of t.positionedLines)p-=n.lineOffset;const d=t.positionedLines.length,f=p/d;let m=t.top-i[1];for(let _=0;_Su&&D(e.layerIds[0]+': Value for "text-size" is >= 255. Reduce your "text-size".')):"composite"===x.kind&&(v=[Kc*m.compositeTextSizes[0].evaluate(l,{},g),Kc*m.compositeTextSizes[1].evaluate(l,{},g)],(v[0]>Su||v[1]>Su)&&D(e.layerIds[0]+': Value for "text-size" is >= 255. Reduce your "text-size".')),e.addSymbols(e.text,y,v,c,a,l,u,t,i,h.lineStartIndex,h.lineLength,f,_,g);for(const n of p)d[n]=e.text.placedSymbolArray.length-1;return 4*y.length}function Mu(e){for(const t in e)return e[t];return null}function Au(e,t,i,r,o,s,a,l,h,u){let p=a.top,d=a.bottom,f=a.left,m=a.right;const _=a.collisionPadding;if(_&&(f-=_[0],p-=_[1],m+=_[2],d+=_[3]),h){const e=new n(f,p),t=new n(m,p),i=new n(f,d),r=new n(m,d),o=c(h);let s=new n(0,0);u&&(s=new n(u[0],u[1])),e._rotateAround(o,s),t._rotateAround(o,s),i._rotateAround(o,s),r._rotateAround(o,s),f=Math.min(e.x,t.x,i.x,r.x),m=Math.max(e.x,t.x,i.x,r.x),p=Math.min(e.y,t.y,i.y,r.y),d=Math.max(e.y,t.y,i.y,r.y)}return e.emplaceBack(t.x,t.y,t.z,i.x,i.y,f,p,m,d,l,r,o,s),e.length-1}function zu(e){e.collisionPadding&&(e.top-=e.collisionPadding[1],e.bottom+=e.collisionPadding[3]);const t=e.bottom-e.top;return t>0?Math.max(10,t):null}function Cu(e,t,i,r){const n=e.compareText;if(t in n){const e=n[t];for(let t=e.length-1;t>=0;t--)if(r.dist(e[t])e.id),this.index=e.index,this.pixelRatio=e.pixelRatio,this.sourceLayerIndex=e.sourceLayerIndex,this.hasPattern=!1,this.hasRTLText=!1,this.fullyClipped=!1,this.sortKeyRanges=[],this.collisionCircleArray=[],this.placementInvProjMatrix=za([]),this.placementViewportMatrix=za([]);const t=this.layers[0]._unevaluatedLayout._values;this.textSizeData=Jc(this.zoom,t["text-size"]),this.iconSizeData=Jc(this.zoom,t["icon-size"]);const i=this.layers[0].layout,r=i.get("symbol-sort-key"),n=i.get("symbol-z-order");this.canOverlap=i.get("text-allow-overlap")||i.get("icon-allow-overlap")||i.get("text-ignore-placement")||i.get("icon-ignore-placement"),this.sortFeaturesByKey="viewport-y"!==n&&void 0!==r.constantOr(1),this.sortFeaturesByY=("viewport-y"===n||"auto"===n&&!this.sortFeaturesByKey)&&this.canOverlap,this.writingModes=i.get("text-writing-mode").map(e=>Lh[e]),this.stateDependentLayerIds=this.layers.filter(e=>e.isStateDependent()).map(e=>e.id),this.sourceID=e.sourceID,this.projection=e.projection}createArrays(){this.text=new Ru(new Ms(this.layers,this.zoom,e=>/^text/.test(e))),this.icon=new Ru(new Ms(this.layers,this.zoom,e=>/^icon/.test(e))),this.glyphOffsetArray=new Yo,this.lineVertexArray=new Ko,this.symbolInstances=new Ho}calculateGlyphDependencies(e,t,i,r,n){for(let o=0;o0)&&("constant"!==s.value.kind||s.value.value.length>0),h="constant"!==l.value.kind||!!l.value.value||Object.keys(l.parameters).length>0,u=o.get("symbol-sort-key");if(this.features=[],!c&&!h)return;const p=t.iconDependencies,d=t.glyphDependencies,f=t.availableImages,m=new Wn(this.zoom);for(const{feature:_,id:g,index:y,sourceLayerIndex:x}of e){const e=n._featureFilter.needGeometry,t=na(_,e);if(!n._featureFilter.filter(m,t,i))continue;let a,l;if(e||(t.geometry=ra(_,i,r)),c){const e=n.getValueAndResolveTokens("text-field",t,i,f),r=dt.factory(e);Bu(r)&&(this.hasRTLText=!0),(!this.hasRTLText||"unavailable"===qn()||this.hasRTLText&&Xn.isParsed())&&(a=ih(r,n,t))}if(h){const e=n.getValueAndResolveTokens("icon-image",t,i,f);l=e instanceof ft?e:ft.fromString(e)}if(!a&&!l)continue;const v=this.sortFeaturesByKey?u.evaluate(t,{},i):void 0;if(this.features.push({id:g,text:a,icon:l,index:y,sourceLayerIndex:x,geometry:t.geometry,properties:_.properties,type:ku[_.type],sortKey:v}),l&&(p[l.name]=!0),a){const e=s.evaluate(t,{},i).join(","),r="map"===o.get("text-rotation-alignment")&&"point"!==o.get("symbol-placement");this.allowVerticalPlacement=this.writingModes&&this.writingModes.indexOf(Lh.vertical)>=0;for(const t of a.sections)if(t.image)p[t.image.name]=!0;else{const i=An(a.toString()),n=t.fontStack||e,o=d[n]=d[n]||{};this.calculateGlyphDependencies(t.text,o,r,this.allowVerticalPlacement,i)}}}"line"===o.get("symbol-placement")&&(this.features=function(e){const t={},i={},r=[];let n=0;function o(t){r.push(e[t]),n++}function s(e,t,n){const o=i[e];return delete i[e],i[t]=o,r[o].geometry[0].pop(),r[o].geometry[0]=r[o].geometry[0].concat(n[0]),o}function a(e,i,n){const o=t[i];return delete t[i],t[e]=o,r[o].geometry[0].shift(),r[o].geometry[0]=n[0].concat(r[o].geometry[0]),o}function l(e,t,i){const r=i?t[0][t[0].length-1]:t[0][0];return`${e}:${r.x}:${r.y}`}for(let c=0;ce.geometry)}(this.features)),this.sortFeaturesByKey&&this.features.sort((e,t)=>e.sortKey-t.sortKey)}update(e,t,i,r){this.stateDependentLayers.length&&(this.text.programConfigurations.updatePaintArrays(e,t,this.layers,i,r),this.icon.programConfigurations.updatePaintArrays(e,t,this.layers,i,r))}isEmpty(){return 0===this.symbolInstances.length&&!this.hasRTLText}uploadPending(){return!this.uploaded||this.text.programConfigurations.needsUpload||this.icon.programConfigurations.needsUpload}upload(e){!this.uploaded&&this.hasDebugData()&&(this.textCollisionBox.upload(e),this.iconCollisionBox.upload(e)),this.text.upload(e,this.sortFeaturesByY,!this.uploaded,this.text.programConfigurations.needsUpload),this.icon.upload(e,this.sortFeaturesByY,!this.uploaded,this.icon.programConfigurations.needsUpload),this.uploaded=!0}destroyDebugData(){this.textCollisionBox.destroy(),this.iconCollisionBox.destroy()}destroy(){this.text.destroy(),this.icon.destroy(),this.hasDebugData()&&this.destroyDebugData()}addToLineVertexArray(e,t){const i=this.lineVertexArray.length,r=e.segment;if(void 0!==r){let i=e.dist(t[r+1]),n=e.dist(t[r]);const o={};for(let e=r+1;e=0;e--)o[e]={x:t[e].x,y:t[e].y,tileUnitDistanceFromAnchor:n},e>0&&(n+=t[e-1].dist(t[e]));for(let e=0;e=0?t.rightJustifiedTextSymbolIndex:t.centerJustifiedTextSymbolIndex>=0?t.centerJustifiedTextSymbolIndex:t.leftJustifiedTextSymbolIndex>=0?t.leftJustifiedTextSymbolIndex:t.verticalPlacedTextSymbolIndex>=0?t.verticalPlacedTextSymbolIndex:r),o=Qc(this.textSizeData,e,n)/24;return this.tilePixelRatio*o}getSymbolInstanceIconSize(e,t,i){const r=this.icon.placedSymbolArray.get(i),n=Qc(this.iconSizeData,e,r);return this.tilePixelRatio*n}_commitDebugCollisionVertexUpdate(e,t,i){e.emplaceBack(t,-i,-i),e.emplaceBack(t,i,-i),e.emplaceBack(t,i,i),e.emplaceBack(t,-i,i)}_updateTextDebugCollisionBoxes(e,t,i,r,n,o){for(let s=r;s0}hasIconData(){return this.icon.segments.get().length>0}hasDebugData(){return this.textCollisionBox&&this.iconCollisionBox}hasTextCollisionBoxData(){return this.hasDebugData()&&this.textCollisionBox.segments.get().length>0}hasIconCollisionBoxData(){return this.hasDebugData()&&this.iconCollisionBox.segments.get().length>0}addIndicesForPlacedSymbol(e,t){const i=e.placedSymbolArray.get(t),r=i.vertexStartIndex+4*i.numGlyphs;for(let n=i.vertexStartIndex;nr[e]-r[t]||n[t]-n[e]),o}addToSortKeyRanges(e,t){const i=this.sortKeyRanges[this.sortKeyRanges.length-1];i&&i.sortKey===t?i.symbolInstanceEnd=e+1:this.sortKeyRanges.push({sortKey:t,symbolInstanceStart:e,symbolInstanceEnd:e+1})}sortFeatures(e){if(this.sortFeaturesByY&&this.sortedAngle!==e&&!(this.text.segments.get().length>1||this.icon.segments.get().length>1)){this.symbolInstanceIndexes=this.getSortedSymbolIndexes(e),this.sortedAngle=e,this.text.indexArray.clear(),this.icon.indexArray.clear(),this.featureSortOrder=[];for(const e of this.symbolInstanceIndexes){const t=this.symbolInstances.get(e);this.featureSortOrder.push(t.featureIndex),[t.rightJustifiedTextSymbolIndex,t.centerJustifiedTextSymbolIndex,t.leftJustifiedTextSymbolIndex].forEach((e,t,i)=>{e>=0&&i.indexOf(e)===t&&this.addIndicesForPlacedSymbol(this.text,e)}),t.verticalPlacedTextSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.text,t.verticalPlacedTextSymbolIndex),t.placedIconSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.icon,t.placedIconSymbolIndex),t.verticalPlacedIconSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.icon,t.verticalPlacedIconSymbolIndex)}this.text.indexBuffer&&this.text.indexBuffer.updateData(this.text.indexArray),this.icon.indexBuffer&&this.icon.indexBuffer.updateData(this.icon.indexArray)}}}Wr(Ou,{omit:["layers","collisionBoxArray","features","compareText"]}),Ou.MAX_GLYPHS=65535,Ou.addDynamicAttributes=Lu;const Uu=new lo({"symbol-placement":new ro(Ve.layout_symbol["symbol-placement"]),"symbol-spacing":new ro(Ve.layout_symbol["symbol-spacing"]),"symbol-avoid-edges":new ro(Ve.layout_symbol["symbol-avoid-edges"]),"symbol-sort-key":new no(Ve.layout_symbol["symbol-sort-key"]),"symbol-z-order":new ro(Ve.layout_symbol["symbol-z-order"]),"icon-allow-overlap":new ro(Ve.layout_symbol["icon-allow-overlap"]),"icon-ignore-placement":new ro(Ve.layout_symbol["icon-ignore-placement"]),"icon-optional":new ro(Ve.layout_symbol["icon-optional"]),"icon-rotation-alignment":new ro(Ve.layout_symbol["icon-rotation-alignment"]),"icon-size":new no(Ve.layout_symbol["icon-size"]),"icon-text-fit":new ro(Ve.layout_symbol["icon-text-fit"]),"icon-text-fit-padding":new ro(Ve.layout_symbol["icon-text-fit-padding"]),"icon-image":new no(Ve.layout_symbol["icon-image"]),"icon-rotate":new no(Ve.layout_symbol["icon-rotate"]),"icon-padding":new ro(Ve.layout_symbol["icon-padding"]),"icon-keep-upright":new ro(Ve.layout_symbol["icon-keep-upright"]),"icon-offset":new no(Ve.layout_symbol["icon-offset"]),"icon-anchor":new no(Ve.layout_symbol["icon-anchor"]),"icon-pitch-alignment":new ro(Ve.layout_symbol["icon-pitch-alignment"]),"text-pitch-alignment":new ro(Ve.layout_symbol["text-pitch-alignment"]),"text-rotation-alignment":new ro(Ve.layout_symbol["text-rotation-alignment"]),"text-field":new no(Ve.layout_symbol["text-field"]),"text-font":new no(Ve.layout_symbol["text-font"]),"text-size":new no(Ve.layout_symbol["text-size"]),"text-max-width":new no(Ve.layout_symbol["text-max-width"]),"text-line-height":new no(Ve.layout_symbol["text-line-height"]),"text-letter-spacing":new no(Ve.layout_symbol["text-letter-spacing"]),"text-justify":new no(Ve.layout_symbol["text-justify"]),"text-radial-offset":new no(Ve.layout_symbol["text-radial-offset"]),"text-variable-anchor":new ro(Ve.layout_symbol["text-variable-anchor"]),"text-anchor":new no(Ve.layout_symbol["text-anchor"]),"text-max-angle":new ro(Ve.layout_symbol["text-max-angle"]),"text-writing-mode":new ro(Ve.layout_symbol["text-writing-mode"]),"text-rotate":new no(Ve.layout_symbol["text-rotate"]),"text-padding":new ro(Ve.layout_symbol["text-padding"]),"text-keep-upright":new ro(Ve.layout_symbol["text-keep-upright"]),"text-transform":new no(Ve.layout_symbol["text-transform"]),"text-offset":new no(Ve.layout_symbol["text-offset"]),"text-allow-overlap":new ro(Ve.layout_symbol["text-allow-overlap"]),"text-ignore-placement":new ro(Ve.layout_symbol["text-ignore-placement"]),"text-optional":new ro(Ve.layout_symbol["text-optional"])});var Vu={paint:new lo({"icon-opacity":new no(Ve.paint_symbol["icon-opacity"]),"icon-color":new no(Ve.paint_symbol["icon-color"]),"icon-halo-color":new no(Ve.paint_symbol["icon-halo-color"]),"icon-halo-width":new no(Ve.paint_symbol["icon-halo-width"]),"icon-halo-blur":new no(Ve.paint_symbol["icon-halo-blur"]),"icon-translate":new ro(Ve.paint_symbol["icon-translate"]),"icon-translate-anchor":new ro(Ve.paint_symbol["icon-translate-anchor"]),"text-opacity":new no(Ve.paint_symbol["text-opacity"]),"text-color":new no(Ve.paint_symbol["text-color"],{runtimeType:Ye,getOverride:e=>e.textColor,hasOverride:e=>!!e.textColor}),"text-halo-color":new no(Ve.paint_symbol["text-halo-color"]),"text-halo-width":new no(Ve.paint_symbol["text-halo-width"]),"text-halo-blur":new no(Ve.paint_symbol["text-halo-blur"]),"text-translate":new ro(Ve.paint_symbol["text-translate"]),"text-translate-anchor":new ro(Ve.paint_symbol["text-translate-anchor"])}),layout:Uu};class Nu{constructor(e){this.type=e.property.overrides?e.property.overrides.runtimeType:$e,this.defaultValue=e}evaluate(e){if(e.formattedSection){const t=this.defaultValue.property.overrides;if(t&&t.hasOverride(e.formattedSection))return t.getOverride(e.formattedSection)}return e.feature&&e.featureState?this.defaultValue.evaluate(e.feature,e.featureState):this.defaultValue.property.specification.default}eachChild(e){this.defaultValue.isConstant()||e(this.defaultValue.value._styleExpression.expression)}outputDefined(){return!1}serialize(){return null}}Wr(Nu,{omit:["defaultValue"]});class ju extends Ls{constructor(e){super(e,Vu)}recalculate(e,t){super.recalculate(e,t),"auto"===this.layout.get("icon-rotation-alignment")&&(this.layout._values["icon-rotation-alignment"]="point"!==this.layout.get("symbol-placement")?"map":"viewport"),"auto"===this.layout.get("text-rotation-alignment")&&(this.layout._values["text-rotation-alignment"]="point"!==this.layout.get("symbol-placement")?"map":"viewport"),"auto"===this.layout.get("text-pitch-alignment")&&(this.layout._values["text-pitch-alignment"]=this.layout.get("text-rotation-alignment")),"auto"===this.layout.get("icon-pitch-alignment")&&(this.layout._values["icon-pitch-alignment"]=this.layout.get("icon-rotation-alignment"));const i=this.layout.get("text-writing-mode");if(i){const e=[];for(const t of i)e.indexOf(t)<0&&e.push(t);this.layout._values["text-writing-mode"]=e}else this.layout._values["text-writing-mode"]="point"===this.layout.get("symbol-placement")?["horizontal"]:["horizontal","vertical"];this._setPaintOverrides()}getValueAndResolveTokens(e,t,i,r){const n=this.layout.get(e).evaluate(t,{},i,r),o=this._unevaluatedLayout._values[e];return o.isDataDriven()||ir(o.value)||!n?n:function(e,t){return t.replace(/{([^{}]+)}/g,(t,i)=>i in e?String(e[i]):"")}(t.properties,n)}createBucket(e){return new Ou(e)}queryRadius(){return 0}queryIntersectsFeature(){return!1}_setPaintOverrides(){for(const e of Vu.paint.overridableProperties){if(!ju.hasPaintOverride(this.layout,e))continue;const t=this.paint.get(e),i=new Nu(t),r=new tr(i,t.property.specification);let n=null;n="constant"===t.value.kind||"source"===t.value.kind?new nr("source",r):new or("composite",r,t.value.zoomStops,t.value._interpolationType),this.paint._values[e]=new to(t.property,n,t.parameters)}}_handleOverridablePaintPropertyUpdate(e,t,i){return!(!this.layout||t.isDataDriven()||i.isDataDriven())&&ju.hasPaintOverride(this.layout,e)}static hasPaintOverride(e,t){const i=e.get("text-field"),r=Vu.paint.properties[t];let n=!1;const o=e=>{for(const t of e)if(r.overrides&&r.overrides.hasOverride(t))return void(n=!0)};if("constant"===i.value.kind&&i.value.value instanceof dt)o(i.value.value.sections);else if("source"===i.value.kind){const e=t=>{n||(t instanceof xt&>(t.value)===et?o(t.value.sections):t instanceof Tt?o(t.sections):t.eachChild(e))},t=i.value;t._styleExpression&&e(t._styleExpression.expression)}return n}getProgramConfiguration(e){return new Is(this,e)}}var Gu={paint:new lo({"background-color":new ro(Ve.paint_background["background-color"]),"background-pattern":new so(Ve.paint_background["background-pattern"]),"background-opacity":new ro(Ve.paint_background["background-opacity"])})},Zu={paint:new lo({"raster-opacity":new ro(Ve.paint_raster["raster-opacity"]),"raster-hue-rotate":new ro(Ve.paint_raster["raster-hue-rotate"]),"raster-brightness-min":new ro(Ve.paint_raster["raster-brightness-min"]),"raster-brightness-max":new ro(Ve.paint_raster["raster-brightness-max"]),"raster-saturation":new ro(Ve.paint_raster["raster-saturation"]),"raster-contrast":new ro(Ve.paint_raster["raster-contrast"]),"raster-resampling":new ro(Ve.paint_raster["raster-resampling"]),"raster-fade-duration":new ro(Ve.paint_raster["raster-fade-duration"])})};class qu extends Ls{constructor(e){super(e,{}),this.implementation=e}is3D(){return"3d"===this.implementation.renderingMode}hasOffscreenPass(){return void 0!==this.implementation.prerender}recalculate(){}updateTransitions(){}hasTransition(){return!1}serialize(){}onAdd(e){this.implementation.onAdd&&this.implementation.onAdd(e,e.painter.context.gl)}onRemove(e){this.implementation.onRemove&&this.implementation.onRemove(e,e.painter.context.gl)}}var $u={paint:new lo({"sky-type":new ro(Ve.paint_sky["sky-type"]),"sky-atmosphere-sun":new ro(Ve.paint_sky["sky-atmosphere-sun"]),"sky-atmosphere-sun-intensity":new ro(Ve.paint_sky["sky-atmosphere-sun-intensity"]),"sky-gradient-center":new ro(Ve.paint_sky["sky-gradient-center"]),"sky-gradient-radius":new ro(Ve.paint_sky["sky-gradient-radius"]),"sky-gradient":new ao(Ve.paint_sky["sky-gradient"]),"sky-atmosphere-halo-color":new ro(Ve.paint_sky["sky-atmosphere-halo-color"]),"sky-atmosphere-color":new ro(Ve.paint_sky["sky-atmosphere-color"]),"sky-opacity":new ro(Ve.paint_sky["sky-opacity"])})};function Xu(e,t,i){const r=[0,0,1],n=nl([]);return function(e,t,i){i*=.5;var r=t[0],n=t[1],o=t[2],s=t[3],a=Math.sin(i),l=Math.cos(i);e[0]=r*l-o*a,e[1]=n*l+s*a,e[2]=o*l+r*a,e[3]=s*l-n*a}(n,n,i?-c(e)+Math.PI:c(e)),ol(n,n,-c(t)),Ka(r,r,n),Xa(r,r)}const Wu={circle:class extends Ls{constructor(e){super(e,Sa)}createBucket(e){return new aa(e)}queryRadius(e){const t=e;return va("circle-radius",this,t)+va("circle-stroke-width",this,t)+ba(this.paint.get("circle-translate"))}queryIntersectsFeature(e,t,i,r,n,o,s,a){const l=Ta(this.paint.get("circle-translate"),this.paint.get("circle-translate-anchor"),o.angle,e.pixelToTileUnitsFactor),c=this.paint.get("circle-radius").evaluate(t,i)+this.paint.get("circle-stroke-width").evaluate(t,i);return ll(e,r,o,s,a,"map"===this.paint.get("circle-pitch-alignment"),"map"===this.paint.get("circle-pitch-scale"),l,c)}getProgramIds(){return["circle"]}getProgramConfiguration(e){return new Is(this,e)}},heatmap:class extends Ls{createBucket(e){return new dl(e)}constructor(e){super(e,xl),this._updateColorRamp()}_handleSpecialPaintPropertyUpdate(e){"heatmap-color"===e&&this._updateColorRamp()}_updateColorRamp(){this.colorRamp=vl({expression:this._transitionablePaint._values["heatmap-color"].value.expression,evaluationKey:"heatmapDensity",image:this.colorRamp}),this.colorRampTexture=null}resize(){this.heatmapFbo&&(this.heatmapFbo.destroy(),this.heatmapFbo=null)}queryRadius(e){return va("heatmap-radius",this,e)}queryIntersectsFeature(e,t,i,r,o,s,a,l){const c=this.paint.get("heatmap-radius").evaluate(t,i);return ll(e,r,s,a,l,!0,!0,new n(0,0),c)}hasOffscreenPass(){return 0!==this.paint.get("heatmap-opacity")&&"none"!==this.visibility}getProgramIds(){return["heatmap","heatmapTexture"]}getProgramConfiguration(e){return new Is(this,e)}},hillshade:class extends Ls{constructor(e){super(e,bl)}hasOffscreenPass(){return 0!==this.paint.get("hillshade-exaggeration")&&"none"!==this.visibility}getProgramIds(){return["hillshade","hillshadePrepare"]}},fill:class extends Ls{constructor(e){super(e,ac)}getProgramIds(){const e=this.paint.get("fill-pattern"),t=e&&e.constantOr(1),i=[t?"fillPattern":"fill"];return this.paint.get("fill-antialias")&&i.push(t&&!this.getPaintProperty("fill-outline-color")?"fillOutlinePattern":"fillOutline"),i}getProgramConfiguration(e){return new Is(this,e)}recalculate(e,t){super.recalculate(e,t);const i=this.paint._values["fill-outline-color"];"constant"===i.value.kind&&void 0===i.value.value&&(this.paint._values["fill-outline-color"]=this.paint._values["fill-color"])}createBucket(e){return new oc(e)}queryRadius(){return ba(this.paint.get("fill-translate"))}queryIntersectsFeature(e,t,i,r,n,o){return!e.queryGeometry.isAboveHorizon&&ha(wa(e.tilespaceGeometry,this.paint.get("fill-translate"),this.paint.get("fill-translate-anchor"),o.angle,e.pixelToTileUnitsFactor),r)}isTileClipped(){return!0}},"fill-extrusion":class extends Ls{constructor(e){super(e,zc)}createBucket(e){return new Mc(e)}queryRadius(){return ba(this.paint.get("fill-extrusion-translate"))}is3D(){return!0}getProgramIds(){return[this.paint.get("fill-extrusion-pattern").constantOr(1)?"fillExtrusionPattern":"fillExtrusion"]}getProgramConfiguration(e){return new Is(this,e)}queryIntersectsFeature(e,t,i,r,o,s,a,l,c){const h=Ta(this.paint.get("fill-extrusion-translate"),this.paint.get("fill-extrusion-translate-anchor"),s.angle,e.pixelToTileUnitsFactor),u=this.paint.get("fill-extrusion-height").evaluate(t,i),p=this.paint.get("fill-extrusion-base").evaluate(t,i),d=[0,0],f=l&&s.elevation,m=s.elevation?s.elevation.exaggeration():1,_=e.tile.getBucket(this);if(f&&_ instanceof Mc){const e=_.centroidVertexArray,t=c+1;if(t=3)for(let t=0;t1&&(s=e[++o]);const l=Math.abs(a-s.left),c=Math.abs(a-s.right),h=Math.min(l,c);let u;const p=n/i*(r+1);if(s.isDash){const e=r-Math.abs(p);u=Math.sqrt(h*h+e*e)}else u=r-Math.sqrt(h*h+p*p);this.image.data[t+a]=Math.max(0,Math.min(255,u+128))}}}addRegularDash(e,t){for(let a=e.length-1;a>=0;--a){const t=e[a],i=e[a+1];t.zeroLength?e.splice(a,1):i&&i.isDash===t.isDash&&(i.left=t.left,e.splice(a,1))}const i=e[0],r=e[e.length-1];i.isDash===r.isDash&&(i.left=r.left-this.width,r.right=i.right+this.width);const n=this.width*this.nextRow;let o=0,s=e[o];for(let a=0;a1&&(s=e[++o]);const i=Math.abs(a-s.left),r=Math.abs(a-s.right),l=Math.min(i,r);this.image.data[n+a]=Math.max(0,Math.min(255,(s.isDash?l:-l)+t+128))}}addDash(e,t){const i=this.getKey(e,t);if(this.positions[i])return this.positions[i];const r="round"===t,n=r?7:0,o=2*n+1;if(this.nextRow+o>this.height)return D("LineAtlas out of space"),null;0===e.length&&e.push(1);let s=0;for(let c=0;c{this._triggered=!1,this._callback()})}trigger(){this._triggered||(this._triggered=!0,this._channel?this._channel.port1.postMessage(!0):setTimeout(()=>{this._triggered=!1,this._callback()},0))}remove(){this._channel=void 0,this._callback=()=>{}}}const Ju=s.performance;function Qu(e){const t=e?e.url.toString():void 0;return Ju.getEntriesByName(t)}class ep{constructor(){this.tasks={},this.taskQueue=[],I(["process"],this),this.invoker=new Ku(this.process),this.nextId=0}add(e,t){const i=this.nextId++,r=function({type:e,isSymbolTile:t,zoom:i}){return i=i||0,"message"===e?0:"maybePrepare"!==e||t?"parseTile"!==e||t?"parseTile"===e&&t?300-i:"maybePrepare"===e&&t?400-i:500:200-i:100-i}(t);if(0===r){B();try{e()}finally{}return{cancel:()=>{}}}return this.tasks[i]={fn:e,metadata:t,priority:r,id:i},this.taskQueue.push(i),this.invoker.trigger(),{cancel:()=>{delete this.tasks[i]}}}process(){B();try{if(this.taskQueue=this.taskQueue.filter(e=>!!this.tasks[e]),!this.taskQueue.length)return;const e=this.pick();if(null===e)return;const t=this.tasks[e];if(delete this.tasks[e],this.taskQueue.length&&this.invoker.trigger(),!t)return;t.fn()}finally{}}pick(){let e=null,t=1/0;for(let r=0;r1?null:function(e,t,i,r){const n=Math.sin(i);return e*(Math.sin((1-r)*i)/n)+t*(Math.sin(r*i)/n)}(e.a[t],e.b[t],e.angle,m(i,0,1))+e.center[t]}function pp(e){if(e.z<=1)return cp[e.z+2*e.y+e.x];const[t,i]=fp(e),r=[_p(t[0],t[1]),_p(t[0],i[1]),_p(i[0],t[1]),_p(i[0],i[1])],n=[lp,lp,lp],o=[ap,ap,ap];for(const s of r)n[0]=Math.min(n[0],s[0]),n[1]=Math.min(n[1],s[1]),n[2]=Math.min(n[2],s[2]),o[0]=Math.max(o[0],s[0]),o[1]=Math.max(o[1],s[1]),o[2]=Math.max(o[2],s[2]);return new al(n,o)}function dp(e,t,i){const r=t/e.worldSize,n=(e,t)=>{qa(e,e,r),qa(t,t,r)},o=Number.MAX_VALUE,s=[-o,-o,-o],a=[o,o,o],l=bp(e);if(i.z<=1){const e=pp(i).getCorners();for(let t=0;tMath.abs(S))T=E>=0?1:3,w=f;else{T=S>=0?0:2;const e=[l[4],l[5],l[6]];let t;t=S>=0?-Math.sin(c(p.getSouth()))*sp:-Math.sin(c(p.getNorth()))*sp,w=$a(w,f,e,t)}const I=d[T],M=d[(T+1)%4],A=new hp(I,M,w),z=[up(A,0)||I[0],up(A,1)||I[1],up(A,2)||I[2]];return a[2]=Math.min(I[2],M[2]),Ga(a,a,z),Za(s,s,z),n(a,s),new al(a,s)}function fp(e){const t=1<0;o--)r=1<this.canonical.z?new Ap(e,this.wrap,this.canonical.z,this.canonical.x,this.canonical.y):new Ap(e,this.wrap,e,this.canonical.x>>t,this.canonical.y>>t)}calculateScaledKey(e,t=!0){if(this.overscaledZ===e&&t)return this.key;if(e>this.canonical.z)return zp(this.wrap*+t,e,this.canonical.z,this.canonical.x,this.canonical.y);{const i=this.canonical.z-e;return zp(this.wrap*+t,e,e,this.canonical.x>>i,this.canonical.y>>i)}}isChildOf(e){if(e.wrap!==this.wrap)return!1;const t=this.canonical.z-e.canonical.z;return 0===e.overscaledZ||e.overscaledZ>t&&e.canonical.y===this.canonical.y>>t}children(e){if(this.overscaledZ>=e)return[new Ap(this.overscaledZ+1,this.wrap,this.canonical.z,this.canonical.x,this.canonical.y)];const t=this.canonical.z+1,i=2*this.canonical.x,r=2*this.canonical.y;return[new Ap(t,this.wrap,t,i,r),new Ap(t,this.wrap,t,i+1,r),new Ap(t,this.wrap,t,i,r+1),new Ap(t,this.wrap,t,i+1,r+1)]}isLessThan(e){return this.wrape.wrap)&&(this.overscaledZe.overscaledZ)&&(this.canonical.xe.canonical.x)&&this.canonical.yx&&(v(e,c,r,n,a,l),v(c,i,a,l,o,s))}v(u,p,r,o,n,o),v(p,d,n,o,n,s),v(d,f,n,s,r,s),v(f,u,r,s,r,o),m-=x,_-=x,g+=x,y+=x;const b=1/Math.max(g-m,y-_);return{scale:b,x:m*b,y:_*b,x2:g*b,y2:y*b,projection:t}}Wr(Ip),Wr(Ap,{omit:["projMatrix"]});class kp{constructor(e){this._stringToNumber={},this._numberToString=[];for(let t=0;t>=1)>1;){const a=t+r>>1,l=i+n>>1;1&e?(r=t,n=i,t=o,i=s):(t=r,i=n,r=o,n=s),o=a,s=l}const a=4*Bd;Lp[a+0]=t,Lp[a+1]=i,Lp[a+2]=r,Lp[a+3]=n}const Bp=new Uint16Array(2178),Rp=new Uint8Array(1089),Fp=new Uint16Array(1089);function Op(e){return 0===e?-.03125:32===e?.03125:0}var Up=fo([{name:"a_pos",type:"Int16",components:2},{name:"a_texture_pos",type:"Int16",components:2}]);const Vp={type:2,extent:Os,loadGeometry:()=>[[new n(0,0),new n(8193,0),new n(8193,8193),new n(0,8193),new n(0,0)]]};class Np{constructor(e,t,i,r,n){this.tileID=e,this.uid=w(),this.uses=0,this.tileSize=t,this.tileZoom=i,this.buckets={},this.expirationTime=null,this.queryPadding=0,this.hasSymbolBuckets=!1,this.hasRTLText=!1,this.dependencies={},this.isRaster=n,this.expiredRequestCount=0,this.state="loading",r&&r.transform&&(this.projection=r.transform.projection)}registerFadeDuration(e){const t=e+this.timeAdded;tt.getLayer(e)).filter(Boolean);if(0!==e.length){r.layers=e,r.stateDependentLayerIds&&(r.stateDependentLayers=r.stateDependentLayerIds.map(t=>e.filter(e=>e.id===t)[0]));for(const t of e)i[t.id]=r}}return i}(e.buckets,t.style),this.hasSymbolBuckets=!1;for(const e in this.buckets){const t=this.buckets[e];if(t instanceof Ou){if(this.hasSymbolBuckets=!0,!i)break;t.justReloaded=!0}}if(this.hasRTLText=!1,this.hasSymbolBuckets)for(const e in this.buckets){const t=this.buckets[e];if(t instanceof Ou&&t.hasRTLText){this.hasRTLText=!0,Xn.isLoading()||Xn.isLoaded()||"deferred"!==qn()||$n();break}}this.queryPadding=0;for(const e in this.buckets){const i=this.buckets[e];this.queryPadding=Math.max(this.queryPadding,t.style.getLayer(e).queryRadius(i))}e.imageAtlas&&(this.imageAtlas=e.imageAtlas),e.glyphAtlasImage&&(this.glyphAtlasImage=e.glyphAtlasImage),e.lineAtlas&&(this.lineAtlas=e.lineAtlas)}else this.collisionBoxArray=new qo}unloadVectorData(){if(this.hasData()){for(const e in this.buckets)this.buckets[e].destroy();this.buckets={},this.imageAtlas&&(this.imageAtlas=null),this.lineAtlas&&(this.lineAtlas=null),this.imageAtlasTexture&&this.imageAtlasTexture.destroy(),this.glyphAtlasTexture&&this.glyphAtlasTexture.destroy(),this.lineAtlasTexture&&this.lineAtlasTexture.destroy(),this._tileBoundsBuffer&&(this._tileBoundsBuffer.destroy(),this._tileBoundsIndexBuffer.destroy(),this._tileBoundsSegments.destroy(),this._tileBoundsBuffer=null),this._tileDebugBuffer&&(this._tileDebugBuffer.destroy(),this._tileDebugIndexBuffer.destroy(),this._tileDebugSegments.destroy(),this._tileDebugBuffer=null),this._globeTileDebugBorderBuffer&&(this._globeTileDebugBorderBuffer.destroy(),this._globeTileDebugBorderBuffer=null),this._tileDebugTextBuffer&&(this._tileDebugTextBuffer.destroy(),this._tileDebugTextSegments.destroy(),this._tileDebugTextIndexBuffer.destroy(),this._tileDebugTextBuffer=null),this._globeTileDebugTextBuffer&&(this._globeTileDebugTextBuffer.destroy(),this._globeTileDebugTextBuffer=null),this.latestFeatureIndex=null,this.state="unloaded"}}getBucket(e){return this.buckets[e.id]}upload(e){for(const i in this.buckets){const t=this.buckets[i];t.uploadPending()&&t.upload(e)}const t=e.gl;this.imageAtlas&&!this.imageAtlas.uploaded&&(this.imageAtlasTexture=new Hu(e,this.imageAtlas.image,t.RGBA),this.imageAtlas.uploaded=!0),this.glyphAtlasImage&&(this.glyphAtlasTexture=new Hu(e,this.glyphAtlasImage,t.ALPHA),this.glyphAtlasImage=null),this.lineAtlas&&!this.lineAtlas.uploaded&&(this.lineAtlasTexture=new Hu(e,this.lineAtlas.image,t.ALPHA),this.lineAtlas.uploaded=!0)}prepare(e){this.imageAtlas&&this.imageAtlas.patchUpdatedImages(e,this.imageAtlasTexture)}queryRenderedFeatures(e,t,i,r,n,o,s,a){return this.latestFeatureIndex&&this.latestFeatureIndex.rawTileData?this.latestFeatureIndex.query({tileResult:r,pixelPosMatrix:s,transform:o,params:n,tileTransform:this.tileTransform},e,t,i):{}}querySourceFeatures(e,t){const i=this.latestFeatureIndex;if(!i||!i.rawTileData)return;const r=i.loadVTLayers(),n=t?t.sourceLayer:"",o=r._geojsonTileLayer||r[n];if(!o)return;const s=_r(t&&t.filter),{z:a,x:l,y:c}=this.tileID.canonical,h={z:a,x:l,y:c};for(let u=0;ue)i=!1;else if(t)if(this.expirationTime=0;c--){const e=4*c,t=Lp[e+0],i=Lp[e+1],r=Lp[e+2],n=Lp[e+3],o=t+r>>1,s=i+n>>1,a=o+s-i,l=s+t-o,h=33*i+t,u=33*n+r,p=33*s+o,d=Math.hypot((Bp[2*h+0]+Bp[2*u+0])/2-Bp[2*p+0],(Bp[2*h+1]+Bp[2*u+1])/2-Bp[2*p+1])>=16;if(Rp[p]=Rp[p]||(d?1:0),c<1022){const e=33*(i+l>>1)+(t+a>>1),o=33*(n+l>>1)+(r+a>>1);Rp[p]=Rp[p]||Rp[e]||Rp[o]}}const n=new yo,o=new Co;let s=0;function a(e,t){const i=33*t+e;return 0===Fp[i]&&(n.emplaceBack(Bp[2*i+0],Bp[2*i+1],e*Os/32,t*Os/32),Fp[i]=++s),Fp[i]-1}function l(e,t,i,r,n,s){const c=e+i>>1,h=t+r>>1;if(Math.abs(e-n)+Math.abs(t-s)>1&&Rp[33*h+c])l(n,s,e,t,c,h),l(i,r,n,s,c,h);else{const l=a(e,t),c=a(i,r),h=a(n,s);o.emplaceBack(l,c,h)}}return l(0,0,32,32,32,0),l(32,32,0,0,0,32),{vertices:n,indices:o}}(this.tileID.canonical,t);r=e.vertices,n=e.indices}else{r=new yo,n=new Co;for(const{x:t,y:n}of i)r.emplaceBack(t,n,0,0);const e=El(r.int16,void 0,4);for(let t=0;t{const h=(a-e)/(c-1),u=(l-s)/(c-1),p=r.length;for(let d=0;ds*e+t;for(let l=0;lt[s])return null}else{const a=1/r[s];let l=(e[s]-i[s])*a,c=(t[s]-i[s])*a;if(l>c){const e=l;l=c,c=e}if(l>n&&(n=l),co)return null}return n}function qp(e,t,i,r,n,o,s,a,l,c,h){const u=r-e,p=n-t,d=o-i,f=s-e,m=a-t,_=l-i,g=h[1]*_-h[2]*m,y=h[2]*f-h[0]*_,x=h[0]*m-h[1]*f,v=u*g+p*y+d*x;if(Math.abs(v)<1e-15)return null;const b=1/v,w=c[0]-e,T=c[1]-t,E=c[2]-i,S=(w*g+T*y+E*x)*b;if(S<0||S>1)return null;const I=T*d-E*p,M=E*u-w*d,A=w*p-T*u,z=(h[0]*I+h[1]*M+h[2]*A)*b;return z<0||S+z>1?null:(f*I+m*M+_*A)*b}function $p(e,t,i){return(e-t)/(i-t)}function Xp(e,t,i,r,n,o,s,a,l){const c=1<{const o=r?1:0,s=(e+1)*i-o,a=t*i,l=(t+1)*i-o;n[0]=e*i,n[1]=a,n[2]=s,n[3]=l};let s=new Gp(r);const a=[];for(let l=0;l=1;r/=2){const e=i[i.length-1];s=new Gp(r);for(let t=0;t0;){const{idx:a,t:d,nodex:f,nodey:m,depth:_}=p.pop();if(this.leaves[a]){Xp(f,m,_,e,t,i,r,h,u);const a=1<<_,l=(f+0)/a,c=(f+1)/a,p=(m+0)/a,g=(m+1)/a,y=Yp(l,p,this.dem)*s,x=Yp(c,p,this.dem)*s,v=Yp(c,g,this.dem)*s,b=Yp(l,g,this.dem)*s,w=qp(h[0],h[1],y,u[0],h[1],x,u[0],u[1],v,n,o),T=qp(u[0],u[1],v,h[0],u[1],b,h[0],h[1],y,n,o),E=Math.min(null!==w?w:Number.MAX_VALUE,null!==T?T:Number.MAX_VALUE);if(E!==Number.MAX_VALUE)return E;{const e=$a([],n,o,d);if(Hp(y,x,b,v,$p(e[0],h[0],u[0]),$p(e[1],h[1],u[1]))>=e[2])return d}continue}let g=0;for(let p=0;p=l[c[i]]&&(c.splice(i,0,p),t=!0);t||(c[g]=p),g++}}for(let e=0;e=this.dim+1||t<-1||t>=this.dim+1)throw new RangeError("out of range source coordinates for DEM data");return(t+1)*this.stride+(e+1)}_unpackMapbox(e,t,i){return(256*e*256+256*t+i)/10-1e4}_unpackTerrarium(e,t,i){return 256*e+t+i/256-32768}static pack(e,t){const i=[0,0,0,0],r=Jp.getUnpackVector(t);let n=Math.floor((e+r[3])/r[2]);return i[2]=n%256,n=Math.floor(n/256),i[1]=n%256,n=Math.floor(n/256),i[0]=n,i}getPixels(){return new yl({width:this.stride,height:this.stride},this.pixels)}backfillBorder(e,t,i){if(this.dim!==e.dim)throw new Error("dem dimension mismatch");let r=t*this.dim,n=t*this.dim+this.dim,o=i*this.dim,s=i*this.dim+this.dim;switch(t){case-1:r=n-1;break;case 1:n=r+1}switch(i){case-1:o=s-1;break;case 1:s=o+1}const a=-t*this.dim,l=-i*this.dim;for(let c=o;c{this.remove(e,n)},i)),this.data[r].push(n),this.order.push(r),this.order.length>this.max){const e=this._getAndRemoveByKey(this.order[0]);e&&this.onRemove(e)}return this}has(e){return e.wrapped().key in this.data}getAndRemove(e){return this.has(e)?this._getAndRemoveByKey(e.wrapped().key):null}_getAndRemoveByKey(e){const t=this.data[e].shift();return t.timeout&&clearTimeout(t.timeout),0===this.data[e].length&&delete this.data[e],this.order.splice(this.order.indexOf(e),1),t.value}getByKey(e){const t=this.data[e];return t?t[0].value:null}get(e){return this.has(e)?this.data[e.wrapped().key][0].value:null}remove(e,t){if(!this.has(e))return this;const i=e.wrapped().key,r=void 0===t?0:this.data[i].indexOf(t),n=this.data[i][r];return this.data[i].splice(r,1),n.timeout&&clearTimeout(n.timeout),0===this.data[i].length&&delete this.data[i],this.onRemove(n.value),this.order.splice(this.order.indexOf(i),1),this}setMaxSize(e){for(this.max=e;this.order.length>this.max;){const e=this._getAndRemoveByKey(this.order[0]);e&&this.onRemove(e)}return this}filter(e){const t=[];for(const i in this.data)for(const r of this.data[i])e(r.value)||t.push(r);for(const i of t)this.remove(i.value.tileID,i)}}class ed{constructor(e,t,i){this.func=e,this.mask=t,this.range=i}}ed.ReadOnly=!1,ed.ReadWrite=!0,ed.disabled=new ed(519,ed.ReadOnly,[0,1]);class td{constructor(e,t,i,r,n,o){this.test=e,this.ref=t,this.mask=i,this.fail=r,this.depthFail=n,this.pass=o}}td.disabled=new td({func:519,mask:0},0,0,7680,7680,7680);class id{constructor(e,t,i){this.blendFunction=e,this.blendColor=t,this.mask=i}}id.Replace=[1,0],id.disabled=new id(id.Replace,ht.transparent,[!1,!1,!1,!1]),id.unblended=new id(id.Replace,ht.transparent,[!0,!0,!0,!0]),id.alphaBlended=new id([1,771],ht.transparent,[!0,!0,!0,!0]);class rd{constructor(e,t,i){this.enable=e,this.mode=t,this.frontFace=i}}rd.disabled=new rd(!1,1029,2305),rd.backCCW=new rd(!0,1029,2305),rd.backCW=new rd(!0,1029,2304),rd.frontCW=new rd(!0,1028,2304),rd.frontCCW=new rd(!0,1028,2305);class nd extends Ue{constructor(e,t,i){super(),this.id=e,this._onlySymbols=i,t.on("data",e=>{"source"===e.dataType&&"metadata"===e.sourceDataType&&(this._sourceLoaded=!0),this._sourceLoaded&&!this._paused&&"source"===e.dataType&&"content"===e.sourceDataType&&(this.reload(),this.transform&&this.update(this.transform))}),t.on("error",()=>{this._sourceErrored=!0}),this._source=t,this._tiles={},this._cache=new Qp(0,this._unloadTile.bind(this)),this._timers={},this._cacheTimers={},this._minTileCacheSize=t.minTileCacheSize,this._maxTileCacheSize=t.maxTileCacheSize,this._loadedParentTiles={},this._coveredTiles={},this._state=new jp,this._isRaster="raster"===this._source.type||"raster-dem"===this._source.type||"custom"===this._source.type&&"raster"===this._source._dataType}onAdd(e){this.map=e,this._minTileCacheSize=void 0===this._minTileCacheSize&&e?e._minTileCacheSize:this._minTileCacheSize,this._maxTileCacheSize=void 0===this._maxTileCacheSize&&e?e._maxTileCacheSize:this._maxTileCacheSize}loaded(){if(this._sourceErrored)return!0;if(!this._sourceLoaded)return!1;if(!this._source.loaded())return!1;for(const e in this._tiles){const t=this._tiles[e];if("loaded"!==t.state&&"errored"!==t.state)return!1}return!0}getSource(){return this._source}pause(){this._paused=!0}resume(){if(!this._paused)return;const e=this._shouldReloadOnResume;this._paused=!1,this._shouldReloadOnResume=!1,e&&this.reload(),this.transform&&this.update(this.transform)}_loadTile(e,t){return e.isSymbolTile=this._onlySymbols,this._source.loadTile(e,t)}_unloadTile(e){if(this._source.unloadTile)return this._source.unloadTile(e,()=>{})}_abortTile(e){if(this._source.abortTile)return this._source.abortTile(e,()=>{})}serialize(){return this._source.serialize()}prepare(e){if(this._source.prepare&&this._source.prepare(),this._state.coalesceChanges(this._tiles,this.map?this.map.painter:null),this._source.prepareTile)for(const t in this._tiles){const i=this._tiles[t];this._source.prepareTile(i)&&this.map.painter.terrain&&this.map.painter.terrain._clearRenderCacheForTile(this.id,i.tileID),i.upload(e),i.prepare(this.map.style.imageManager)}else for(const t in this._tiles){const i=this._tiles[t];i.upload(e),i.prepare(this.map.style.imageManager)}}getIds(){return x(this._tiles).map(e=>e.tileID).sort(od).map(e=>e.key)}getRenderableIds(e){const t=[];for(const i in this._tiles)this._isIdRenderable(+i,e)&&t.push(this._tiles[i]);return e?t.sort((e,t)=>{const i=e.tileID,r=t.tileID,o=new n(i.canonical.x,i.canonical.y)._rotate(this.transform.angle),s=new n(r.canonical.x,r.canonical.y)._rotate(this.transform.angle);return i.overscaledZ-r.overscaledZ||s.y-o.y||s.x-o.x}).map(e=>e.tileID.key):t.map(e=>e.tileID).sort(od).map(e=>e.key)}hasRenderableParent(e){const t=this.findLoadedParent(e,0);return!!t&&this._isIdRenderable(t.tileID.key)}_isIdRenderable(e,t){return this._tiles[e]&&this._tiles[e].hasData()&&!this._coveredTiles[e]&&(t||!this._tiles[e].holdingForFade())}reload(){if(this._paused)this._shouldReloadOnResume=!0;else{this._cache.reset();for(const e in this._tiles)"errored"!==this._tiles[e].state&&this._reloadTile(+e,"reloading")}}_reloadTile(e,t){const i=this._tiles[e];i&&("loading"!==i.state&&(i.state=t),this._loadTile(i,this._tileLoaded.bind(this,i,e,t)))}_tileLoaded(e,t,i,r){if(r)if(e.state="errored",404!==r.status)this._source.fire(new Oe(r,{tile:e}));else if("raster-dem"===this._source.type&&this.usedForTerrain&&this.map.painter.terrain){const e=this.map.painter.terrain;this.update(this.transform,e.getScaledDemTileSize(),!0),e.resetTileLookupCache(this.id)}else this.update(this.transform);else e.timeAdded=Z.now(),"expired"===i&&(e.refreshedUponExpiration=!0),this._setTileReloadTimer(t,e),"raster-dem"===this._source.type&&e.dem&&this._backfillDEM(e),this._state.initializeTileState(e,this.map?this.map.painter:null),this._source.fire(new Fe("data",{dataType:"source",tile:e,coord:e.tileID,sourceCacheId:this.id}))}_backfillDEM(e){const t=this.getRenderableIds();for(let r=0;r1||(Math.abs(i)>1&&(1===Math.abs(i+n)?i+=n:1===Math.abs(i-n)&&(i-=n)),t.dem&&e.dem&&(e.dem.backfillBorder(t.dem,i,r),e.neighboringTiles&&e.neighboringTiles[o]&&(e.neighboringTiles[o].backfilled=!0)))}}getTile(e){return this.getTileByID(e.key)}getTileByID(e){return this._tiles[e]}_retainLoadedChildren(e,t,i,r){for(const n in this._tiles){let o=this._tiles[n];if(r[n]||!o.hasData()||o.tileID.overscaledZ<=t||o.tileID.overscaledZ>i)continue;let s=o.tileID;for(;o&&o.tileID.overscaledZ>t+1;){const e=o.tileID.scaledTo(o.tileID.overscaledZ-1);o=this._tiles[e.key],o&&o.hasData()&&(s=e)}let a=s;for(;a.overscaledZ>t;)if(a=a.scaledTo(a.overscaledZ-1),e[a.key]){r[s.key]=s;break}}}findLoadedParent(e,t){if(e.key in this._loadedParentTiles){const i=this._loadedParentTiles[e.key];return i&&i.tileID.overscaledZ>=t?i:null}for(let i=e.overscaledZ-1;i>=t;i--){const t=e.scaledTo(i),r=this._getLoadedTile(t);if(r)return r}}_getLoadedTile(e){const t=this._tiles[e.key];return t&&t.hasData()?t:this._cache.getByKey(this._source.reparseOverscaled?e.wrapped().key:e.canonical.key)}updateCacheSize(e,t){t=t||this._source.tileSize;const i=Math.ceil(e.width/t)+1,r=Math.ceil(e.height/t)+1,n=Math.floor(i*r*5),o="number"==typeof this._minTileCacheSize?Math.max(this._minTileCacheSize,n):n,s="number"==typeof this._maxTileCacheSize?Math.min(this._maxTileCacheSize,o):o;this._cache.setMaxSize(s)}handleWrapJump(e){const t=Math.round((e-(void 0===this._prevLng?e:this._prevLng))/360);if(this._prevLng=e,t){const e={};for(const i in this._tiles){const r=this._tiles[i];r.tileID=r.tileID.unwrapTo(r.tileID.wrap+t),e[r.tileID.key]=r}this._tiles=e;for(const t in this._timers)clearTimeout(this._timers[t]),delete this._timers[t];for(const t in this._tiles)this._setTileReloadTimer(+t,this._tiles[t])}}update(e,t,i){if(this.transform=e,!this._sourceLoaded||this._paused||this.transform.freezeTileCoverage)return;if(this.usedForTerrain&&!i)return;let r;this.updateCacheSize(e,t),"globe"!==this.transform.projection.name&&this.handleWrapJump(this.transform.center.lng),this._coveredTiles={},this.used||this.usedForTerrain?this._source.tileID?r=e.getVisibleUnwrappedCoordinates(this._source.tileID).map(e=>new Ap(e.canonical.z,e.wrap,e.canonical.z,e.canonical.x,e.canonical.y)):(r=e.coveringTiles({tileSize:t||this._source.tileSize,minzoom:this._source.minzoom,maxzoom:this._source.maxzoom,roundZoom:this._source.roundZoom&&!i,reparseOverscaled:this._source.reparseOverscaled,isTerrainDEM:this.usedForTerrain}),this._source.hasTile&&(r=r.filter(e=>this._source.hasTile(e)))):r=[];const n=this._updateRetainedTiles(r);if(sd(this._source.type)&&0!==r.length){const e={},t={},i=Object.keys(n);for(const r of i){const i=n[r],o=this._tiles[r];if(!o||o.fadeEndTime&&o.fadeEndTime<=Z.now())continue;const s=this.findLoadedParent(i,Math.max(i.overscaledZ-nd.maxOverzooming,this._source.minzoom));s&&(this._addTile(s.tileID),e[s.tileID.key]=s.tileID),t[r]=i}const o=r[r.length-1].overscaledZ;for(const r in this._tiles){const e=this._tiles[r];if(n[r]||!e.hasData())continue;let i=e.tileID;for(;i.overscaledZ>o;){i=i.scaledTo(i.overscaledZ-1);const o=this._tiles[i.key];if(o&&o.hasData()&&t[i.key]){n[r]=e.tileID;break}}}for(const r in e)n[r]||(this._coveredTiles[r]=!0,n[r]=e[r])}for(const s in n)this._tiles[s].clearFadeHold();const o=function(e,t){const i=[];for(const r in e)r in t||i.push(r);return i}(this._tiles,n);for(const s of o){const e=this._tiles[s];e.hasSymbolBuckets&&!e.holdingForFade()?e.setHoldDuration(this.map._fadeDuration):e.hasSymbolBuckets&&!e.symbolFadeFinished()||this._removeTile(+s)}this._updateLoadedParentTileCache(),this._onlySymbols&&this._source.afterUpdate&&this._source.afterUpdate()}releaseSymbolFadeTiles(){for(const e in this._tiles)this._tiles[e].holdingForFade()&&this._removeTile(+e)}_updateRetainedTiles(e){const t={};if(0===e.length)return t;const i={},r=e.reduce((e,t)=>Math.min(e,t.overscaledZ),1/0),n=e[0].overscaledZ,o=Math.max(n-nd.maxOverzooming,this._source.minzoom),s=Math.max(n+nd.maxUnderzooming,this._source.minzoom),a={};for(const l of e){const e=this._addTile(l);t[l.key]=l,e.hasData()||r=this._source.maxzoom){const e=l.children(this._source.maxzoom)[0],i=this.getTile(e);if(i&&i.hasData()){t[e.key]=e;continue}}else{const e=l.children(this._source.maxzoom);if(t[e[0].key]&&t[e[1].key]&&t[e[2].key]&&t[e[3].key])continue}let r=e.wasRequested();for(let n=l.overscaledZ-1;n>=o;--n){const o=l.scaledTo(n);if(i[o.key])break;if(i[o.key]=!0,e=this.getTile(o),!e&&r&&(e=this._addTile(o)),e&&(t[o.key]=o,r=e.wasRequested(),e.hasData()))break}}return t}_updateLoadedParentTileCache(){this._loadedParentTiles={};for(const e in this._tiles){const t=[];let i,r=this._tiles[e].tileID;for(;r.overscaledZ>0;){if(r.key in this._loadedParentTiles){i=this._loadedParentTiles[r.key];break}t.push(r.key);const e=r.scaledTo(r.overscaledZ-1);if(i=this._getLoadedTile(e),i)break;r=e}for(const e of t)this._loadedParentTiles[e]=i}}_addTile(e){let t=this._tiles[e.key];if(t)return this._source.prepareTile&&this._source.prepareTile(t),t;t=this._cache.getAndRemove(e),t&&(this._setTileReloadTimer(e.key,t),t.tileID=e,this._state.initializeTileState(t,this.map?this.map.painter:null),this._cacheTimers[e.key]&&(clearTimeout(this._cacheTimers[e.key]),delete this._cacheTimers[e.key],this._setTileReloadTimer(e.key,t)));const i=Boolean(t);if(!i){const i=this.map?this.map.painter:null;t=new Np(e,this._source.tileSize*e.overscaleFactor(),this.transform.tileZoom,i,this._isRaster),this._source.prepareTile&&this._source.prepareTile(t)||this._loadTile(t,this._tileLoaded.bind(this,t,e.key,t.state))}return t?(t.uses++,this._tiles[e.key]=t,i||this._source.fire(new Fe("dataloading",{tile:t,coord:t.tileID,dataType:"source"})),t):null}_setTileReloadTimer(e,t){e in this._timers&&(clearTimeout(this._timers[e]),delete this._timers[e]);const i=t.getExpiryTimeout();i&&(this._timers[e]=setTimeout(()=>{this._reloadTile(e,"expired"),delete this._timers[e]},i))}_removeTile(e){const t=this._tiles[e];t&&(t.uses--,delete this._tiles[e],this._timers[e]&&(clearTimeout(this._timers[e]),delete this._timers[e]),t.uses>0||(t.hasData()&&"reloading"!==t.state?this._cache.add(t.tileID,t,t.getExpiryTimeout()):(t.aborted=!0,this._abortTile(t),this._unloadTile(t))))}clearTiles(){this._shouldReloadOnResume=!1,this._paused=!1;for(const e in this._tiles)this._removeTile(+e);this._source._clear&&this._source._clear(),this._cache.reset(),this.map&&this.usedForTerrain&&this.map.painter.terrain&&this.map.painter.terrain.resetTileLookupCache(this.id)}tilesIn(e,t,i){const r=[],n=this.transform;if(!n)return r;for(const o in this._tiles){const s=this._tiles[o];if(i&&s.clearQueryDebugViz(),s.holdingForFade())continue;const a=e.containsTile(s,n,t);a&&r.push(a)}return r}getVisibleCoordinates(e){const t=this.getRenderableIds(e).map(e=>this._tiles[e].tileID);for(const i of t)i.projMatrix=this.transform.calculateProjMatrix(i.toUnwrapped());return t}hasTransition(){if(this._source.hasTransition())return!0;if(sd(this._source.type))for(const e in this._tiles){const t=this._tiles[e];if(void 0!==t.fadeEndTime&&t.fadeEndTime>=Z.now())return!0}return!1}setFeatureState(e,t,i){this._state.updateState(e=e||"_geojsonTileLayer",t,i)}removeFeatureState(e,t,i){this._state.removeFeatureState(e=e||"_geojsonTileLayer",t,i)}getFeatureState(e,t){return this._state.getState(e=e||"_geojsonTileLayer",t)}setDependencies(e,t,i){const r=this._tiles[e];r&&r.setDependencies(t,i)}reloadTilesForDependencies(e,t){for(const i in this._tiles)this._tiles[i].hasDependency(e,t)&&this._reloadTile(+i,"reloading");this._cache.filter(i=>!i.hasDependency(e,t))}_preloadTiles(e,t){const i=new Map,r=Array.isArray(e)?e:[e],n=this.map.painter.terrain,o=this.usedForTerrain&&n?n.getScaledDemTileSize():this._source.tileSize;for(const s of r){const e=s.coveringTiles({tileSize:o,minzoom:this._source.minzoom,maxzoom:this._source.maxzoom,roundZoom:this._source.roundZoom&&!this.usedForTerrain,reparseOverscaled:this._source.reparseOverscaled,isTerrainDEM:this.usedForTerrain});for(const t of e)i.set(t.key,t);this.usedForTerrain&&s.updateElevation(!1)}y(Array.from(i.values()),(e,t)=>{const i=new Np(e,this._source.tileSize*e.overscaleFactor(),this.transform.tileZoom,this.map.painter,this._isRaster);this._loadTile(i,e=>{"raster-dem"===this._source.type&&i.dem&&this._backfillDEM(i),t(e,i)})},t)}}function od(e,t){const i=Math.abs(2*e.wrap)-+(e.wrap<0),r=Math.abs(2*t.wrap)-+(t.wrap<0);return e.overscaledZ-t.overscaledZ||r-i||t.canonical.y-e.canonical.y||t.canonical.x-e.canonical.x}function sd(e){return"raster"===e||"image"===e||"video"===e}nd.maxOverzooming=10,nd.maxUnderzooming=3;class ad{constructor(e,t,i){this._demTile=e,this._dem=this._demTile.dem,this._scale=t,this._offset=i}static create(e,t,i){const r=i||e.findDEMTileFor(t);if(!r||!r.dem)return;const n=r.dem,o=r.tileID,s=1<=0&&i[3]>=0&&a.insert(s,i[0],i[1],i[2],i[3])}}loadVTLayers(){if(!this.vtLayers){this.vtLayers=new vc.VectorTile(new lh(this.rawTileData)).layers,this.sourceLayerCoder=new kp(this.vtLayers?Object.keys(this.vtLayers).sort():["_geojsonTileLayer"]),this.vtFeatures={};for(const e in this.vtLayers)this.vtFeatures[e]=[]}return this.vtLayers}query(e,t,i,r){this.loadVTLayers();const n=e.params||{},o=_r(n.filter),s=e.tileResult,a=e.transform,l=s.bufferedTilespaceBounds,c=this.grid.query(l.min.x,l.min.y,l.max.x,l.max.y,(e,t,i,r)=>ya(s.bufferedTilespaceGeometry,e,t,i,r));c.sort(hd);let h=null;a.elevation&&c.length>0&&(h=ad.create(a.elevation,this.tileID));const u={};let p;for(let d=0;d(f||(f=ra(t,this.tileID.canonical,e.tileTransform)),i.queryIntersectsFeature(s,t,r,f,this.z,e.transform,e.pixelPosMatrix,h,n)))}return u}loadMatchingFeature(e,t,i,r,n,o,s,a,l){const{featureIndex:c,bucketIndex:h,sourceLayerIndex:u,layoutVertexArrayOffset:p}=t,d=this.bucketLayerIDs[h];if(r&&!function(e,t){for(let i=0;i=0)return!0;return!1}(r,d))return;const f=this.sourceLayerCoder.decode(u),m=this.vtLayers[f].feature(c);if(i.needGeometry){const e=na(m,!0);if(!i.filter(new Wn(this.tileID.overscaledZ),e,this.tileID.canonical))return}else if(!i.filter(new Wn(this.tileID.overscaledZ),m))return;const _=this.getId(m,f);for(let g=0;g{const s=t instanceof io?t.get(o):null;return s&&s.evaluate?s.evaluate(i,r,n):s})}function hd(e,t){return t-e}Wr(ld,{omit:["rawTileData","sourceLayerCoder"]});class ud{constructor(e){const t={},i=[];for(const s in e){const r=e[s],n=t[s]={};for(const e in r.glyphs){const t=r.glyphs[+e];if(!t||0===t.bitmap.width||0===t.bitmap.height)continue;const o=t.metrics.localGlyph?2:1,s={x:0,y:0,w:t.bitmap.width+2*o,h:t.bitmap.height+2*o};i.push(s),n[e]=s}}const{w:r,h:n}=kh(i),o=new gl({width:r||1,height:n||1});for(const s in e){const i=e[s];for(const e in i.glyphs){const r=i.glyphs[+e];if(!r||0===r.bitmap.width||0===r.bitmap.height)continue;const n=t[s][e],a=r.metrics.localGlyph?2:1;gl.copy(r.bitmap,o,{x:0,y:0},{x:n.x+a,y:n.y+a},r.bitmap)}}this.image=o,this.positions=t}}Wr(ud);class pd{constructor(e){this.tileID=new Ap(e.tileID.overscaledZ,e.tileID.wrap,e.tileID.canonical.z,e.tileID.canonical.x,e.tileID.canonical.y),this.tileZoom=e.tileZoom,this.uid=e.uid,this.zoom=e.zoom,this.canonical=e.tileID.canonical,this.pixelRatio=e.pixelRatio,this.tileSize=e.tileSize,this.source=e.source,this.overscaling=this.tileID.overscaleFactor(),this.showCollisionBoxes=e.showCollisionBoxes,this.collectResourceTiming=!!e.collectResourceTiming,this.returnDependencies=!!e.returnDependencies,this.promoteId=e.promoteId,this.enableTerrain=!!e.enableTerrain,this.isSymbolTile=e.isSymbolTile,this.tileTransform=Cp(e.tileID.canonical,e.projection),this.projection=e.projection}parse(e,t,i,r,n){this.status="parsing",this.data=e,this.collisionBoxArray=new qo;const o=new kp(Object.keys(e.layers).sort()),s=new ld(this.tileID,this.promoteId);s.bucketLayerIDs=[];const a={},l=new Yu(256,256),c={featureIndex:s,iconDependencies:{},patternDependencies:{},glyphDependencies:{},lineAtlas:l,availableImages:i},h=t.familiesBySource[this.source];for(const x in h){const t=e.layers[x];if(!t)continue;let r=!1,n=!1;for(const e of h[x])"symbol"===e[0].type?r=!0:n=!0;if(!0===this.isSymbolTile&&!r)continue;if(!1===this.isSymbolTile&&!n)continue;1===t.version&&D(`Vector tile source "${this.source}" layer "${x}" does not use vector tile spec v2 and therefore may have some rendering errors.`);const l=o.encode(x),u=[];for(let e=0;e=t.maxzoom||"none"!==t.visibility&&(dd(e,this.zoom,i),(a[t.id]=t.createBucket({index:s.bucketLayerIDs.length,layers:e,zoom:this.zoom,canonical:this.canonical,pixelRatio:this.pixelRatio,overscaling:this.overscaling,collisionBoxArray:this.collisionBoxArray,sourceLayerIndex:l,sourceID:this.source,enableTerrain:this.enableTerrain,projection:this.projection.name,availableImages:i})).populate(u,c,this.tileID.canonical,this.tileTransform),s.bucketLayerIDs.push(e.map(e=>e.id)))}}let u,p,d,f;l.trim();const m={type:"maybePrepare",isSymbolTile:this.isSymbolTile,zoom:this.zoom},_=A(c.glyphDependencies,e=>Object.keys(e).map(Number));Object.keys(_).length?r.send("getGlyphs",{uid:this.uid,stacks:_},(e,t)=>{u||(u=e,p=t,v.call(this))},void 0,!1,m):p={};const g=Object.keys(c.iconDependencies);g.length?r.send("getImages",{icons:g,source:this.source,tileID:this.tileID,type:"icons"},(e,t)=>{u||(u=e,d=t,v.call(this))},void 0,!1,m):d={};const y=Object.keys(c.patternDependencies);function v(){if(u)return n(u);if(p&&d&&f){const e=new ud(p),t=new Ph(d,f);for(const r in a){const n=a[r];n instanceof Ou?(dd(n.layers,this.zoom,i),wu(n,p,e.positions,d,t.iconPositions,this.showCollisionBoxes,i,this.tileID.canonical,this.tileZoom,this.projection)):n.hasPattern&&(n instanceof Vc||n instanceof oc||n instanceof Mc)&&(dd(n.layers,this.zoom,i),n.addFeatures(c,this.tileID.canonical,t.patternPositions,i,this.tileTransform))}this.status="done",n(null,{buckets:x(a).filter(e=>!e.isEmpty()),featureIndex:s,collisionBoxArray:this.collisionBoxArray,glyphAtlasImage:e.image,lineAtlas:l,imageAtlas:t,glyphMap:this.returnDependencies?p:null,iconMap:this.returnDependencies?d:null,glyphPositions:this.returnDependencies?e.positions:null})}}y.length?r.send("getImages",{icons:y,source:this.source,tileID:this.tileID,type:"patterns"},(e,t)=>{u||(u=e,f=t,v.call(this))},void 0,!1,m):f={},v.call(this)}}function dd(e,t,i){const r=new Wn(t);for(const n of e)n.recalculate(r,i)}class fd{constructor(e){this.entries={},this.scheduler=e}request(e,t,i,r){const n=this.entries[e]=this.entries[e]||{callbacks:[]};if(n.result){const[e,i]=n.result;return this.scheduler?this.scheduler.add(()=>{r(e,i)},t):r(e,i),()=>{}}return n.callbacks.push(r),n.cancel||(n.cancel=i((i,r)=>{n.result=[i,r];for(const e of n.callbacks)this.scheduler?this.scheduler.add(()=>{e(i,r)},t):e(i,r);setTimeout(()=>delete this.entries[e],3e3)})),()=>{n.result||(n.callbacks=n.callbacks.filter(e=>e!==r),n.callbacks.length||(n.cancel(),delete this.entries[e]))}}}function md(e,t,i){const r=JSON.stringify(e.request);return e.data&&(this.deduped.entries[r]={result:[null,e.data]}),this.deduped.request(r,{type:"parseTile",isSymbolTile:e.isSymbolTile,zoom:e.tileZoom},t=>{const r=Me(e.request,(e,r,n,o)=>{e?t(e):r&&t(null,{vectorTile:i?void 0:new vc.VectorTile(new lh(r)),rawData:r,cacheControl:n,expires:o})});return()=>{r.cancel(),t()}},t)}const _d=za(new Float32Array(16));class gd{constructor(e){this.name=e.name,this.wrap=!1,this.requiresDraping=!1,this.supportsWorldCopies=!1,this.supportsTerrain=!1,this.supportsFog=!1,this.supportsFreeCamera=!1,this.zAxisUnit="meters",this.isReprojectedInTileSpace=!0,this.unsupportedLayers=["custom"],this.center=[0,0],this.range=[3.5,7]}project(e,t){return{x:0,y:0,z:0}}unproject(e,t){return new Ns(0,0)}projectTilePoint(e,t,i){return{x:e,y:t,z:0}}locationPoint(e,t){return e._coordinatePoint(e.locationCoordinate(t),!1)}pixelsPerMeter(e,t){return $s(1,e)*t}farthestPixelDistance(e){return function(e,t){const i=e.fovAboveCenter,r=e.elevation?e.elevation.getMinElevationBelowMSL()*t:0,n=(e._camera.position[2]*e.worldSize-r)/Math.cos(e._pitch),o=Math.sin(i)*n/Math.sin(Math.max(Math.PI/2-e._pitch-i,.01)),s=Math.sin(e._pitch)*o+n;return Math.min(1.01*s,n*(1/e._horizonShift))}(e,e.pixelsPerMeter)}pointCoordinate(e,t,i,r){const o=e.horizonLineFromTop(!1),s=new n(t,Math.max(o,i));return e.rayIntersectionCoordinate(e.pointRayIntersection(s,r))}createInversionMatrix(e,t){return _d}createTileMatrix(e,t,i){let r,n,o;const s=i.canonical,a=za(new Float64Array(16));if(this.isReprojectedInTileSpace){const l=Cp(s,this);r=1,n=l.x+i.wrap*l.scale,o=l.y,Da(a,a,[r/l.scale,r/l.scale,e.pixelsPerMeter/t])}else r=t/e.zoomScale(s.z),n=(s.x+Math.pow(2,s.z)*i.wrap)*r,o=s.y*r;return ka(a,a,[n,o,0]),Da(a,a,[r/Os,r/Os,1]),a}upVector(e,t,i){return[0,0,1]}upVectorScale(e,t,i){return{metersToTile:1,metersToLabelSpace:1}}}class yd extends gd{constructor(e){super(e),this.wrap=!0,this.supportsWorldCopies=!0,this.supportsTerrain=!0,this.supportsFog=!0,this.supportsFreeCamera=!0,this.isReprojectedInTileSpace=!1,this.unsupportedLayers=[],this.range=null}project(e,t){return{x:Zs(e),y:qs(t),z:0}}unproject(e,t){const i=Xs(e),r=Ws(t);return new Ns(i,r)}}class xd extends gd{constructor(e){super(e),this.range=[4,7],this.center=e.center||[-96,37.5];const[t,i]=this.parallels=e.parallels||[29.5,45.5],r=Math.sin(c(t));this.n=(r+Math.sin(c(i)))/2,this.c=1+r*(2*this.n-r),this.r0=Math.sqrt(this.c)/this.n}project(e,t){const{n:i,c:r,r0:n}=this,o=c(e-this.center[0]),s=c(t),a=Math.sqrt(r-2*i*Math.sin(s))/i;return{x:a*Math.sin(o*i),y:a*Math.cos(o*i)-n,z:0}}unproject(e,t){const{n:i,c:r,r0:n}=this,o=n+t;let s=Math.atan2(e,Math.abs(o))*Math.sign(o);o*i<0&&(s-=Math.PI*Math.sign(e)*Math.sign(o));const a=c(this.center[0])*i;s=g(s,-Math.PI-a,Math.PI-a);const l=h(s/i)+this.center[0],u=Math.asin(m((r-(e*e+o*o)*i*i)/(2*i),-1,1)),p=m(h(u),-85.051129,Ys);return new Ns(l,p)}}const vd=1.340264,bd=-.081106,wd=893e-6,Td=.003796,Ed=Math.sqrt(3)/2;class Sd extends gd{project(e,t){t=t/180*Math.PI,e=e/180*Math.PI;const i=Math.asin(Ed*Math.sin(t)),r=i*i,n=r*r*r;return{x:.5*(e*Math.cos(i)/(Ed*(vd+3*bd*r+n*(7*wd+9*Td*r)))/Math.PI+.5),y:1-.5*(i*(vd+bd*r+n*(wd+Td*r))/Math.PI+1),z:0}}unproject(e,t){e=(2*e-.5)*Math.PI;let i=t=(2*(1-t)-1)*Math.PI,r=i*i,n=r*r*r;for(let c,h,u,p=0;p<12&&(h=i*(vd+bd*r+n*(wd+Td*r))-t,u=vd+3*bd*r+n*(7*wd+9*Td*r),c=h/u,i=m(i-c,-Math.PI/3,Math.PI/3),r=i*i,n=r*r*r,!(Math.abs(c)<1e-12));++p);const o=Ed*e*(vd+3*bd*r+n*(7*wd+9*Td*r))/Math.cos(i),s=Math.asin(Math.sin(i)/Ed),a=m(180*o/Math.PI,-180,180),l=m(180*s/Math.PI,-85.051129,Ys);return new Ns(a,l)}}class Id extends gd{constructor(e){super(e),this.wrap=!0,this.supportsWorldCopies=!0}project(e,t){return{x:.5+e/360,y:.5-t/360,z:0}}unproject(e,t){const i=360*(e-.5),r=m(360*(.5-t),-85.051129,Ys);return new Ns(i,r)}}const Md=Math.PI/2;function Ad(e){return Math.tan((Md+e)/2)}class zd extends gd{constructor(e){super(e),this.center=e.center||[0,30];const[t,i]=this.parallels=e.parallels||[30,30],r=c(t),n=c(i),o=Math.cos(r);this.n=r===n?Math.sin(r):Math.log(o/Math.cos(n))/Math.log(Ad(n)/Ad(r)),this.f=o*Math.pow(Ad(r),this.n)/this.n}project(e,t){t=c(t),e=c(e-this.center[0]);const i=1e-6,{n:r,f:n}=this;n>0?t<-Md+i&&(t=-Md+i):t>Md-i&&(t=Md-i);const o=n/Math.pow(Ad(t),r),s=o*Math.sin(r*e),a=n-o*Math.cos(r*e);return{x:.5*(s/Math.PI+.5),y:1-.5*(a/Math.PI+.5),z:0}}unproject(e,t){e=(2*e-.5)*Math.PI,t=(2*(1-t)-.5)*Math.PI;const{n:i,f:r}=this,n=r-t,o=Math.sign(n),s=Math.sign(i)*Math.sqrt(e*e+n*n);let a=Math.atan2(e,Math.abs(n))*o;n*i<0&&(a-=Math.PI*Math.sign(e)*o);const l=m(h(a/i)+this.center[0],-180,180),c=m(h(2*Math.atan(Math.pow(r/s,1/i))-Md),-85.051129,Ys);return new Ns(l,c)}}const Cd=c(Ys);class kd extends gd{project(e,t){const i=(t=c(t))*t,r=i*i;return{x:.5*((e=c(e))*(.8707-.131979*i+r*(r*(.003971*i-.001529*r)-.013791))/Math.PI+.5),y:1-.5*(t*(1.007226+i*(.015085+r*(.028874*i-.044475-.005916*r)))/Math.PI+1),z:0}}unproject(e,t){e=(2*e-.5)*Math.PI;let i=t=(2*(1-t)-1)*Math.PI,r=25,n=0,o=i*i;do{o=i*i;const e=o*o;n=(i*(1.007226+o*(.015085+e*(.028874*o-.044475-.005916*e)))-t)/(1.007226+o*(.045255+e*(.259866*o-.311325-.005916*11*e))),i=m(i-n,-Cd,Cd)}while(Math.abs(n)>1e-6&&--r>0);o=i*i;const s=m(h(e/(.8707+o*(o*(o*o*o*(.003971-.001529*o)-.013791)-.131979))),-180,180),a=h(i);return new Ns(s,a)}}const Dd=c(Ys);class Pd extends gd{project(e,t){t=c(t),e=c(e);const i=Math.cos(t),r=2/Math.PI,n=Math.acos(i*Math.cos(e/2)),o=Math.sin(n)/n,s=.5*(e*r+2*i*Math.sin(e/2)/o)||0,a=.5*(t+Math.sin(t)/o)||0;return{x:.5*(s/Math.PI+.5),y:1-.5*(a/Math.PI+1),z:0}}unproject(e,t){let i=e=(2*e-.5)*Math.PI,r=t=(2*(1-t)-1)*Math.PI,n=25;const o=1e-6;let s=0,a=0;do{const n=Math.cos(r),o=Math.sin(r),l=2*o*n,c=o*o,h=n*n,u=Math.cos(i/2),p=Math.sin(i/2),d=2*u*p,f=p*p,_=1-h*u*u,g=_?1/_:0,y=_?Math.acos(n*u)*Math.sqrt(1/_):0,x=.5*(2*y*n*p+2*i/Math.PI)-e,v=.5*(y*o+r)-t,b=.5*g*(h*f+y*n*u*c)+1/Math.PI,w=g*(d*l/4-y*o*p),T=.125*g*(l*p-y*o*h*d),E=.5*g*(c*u+y*f*n)+.5,S=w*T-E*b;s=(v*w-x*E)/S,a=(x*T-v*b)/S,i=m(i-s,-Math.PI,Math.PI),r=m(r-a,-Dd,Dd)}while((Math.abs(s)>o||Math.abs(a)>o)&&--n>0);return new Ns(h(i),h(r))}}class Ld extends gd{constructor(e){super(e),this.center=e.center||[0,0],this.parallels=e.parallels||[0,0],this.cosPhi=Math.max(.01,Math.cos(c(this.parallels[0]))),this.scale=1/(2*Math.max(Math.PI*this.cosPhi,1/this.cosPhi)),this.wrap=!0,this.supportsWorldCopies=!0}project(e,t){const{scale:i,cosPhi:r}=this;return{x:c(e)*r*i+.5,y:-Math.sin(c(t))/r*i+.5,z:0}}unproject(e,t){const{scale:i,cosPhi:r}=this,n=-(t-.5)/i,o=m(h((e-.5)/i)/r,-180,180),s=Math.asin(m(n*r,-1,1)),a=m(h(s),-85.051129,Ys);return new Ns(o,a)}}e.ARRAY_TYPE=Ma,e.AUTH_ERR_MSG=ee,e.Aabb=al,e.Actor=class{constructor(e,t,i){this.target=e,this.parent=t,this.mapId=i,this.callbacks={},this.cancelCallbacks={},I(["receive"],this),this.target.addEventListener("message",this.receive,!1),this.globalScope=B()?e:s,this.scheduler=new ep}send(e,t,i,r,n=!1,o){const s=Math.round(1e18*Math.random()).toString(36).substring(0,10);i&&(i.metadata=o,this.callbacks[s]=i);const a=j(this.globalScope)?void 0:[];return this.target.postMessage({id:s,type:e,hasCallback:!!i,targetMapId:r,mustQueue:n,sourceMapId:this.mapId,data:Kr(t,a)},a),{cancel:()=>{i&&delete this.callbacks[s],this.target.postMessage({id:s,type:"",targetMapId:r,sourceMapId:this.mapId})}}}receive(e){const t=e.data,i=t.id;if(i&&(!t.targetMapId||this.mapId===t.targetMapId))if(""===t.type){const e=this.cancelCallbacks[i];delete this.cancelCallbacks[i],e&&e.cancel()}else if(t.mustQueue||B()){const e=this.callbacks[i];this.cancelCallbacks[i]=this.scheduler.add(()=>this.processTask(i,t),e&&e.metadata||{type:"message"})}else this.processTask(i,t)}processTask(e,t){if(""===t.type){const i=this.callbacks[e];delete this.callbacks[e],i&&(t.error?i(Jr(t.error)):i(null,Jr(t.data)))}else{const i=j(this.globalScope)?void 0:[],r=t.hasCallback?(t,r)=>{delete this.cancelCallbacks[e],this.target.postMessage({id:e,type:"",sourceMapId:this.mapId,error:t?Kr(t):null,data:Kr(r,i)},i)}:e=>{},n=Jr(t.data);if(this.parent[t.type])this.parent[t.type](t.sourceMapId,n,r);else if(this.parent.getWorkerSource){const e=t.type.split(".");this.parent.getWorkerSource(t.sourceMapId,e[0],n.source)[e[1]](n,r)}else r(new Error("Could not find function "+t.type))}}remove(){this.scheduler.remove(),this.target.removeEventListener("message",this.receive,!1)}},e.CanonicalTileID=Ip,e.Color=ht,e.ColorMode=id,e.CullFaceMode=rd,e.DEMData=Jp,e.DataConstantProperty=ro,e.DedupedRequest=fd,e.DepthMode=ed,e.EXTENT=Os,e.Elevation=class{isDataAvailableAtPoint(e){const t=this._source();if(!t||e.y<0||e.y>1)return!1;const i=t.getSource().maxzoom,r=1<1)return t;const n=r.getSource().maxzoom,o=1<{const o=this.getAtTileOffset(e,n.x,n.y),s=r.upVector(e.canonical,n.x,n.y);return qa(s,s,o*r.upVectorScale(e.canonical,t,i).metersToTile),s}}getForTilePoints(e,t,i,r){const n=ad.create(this,e,r);return!!n&&(t.forEach(e=>{e[2]=this.exaggeration()*n.getElevationAt(e[0],e[1],i)}),!0)}getMinMaxForTile(e){const t=this.findDEMTileFor(e);if(!t||!t.dem)return null;const i=t.dem.tree,r=t.tileID,n=1<this._skuTokenExpiresAt}transformRequest(e,t){return this._transformRequestFn&&this._transformRequestFn(e,t)||{url:e}}normalizeStyleURL(e,t){if(!te(e))return e;const i=ne(e);return i.path="/styles/v1"+i.path,this._makeAPIURL(i,this._customAccessToken||t)}normalizeGlyphsURL(e,t){if(!te(e))return e;const i=ne(e);return i.path="/fonts/v1"+i.path,this._makeAPIURL(i,this._customAccessToken||t)}normalizeSourceURL(e,t){if(!te(e))return e;const i=ne(e);return i.path=`/v4/${i.authority}.json`,i.params.push("secure"),this._makeAPIURL(i,this._customAccessToken||t)}normalizeSpriteURL(e,t,i,r){const n=ne(e);return te(e)?(n.path=`/styles/v1${n.path}/sprite${t}${i}`,this._makeAPIURL(n,this._customAccessToken||r)):(n.path+=`${t}${i}`,oe(n))}normalizeTileURL(e,t,i){if(this._isSkuTokenExpired()&&this._createSkuToken(),e&&!te(e))return e;const r=ne(e);r.path=r.path.replace(/(\.(png|jpg)\d*)(?=$)/,`${t||i&&"raster"!==r.authority&&512===i?"@2x":""}${X.supported?".webp":"$1"}`),"raster"===r.authority?r.path=`/${$.RASTER_URL_PREFIX}${r.path}`:(r.path=r.path.replace(/^.+\/v4\//,"/"),r.path=`/${$.TILE_URL_VERSION}${r.path}`);const n=this._customAccessToken||function(e){for(const t of e){const e=t.match(/^access_token=(.*)$/);if(e)return e[1]}return null}(r.params)||$.ACCESS_TOKEN;return $.REQUIRE_ACCESS_TOKEN&&n&&this._skuToken&&r.params.push("sku="+this._skuToken),this._makeAPIURL(r,n)}canonicalizeTileURL(e,t){const i=ne(e);if(!i.path.match(/^(\/v4\/|\/raster\/v1\/)/)||!i.path.match(/\.[\w]+$/))return e;let r="mapbox://";i.path.match(/^\/raster\/v1\//)?r+="raster/"+i.path.replace(`/${$.RASTER_URL_PREFIX}/`,""):r+="tiles/"+i.path.replace(`/${$.TILE_URL_VERSION}/`,"");let n=i.params;return t&&(n=n.filter(e=>!e.match(/^access_token=/))),n.length&&(r+="?"+n.join("&")),r}canonicalizeTileset(e,t){const i=!!t&&te(t),r=[];for(const n of e.tiles||[])ie(n)?r.push(this.canonicalizeTileURL(n,i)):r.push(n);return r}_makeAPIURL(e,t){const i="See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes",r=ne($.API_URL);if(e.protocol=r.protocol,e.authority=r.authority,"http"===e.protocol){const t=e.params.indexOf("secure");t>=0&&e.params.splice(t,1)}if("/"!==r.path&&(e.path=`${r.path}${e.path}`),!$.REQUIRE_ACCESS_TOKEN)return oe(e);if(t=t||$.ACCESS_TOKEN,!this._silenceAuthErrors){if(!t)throw new Error("An API access token is required to use Mapbox GL. "+i);if("s"===t[0])throw new Error("Use a public access token (pk.*) with Mapbox GL, not a secret access token (sk.*). "+i)}return e.params=e.params.filter(e=>-1===e.indexOf("access_token")),e.params.push("access_token="+(t||"")),oe(e)}},e.ResourceType=Te,e.SegmentVector=Fs,e.SourceCache=nd,e.StencilMode=td,e.StructArrayLayout1ui2=Oo,e.StructArrayLayout2f1f2i16=Ao,e.StructArrayLayout2i4=_o,e.StructArrayLayout2ui4=Fo,e.StructArrayLayout3f12=vo,e.StructArrayLayout3ui6=Co,e.StructArrayLayout4i8=yo,e.Texture=Hu,e.Tile=Np,e.Transitionable=Kn,e.Uniform1f=fs,e.Uniform1i=class extends ds{constructor(e,t){super(e,t),this.current=0}set(e){this.current!==e&&(this.current=e,this.gl.uniform1i(this.location,e))}},e.Uniform2f=class extends ds{constructor(e,t){super(e,t),this.current=[0,0]}set(e){e[0]===this.current[0]&&e[1]===this.current[1]||(this.current=e,this.gl.uniform2f(this.location,e[0],e[1]))}},e.Uniform3f=class extends ds{constructor(e,t){super(e,t),this.current=[0,0,0]}set(e){e[0]===this.current[0]&&e[1]===this.current[1]&&e[2]===this.current[2]||(this.current=e,this.gl.uniform3f(this.location,e[0],e[1],e[2]))}},e.Uniform4f=ms,e.UniformColor=_s,e.UniformMatrix2f=class extends ds{constructor(e,t){super(e,t),this.current=xs}set(e){for(let t=0;t<4;t++)if(e[t]!==this.current[t]){this.current=e,this.gl.uniformMatrix2fv(this.location,!1,e);break}}},e.UniformMatrix3f=class extends ds{constructor(e,t){super(e,t),this.current=ys}set(e){for(let t=0;t<9;t++)if(e[t]!==this.current[t]){this.current=e,this.gl.uniformMatrix3fv(this.location,!1,e);break}}},e.UniformMatrix4f=class extends ds{constructor(e,t){super(e,t),this.current=gs}set(e){if(e[12]!==this.current[12]||e[0]!==this.current[0])return this.current=e,void this.gl.uniformMatrix4fv(this.location,!1,e);for(let t=1;t<16;t++)if(e[t]!==this.current[t]){this.current=e,this.gl.uniformMatrix4fv(this.location,!1,e);break}}},e.UnwrappedTileID=Mp,e.ValidationError=lr,e.VectorTileWorkerSource=class extends Ue{constructor(e,t,i,r,n){super(),this.actor=e,this.layerIndex=t,this.availableImages=i,this.loadVectorData=n||md,this.loading={},this.loaded={},this.deduped=new fd(e.scheduler),this.isSpriteLoaded=r,this.scheduler=e.scheduler}loadTile(e,t){const i=e.uid,r=e&&e.request,n=r&&r.collectResourceTiming,o=this.loading[i]=new pd(e);o.abort=this.loadVectorData(e,(s,a)=>{const l=!this.loading[i];if(delete this.loading[i],l||s||!a)return o.status="done",l||(this.loaded[i]=o),t(s);const c=a.rawData,h={};a.expires&&(h.expires=a.expires),a.cacheControl&&(h.cacheControl=a.cacheControl),o.vectorTile=a.vectorTile||new vc.VectorTile(new lh(c));const u=()=>{o.parse(o.vectorTile,this.layerIndex,this.availableImages,this.actor,(e,i)=>{if(e||!i)return t(e);const o={};if(n){const e=Qu(r);e.length>0&&(o.resourceTiming=JSON.parse(JSON.stringify(e)))}t(null,v({rawTileData:c.slice(0)},i,h,o))})};this.isSpriteLoaded?u():this.once("isSpriteLoaded",()=>{this.scheduler?this.scheduler.add(u,{type:"parseTile",isSymbolTile:e.isSymbolTile,zoom:e.tileZoom}):u()}),this.loaded=this.loaded||{},this.loaded[i]=o})}reloadTile(e,t){const i=this.loaded,r=e.uid,n=this;if(i&&i[r]){const o=i[r];o.showCollisionBoxes=e.showCollisionBoxes,o.enableTerrain=!!e.enableTerrain,o.projection=e.projection,o.tileTransform=Cp(e.tileID.canonical,e.projection);const s=(e,i)=>{const r=o.reloadCallback;r&&(delete o.reloadCallback,o.parse(o.vectorTile,n.layerIndex,this.availableImages,n.actor,r)),t(e,i)};"parsing"===o.status?o.reloadCallback=s:"done"===o.status&&(o.vectorTile?o.parse(o.vectorTile,this.layerIndex,this.availableImages,this.actor,s):s())}}abortTile(e,t){const i=e.uid,r=this.loading[i];r&&(r.abort&&r.abort(),delete this.loading[i]),t()}removeTile(e,t){const i=this.loaded,r=e.uid;i&&i[r]&&delete i[r],t()}},e.WritingMode=Lh,e.ZoomHistory=Qr,e.add=Va,e.addDynamicAttributes=Lu,e.adjoint=function(e,t){var i=t[0],r=t[1],n=t[2],o=t[3],s=t[4],a=t[5],l=t[6],c=t[7],h=t[8];return e[0]=s*h-a*c,e[1]=n*c-r*h,e[2]=r*a-n*s,e[3]=a*l-o*h,e[4]=i*h-n*l,e[5]=n*o-i*a,e[6]=o*c-s*l,e[7]=r*l-i*c,e[8]=i*s-r*o,e},e.asyncAll=y,e.bezier=d,e.bindAll=I,e.boundsAttributes=Up,e.bufferConvexPolygon=function(e,t){const i=[];for(let r=0;rxe&&(e.getActor().send("enforceCacheSizeLimit",ye),we=0)},e.calculateGlobeLabelMatrix=function(e,t){const{lng:i,lat:r}=e._center,n=vp(0,0,e.worldSize/e._projectionScaler,i,r);return Ca(n,n,function(e){const t=za(new Float64Array(16)),i=1/yp(e);return ka(t,t,e.min),Da(t,t,[i,i,i]),t}(pp(t)))},e.calculateGlobeMatrix=bp,e.calculateGlobeMercatorMatrix=function(e){const t=e.worldSize,i=e.point,r=$s(1,e.center.lat)*t,n=e.pixelsPerMeter,o=t/(r/e.pixelsPerMeter),s=za(new Float64Array(16));return ka(s,s,[i.x,i.y,0]),Da(s,s,[o,o,n]),Float32Array.from(s)},e.circumferenceAtLatitude=Gs,e.clamp=m,e.clearTileCache=function(e){const t=s.caches.delete(me);e&&t.catch(e).then(()=>e())},e.clipLine=iu,e.clone=function(e){var t=new Ma(16);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[7]=e[7],t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t},e.clone$1=C,e.collisionCircleLayout=Yc,e.config=$,e.conjugate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e[2]=-t[2],e[3]=t[3],e},e.create=function(){var e=new Ma(16);return Ma!=Float32Array&&(e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[11]=0,e[12]=0,e[13]=0,e[14]=0),e[0]=1,e[5]=1,e[10]=1,e[15]=1,e},e.create$1=Aa,e.createExpression=rr,e.createLayout=fo,e.createStyleLayer=function(e){return"custom"===e.type?new qu(e):new Wu[e.type](e)},e.cross=Ha,e.degToRad=c,e.div=function(e,t,i){return e[0]=t[0]/i[0],e[1]=t[1]/i[1],e[2]=t[2]/i[2],e},e.dot=Wa,e.earthRadius=Vs,e.ease=f,e.easeCubicInOut=p,e.emitValidationErrors=Zr,e.endsWith=M,e.enforceCacheSizeLimit=function(e){ve(),_e&&_e.then(t=>{t.keys().then(i=>{for(let r=0;ro&&(r+=(e[n]-o)*(e[n]-o)),t[n]{}}},e.globeECEFOrigin=function(e,t){const i=[0,0,0];return Ya(i,i,xp(pp(t.canonical))),Ya(i,i,e),i},e.globePixelsToTileUnits=function(e,t){return Os/(512*Math.pow(2,e))*yp(pp(t))},e.globePoleMatrixForTile=function(e,t,i){const r=za(new Float64Array(16)),n=1<0&&(s=1/Math.sqrt(s)),e[0]=i*s,e[1]=r*s,e[2]=n*s,e[3]=o*s,e},e.number=ti,e.ortho=function(e,t,i,r,n,o,s){var a=1/(t-i),l=1/(r-n),c=1/(o-s);return e[0]=-2*a,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=-2*l,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=2*c,e[11]=0,e[12]=(t+i)*a,e[13]=(n+r)*l,e[14]=(s+o)*c,e[15]=1,e},e.pbf=lh,e.perspective=function(e,t,i,r,n){var o,s=1/Math.tan(t/2);return e[0]=s/i,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=s,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[11]=-1,e[12]=0,e[13]=0,e[15]=0,null!=n&&n!==1/0?(e[10]=(n+r)*(o=1/(r-n)),e[14]=2*n*r*o):(e[10]=-1,e[14]=-2*r),e},e.pick=function(e,t){const i={};for(let r=0;rGr(Ir(e)),e.validateFog=e=>Gr(Rr(e)),e.validateLayer=e=>Gr(Cr(e)),e.validateLight=e=>Gr(Lr(e)),e.validateSource=e=>Gr(Pr(e)),e.validateStyle=Vr,e.validateTerrain=e=>Gr(Br(e)),e.values=x,e.vectorTile=vc,e.version=t,e.warnOnce=D,e.window=s,e.wrap=g})),r(0,(function(e){function t(e){if("number"==typeof e||"boolean"==typeof e||"string"==typeof e||null==e)return JSON.stringify(e);if(Array.isArray(e)){let i="[";for(const r of e)i+=t(r)+",";return i+"]"}let i="{";for(const r of Object.keys(e).sort())i+=`${r}:${t(e[r])},`;return i+"}"}function i(i){let r="";for(const n of e.refProperties)r+="/"+t(i[n]);return r}class r{constructor(e){this.keyCache={},e&&this.replace(e)}replace(e){this._layerConfigs={},this._layers={},this.update(e,[])}update(t,r){for(const i of t)this._layerConfigs[i.id]=i,(this._layers[i.id]=e.createStyleLayer(i)).compileFilter(),this.keyCache[i.id]&&delete this.keyCache[i.id];for(const e of r)delete this.keyCache[e],delete this._layerConfigs[e],delete this._layers[e];this.familiesBySource={};const n=function(e,t){const r={};for(let o=0;othis._layers[e.id]),i=t[0];if("none"===i.visibility)continue;const r=i.source||"";let n=this.familiesBySource[r];n||(n=this.familiesBySource[r]={});const o=i.sourceLayer||"_geojsonTileLayer";let s=n[o];s||(s=n[o]=[]),s.push(t)}}}class n{loadTile(t,i){const{uid:r,encoding:n,rawImageData:o,padding:s,buildQuadTree:a}=t,l=e.window.ImageBitmap&&o instanceof e.window.ImageBitmap?this.getImageData(o,s):o;i(null,new e.DEMData(r,l,n,s<1,a))}getImageData(e,t){this.offscreenCanvas&&this.offscreenCanvasContext||(this.offscreenCanvas=new OffscreenCanvas(e.width,e.height),this.offscreenCanvasContext=this.offscreenCanvas.getContext("2d")),this.offscreenCanvas.width=e.width,this.offscreenCanvas.height=e.height,this.offscreenCanvasContext.drawImage(e,0,0,e.width,e.height);const i=this.offscreenCanvasContext.getImageData(-t,-t,e.width+2*t,e.height+2*t);return this.offscreenCanvasContext.clearRect(0,0,this.offscreenCanvas.width,this.offscreenCanvas.height),i}}var o=function e(t,i){var r,n=t&&t.type;if("FeatureCollection"===n)for(r=0;r=Math.abs(a)?i-l+a:a-l+i,i=l}i+r>=0!=!!t&&e.reverse()}const l=e.vectorTile.VectorTileFeature.prototype.toGeoJSON;class c{constructor(t){this._feature=t,this.extent=e.EXTENT,this.type=t.type,this.properties=t.tags,"id"in t&&!isNaN(t.id)&&(this.id=parseInt(t.id,10))}loadGeometry(){if(1===this._feature.type){const t=[];for(const i of this._feature.geometry)t.push([new e.pointGeometry(i[0],i[1])]);return t}{const t=[];for(const i of this._feature.geometry){const r=[];for(const t of i)r.push(new e.pointGeometry(t[0],t[1]));t.push(r)}return t}}toGeoJSON(e,t,i){return l.call(this,e,t,i)}}class h{constructor(t){this.layers={_geojsonTileLayer:this},this.name="_geojsonTileLayer",this.extent=e.EXTENT,this.length=t.length,this._features=t}feature(e){return new c(this._features[e])}}var u=e.vectorTile.VectorTileFeature,p=d;function d(e,t){this.options=t||{},this.features=e,this.length=e.length}function f(e,t){this.id="number"==typeof e.id?e.id:void 0,this.type=e.type,this.rawGeometry=1===e.type?[e.geometry]:e.geometry,this.properties=e.tags,this.extent=t||4096}d.prototype.feature=function(e){return new f(this.features[e],this.options.extent)},f.prototype.loadGeometry=function(){var t=this.rawGeometry;this.geometry=[];for(var i=0;i>31}function T(e,t){for(var i=e.loadGeometry(),r=e.type,n=0,o=0,s=i.length,a=0;a>1;(function e(t,i,r,n,o,s){for(;o>n;){if(o-n>600){const a=o-n+1,l=r-n+1,c=Math.log(a),h=.5*Math.exp(2*c/3),u=.5*Math.sqrt(c*h*(a-h)/a)*(l-a/2<0?-1:1);e(t,i,r,Math.max(n,Math.floor(r-l*h/a+u)),Math.min(o,Math.floor(r+(a-l)*h/a+u)),s)}const a=i[2*r+s];let l=n,c=o;for(I(t,i,n,r),i[2*o+s]>a&&I(t,i,n,o);la;)c--}i[2*n+s]===a?I(t,i,n,c):(c++,I(t,i,c,o)),c<=r&&(n=c+1),r<=c&&(o=c-1)}})(e,t,s,r,n,o%2),S(e,t,i,r,s-1,o+1),S(e,t,i,s+1,n,o+1)}function I(e,t,i,r){M(e,i,r),M(t,2*i,2*r),M(t,2*i+1,2*r+1)}function M(e,t,i){const r=e[t];e[t]=e[i],e[i]=r}function A(e,t,i,r){const n=e-i,o=t-r;return n*n+o*o}m.fromVectorTileJs=g,m.fromGeojsonVt=function(e,t){t=t||{};var i={};for(var r in e)i[r]=new p(e[r].features,t),i[r].name=r,i[r].version=t.version,i[r].extent=t.extent;return g({layers:i})},m.GeoJSONWrapper=_;const z=e=>e[0],C=e=>e[1];class k{constructor(e,t=z,i=C,r=64,n=Float64Array){this.nodeSize=r,this.points=e;const o=e.length<65536?Uint16Array:Uint32Array,s=this.ids=new o(e.length),a=this.coords=new n(2*e.length);for(let l=0;l=i&&c<=n&&h>=r&&h<=o&&l.push(e[s]);continue}const f=Math.floor((d+p)/2);c=t[2*f],h=t[2*f+1],c>=i&&c<=n&&h>=r&&h<=o&&l.push(e[f]);const m=(u+1)%2;(0===u?i<=c:r<=h)&&(a.push(d),a.push(f-1),a.push(m)),(0===u?n>=c:o>=h)&&(a.push(f+1),a.push(p),a.push(m))}return l}(this.ids,this.coords,e,t,i,r,this.nodeSize)}within(e,t,i){return function(e,t,i,r,n,o){const s=[0,e.length-1,0],a=[],l=n*n;for(;s.length;){const c=s.pop(),h=s.pop(),u=s.pop();if(h-u<=o){for(let n=u;n<=h;n++)A(t[2*n],t[2*n+1],i,r)<=l&&a.push(e[n]);continue}const p=Math.floor((u+h)/2),d=t[2*p],f=t[2*p+1];A(d,f,i,r)<=l&&a.push(e[p]);const m=(c+1)%2;(0===c?i-n<=d:r-n<=f)&&(s.push(u),s.push(p-1),s.push(m)),(0===c?i+n>=d:r+n>=f)&&(s.push(p+1),s.push(h),s.push(m))}return a}(this.ids,this.coords,e,t,i,this.nodeSize)}}const D={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:e=>e},P=Math.fround||(L=new Float32Array(1),e=>(L[0]=+e,L[0]));var L;class B{constructor(e){this.options=G(Object.create(D),e),this.trees=new Array(this.options.maxZoom+1)}load(e){const{log:t,minZoom:i,maxZoom:r,nodeSize:n}=this.options;t&&console.time("total time");const o=`prepare ${e.length} points`;t&&console.time(o),this.points=e;let s=[];for(let a=0;a=i;a--){const e=+Date.now();s=this._cluster(s,a),this.trees[a]=new k(s,Z,q,n,Float32Array),t&&console.log("z%d: %d clusters in %dms",a,s.length,+Date.now()-e)}return t&&console.timeEnd("total time"),this}getClusters(e,t){let i=((e[0]+180)%360+360)%360-180;const r=Math.max(-90,Math.min(90,e[1]));let n=180===e[2]?180:((e[2]+180)%360+360)%360-180;const o=Math.max(-90,Math.min(90,e[3]));if(e[2]-e[0]>=360)i=-180,n=180;else if(i>n){const e=this.getClusters([i,r,180,o],t),s=this.getClusters([-180,r,n,o],t);return e.concat(s)}const s=this.trees[this._limitZoom(t)],a=s.range(V(i),N(o),V(n),N(r)),l=[];for(const c of a){const e=s.points[c];l.push(e.numPoints?O(e):this.points[e.index])}return l}getChildren(e){const t=this._getOriginId(e),i=this._getOriginZoom(e),r="No cluster with the specified id.",n=this.trees[i];if(!n)throw new Error(r);const o=n.points[t];if(!o)throw new Error(r);const s=this.options.radius/(this.options.extent*Math.pow(2,i-1)),a=n.within(o.x,o.y,s),l=[];for(const c of a){const t=n.points[c];t.parentId===e&&l.push(t.numPoints?O(t):this.points[t.index])}if(0===l.length)throw new Error(r);return l}getLeaves(e,t,i){const r=[];return this._appendLeaves(r,e,t=t||10,i=i||0,0),r}getTile(e,t,i){const r=this.trees[this._limitZoom(e)],n=Math.pow(2,e),{extent:o,radius:s}=this.options,a=s/o,l=(i-a)/n,c=(i+1+a)/n,h={features:[]};return this._addTileFeatures(r.range((t-a)/n,l,(t+1+a)/n,c),r.points,t,i,n,h),0===t&&this._addTileFeatures(r.range(1-a/n,l,1,c),r.points,n,i,n,h),t===n-1&&this._addTileFeatures(r.range(0,l,a/n,c),r.points,-1,i,n,h),h.features.length?h:null}getClusterExpansionZoom(e){let t=this._getOriginZoom(e)-1;for(;t<=this.options.maxZoom;){const i=this.getChildren(e);if(t++,1!==i.length)break;e=i[0].properties.cluster_id}return t}_appendLeaves(e,t,i,r,n){const o=this.getChildren(t);for(const s of o){const t=s.properties;if(t&&t.cluster?n+t.point_count<=r?n+=t.point_count:n=this._appendLeaves(e,t.cluster_id,i,r,n):nt&&(u+=i.numPoints||1)}if(u>h&&u>=s){let e=r.x*h,s=r.y*h,a=o&&h>1?this._map(r,!0):null;const p=(l<<5)+(t+1)+this.points.length;for(const i of c){const l=n.points[i];if(l.zoom<=t)continue;l.zoom=t;const c=l.numPoints||1;e+=l.x*c,s+=l.y*c,l.parentId=p,o&&(a||(a=this._map(r,!0)),o(a,this._map(l)))}r.parentId=p,i.push(R(e/u,s/u,p,u,a))}else if(i.push(r),u>1)for(const e of c){const r=n.points[e];r.zoom<=t||(r.zoom=t,i.push(r))}}return i}_getOriginId(e){return e-this.points.length>>5}_getOriginZoom(e){return(e-this.points.length)%32}_map(e,t){if(e.numPoints)return t?G({},e.properties):e.properties;const i=this.points[e.index].properties,r=this.options.map(i);return t&&r===i?G({},r):r}}function R(e,t,i,r,n){return{x:P(e),y:P(t),zoom:1/0,id:i,parentId:-1,numPoints:r,properties:n}}function F(e,t){const[i,r]=e.geometry.coordinates;return{x:P(V(i)),y:P(N(r)),zoom:1/0,index:t,parentId:-1}}function O(e){return{type:"Feature",id:e.id,properties:U(e),geometry:{type:"Point",coordinates:[(t=e.x,360*(t-.5)),j(e.y)]}};var t}function U(e){const t=e.numPoints,i=t>=1e4?Math.round(t/1e3)+"k":t>=1e3?Math.round(t/100)/10+"k":t;return G(G({},e.properties),{cluster:!0,cluster_id:e.id,point_count:t,point_count_abbreviated:i})}function V(e){return e/360+.5}function N(e){const t=Math.sin(e*Math.PI/180),i=.5-.25*Math.log((1+t)/(1-t))/Math.PI;return i<0?0:i>1?1:i}function j(e){const t=(180-360*e)*Math.PI/180;return 360*Math.atan(Math.exp(t))/Math.PI-90}function G(e,t){for(const i in t)e[i]=t[i];return e}function Z(e){return e.x}function q(e){return e.y}function $(e,t,i,r,n,o){var s=n-i,a=o-r;if(0!==s||0!==a){var l=((e-i)*s+(t-r)*a)/(s*s+a*a);l>1?(i=n,r=o):l>0&&(i+=s*l,r+=a*l)}return(s=e-i)*s+(a=t-r)*a}function X(e,t,i,r){var n={id:void 0===e?null:e,type:t,geometry:i,tags:r,minX:1/0,minY:1/0,maxX:-1/0,maxY:-1/0};return function(e){var t=e.geometry,i=e.type;if("Point"===i||"MultiPoint"===i||"LineString"===i)W(e,t);else if("Polygon"===i||"MultiLineString"===i)for(var r=0;r0&&(s+=r?(n*c-l*o)/2:Math.sqrt(Math.pow(l-n,2)+Math.pow(c-o,2))),n=l,o=c}var h=t.length-3;t[2]=1,function e(t,i,r,n){for(var o,s=n,a=r-i>>1,l=r-i,c=t[i],h=t[i+1],u=t[r],p=t[r+1],d=i+3;ds)o=d,s=f;else if(f===s){var m=Math.abs(d-a);mn&&(o-i>3&&e(t,i,o,n),t[o+2]=s,r-o>3&&e(t,o,r,n))}(t,0,h,i),t[h+2]=1,t.size=Math.abs(s),t.start=0,t.end=t.size}function J(e,t,i,r){for(var n=0;n1?1:i}function te(e,t,i,r,n,o,s,a){if(r/=t,o>=(i/=t)&&s=r)return null;for(var l=[],c=0;c=i&&f=r)){var m=[];if("Point"===p||"MultiPoint"===p)ie(u,m,i,r,n);else if("LineString"===p)re(u,m,i,r,n,!1,a.lineMetrics);else if("MultiLineString"===p)oe(u,m,i,r,n,!1);else if("Polygon"===p)oe(u,m,i,r,n,!0);else if("MultiPolygon"===p)for(var _=0;_=i&&s<=r&&(t.push(e[o]),t.push(e[o+1]),t.push(e[o+2]))}}function re(e,t,i,r,n,o,s){for(var a,l,c=ne(e),h=0===n?ae:le,u=e.start,p=0;pi&&(l=h(c,d,f,_,g,i),s&&(c.start=u+a*l)):y>r?x=i&&(l=h(c,d,f,_,g,i),v=!0),x>r&&y<=r&&(l=h(c,d,f,_,g,r),v=!0),!o&&v&&(s&&(c.end=u+a*l),t.push(c),c=ne(e)),s&&(u+=a)}var b=e.length-3;d=e[b],f=e[b+1],m=e[b+2],(y=0===n?d:f)>=i&&y<=r&&se(c,d,f,m),b=c.length-3,o&&b>=3&&(c[b]!==c[0]||c[b+1]!==c[1])&&se(c,c[0],c[1],c[2]),c.length&&t.push(c)}function ne(e){var t=[];return t.size=e.size,t.start=e.start,t.end=e.end,t}function oe(e,t,i,r,n,o){for(var s=0;ss.maxX&&(s.maxX=h),u>s.maxY&&(s.maxY=u)}return s}function fe(e,t,i,r){var n=t.geometry,o=t.type,s=[];if("Point"===o||"MultiPoint"===o)for(var a=0;a0&&t.size<(n?s:r))i.numPoints+=t.length/3;else{for(var a=[],l=0;ls)&&(i.numSimplified++,a.push(t[l]),a.push(t[l+1])),i.numPoints++;n&&function(e,t){for(var i=0,r=0,n=e.length,o=n-2;r0===t)for(r=0,n=e.length;r24)throw new Error("maxZoom should be in the 0-24 range");if(t.promoteId&&t.generateId)throw new Error("promoteId and generateId cannot be used together.");var r=function(e,t){var i=[];if("FeatureCollection"===e.type)for(var r=0;r1&&console.time("creation"),p=this.tiles[u]=de(e,t,i,r,l),this.tileCoords.push({z:t,x:i,y:r}),c)){c>1&&(console.log("tile z%d-%d-%d (features: %d, points: %d, simplified: %d)",t,i,r,p.numFeatures,p.numPoints,p.numSimplified),console.timeEnd("creation"));var d="z"+t;this.stats[d]=(this.stats[d]||0)+1,this.total++}if(p.source=e,n){if(t===l.maxZoom||t===n)continue;var f=1<1&&console.time("clipping");var m,_,g,y,x,v,b=.5*l.buffer/l.extent,w=.5-b,T=.5+b,E=1+b;m=_=g=y=null,x=te(e,h,i-b,i+T,0,p.minX,p.maxX,l),v=te(e,h,i+w,i+E,0,p.minX,p.maxX,l),e=null,x&&(m=te(x,h,r-b,r+T,1,p.minY,p.maxY,l),_=te(x,h,r+w,r+E,1,p.minY,p.maxY,l),x=null),v&&(g=te(v,h,r-b,r+T,1,p.minY,p.maxY,l),y=te(v,h,r+w,r+E,1,p.minY,p.maxY,l),v=null),c>1&&console.timeEnd("clipping"),a.push(m||[],t+1,2*i,2*r),a.push(_||[],t+1,2*i,2*r+1),a.push(g||[],t+1,2*i+1,2*r),a.push(y||[],t+1,2*i+1,2*r+1)}}},_e.prototype.getTile=function(e,t,i){var r=this.options,n=r.extent,o=r.debug;if(e<0||e>24)return null;var s=1<1&&console.log("drilling down to z%d-%d-%d",e,t,i);for(var l,c=e,h=t,u=i;!l&&c>0;)c--,h=Math.floor(h/2),u=Math.floor(u/2),l=this.tiles[ge(c,h,u)];return l&&l.source?(o>1&&console.log("found parent tile z%d-%d-%d",c,h,u),o>1&&console.time("drilling down"),this.splitTile(l.source,c,h,u,e,t,i),o>1&&console.timeEnd("drilling down"),this.tiles[a]?ue(this.tiles[a],n):null):null};class xe extends e.VectorTileWorkerSource{constructor(e,t,i,r,n){super(e,t,i,r,ye),n&&(this.loadGeoJSON=n)}loadData(t,i){const r=t&&t.request,n=r&&r.collectResourceTiming;this.loadGeoJSON(t,(s,a)=>{if(s||!a)return i(s);if("object"!=typeof a)return i(new Error(`Input data given to '${t.source}' is not a valid GeoJSON object.`));{o(a,!0);try{if(t.filter){const i=e.createExpression(t.filter,{type:"boolean","property-type":"data-driven",overridable:!1,transition:!1});if("error"===i.result)throw new Error(i.value.map(e=>`${e.key}: ${e.message}`).join(", "));const r=a.features.filter(e=>i.value.evaluate({zoom:0},e));a={type:"FeatureCollection",features:r}}this._geoJSONIndex=t.cluster?new B(function({superclusterOptions:t,clusterProperties:i}){if(!i||!t)return t;const r={},n={},o={accumulated:null,zoom:0},s={properties:null},a=Object.keys(i);for(const l of a){const[t,o]=i[l],s=e.createExpression(o),a=e.createExpression("string"==typeof t?[t,["accumulated"],["get",l]]:t);r[l]=s.value,n[l]=a.value}return t.map=e=>{s.properties=e;const t={};for(const i of a)t[i]=r[i].evaluate(o,s);return t},t.reduce=(e,t)=>{s.properties=t;for(const i of a)o.accumulated=e[i],e[i]=n[i].evaluate(o,s)},t}(t)).load(a.features):function(e,t){return new _e(e,t)}(a,t.geojsonVtOptions)}catch(s){return i(s)}this.loaded={};const l={};if(n){const i=e.getPerformanceMeasurement(r);i&&(l.resourceTiming={},l.resourceTiming[t.source]=JSON.parse(JSON.stringify(i)))}i(null,l)}})}reloadTile(e,t){const i=this.loaded;return i&&i[e.uid]?super.reloadTile(e,t):this.loadTile(e,t)}loadGeoJSON(t,i){if(t.request)e.getJSON(t.request,i);else{if("string"!=typeof t.data)return i(new Error(`Input data given to '${t.source}' is not a valid GeoJSON object.`));try{return i(null,JSON.parse(t.data))}catch(e){return i(new Error(`Input data given to '${t.source}' is not a valid GeoJSON object.`))}}}getClusterExpansionZoom(e,t){try{t(null,this._geoJSONIndex.getClusterExpansionZoom(e.clusterId))}catch(e){t(e)}}getClusterChildren(e,t){try{t(null,this._geoJSONIndex.getChildren(e.clusterId))}catch(e){t(e)}}getClusterLeaves(e,t){try{t(null,this._geoJSONIndex.getLeaves(e.clusterId,e.limit,e.offset))}catch(e){t(e)}}}class ve{constructor(t){this.self=t,this.actor=new e.Actor(t,this),this.layerIndexes={},this.availableImages={},this.isSpriteLoaded={},this.projections={},this.defaultProjection=e.getProjection({name:"mercator"}),this.workerSourceTypes={vector:e.VectorTileWorkerSource,geojson:xe},this.workerSources={},this.demWorkerSources={},this.self.registerWorkerSource=(e,t)=>{if(this.workerSourceTypes[e])throw new Error(`Worker source with name "${e}" already registered.`);this.workerSourceTypes[e]=t},this.self.registerRTLTextPlugin=t=>{if(e.plugin.isParsed())throw new Error("RTL text plugin already registered.");e.plugin.applyArabicShaping=t.applyArabicShaping,e.plugin.processBidirectionalText=t.processBidirectionalText,e.plugin.processStyledBidirectionalText=t.processStyledBidirectionalText}}clearCaches(e,t,i){delete this.layerIndexes[e],delete this.availableImages[e],delete this.workerSources[e],delete this.demWorkerSources[e],i()}checkIfReady(e,t,i){i()}setReferrer(e,t){this.referrer=t}spriteLoaded(t,i){this.isSpriteLoaded[t]=i;for(const r in this.workerSources[t]){const n=this.workerSources[t][r];for(const t in n)n[t]instanceof e.VectorTileWorkerSource&&(n[t].isSpriteLoaded=i,n[t].fire(new e.Event("isSpriteLoaded")))}}setImages(e,t,i){this.availableImages[e]=t;for(const r in this.workerSources[e]){const i=this.workerSources[e][r];for(const e in i)i[e].availableImages=t}i()}enableTerrain(e,t,i){this.terrain=t,i()}setProjection(t,i){this.projections[t]=e.getProjection(i)}setLayers(e,t,i){this.getLayerIndex(e).replace(t),i()}updateLayers(e,t,i){this.getLayerIndex(e).update(t.layers,t.removedIds),i()}loadTile(t,i,r){const n=this.enableTerrain?e.extend({enableTerrain:this.terrain},i):i;n.projection=this.projections[t]||this.defaultProjection,this.getWorkerSource(t,i.type,i.source).loadTile(n,r)}loadDEMTile(t,i,r){const n=this.enableTerrain?e.extend({buildQuadTree:this.terrain},i):i;this.getDEMWorkerSource(t,i.source).loadTile(n,r)}reloadTile(t,i,r){const n=this.enableTerrain?e.extend({enableTerrain:this.terrain},i):i;n.projection=this.projections[t]||this.defaultProjection,this.getWorkerSource(t,i.type,i.source).reloadTile(n,r)}abortTile(e,t,i){this.getWorkerSource(e,t.type,t.source).abortTile(t,i)}removeTile(e,t,i){this.getWorkerSource(e,t.type,t.source).removeTile(t,i)}removeSource(e,t,i){if(!this.workerSources[e]||!this.workerSources[e][t.type]||!this.workerSources[e][t.type][t.source])return;const r=this.workerSources[e][t.type][t.source];delete this.workerSources[e][t.type][t.source],void 0!==r.removeSource?r.removeSource(t,i):i()}loadWorkerSource(e,t,i){try{this.self.importScripts(t.url),i()}catch(e){i(e.toString())}}syncRTLPluginState(t,i,r){try{e.plugin.setState(i);const t=e.plugin.getPluginURL();if(e.plugin.isLoaded()&&!e.plugin.isParsed()&&null!=t){this.self.importScripts(t);const i=e.plugin.isParsed();r(i?void 0:new Error("RTL Text Plugin failed to import scripts from "+t),i)}}catch(e){r(e.toString())}}getAvailableImages(e){let t=this.availableImages[e];return t||(t=[]),t}getLayerIndex(e){let t=this.layerIndexes[e];return t||(t=this.layerIndexes[e]=new r),t}getWorkerSource(e,t,i){return this.workerSources[e]||(this.workerSources[e]={}),this.workerSources[e][t]||(this.workerSources[e][t]={}),this.workerSources[e][t][i]||(this.workerSources[e][t][i]=new this.workerSourceTypes[t]({send:(t,i,r,n,o,s)=>{this.actor.send(t,i,r,e,o,s)},scheduler:this.actor.scheduler},this.getLayerIndex(e),this.getAvailableImages(e),this.isSpriteLoaded[e])),this.workerSources[e][t][i]}getDEMWorkerSource(e,t){return this.demWorkerSources[e]||(this.demWorkerSources[e]={}),this.demWorkerSources[e][t]||(this.demWorkerSources[e][t]=new n),this.demWorkerSources[e][t]}enforceCacheSizeLimit(t,i){e.enforceCacheSizeLimit(i)}getWorkerPerformanceMetrics(e,t,i){i(void 0,void 0)}}return"undefined"!=typeof WorkerGlobalScope&&"undefined"!=typeof self&&self instanceof WorkerGlobalScope&&(self.worker=new ve(self)),ve})),r(0,(function(e){var t=i;function i(e){return!function(e){return"undefined"==typeof window||"undefined"==typeof document?"not a browser":Array.prototype&&Array.prototype.every&&Array.prototype.filter&&Array.prototype.forEach&&Array.prototype.indexOf&&Array.prototype.lastIndexOf&&Array.prototype.map&&Array.prototype.some&&Array.prototype.reduce&&Array.prototype.reduceRight&&Array.isArray?Function.prototype&&Function.prototype.bind?Object.keys&&Object.create&&Object.getPrototypeOf&&Object.getOwnPropertyNames&&Object.isSealed&&Object.isFrozen&&Object.isExtensible&&Object.getOwnPropertyDescriptor&&Object.defineProperty&&Object.defineProperties&&Object.seal&&Object.freeze&&Object.preventExtensions?"JSON"in window&&"parse"in JSON&&"stringify"in JSON?function(){if(!("Worker"in window&&"Blob"in window&&"URL"in window))return!1;var e,t,i=new Blob([""],{type:"text/javascript"}),r=URL.createObjectURL(i);try{t=new Worker(r),e=!0}catch(t){e=!1}return t&&t.terminate(),URL.revokeObjectURL(r),e}()?"Uint8ClampedArray"in window?ArrayBuffer.isView?function(){var e=document.createElement("canvas");e.width=e.height=1;var t=e.getContext("2d");if(!t)return!1;var i=t.getImageData(0,0,1,1);return i&&i.width===e.width}()?(void 0===r[t=e&&e.failIfMajorPerformanceCaveat]&&(r[t]=function(e){var t,r=function(e){var t=document.createElement("canvas"),r=Object.create(i.webGLContextAttributes);return r.failIfMajorPerformanceCaveat=e,t.getContext("webgl",r)||t.getContext("experimental-webgl",r)}(e);if(!r)return!1;try{t=r.createShader(r.VERTEX_SHADER)}catch(e){return!1}return!(!t||r.isContextLost())&&(r.shaderSource(t,"void main() {}"),r.compileShader(t),!0===r.getShaderParameter(t,r.COMPILE_STATUS))}(t)),r[t]?document.documentMode?"insufficient ECMAScript 6 support":void 0:"insufficient WebGL support"):"insufficient Canvas/getImageData support":"insufficient ArrayBuffer support":"insufficient Uint8ClampedArray support":"insufficient worker support":"insufficient JSON support":"insufficient Object support":"insufficient Function support":"insufficent Array support";var t}(e)}var r={};function n(e,t){if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let i=0;i{e.window.removeEventListener("click",p,!0)},0)}function f(e,t){const i=e.getBoundingClientRect();return g(e,i,t)}function m(e,t){const i=e.getBoundingClientRect(),r=[];for(let n=0;n=0?0:t.button}function g(t,i,r){const n=t.offsetWidth===i.width?1:t.offsetWidth/i.width;return new e.pointGeometry((r.clientX-i.left)*n,(r.clientY-i.top)*n)}function y(e,t){var i=t[0],r=t[1],n=t[2],o=t[3],s=i*o-n*r;return s?(e[0]=o*(s=1/s),e[1]=-r*s,e[2]=-n*s,e[3]=i*s,e):null}function x(e){const{userImage:t}=e;return!!(t&&t.render&&t.render())&&(e.data.replace(new Uint8Array(t.data.buffer)),!0)}class v extends e.Evented{constructor(){super(),this.images={},this.updatedImages={},this.callbackDispatchedThisFrame={},this.loaded=!1,this.requestors=[],this.patterns={},this.atlasImage=new e.RGBAImage({width:1,height:1}),this.dirty=!0}isLoaded(){return this.loaded}setLoaded(e){if(this.loaded!==e&&(this.loaded=e,e)){for(const{ids:e,callback:t}of this.requestors)this._notify(e,t);this.requestors=[]}}hasImage(e){return!!this.getImage(e)}getImage(e){return this.images[e]}addImage(e,t){this._validate(e,t)&&(this.images[e]=t)}_validate(t,i){let r=!0;return this._validateStretch(i.stretchX,i.data&&i.data.width)||(this.fire(new e.ErrorEvent(new Error(`Image "${t}" has invalid "stretchX" value`))),r=!1),this._validateStretch(i.stretchY,i.data&&i.data.height)||(this.fire(new e.ErrorEvent(new Error(`Image "${t}" has invalid "stretchY" value`))),r=!1),this._validateContent(i.content,i)||(this.fire(new e.ErrorEvent(new Error(`Image "${t}" has invalid "content" value`))),r=!1),r}_validateStretch(e,t){if(!e)return!0;let i=0;for(const r of e){if(r[0]{this.ready=!0})}broadcast(t,i,r){e.asyncAll(this.actors,(e,r)=>{e.send(t,i,r)},r=r||function(){})}getActor(){return this.currentActor=(this.currentActor+1)%this.actors.length,this.actors[this.currentActor]}remove(){this.actors.forEach(e=>{e.remove()}),this.actors=[],this.workerPool.release(this.id)}}function P(t,i,r){return i*(e.EXTENT/(t.tileSize*Math.pow(2,r-t.tileID.overscaledZ)))}D.Actor=e.Actor;class L{constructor(e,t,i,r){this.screenBounds=e,this.cameraPoint=t,this._screenRaycastCache={},this._cameraRaycastCache={},this.isAboveHorizon=i,this.screenGeometry=this.bufferedScreenGeometry(0),this.screenGeometryMercator=this.screenGeometry.map(e=>r.pointCoordinate3D(e)),this.cameraGeometry=this.bufferedCameraGeometry(0)}static createFromScreenPoints(t,i){let r,n;if(t instanceof e.pointGeometry||"number"==typeof t[0]){const o=e.pointGeometry.convert(t);r=[e.pointGeometry.convert(t)],n=i.isPointAboveHorizon(o)}else{const o=e.pointGeometry.convert(t[0]),s=e.pointGeometry.convert(t[1]);r=[o,s],n=e.polygonizeBounds(o,s).every(e=>i.isPointAboveHorizon(e))}return new L(r,i.getCameraPoint(),n,i)}isPointQuery(){return 1===this.screenBounds.length}bufferedScreenGeometry(t){return e.polygonizeBounds(this.screenBounds[0],1===this.screenBounds.length?this.screenBounds[0]:this.screenBounds[1],t)}bufferedCameraGeometry(t){const i=this.screenBounds[0],r=1===this.screenBounds.length?this.screenBounds[0].add(new e.pointGeometry(1,1)):this.screenBounds[1],n=e.polygonizeBounds(i,r,0,!1);return this.cameraPoint.y>r.y&&(this.cameraPoint.x>i.x&&this.cameraPoint.x=r.x?n[2]=this.cameraPoint:this.cameraPoint.x<=i.x&&(n[3]=this.cameraPoint)),e.bufferConvexPolygon(n,t)}containsTile(t,i,r){const n=t.queryPadding+1,o=t.tileID.wrap,s=r?this._bufferedCameraMercator(n,i).map(i=>e.getTilePoint(t.tileTransform,i,o)):this._bufferedScreenMercator(n,i).map(i=>e.getTilePoint(t.tileTransform,i,o)),a=this.screenGeometryMercator.map(i=>e.getTileVec3(t.tileTransform,i,o)),l=a.map(t=>new e.pointGeometry(t[0],t[1])),c=i.getFreeCameraOptions().position||new e.MercatorCoordinate(0,0,0),h=e.getTileVec3(t.tileTransform,c,o),u=a.map(t=>{const i=e.sub(t,t,h);return e.normalize(i,i),new e.Ray(h,i)}),p=P(t,1,i.zoom);if(e.polygonIntersectsBox(s,0,0,e.EXTENT,e.EXTENT))return{queryGeometry:this,tilespaceGeometry:l,tilespaceRays:u,bufferedTilespaceGeometry:s,bufferedTilespaceBounds:(d=e.getBounds(s),d.min.x=e.clamp(d.min.x,0,e.EXTENT),d.min.y=e.clamp(d.min.y,0,e.EXTENT),d.max.x=e.clamp(d.max.x,0,e.EXTENT),d.max.y=e.clamp(d.max.y,0,e.EXTENT),d),tile:t,tileID:t.tileID,pixelToTileUnitsFactor:p};var d}_bufferedScreenMercator(e,t){const i=B(e);if(this._screenRaycastCache[i])return this._screenRaycastCache[i];{const r=this.bufferedScreenGeometry(e).map(e=>t.pointCoordinate3D(e));return this._screenRaycastCache[i]=r,r}}_bufferedCameraMercator(e,t){const i=B(e);if(this._cameraRaycastCache[i])return this._cameraRaycastCache[i];{const r=this.bufferedCameraGeometry(e).map(e=>t.pointCoordinate3D(e));return this._cameraRaycastCache[i]=r,r}}}function B(e){return 100*e|0}function R(t,i,r){const n=function(n,o){if(n)return r(n);if(o){const n=e.pick(e.extend(o,t),["tiles","minzoom","maxzoom","attribution","mapbox_logo","bounds","scheme","tileSize","encoding"]);o.vector_layers&&(n.vectorLayers=o.vector_layers,n.vectorLayerIds=n.vectorLayers.map(e=>e.id)),n.tiles=i.canonicalizeTileset(n,t.url),r(null,n)}};return t.url?e.getJSON(i.transformRequest(i.normalizeSourceURL(t.url),e.ResourceType.Source),n):e.exported.frame(()=>n(null,t))}class F{constructor(t,i,r){this.bounds=e.LngLatBounds.convert(this.validateBounds(t)),this.minzoom=i||0,this.maxzoom=r||24}validateBounds(e){return Array.isArray(e)&&4===e.length?[Math.max(-180,e[0]),Math.max(-90,e[1]),Math.min(180,e[2]),Math.min(90,e[3])]:[-180,-90,180,90]}contains(t){const i=Math.pow(2,t.z),r=Math.floor(e.mercatorXfromLng(this.bounds.getWest())*i),n=Math.floor(e.mercatorYfromLat(this.bounds.getNorth())*i),o=Math.ceil(e.mercatorXfromLng(this.bounds.getEast())*i),s=Math.ceil(e.mercatorYfromLat(this.bounds.getSouth())*i);return t.x>=r&&t.x=n&&t.y{this._tileJSONRequest=null,this._loaded=!0,t?this.fire(new e.ErrorEvent(t)):i&&(e.extend(this,i),i.bounds&&(this.tileBounds=new F(i.bounds,this.minzoom,this.maxzoom)),e.postTurnstileEvent(i.tiles),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"metadata"})),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"content"})))})}loaded(){return this._loaded}onAdd(e){this.map=e,this.load()}onRemove(){this._tileJSONRequest&&(this._tileJSONRequest.cancel(),this._tileJSONRequest=null)}serialize(){return e.extend({},this._options)}hasTile(e){return!this.tileBounds||this.tileBounds.contains(e.canonical)}loadTile(t,i){const r=e.exported.devicePixelRatio>=2,n=this.map._requestManager.normalizeTileURL(t.tileID.canonical.url(this.tiles,this.scheme),r,this.tileSize);t.request=e.getImage(this.map._requestManager.transformRequest(n,e.ResourceType.Tile),(r,n,o,s)=>(delete t.request,t.aborted?(t.state="unloaded",i(null)):r?(t.state="errored",i(r)):n?(this.map._refreshExpiredTiles&&t.setExpiryData({cacheControl:o,expires:s}),t.setTexture(n,this.map.painter),t.state="loaded",e.cacheEntryPossiblyAdded(this.dispatcher),void i(null)):i(null)))}static loadTileData(e,t,i){e.setTexture(t,i)}static unloadTileData(e,t){e.texture&&t.saveTileTexture(e.texture)}abortTile(e,t){e.request&&(e.request.cancel(),delete e.request),t()}unloadTile(e,t){e.texture&&this.map.painter.saveTileTexture(e.texture),t()}hasTransition(){return!1}}let Ie;function Me(t,i,r,n,o,s,a,l){const c=[t,r,o,i,n,s,1,1,1],h=[a,l,1],u=e.adjoint([],c),[p,d,f]=e.transformMat3(h,h,e.transpose(u,u));return e.multiply(c,[p,0,0,0,d,0,0,0,f],c)}class Ae extends e.Evented{constructor(e,t,i,r){super(),this.id=e,this.dispatcher=i,this.coordinates=t.coordinates,this.type="image",this.minzoom=0,this.maxzoom=22,this.tileSize=512,this.tiles={},this._loaded=!1,this.setEventedParent(r),this.options=t}load(t){this._loaded=!1,this.fire(new e.Event("dataloading",{dataType:"source"})),this.url=this.options.url,e.getImage(this.map._requestManager.transformRequest(this.url,e.ResourceType.Image),(i,r)=>{if(this._loaded=!0,i)this.fire(new e.ErrorEvent(i));else if(r){const{HTMLImageElement:i}=e.window;this.image=r instanceof i?e.exported.getImageData(r):r,this.width=this.image.width,this.height=this.image.height,t&&(this.coordinates=t),this._finishLoading()}})}loaded(){return this._loaded}updateImage(e){return this.image&&e.url?(this.options.url=e.url,this.load(e.coordinates),this):this}_finishLoading(){this.map&&(this.setCoordinates(this.coordinates),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"metadata"})))}onAdd(e){this.map=e,this.load()}onRemove(){this.texture&&this.texture.destroy()}setCoordinates(t){this.coordinates=t,this._boundsArray=void 0;const i=t.map(e.MercatorCoordinate.fromLngLat);return this.tileID=function(t){let i=1/0,r=1/0,n=-1/0,o=-1/0;for(const e of t)i=Math.min(i,e.x),r=Math.min(r,e.y),n=Math.max(n,e.x),o=Math.max(o,e.y);const s=Math.max(n-i,o-r),a=Math.max(0,Math.floor(-Math.log(s)/Math.LN2)),l=Math.pow(2,a);return new e.CanonicalTileID(a,Math.floor((i+n)/2*l),Math.floor((r+o)/2*l))}(i),this.minzoom=this.maxzoom=this.tileID.z,this.fire(new e.Event("data",{dataType:"source",sourceDataType:"content"})),this}_clear(){this._boundsArray=void 0}_prepareData(t){for(const e in this.tiles){const t=this.tiles[e];"loaded"!==t.state&&(t.state="loaded",t.texture=this.texture)}if(this._boundsArray)return;const i=e.tileTransform(this.tileID,this.map.transform.projection),[r,n,o,s]=this.coordinates.map(t=>{const r=i.projection.project(t[0],t[1]);return e.getTilePoint(i,r)._round()});this.perspectiveTransform=function(t,i,r,n,o,s,a,l,c,h){const u=Me(0,0,t,0,0,i,t,i),p=Me(r,n,o,s,a,l,c,h);return e.multiply(p,e.adjoint(u,u),p),[p[6]/p[8]*t/e.EXTENT,p[7]/p[8]*i/e.EXTENT]}(this.width,this.height,r.x,r.y,n.x,n.y,s.x,s.y,o.x,o.y);const a=this._boundsArray=new e.StructArrayLayout4i8;a.emplaceBack(r.x,r.y,0,0),a.emplaceBack(n.x,n.y,e.EXTENT,0),a.emplaceBack(s.x,s.y,0,e.EXTENT),a.emplaceBack(o.x,o.y,e.EXTENT,e.EXTENT),this.boundsBuffer&&this.boundsBuffer.destroy(),this.boundsBuffer=t.createVertexBuffer(a,e.boundsAttributes.members),this.boundsSegments=e.SegmentVector.simpleSegment(0,0,4,2)}prepare(){if(0===Object.keys(this.tiles).length||!this.image)return;const t=this.map.painter.context,i=t.gl;this.texture?this.texture.update(this.image):(this.texture=new e.Texture(t,this.image,i.RGBA),this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE)),this._prepareData(t)}loadTile(e,t){this.tileID&&this.tileID.equals(e.tileID.canonical)?(this.tiles[String(e.tileID.wrap)]=e,e.buckets={},t(null)):(e.state="errored",t(null))}serialize(){return{type:"image",url:this.options.url,coordinates:this.coordinates}}hasTransition(){return!1}}const ze={vector:class extends e.Evented{constructor(t,i,r,n){if(super(),this.id=t,this.dispatcher=r,this.type="vector",this.minzoom=0,this.maxzoom=22,this.scheme="xyz",this.tileSize=512,this.reparseOverscaled=!0,this.isTileClipped=!0,this._loaded=!1,e.extend(this,e.pick(i,["url","scheme","tileSize","promoteId"])),this._options=e.extend({type:"vector"},i),this._collectResourceTiming=i.collectResourceTiming,512!==this.tileSize)throw new Error("vector tile sources must have a tileSize of 512");this.setEventedParent(n),this._tileWorkers={},this._deduped=new e.DedupedRequest}load(){this._loaded=!1,this.fire(new e.Event("dataloading",{dataType:"source"})),this._tileJSONRequest=R(this._options,this.map._requestManager,(t,i)=>{this._tileJSONRequest=null,this._loaded=!0,t?this.fire(new e.ErrorEvent(t)):i&&(e.extend(this,i),i.bounds&&(this.tileBounds=new F(i.bounds,this.minzoom,this.maxzoom)),e.postTurnstileEvent(i.tiles,this.map._requestManager._customAccessToken),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"metadata"})),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"content"})))})}loaded(){return this._loaded}hasTile(e){return!this.tileBounds||this.tileBounds.contains(e.canonical)}onAdd(e){this.map=e,this.load()}setSourceProperty(e){this._tileJSONRequest&&this._tileJSONRequest.cancel(),e();const t=this.map.style._getSourceCaches(this.id);for(const i of t)i.clearTiles();this.load()}setTiles(e){return this.setSourceProperty(()=>{this._options.tiles=e}),this}setUrl(e){return this.setSourceProperty(()=>{this.url=e,this._options.url=e}),this}onRemove(){this._tileJSONRequest&&(this._tileJSONRequest.cancel(),this._tileJSONRequest=null)}serialize(){return e.extend({},this._options)}loadTile(t,i){const r=this.map._requestManager.normalizeTileURL(t.tileID.canonical.url(this.tiles,this.scheme)),n={request:this.map._requestManager.transformRequest(r,e.ResourceType.Tile),data:void 0,uid:t.uid,tileID:t.tileID,tileZoom:t.tileZoom,zoom:t.tileID.overscaledZ,tileSize:this.tileSize*t.tileID.overscaleFactor(),type:this.type,source:this.id,pixelRatio:e.exported.devicePixelRatio,showCollisionBoxes:this.map.showCollisionBoxes,promoteId:this.promoteId,isSymbolTile:t.isSymbolTile};if(n.request.collectResourceTiming=this._collectResourceTiming,t.actor&&"expired"!==t.state)"loading"===t.state?t.reloadCallback=i:t.request=t.actor.send("reloadTile",n,o.bind(this));else if(t.actor=this._tileWorkers[r]=this._tileWorkers[r]||this.dispatcher.getActor(),this.dispatcher.ready)t.request=t.actor.send("loadTile",n,o.bind(this),void 0,!0);else{const i=e.loadVectorTile.call({deduped:this._deduped},n,(e,i)=>{e||!i?o.call(this,e):(n.data={cacheControl:i.cacheControl,expires:i.expires,rawData:i.rawData.slice(0)},t.actor&&t.actor.send("loadTile",n,o.bind(this),void 0,!0))},!0);t.request={cancel:i}}function o(r,n){return delete t.request,t.aborted?i(null):r&&404!==r.status?i(r):(n&&n.resourceTiming&&(t.resourceTiming=n.resourceTiming),this.map._refreshExpiredTiles&&n&&t.setExpiryData(n),t.loadVectorData(n,this.map.painter),e.cacheEntryPossiblyAdded(this.dispatcher),i(null),void(t.reloadCallback&&(this.loadTile(t,t.reloadCallback),t.reloadCallback=null)))}}abortTile(e){e.request&&(e.request.cancel(),delete e.request),e.actor&&e.actor.send("abortTile",{uid:e.uid,type:this.type,source:this.id})}unloadTile(e){e.unloadVectorData(),e.actor&&e.actor.send("removeTile",{uid:e.uid,type:this.type,source:this.id})}hasTransition(){return!1}afterUpdate(){this._tileWorkers={}}},raster:Se,"raster-dem":class extends Se{constructor(t,i,r,n){super(t,i,r,n),this.type="raster-dem",this.maxzoom=22,this._options=e.extend({type:"raster-dem"},i),this.encoding=i.encoding||"mapbox"}loadTile(t,i){const r=this.map._requestManager.normalizeTileURL(t.tileID.canonical.url(this.tiles,this.scheme),!1,this.tileSize);function n(e,r){e&&(t.state="errored",i(e)),r&&(t.dem=r,t.dem.onDeserialize(),t.needsHillshadePrepare=!0,t.needsDEMTextureUpload=!0,t.state="loaded",i(null))}t.request=e.getImage(this.map._requestManager.transformRequest(r,e.ResourceType.Tile),function(r,o,s,a){if(delete t.request,t.aborted)t.state="unloaded",i(null);else if(r)t.state="errored",i(r);else if(o){this.map._refreshExpiredTiles&&t.setExpiryData({cacheControl:s,expires:a});const i=e.window.ImageBitmap&&o instanceof e.window.ImageBitmap&&(null==Ie&&(Ie=e.window.OffscreenCanvas&&new e.window.OffscreenCanvas(1,1).getContext("2d")&&"function"==typeof e.window.createImageBitmap),Ie),r=1-(o.width-e.prevPowerOfTwo(o.width))/2;r<1||t.neighboringTiles||(t.neighboringTiles=this._getNeighboringTiles(t.tileID));const l=i?o:e.exported.getImageData(o,r),c={uid:t.uid,coord:t.tileID,source:this.id,rawImageData:l,encoding:this.encoding,padding:r};t.actor&&"expired"!==t.state||(t.actor=this.dispatcher.getActor(),t.actor.send("loadDEMTile",c,n.bind(this),void 0,!0))}}.bind(this))}_getNeighboringTiles(t){const i=t.canonical,r=Math.pow(2,i.z),n=(i.x-1+r)%r,o=0===i.x?t.wrap-1:t.wrap,s=(i.x+1+r)%r,a=i.x+1===r?t.wrap+1:t.wrap,l={};return l[new e.OverscaledTileID(t.overscaledZ,o,i.z,n,i.y).key]={backfilled:!1},l[new e.OverscaledTileID(t.overscaledZ,a,i.z,s,i.y).key]={backfilled:!1},i.y>0&&(l[new e.OverscaledTileID(t.overscaledZ,o,i.z,n,i.y-1).key]={backfilled:!1},l[new e.OverscaledTileID(t.overscaledZ,t.wrap,i.z,i.x,i.y-1).key]={backfilled:!1},l[new e.OverscaledTileID(t.overscaledZ,a,i.z,s,i.y-1).key]={backfilled:!1}),i.y+1{if(this._loaded=!0,this._pendingLoad=null,t)this.fire(new e.ErrorEvent(t));else{const t={dataType:"source",sourceDataType:this._metadataFired?"content":"metadata"};this._collectResourceTiming&&i&&i.resourceTiming&&i.resourceTiming[this.id]&&(t.resourceTiming=i.resourceTiming[this.id]),this.fire(new e.Event("data",t)),this._metadataFired=!0}this._coalesce&&(this._updateWorkerData(),this._coalesce=!1)})}loaded(){return this._loaded}loadTile(t,i){const r=t.actor?"reloadTile":"loadTile";t.actor=this.actor,t.request=this.actor.send(r,{type:this.type,uid:t.uid,tileID:t.tileID,tileZoom:t.tileZoom,zoom:t.tileID.overscaledZ,maxZoom:this.maxzoom,tileSize:this.tileSize,source:this.id,pixelRatio:e.exported.devicePixelRatio,showCollisionBoxes:this.map.showCollisionBoxes,promoteId:this.promoteId},(e,n)=>(delete t.request,t.unloadVectorData(),t.aborted?i(null):e?i(e):(t.loadVectorData(n,this.map.painter,"reloadTile"===r),i(null))),void 0,"loadTile"===r)}abortTile(e){e.request&&(e.request.cancel(),delete e.request),e.aborted=!0}unloadTile(e){e.unloadVectorData(),this.actor.send("removeTile",{uid:e.uid,type:this.type,source:this.id})}onRemove(){this._pendingLoad&&this._pendingLoad.cancel()}serialize(){return e.extend({},this._options,{type:this.type,data:this._data})}hasTransition(){return!1}},video:class extends Ae{constructor(e,t,i,r){super(e,t,i,r),this.roundZoom=!0,this.type="video",this.options=t}load(){this._loaded=!1;const t=this.options;this.urls=[];for(const i of t.urls)this.urls.push(this.map._requestManager.transformRequest(i,e.ResourceType.Source).url);e.getVideo(this.urls,(t,i)=>{this._loaded=!0,t?this.fire(new e.ErrorEvent(t)):i&&(this.video=i,this.video.loop=!0,this.video.setAttribute("playsinline",""),this.video.addEventListener("playing",()=>{this.map.triggerRepaint()}),this.map&&this.video.play(),this._finishLoading())})}pause(){this.video&&this.video.pause()}play(){this.video&&this.video.play()}seek(t){if(this.video){const i=this.video.seekable;ti.end(0)?this.fire(new e.ErrorEvent(new e.ValidationError("sources."+this.id,null,`Playback for this video can be set only between the ${i.start(0)} and ${i.end(0)}-second mark.`))):this.video.currentTime=t}}getVideo(){return this.video}onAdd(e){this.map||(this.map=e,this.load(),this.video&&(this.video.play(),this.setCoordinates(this.coordinates)))}prepare(){if(0===Object.keys(this.tiles).length||this.video.readyState<2)return;const t=this.map.painter.context,i=t.gl;this.texture?this.video.paused||(this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE),i.texSubImage2D(i.TEXTURE_2D,0,0,0,i.RGBA,i.UNSIGNED_BYTE,this.video)):(this.texture=new e.Texture(t,this.video,i.RGBA),this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE),this.width=this.video.videoWidth,this.height=this.video.videoHeight),this._prepareData(t)}serialize(){return{type:"video",urls:this.urls,coordinates:this.coordinates}}hasTransition(){return this.video&&!this.video.paused}},image:Ae,canvas:class extends Ae{constructor(t,i,r,n){super(t,i,r,n),i.coordinates?Array.isArray(i.coordinates)&&4===i.coordinates.length&&!i.coordinates.some(e=>!Array.isArray(e)||2!==e.length||e.some(e=>"number"!=typeof e))||this.fire(new e.ErrorEvent(new e.ValidationError("sources."+t,null,'"coordinates" property must be an array of 4 longitude/latitude array pairs'))):this.fire(new e.ErrorEvent(new e.ValidationError("sources."+t,null,'missing required property "coordinates"'))),i.animate&&"boolean"!=typeof i.animate&&this.fire(new e.ErrorEvent(new e.ValidationError("sources."+t,null,'optional "animate" property must be a boolean value'))),i.canvas?"string"==typeof i.canvas||i.canvas instanceof e.window.HTMLCanvasElement||this.fire(new e.ErrorEvent(new e.ValidationError("sources."+t,null,'"canvas" must be either a string representing the ID of the canvas element from which to read, or an HTMLCanvasElement instance'))):this.fire(new e.ErrorEvent(new e.ValidationError("sources."+t,null,'missing required property "canvas"'))),this.options=i,this.animate=void 0===i.animate||i.animate}load(){this._loaded=!0,this.canvas||(this.canvas=this.options.canvas instanceof e.window.HTMLCanvasElement?this.options.canvas:e.window.document.getElementById(this.options.canvas)),this.width=this.canvas.width,this.height=this.canvas.height,this._hasInvalidDimensions()?this.fire(new e.ErrorEvent(new Error("Canvas dimensions cannot be less than or equal to zero."))):(this.play=function(){this._playing=!0,this.map.triggerRepaint()},this.pause=function(){this._playing&&(this.prepare(),this._playing=!1)},this._finishLoading())}getCanvas(){return this.canvas}onAdd(e){this.map=e,this.load(),this.canvas&&this.animate&&this.play()}onRemove(){this.pause()}prepare(){let t=!1;if(this.canvas.width!==this.width&&(this.width=this.canvas.width,t=!0),this.canvas.height!==this.height&&(this.height=this.canvas.height,t=!0),this._hasInvalidDimensions())return;if(0===Object.keys(this.tiles).length)return;const i=this.map.painter.context;this.texture?(t||this._playing)&&this.texture.update(this.canvas,{premultiply:!0}):this.texture=new e.Texture(i,this.canvas,i.gl.RGBA,{premultiply:!0}),this._prepareData(i)}serialize(){return{type:"canvas",coordinates:this.coordinates}}hasTransition(){return this._playing}_hasInvalidDimensions(){for(const e of[this.canvas.width,this.canvas.height])if(isNaN(e)||e<=0)return!0;return!1}},custom:class extends e.Evented{constructor(t,i,r,n){super(),this.id=t,this.type="custom",this._dataType="raster",this._dispatcher=r,this._implementation=i,this.setEventedParent(n),this.scheme="xyz",this.minzoom=0,this.maxzoom=22,this.tileSize=512,this._loaded=!1,this.roundZoom=!0,this._implementation||this.fire(new e.ErrorEvent(new Error(`Missing implementation for ${this.id} custom source`))),this._implementation.loadTile||this.fire(new e.ErrorEvent(new Error(`Missing loadTile implementation for ${this.id} custom source`))),this._implementation.bounds&&(this.tileBounds=new F(this._implementation.bounds,this.minzoom,this.maxzoom)),i.update=this._update.bind(this),i.coveringTiles=this._coveringTiles.bind(this),e.extend(this,e.pick(i,["dataType","scheme","minzoom","maxzoom","tileSize","attribution","minTileCacheSize","maxTileCacheSize"]))}serialize(){return e.pick(this,["type","scheme","minzoom","maxzoom","tileSize","attribution"])}load(){this._loaded=!0,this.fire(new e.Event("data",{dataType:"source",sourceDataType:"metadata"})),this.fire(new e.Event("data",{dataType:"source",sourceDataType:"content"}))}loaded(){return this._loaded}onAdd(t){this._map=t,this._loaded=!1,this.fire(new e.Event("dataloading",{dataType:"source"})),this._implementation.onAdd&&this._implementation.onAdd(t),this.load()}onRemove(e){this._implementation.onRemove&&this._implementation.onRemove(e)}hasTile(e){if(this._implementation.hasTile){const{x:t,y:i,z:r}=e.canonical;return this._implementation.hasTile({x:t,y:i,z:r})}return!this.tileBounds||this.tileBounds.contains(e.canonical)}loadTile(t,i){const{x:r,y:n,z:o}=t.tileID.canonical,s=new e.window.AbortController,a=this._implementation.loadTile({x:r,y:n,z:o},{signal:s.signal});if(!a)return this.loadTileData(t,{width:this.tileSize,height:this.tileSize,data:null}),t.state="loaded",i(null);a.cancel=()=>s.abort(),t.request=a.then(function(r){return delete t.request,t.aborted?(t.state="unloaded",i(null)):r?function(t){return t instanceof e.window.ImageData||t instanceof e.window.ImageBitmap||t instanceof e.window.HTMLCanvasElement}(r)?(this.loadTileData(t,r),t.state="loaded",void i(null)):(t.state="errored",i(new Error(`Can't infer data type for ${this.id}, only raster data supported at the moment`))):(this.loadTileData(t,{width:this.tileSize,height:this.tileSize,data:null}),t.state="loaded",i(null))}.bind(this)).catch(e=>{20!==e.code&&(t.state="errored",i(e))})}loadTileData(e,t){Se.loadTileData(e,t,this._map.painter)}unloadTileData(e){Se.unloadTileData(e,this._map.painter)}prepareTile(e){if(!this._implementation.prepareTile)return null;const{x:t,y:i,z:r}=e.tileID.canonical,n=this._implementation.prepareTile({x:t,y:i,z:r});return n?(this.loadTileData(e,n),e.state="loaded",n):null}unloadTile(e,t){if(this.unloadTileData(e),this._implementation.unloadTile){const{x:t,y:i,z:r}=e.tileID.canonical;this._implementation.unloadTile({x:t,y:i,z:r})}t()}abortTile(e,t){e.request&&e.request.cancel&&(e.request.cancel(),delete e.request),t()}hasTransition(){return!1}_coveringTiles(){return this._map.transform.coveringTiles({tileSize:this.tileSize,minzoom:this.minzoom,maxzoom:this.maxzoom}).map(e=>({x:e.canonical.x,y:e.canonical.y,z:e.canonical.z}))}_update(){this.fire(new e.Event("data",{dataType:"source",sourceDataType:"content"}))}}},Ce=function(t,i,r,n){const o=new ze[i.type](t,i,r,n);if(o.id!==t)throw new Error(`Expected Source id to be ${t} instead of ${o.id}`);return e.bindAll(["load","abort","unload","serialize","prepare"],o),o};function ke(t,i){const r=e.identity([]);return e.scale(r,r,[.5*t.width,.5*-t.height,1]),e.translate(r,r,[1,-1,0]),e.multiply$1(r,r,t.calculateProjMatrix(i.toUnwrapped())),Float32Array.from(r)}function De(e,t,i,r,n,o,s,a=!1){const l=e.tilesIn(r,s,a);l.sort(Le);const c=[];for(const u of l)c.push({wrappedTileID:u.tile.tileID.wrapped().key,queryResults:u.tile.queryRenderedFeatures(t,i,e._state,u,n,o,ke(e.transform,u.tile.tileID),a)});const h=function(e){const t={},i={};for(const r of e){const e=r.queryResults,n=r.wrappedTileID,o=i[n]=i[n]||{};for(const i in e){const r=e[i],n=o[i]=o[i]||{},s=t[i]=t[i]||[];for(const e of r)n[e.featureIndex]||(n[e.featureIndex]=!0,s.push(e))}}return t}(c);for(const u in h)h[u].forEach(t=>{const i=t.feature,r=i.layer;r&&"background"!==r.type&&"sky"!==r.type&&(i.source=r.source,r["source-layer"]&&(i.sourceLayer=r["source-layer"]),i.state=void 0!==i.id?e.getFeatureState(r["source-layer"],i.id):{})});return h}function Pe(e,t){const i=e.getRenderableIds().map(t=>e.getTileByID(t)),r=[],n={};for(let o=0;o{e.terminate()}),this.workers=null)}isPreloaded(){return!!this.active[Re]}numActive(){return Object.keys(this.active).length}}let Oe;function Ue(){return Oe||(Oe=new Fe),Oe}function Ve(t,i){const r={};for(const e in t)"ref"!==e&&(r[e]=t[e]);return e.refProperties.forEach(e=>{e in i&&(r[e]=i[e])}),r}function Ne(e){e=e.slice();const t=Object.create(null);for(let i=0;i0?(n-s)/a:0;return this.points[o].mult(1-l).add(this.points[i].mult(l))}}class Ke{constructor(e,t,i){const r=this.boxCells=[],n=this.circleCells=[];this.xCellCount=Math.ceil(e/i),this.yCellCount=Math.ceil(t/i);for(let o=0;othis.width||r<0||t>this.height)return!n&&[];const s=[];if(e<=0&&t<=0&&this.width<=i&&this.height<=r){if(n)return!0;for(let e=0;e0:s}_queryCircle(e,t,i,r,n){const o=e-i,s=e+i,a=t-i,l=t+i;if(s<0||o>this.width||l<0||a>this.height)return!r&&[];const c=[];return this._forEachCell(o,a,s,l,this._queryCellCircle,c,{hitTest:r,circle:{x:e,y:t,radius:i},seenUids:{box:{},circle:{}}},n),r?c.length>0:c}query(e,t,i,r,n){return this._query(e,t,i,r,!1,n)}hitTest(e,t,i,r,n){return this._query(e,t,i,r,!0,n)}hitTestCircle(e,t,i,r){return this._queryCircle(e,t,i,!0,r)}_queryCell(e,t,i,r,n,o,s,a){const l=s.seenUids,c=this.boxCells[n];if(null!==c){const n=this.bboxes;for(const h of c)if(!l.box[h]){l.box[h]=!0;const c=4*h;if(e<=n[c+2]&&t<=n[c+3]&&i>=n[c+0]&&r>=n[c+1]&&(!a||a(this.boxKeys[h]))){if(s.hitTest)return o.push(!0),!0;o.push({key:this.boxKeys[h],x1:n[c],y1:n[c+1],x2:n[c+2],y2:n[c+3]})}}}const h=this.circleCells[n];if(null!==h){const n=this.circles;for(const c of h)if(!l.circle[c]){l.circle[c]=!0;const h=3*c;if(this._circleAndRectCollide(n[h],n[h+1],n[h+2],e,t,i,r)&&(!a||a(this.circleKeys[c]))){if(s.hitTest)return o.push(!0),!0;{const e=n[h],t=n[h+1],i=n[h+2];o.push({key:this.circleKeys[c],x1:e-i,y1:t-i,x2:e+i,y2:t+i})}}}}}_queryCellCircle(e,t,i,r,n,o,s,a){const l=s.circle,c=s.seenUids,h=this.boxCells[n];if(null!==h){const e=this.bboxes;for(const t of h)if(!c.box[t]){c.box[t]=!0;const i=4*t;if(this._circleAndRectCollide(l.x,l.y,l.radius,e[i+0],e[i+1],e[i+2],e[i+3])&&(!a||a(this.boxKeys[t])))return o.push(!0),!0}}const u=this.circleCells[n];if(null!==u){const e=this.circles;for(const t of u)if(!c.circle[t]){c.circle[t]=!0;const i=3*t;if(this._circlesCollide(e[i],e[i+1],e[i+2],l.x,l.y,l.radius)&&(!a||a(this.circleKeys[t])))return o.push(!0),!0}}}_forEachCell(e,t,i,r,n,o,s,a){const l=this._convertToXCellCoord(e),c=this._convertToYCellCoord(t),h=this._convertToXCellCoord(i),u=this._convertToYCellCoord(r);for(let p=l;p<=h;p++)for(let l=c;l<=u;l++)if(n.call(this,e,t,i,r,this.xCellCount*l+p,o,s,a))return}_convertToXCellCoord(e){return Math.max(0,Math.min(this.xCellCount-1,Math.floor(e*this.xScale)))}_convertToYCellCoord(e){return Math.max(0,Math.min(this.yCellCount-1,Math.floor(e*this.yScale)))}_circlesCollide(e,t,i,r,n,o){const s=r-e,a=n-t,l=i+o;return l*l>s*s+a*a}_circleAndRectCollide(e,t,i,r,n,o,s){const a=(o-r)/2,l=Math.abs(e-(r+a));if(l>a+i)return!1;const c=(s-n)/2,h=Math.abs(t-(n+c));if(h>c+i)return!1;if(l<=a||h<=c)return!0;const u=l-a,p=h-c;return u*u+p*p<=i*i}}const Je=Math.tan(85*Math.PI/180);function Qe(t,i,r,n,o,s){const a=e.create();if(r){if("globe"===o.projection.name)e.multiply$1(a,a,e.calculateGlobeLabelMatrix(o,i));else{const e=y([],s);a[0]=e[0],a[1]=e[1],a[4]=e[2],a[5]=e[3]}n||e.rotateZ(a,a,o.angle)}else e.multiply$1(a,o.labelPlaneMatrix,t);return a}function et(t,i,r,n,o,s){if(r){if("globe"===o.projection.name){const a=Qe(t,i,r,n,o,s);return e.invert(a,a),e.multiply$1(a,t,a),a}{const i=e.clone(t),r=e.identity([]);return r[0]=s[0],r[1]=s[1],r[4]=s[2],r[5]=s[3],e.multiply$1(i,i,r),n||e.rotateZ(i,i,-o.angle),i}}return o.glCoordMatrix}function tt(t,i,r=0){const n=[t.x,t.y,r,1];r?e.transformMat4$1(n,n,i):ft(n,n,i);const o=n[3];return{point:new e.pointGeometry(n[0]/o,n[1]/o),signedDistanceFromCamera:o}}function it(t,i){const r=[t[0],t[1],t[2],1];e.transformMat4$1(r,r,i);const n=r[3];return{point:new e.pointGeometry(r[0]/n,r[1]/n),signedDistanceFromCamera:n}}function rt(e,t){return Math.min(.5+e/t*.5,1.5)}function nt(e,t){const i=e[0]/e[3],r=e[1]/e[3];return i>=-t[0]&&i<=t[0]&&r>=-t[1]&&r<=t[1]}function ot(t,i,r,n,o,s,a,l,c,h){const u=r.transform,p=n?t.textSizeData:t.iconSizeData,d=e.evaluateSizeForZoom(p,r.transform.zoom),f=[256/r.width*2+1,256/r.height*2+1],m=n?t.text.dynamicLayoutVertexArray:t.icon.dynamicLayoutVertexArray;m.clear();const _=t.lineVertexArray,g=n?t.text.placedSymbolArray:t.icon.placedSymbolArray,y=r.transform.width/r.transform.height;let x=!1;for(let v=0;vMath.abs(r.x-i.x)*n?{useVertical:!0}:t.writingMode===e.WritingMode.vertical?i.yJe}(i,r,n)?1===t.flipState?{needsFlipping:!0}:null:i.x>r.x?{needsFlipping:!0}:null}function lt(t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g){const y=i/24,x=t.lineOffsetX*y,v=t.lineOffsetY*y;let b;if(t.numGlyphs>1){const e=t.glyphStartIndex+t.numGlyphs,i=t.lineStartIndex,o=t.lineStartIndex+t.lineLength,h=st(y,l,x,v,r,u,p,t,c,s,d,m,!1,_,g);if(!h)return{notEnoughRoom:!0};const w=tt(h.first.point,a).point,T=tt(h.last.point,a).point;if(n&&!r){const e=at(t,w,T,f);if(t.flipState=e&&e.needsFlipping?1:2,e)return e}b=[h.first];for(let n=t.glyphStartIndex+1;n0?s.point:ht(p,n,i,1,o,void 0,_,g.canonical),f);if(t.flipState=a&&a.needsFlipping?1:2,a)return a}const i=ut(y*l.getoffsetX(t.glyphStartIndex),x,v,r,u,p,t.segment,t.lineStartIndex,t.lineStartIndex+t.lineLength,c,s,d,m,!1,!1,_,g);if(!i)return{notEnoughRoom:!0};b=[i]}for(const w of b)e.addDynamicAttributes(h,w.point,w.angle);return{}}function ct(t,i,r,n,o){const s=n.projectTilePoint(t.x,t.y,i);if(!o)return tt(s,r,s.z);const a=o(t);return tt(new e.pointGeometry(s.x+a[0],s.y+a[1]),r,s.z+a[2])}function ht(e,t,i,r,n,o,s,a){const l=ct(e.add(e.sub(t)._unit()),a,n,s,o).point,c=i.sub(l);return i.add(c._mult(r/c.mag()))}function ut(t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g){const y=n?t-i:t+i;let x=y>0?1:-1,v=0;n&&(x*=-1,v=Math.PI),x<0&&(v+=Math.PI);let b=x>0?l+a:l+a+1,w=o,T=o,E=0,S=0;const I=Math.abs(y),M=[],A=[];let z=s;const C=()=>{const t=b-x;return 0===E?s:new e.pointGeometry(h.getx(t),h.gety(t))},k=()=>ht(C(),z,T,I-E+1,u,d,_,g.canonical);for(;E+S<=I;){if(b+=x,b=c)return null;if(T=w,M.push(w),f&&A.push(z||C()),w=p[b],void 0===w){z=new e.pointGeometry(h.getx(b),h.gety(b));const t=ct(z,g.canonical,u,_,d);w=t.signedDistanceFromCamera>0?p[b]=t.point:k()}else z=null;E+=S,S=T.dist(w)}m&&d&&(z=z||new e.pointGeometry(h.getx(b),h.gety(b)),p[b]=w=void 0===p[b]?w:k(),S=T.dist(w));const D=(I-E)/S,P=w.sub(T),L=P.mult(D)._add(T);r&&L._add(P._unit()._perp()._mult(r*x));const B=v+Math.atan2(w.y-T.y,w.x-T.x);return M.push(L),f&&(z=z||new e.pointGeometry(h.getx(b),h.gety(b)),A.push(function(t,i,r){const n=1-r;return new e.pointGeometry(t.x*n+i.x*r,t.y*n+i.y*r)}(A.length>0?A[A.length-1]:z,z,D))),{point:L,angle:B,path:M,tilePath:A}}const pt=new Float32Array([-1/0,-1/0,0,-1/0,-1/0,0,-1/0,-1/0,0,-1/0,-1/0,0]);function dt(e,t){for(let i=0;i0),d=n*p.perspectiveRatio,f=(t.x1*e+i.x-t.padding)*d+p.point.x,m=(t.y1*e+i.y-t.padding)*d+p.point.y,_=(t.x2*e+i.x+t.padding)*d+p.point.x,g=(t.y2*e+i.y+t.padding)*d+p.point.y,y=p.perspectiveRatio<=.55||p.occluded;return!this.isInsideGrid(f,m,_,g)||!r&&this.grid.hitTest(f,m,_,g,s)||y?{box:[],offscreen:!1,occluded:p.occluded}:{box:[f,m,_,g],offscreen:this.isOffscreen(f,m,_,g),occluded:!1}}placeCollisionCircles(t,i,r,n,o,s,a,l,c,h,u,p,d,f){const m=[],_=this.transform.elevation,g=_?_.getAtTileOffsetFunc(f,this.transform.center.lat,this.transform.worldSize,this.transform.projection):e=>[0,0,0],y=new e.pointGeometry(i.tileAnchorX,i.tileAnchorY),x=this.transform.projection.projectTilePoint(i.tileAnchorX,i.tileAnchorY,f.canonical),v=g(y),b=[x.x+v[0],x.y+v[1],x.z+v[2]],w=this.projectAndGetPerspectiveRatio(s,[b[0],b[1],b[2]],f,"globe"===this.transform.projection.name||!!_||this.transform.pitch>0),{perspectiveRatio:T}=w,E=(h?o/T:o*T)/e.ONE_EM,S=tt(new e.pointGeometry(b[0],b[1]),a,b[2]).point,I=w.signedDistanceFromCamera>0?st(E,n,i.lineOffsetX*E,i.lineOffsetY*E,!1,S,y,i,r,a,{},_&&!h?g:null,h&&!!_,this.transform.projection,f):null;let M=!1,A=!1,z=!0;if(I&&!w.occluded){const i=.5*p*T+d,r=new e.pointGeometry(-100,-100),n=new e.pointGeometry(this.screenRightBoundary,this.screenBottomBoundary),o=new Ye,s=I.first,a=I.last;let h=[];for(let e=s.path.length-1;e>=1;e--)h.push(s.path[e]);for(let e=1;e{const i=g(ttt(e,l));h=e.some(e=>e.signedDistanceFromCamera<=0)?[]:e.map(e=>e.point)}let y=[];if(h.length>0){const t=h[0].clone(),i=h[0].clone();for(let e=1;e=r.x&&i.x<=n.x&&t.y>=r.y&&i.y<=n.y?[h]:i.xn.x||i.yn.y?[]:e.clipLine([h],r.x,r.y,n.x,n.y)}for(const e of y){o.reset(e,.25*i);let r=0;r=o.length<=.5*i?1:Math.ceil(o.paddedLength/f)+1;for(let e=0;e0?(e.transformMat4$1(o,o,t),this.fogState&&r&&(s=function(t,i,r,n,o,s){const a=s.calculateFogTileMatrix(o),l=[i,r,n];return e.transformMat4(l,l,a),M(t,l,s.pitch,s._fov)}(this.fogState,i[0],i[1],i[2],r.toUnwrapped(),this.transform)>.9)):ft(o,o,t),{point:new e.pointGeometry((o[0]/o[3]+1)/2*this.transform.width+mt,(-o[1]/o[3]+1)/2*this.transform.height+mt),perspectiveRatio:Math.min(.5+this.transform.cameraToCenterDistance/o[3]*.5,1.5),signedDistanceFromCamera:o[3],occluded:n&&o[2]>o[3]||s}}isOffscreen(e,t,i,r){return i=this.screenRightBoundary||rthis.screenBottomBoundary}isInsideGrid(e,t,i,r){return i>=0&&e=0&&te.collisionGroupID===t}}return this.collisionGroups[e]}}function Tt(t,i,r,n,o){const{horizontalAlign:s,verticalAlign:a}=e.getAnchorAlignment(t),l=-(s-.5)*i,c=-(a-.5)*r,h=e.evaluateVariableOffset(t,n);return new e.pointGeometry(l+h[0]*o,c+h[1]*o)}function Et(t,i,r,n,o){const s=new e.pointGeometry(t,i);return r&&s._rotate(n?o:-o),s}class St{constructor(e,t,i,r,n){this.transform=e.clone(),this.collisionIndex=new _t(this.transform,n),this.placements={},this.opacities={},this.variableOffsets={},this.stale=!1,this.commitTime=0,this.fadeDuration=t,this.retainedQueryData={},this.collisionGroups=new wt(i),this.collisionCircleArrays={},this.prevPlacement=r,r&&(r.prevPlacement=void 0),this.placedOrientations={}}getBucketParts(t,i,r,n){const o=r.getBucket(i),s=r.latestFeatureIndex;if(!o||!s||i.id!==o.layerIds[0])return;const a=o.layers[0].layout,l=r.collisionBoxArray,c=Math.pow(2,this.transform.zoom-r.tileID.overscaledZ),h=r.tileSize/e.EXTENT,u=r.tileID.toUnwrapped(),p=this.transform.calculateProjMatrix(u),d="map"===a.get("text-pitch-alignment"),f="map"===a.get("text-rotation-alignment");i.compileFilter();const m=i.dynamicFilter(),_=i.dynamicFilterNeedsFeature(),g=this.transform.calculatePixelsToTileUnitsMatrix(r),y=Qe(p,r.tileID.canonical,d,f,this.transform,g);let x=null;if(d){const t=et(p,r.tileID.canonical,d,f,this.transform,g);x=e.multiply$1([],this.transform.labelPlaneMatrix,t)}let v=null;m&&r.latestFeatureIndex&&(v={unwrappedTileID:u,dynamicFilter:m,dynamicFilterNeedsFeature:_,featureIndex:r.latestFeatureIndex}),this.retainedQueryData[o.bucketInstanceId]=new bt(o.bucketInstanceId,s,o.sourceLayerIndex,o.index,r.tileID);const b={bucket:o,layout:a,posMatrix:p,textLabelPlaneMatrix:y,labelToScreenMatrix:x,clippingData:v,scale:c,textPixelRatio:h,holdingForFade:r.holdingForFade(),collisionBoxArray:l,partiallyEvaluatedTextSize:e.evaluateSizeForZoom(o.textSizeData,this.transform.zoom),partiallyEvaluatedIconSize:e.evaluateSizeForZoom(o.iconSizeData,this.transform.zoom),collisionGroup:this.collisionGroups.get(o.sourceID)};if(n)for(const e of o.sortKeyRanges){const{sortKey:i,symbolInstanceStart:r,symbolInstanceEnd:n}=e;t.push({sortKey:i,symbolInstanceStart:r,symbolInstanceEnd:n,parameters:b})}else t.push({symbolInstanceStart:0,symbolInstanceEnd:o.symbolInstances.length,parameters:b})}attemptAnchorPlacement(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m,_,g){const y=[u.textOffset0,u.textOffset1],x=Tt(e,i,r,y,n),v=this.collisionIndex.placeCollisionBox(n,t,Et(x.x,x.y,o,s,this.transform.angle),h,a,l,c.predicate);if((!m||0!==this.collisionIndex.placeCollisionBox(d.getSymbolInstanceIconSize(g,this.transform.zoom,p),m,Et(x.x,x.y,o,s,this.transform.angle),h,a,l,c.predicate).box.length)&&v.box.length>0){let t;return this.prevPlacement&&this.prevPlacement.variableOffsets[u.crossTileID]&&this.prevPlacement.placements[u.crossTileID]&&this.prevPlacement.placements[u.crossTileID].text&&(t=this.prevPlacement.variableOffsets[u.crossTileID].anchor),this.variableOffsets[u.crossTileID]={textOffset:y,width:i,height:r,anchor:e,textScale:n,prevAnchor:t},this.markUsedJustification(d,e,u,f),d.allowVerticalPlacement&&(this.markUsedOrientation(d,f,u),this.placedOrientations[u.crossTileID]=f),{shift:x,placedGlyphBoxes:v}}}placeLayerBucketPart(t,i,r,n){const{bucket:o,layout:s,posMatrix:a,textLabelPlaneMatrix:l,labelToScreenMatrix:c,clippingData:h,textPixelRatio:u,holdingForFade:p,collisionBoxArray:d,partiallyEvaluatedTextSize:f,partiallyEvaluatedIconSize:m,collisionGroup:_}=t.parameters,g=s.get("text-optional"),y=s.get("icon-optional"),x=s.get("text-allow-overlap"),v=s.get("icon-allow-overlap"),b="map"===s.get("text-rotation-alignment"),w="map"===s.get("text-pitch-alignment"),T="none"!==s.get("icon-text-fit"),E="viewport-y"===s.get("symbol-z-order");let S=x&&(v||!o.hasIconData()||y),I=v&&(x||!o.hasTextData()||g);!o.collisionArrays&&d&&o.deserializeCollisionBoxes(d),r&&n&&o.updateCollisionDebugBuffers(this.transform.zoom,d);const M=(t,n,d)=>{if(h){const r={zoom:this.transform.zoom,pitch:this.transform.pitch};let n=null;if(h.dynamicFilterNeedsFeature){const e=this.retainedQueryData[o.bucketInstanceId];n=h.featureIndex.loadFeature({featureIndex:t.featureIndex,bucketIndex:e.bucketIndex,sourceLayerIndex:e.sourceLayerIndex,layoutVertexArrayOffset:0})}if(!(0,h.dynamicFilter)(r,n,this.retainedQueryData[o.bucketInstanceId].tileID.canonical,new e.pointGeometry(t.tileAnchorX,t.tileAnchorY),this.transform.calculateDistanceTileData(h.unwrappedTileID)))return this.placements[t.crossTileID]=new xt(!1,!1,!1,!0),void(i[t.crossTileID]=!0)}if(i[t.crossTileID])return;if(p)return void(this.placements[t.crossTileID]=new xt(!1,!1,!1));let E=!1,M=!1,A=!0,z=!1,C=!1,k=null,D={box:null,offscreen:null,occluded:null},P={box:null,offscreen:null,occluded:null},L=null,B=null,R=null,F=0,O=0,U=0;d.textFeatureIndex?F=d.textFeatureIndex:t.useRuntimeCollisionCircles&&(F=t.featureIndex),d.verticalTextFeatureIndex&&(O=d.verticalTextFeatureIndex);const V=e=>{e.tileID=this.retainedQueryData[o.bucketInstanceId].tileID,(this.transform.elevation||e.elevation)&&(e.elevation=this.transform.elevation?this.transform.elevation.getAtTileOffset(this.retainedQueryData[o.bucketInstanceId].tileID,e.tileAnchorX,e.tileAnchorY):0)},N=d.textBox;if(N){V(N);const i=i=>{let r=e.WritingMode.horizontal;if(o.allowVerticalPlacement&&!i&&this.prevPlacement){const e=this.prevPlacement.placedOrientations[t.crossTileID];e&&(this.placedOrientations[t.crossTileID]=e,r=e,this.markUsedOrientation(o,r,t))}return r},r=(i,r)=>{if(o.allowVerticalPlacement&&t.numVerticalGlyphVertices>0&&d.verticalTextBox){for(const t of o.writingModes)if(t===e.WritingMode.vertical?(D=r(),P=D):D=i(),D&&D.box&&D.box.length)break}else D=i()};if(s.get("text-variable-anchor")){let l=s.get("text-variable-anchor");if(this.prevPlacement&&this.prevPlacement.variableOffsets[t.crossTileID]){const e=this.prevPlacement.variableOffsets[t.crossTileID];l.indexOf(e.anchor)>0&&(l=l.filter(t=>t!==e.anchor),l.unshift(e.anchor))}const c=(e,i,r)=>{const s=o.getSymbolInstanceTextSize(f,t,this.transform.zoom,n),c=(e.x2-e.x1)*s+2*e.padding,h=(e.y2-e.y1)*s+2*e.padding,p=T&&!v?i:null;p&&V(p);let d={box:[],offscreen:!1,occluded:!1};const g=x?2*l.length:l.length;for(let y=0;y=l.length,t,n,o,r,p,f,m);if(i&&(d=i.placedGlyphBoxes,d&&d.box&&d.box.length)){E=!0,k=i.shift;break}}return d};r(()=>c(N,d.iconBox,e.WritingMode.horizontal),()=>{const i=d.verticalTextBox;return i&&V(i),o.allowVerticalPlacement&&!(D&&D.box&&D.box.length)&&t.numVerticalGlyphVertices>0&&i?c(i,d.verticalIconBox,e.WritingMode.vertical):{box:null,offscreen:null,occluded:null}}),D&&(E=D.box,A=D.offscreen,z=D.occluded);const h=i(D&&D.box);if(!E&&this.prevPlacement){const e=this.prevPlacement.variableOffsets[t.crossTileID];e&&(this.variableOffsets[t.crossTileID]=e,this.markUsedJustification(o,e.anchor,t,h))}}else{const s=(i,r)=>{const s=o.getSymbolInstanceTextSize(f,t,this.transform.zoom,n),l=this.collisionIndex.placeCollisionBox(s,i,new e.pointGeometry(0,0),x,u,a,_.predicate);return l&&l.box&&l.box.length&&(this.markUsedOrientation(o,r,t),this.placedOrientations[t.crossTileID]=r),l};r(()=>s(N,e.WritingMode.horizontal),()=>{const i=d.verticalTextBox;return o.allowVerticalPlacement&&t.numVerticalGlyphVertices>0&&i?(V(i),s(i,e.WritingMode.vertical)):{box:null,offscreen:null,occluded:null}}),i(D&&D.box&&D.box.length)}}if(L=D,E=L&&L.box&&L.box.length>0,A=L&&L.offscreen,z=L&&L.occluded,t.useRuntimeCollisionCircles){const i=o.text.placedSymbolArray.get(t.centerJustifiedTextSymbolIndex>=0?t.centerJustifiedTextSymbolIndex:t.verticalPlacedTextSymbolIndex),n=e.evaluateSizeForFeature(o.textSizeData,f,i),h=s.get("text-padding");B=this.collisionIndex.placeCollisionCircles(x,i,o.lineVertexArray,o.glyphOffsetArray,n,a,l,c,r,w,_.predicate,t.collisionCircleDiameter*n/e.ONE_EM,h,this.retainedQueryData[o.bucketInstanceId].tileID),E=x||B.circles.length>0&&!B.collisionDetected,A=A&&B.offscreen,z=B.occluded}if(d.iconFeatureIndex&&(U=d.iconFeatureIndex),d.iconBox){const t=t=>{V(t);const i=T&&k?Et(k.x,k.y,b,w,this.transform.angle):new e.pointGeometry(0,0),r=o.getSymbolInstanceIconSize(m,this.transform.zoom,n);return this.collisionIndex.placeCollisionBox(r,t,i,v,u,a,_.predicate)};P&&P.box&&P.box.length&&d.verticalIconBox?(R=t(d.verticalIconBox),M=R.box.length>0):(R=t(d.iconBox),M=R.box.length>0),A=A&&R.offscreen,C=R.occluded}const j=g||0===t.numHorizontalGlyphVertices&&0===t.numVerticalGlyphVertices,G=y||0===t.numIconVertices;if(j||G?G?j||(M=M&&E):E=M&&E:M=E=M&&E,E&&L&&L.box&&this.collisionIndex.insertCollisionBox(L.box,s.get("text-ignore-placement"),o.bucketInstanceId,P&&P.box&&O?O:F,_.ID),M&&R&&this.collisionIndex.insertCollisionBox(R.box,s.get("icon-ignore-placement"),o.bucketInstanceId,U,_.ID),B&&(E&&this.collisionIndex.insertCollisionCircles(B.circles,s.get("text-ignore-placement"),o.bucketInstanceId,F,_.ID),r)){const e=o.bucketInstanceId;let t=this.collisionCircleArrays[e];void 0===t&&(t=this.collisionCircleArrays[e]=new vt);for(let i=0;i=0;--t){const i=e[t];M(o.symbolInstances.get(i),i,o.collisionArrays[i])}}else for(let e=t.symbolInstanceStart;e=0&&(t.text.placedSymbolArray.get(e).crossTileID=o>=0&&e!==o?0:r.crossTileID)}markUsedOrientation(t,i,r){const n=i===e.WritingMode.horizontal||i===e.WritingMode.horizontalOnly?i:0,o=i===e.WritingMode.vertical?i:0,s=[r.leftJustifiedTextSymbolIndex,r.centerJustifiedTextSymbolIndex,r.rightJustifiedTextSymbolIndex];for(const e of s)t.text.placedSymbolArray.get(e).placedOrientation=n;r.verticalPlacedTextSymbolIndex&&(t.text.placedSymbolArray.get(r.verticalPlacedTextSymbolIndex).placedOrientation=o)}commit(e){this.commitTime=e,this.zoomAtLastRecencyCheck=this.transform.zoom;const t=this.prevPlacement;let i=!1;this.prevZoomAdjustment=t?t.zoomAdjustment(this.transform.zoom):0;const r=t?t.symbolFadeChange(e):1,n=t?t.opacities:{},o=t?t.variableOffsets:{},s=t?t.placedOrientations:{};for(const a in this.placements){const e=this.placements[a],t=n[a];t?(this.opacities[a]=new yt(t,r,e.text,e.icon,null,e.clipped),i=i||e.text!==t.text.placed||e.icon!==t.icon.placed):(this.opacities[a]=new yt(null,r,e.text,e.icon,e.skipFade,e.clipped),i=i||e.text||e.icon)}for(const a in n){const e=n[a];if(!this.opacities[a]){const t=new yt(e,r,!1,!1);t.isHidden()||(this.opacities[a]=t,i=i||e.text.placed||e.icon.placed)}}for(const a in o)this.variableOffsets[a]||!this.opacities[a]||this.opacities[a].isHidden()||(this.variableOffsets[a]=o[a]);for(const a in s)this.placedOrientations[a]||!this.opacities[a]||this.opacities[a].isHidden()||(this.placedOrientations[a]=s[a]);i?this.lastPlacementChangeTime=e:"number"!=typeof this.lastPlacementChangeTime&&(this.lastPlacementChangeTime=t?t.lastPlacementChangeTime:e)}updateLayerOpacities(e,t){const i={};for(const r of t){const t=r.getBucket(e);t&&r.latestFeatureIndex&&e.id===t.layerIds[0]&&this.updateBucketOpacities(t,i,r.collisionBoxArray)}}updateBucketOpacities(t,i,r){t.hasTextData()&&t.text.opacityVertexArray.clear(),t.hasIconData()&&t.icon.opacityVertexArray.clear(),t.hasIconCollisionBoxData()&&t.iconCollisionBox.collisionVertexArray.clear(),t.hasTextCollisionBoxData()&&t.textCollisionBox.collisionVertexArray.clear();const n=t.layers[0].layout,o=!!t.layers[0].dynamicFilter(),s=new yt(null,0,!1,!1,!0),a=n.get("text-allow-overlap"),l=n.get("icon-allow-overlap"),c=n.get("text-variable-anchor"),h="map"===n.get("text-rotation-alignment"),u="map"===n.get("text-pitch-alignment"),p="none"!==n.get("icon-text-fit"),d=new yt(null,0,a&&(l||!t.hasIconData()||n.get("icon-optional")),l&&(a||!t.hasTextData()||n.get("text-optional")),!0);!t.collisionArrays&&r&&(t.hasIconCollisionBoxData()||t.hasTextCollisionBoxData())&&t.deserializeCollisionBoxes(r);const f=(e,t,i)=>{for(let r=0;r0||a>0,x=r.numIconVertices>0,v=this.placedOrientations[r.crossTileID],b=v===e.WritingMode.vertical,w=v===e.WritingMode.horizontal||v===e.WritingMode.horizontalOnly;if(!y&&!x||g.isHidden()||m++,y){const e=Lt(g.text);f(t.text,n,b?Bt:e),f(t.text,a,w?Bt:e);const i=g.text.isHidden();[r.rightJustifiedTextSymbolIndex,r.centerJustifiedTextSymbolIndex,r.leftJustifiedTextSymbolIndex].forEach(e=>{e>=0&&(t.text.placedSymbolArray.get(e).hidden=i||b?1:0)}),r.verticalPlacedTextSymbolIndex>=0&&(t.text.placedSymbolArray.get(r.verticalPlacedTextSymbolIndex).hidden=i||w?1:0);const o=this.variableOffsets[r.crossTileID];o&&this.markUsedJustification(t,o.anchor,r,v);const s=this.placedOrientations[r.crossTileID];s&&(this.markUsedJustification(t,"left",r,s),this.markUsedOrientation(t,s,r))}if(x){const e=Lt(g.icon);r.placedIconSymbolIndex>=0&&(f(t.icon,r.numIconVertices,b?Bt:e),t.icon.placedSymbolArray.get(r.placedIconSymbolIndex).hidden=g.icon.isHidden()),r.verticalPlacedIconSymbolIndex>=0&&(f(t.icon,r.numVerticalIconVertices,w?Bt:e),t.icon.placedSymbolArray.get(r.verticalPlacedIconSymbolIndex).hidden=g.icon.isHidden())}if(t.hasIconCollisionBoxData()||t.hasTextCollisionBoxData()){const i=t.collisionArrays[_];if(i){let r=new e.pointGeometry(0,0),n=!0;if(i.textBox||i.verticalTextBox){if(c){const e=this.variableOffsets[l];e?(r=Tt(e.anchor,e.width,e.height,e.textOffset,e.textScale),h&&r._rotate(u?this.transform.angle:-this.transform.angle)):n=!1}o&&(n=!g.clipped),i.textBox&&It(t.textCollisionBox.collisionVertexArray,g.text.placed,!n||b,r.x,r.y),i.verticalTextBox&&It(t.textCollisionBox.collisionVertexArray,g.text.placed,!n||w,r.x,r.y)}const s=n&&Boolean(!w&&i.verticalIconBox);i.iconBox&&It(t.iconCollisionBox.collisionVertexArray,g.icon.placed,s,p?r.x:0,p?r.y:0),i.verticalIconBox&&It(t.iconCollisionBox.collisionVertexArray,g.icon.placed,!s,p?r.x:0,p?r.y:0)}}}if(t.fullyClipped=0===m,t.sortFeatures(this.transform.angle),this.retainedQueryData[t.bucketInstanceId]&&(this.retainedQueryData[t.bucketInstanceId].featureSortOrder=t.featureSortOrder),t.hasTextData()&&t.text.opacityVertexBuffer&&t.text.opacityVertexBuffer.updateData(t.text.opacityVertexArray),t.hasIconData()&&t.icon.opacityVertexBuffer&&t.icon.opacityVertexBuffer.updateData(t.icon.opacityVertexArray),t.hasIconCollisionBoxData()&&t.iconCollisionBox.collisionVertexBuffer&&t.iconCollisionBox.collisionVertexBuffer.updateData(t.iconCollisionBox.collisionVertexArray),t.hasTextCollisionBoxData()&&t.textCollisionBox.collisionVertexBuffer&&t.textCollisionBox.collisionVertexBuffer.updateData(t.textCollisionBox.collisionVertexArray),t.bucketInstanceId in this.collisionCircleArrays){const e=this.collisionCircleArrays[t.bucketInstanceId];t.placementInvProjMatrix=e.invProjMatrix,t.placementViewportMatrix=e.viewportMatrix,t.collisionCircleArray=e.circles,delete this.collisionCircleArrays[t.bucketInstanceId]}}symbolFadeChange(e){return 0===this.fadeDuration?1:(e-this.commitTime)/this.fadeDuration+this.prevZoomAdjustment}zoomAdjustment(e){return Math.max(0,(this.transform.zoom-e)/1.5)}hasTransitions(e){return this.stale||e-this.lastPlacementChangeTimee}setStale(){this.stale=!0}}function It(e,t,i,r,n){e.emplaceBack(t?1:0,i?1:0,r||0,n||0),e.emplaceBack(t?1:0,i?1:0,r||0,n||0),e.emplaceBack(t?1:0,i?1:0,r||0,n||0),e.emplaceBack(t?1:0,i?1:0,r||0,n||0)}const Mt=Math.pow(2,25),At=Math.pow(2,24),zt=Math.pow(2,17),Ct=Math.pow(2,16),kt=Math.pow(2,9),Dt=Math.pow(2,8),Pt=Math.pow(2,1);function Lt(e){if(0===e.opacity&&!e.placed)return 0;if(1===e.opacity&&e.placed)return 4294967295;const t=e.placed?1:0,i=Math.floor(127*e.opacity);return i*Mt+t*At+i*zt+t*Ct+i*kt+t*Dt+i*Pt+t}const Bt=0;class Rt{constructor(e){this._sortAcrossTiles="viewport-y"!==e.layout.get("symbol-z-order")&&void 0!==e.layout.get("symbol-sort-key").constantOr(1),this._currentTileIndex=0,this._currentPartIndex=0,this._seenCrossTileIDs={},this._bucketParts=[]}continuePlacement(e,t,i,r,n){const o=this._bucketParts;for(;this._currentTileIndexe.sortKey-t.sortKey));this._currentPartIndex{const t=e.exported.now()-n;return!this._forceFullPlacement&&t>2};for(;this._currentPlacementIndex>=0;){const e=i[t[this._currentPlacementIndex]],n=this.placement.collisionIndex.transform.zoom;if("symbol"===e.type&&(!e.minzoom||e.minzoom<=n)&&(!e.maxzoom||e.maxzoom>n)){if(this._inProgressLayer||(this._inProgressLayer=new Rt(e)),this._inProgressLayer.continuePlacement(r[e.source],this.placement,this._showCollisionBoxes,e,o))return;delete this._inProgressLayer}this._currentPlacementIndex--}this._done=!0}commit(e){return this.placement.commit(e),this.placement}}const Ot=512/e.EXTENT/2;class Ut{constructor(e,t,i){this.tileID=e,this.indexedSymbolInstances={},this.bucketInstanceId=i;for(let r=0;re.overscaledZ)for(const n in i){const o=i[n];o.tileID.isChildOf(e)&&o.findMatches(t.symbolInstances,e,r)}else{const o=i[e.scaledTo(Number(n)).key];o&&o.findMatches(t.symbolInstances,e,r)}}for(let n=0;n{t[e]=!0});for(const i in this.layerIndexes)t[i]||delete this.layerIndexes[i]}}const Gt=(t,i)=>e.emitValidationErrors(t,i&&i.filter(e=>"source.canvas"!==e.identifier)),Zt=e.pick(je,["addLayer","removeLayer","setPaintProperty","setLayoutProperty","setFilter","addSource","removeSource","setLayerZoomRange","setLight","setTransition","setGeoJSONSourceData","setTerrain","setFog","setProjection"]),qt=e.pick(je,["setCenter","setZoom","setBearing","setPitch"]),$t={version:8,layers:[],sources:{}},Xt={fill:!0,line:!0,background:!0,hillshade:!0,raster:!0};class Wt extends e.Evented{constructor(t,i={}){super(),this.map=t,this.dispatcher=new D(Ue(),this),this.imageManager=new v,this.imageManager.setEventedParent(this),this.glyphManager=new e.GlyphManager(t._requestManager,i.localFontFamily?e.LocalGlyphMode.all:i.localIdeographFontFamily?e.LocalGlyphMode.ideographs:e.LocalGlyphMode.none,i.localFontFamily||i.localIdeographFontFamily),this.lineAtlas=new e.LineAtlas(256,512),this.crossTileSymbolIndex=new jt,this._layers={},this._num3DLayers=0,this._numSymbolLayers=0,this._numCircleLayers=0,this._serializedLayers={},this._sourceCaches={},this._otherSourceCaches={},this._symbolSourceCaches={},this.zoomHistory=new e.ZoomHistory,this._loaded=!1,this._availableImages=[],this._order=[],this._drapedFirstOrder=[],this._markersNeedUpdate=!1,this._resetUpdates(),this.dispatcher.broadcast("setReferrer",e.getReferrer());const r=this;this._rtlTextPluginCallback=Wt.registerForPluginStateChange(t=>{r.dispatcher.broadcast("syncRTLPluginState",{pluginStatus:t.pluginStatus,pluginURL:t.pluginURL},(t,i)=>{if(e.triggerPluginCompletionEvent(t),i&&i.every(e=>e))for(const e in r._sourceCaches){const t=r._sourceCaches[e],i=t.getSource().type;"vector"!==i&&"geojson"!==i||t.reload()}})}),this.on("data",e=>{if("source"!==e.dataType||"metadata"!==e.sourceDataType)return;const t=this.getSource(e.sourceId);if(t&&t.vectorLayerIds)for(const i in this._layers){const e=this._layers[i];e.source===t.id&&this._validateLayer(e)}})}loadURL(t,i={}){this.fire(new e.Event("dataloading",{dataType:"style"}));const r="boolean"==typeof i.validate?i.validate:!e.isMapboxURL(t);t=this.map._requestManager.normalizeStyleURL(t,i.accessToken);const n=this.map._requestManager.transformRequest(t,e.ResourceType.Style);this._request=e.getJSON(n,(t,i)=>{this._request=null,t?this.fire(new e.ErrorEvent(t)):i&&this._load(i,r)})}loadJSON(t,i={}){this.fire(new e.Event("dataloading",{dataType:"style"})),this._request=e.exported.frame(()=>{this._request=null,this._load(t,!1!==i.validate)})}loadEmpty(){this.fire(new e.Event("dataloading",{dataType:"style"})),this._load($t,!1)}_updateLayerCount(e,t){const i=t?1:-1;e.is3D()&&(this._num3DLayers+=i),"circle"===e.type&&(this._numCircleLayers+=i),"symbol"===e.type&&(this._numSymbolLayers+=i)}_load(t,i){if(i&&Gt(this,e.validateStyle(t)))return;this._loaded=!0,this.stylesheet=t,this._updateMapProjection();for(const e in t.sources)this.addSource(e,t.sources[e],{validate:!1});this._changed=!1,t.sprite?this._loadSprite(t.sprite):(this.imageManager.setLoaded(!0),this.dispatcher.broadcast("spriteLoaded",!0)),this.glyphManager.setURL(t.glyphs);const r=Ne(this.stylesheet.layers);this._order=r.map(e=>e.id),this._layers={},this._serializedLayers={};for(let n of r)n=e.createStyleLayer(n),n.setEventedParent(this,{layer:{id:n.id}}),this._layers[n.id]=n,this._serializedLayers[n.id]=n.serialize(),this._updateLayerCount(n,!0);this.dispatcher.broadcast("setLayers",this._serializeLayers(this._order)),this.light=new T(this.stylesheet.light),this.stylesheet.terrain&&!this.terrainSetForDrapingOnly()&&this._createTerrain(this.stylesheet.terrain,1),this.stylesheet.fog&&this._createFog(this.stylesheet.fog),this._updateDrapeFirstLayers(),this.fire(new e.Event("data",{dataType:"style"})),this.fire(new e.Event("style.load"))}terrainSetForDrapingOnly(){return!!this.terrain&&0===this.terrain.drapeRenderMode}setProjection(e){e?this.stylesheet.projection=e:delete this.stylesheet.projection,this.map._explicitProjection||this.map._updateProjection()}_updateMapProjection(){this.map._explicitProjection?this.applyProjectionUpdate():this.map._updateProjection()}applyProjectionUpdate(){this._loaded&&(this.dispatcher.broadcast("setProjection",this.map.transform.projectionOptions),this.map.transform.projection.requiresDraping?this.getTerrain()||this.stylesheet.terrain||this.setTerrainForDraping():this.terrainSetForDrapingOnly()&&this.setTerrain(null))}_loadSprite(t){this._spriteRequest=function(t,i,r){let n,o,s;const a=e.exported.devicePixelRatio>1?"@2x":"";let l=e.getJSON(i.transformRequest(i.normalizeSpriteURL(t,a,".json"),e.ResourceType.SpriteJSON),(e,t)=>{l=null,s||(s=e,n=t,h())}),c=e.getImage(i.transformRequest(i.normalizeSpriteURL(t,a,".png"),e.ResourceType.SpriteImage),(e,t)=>{c=null,s||(s=e,o=t,h())});function h(){if(s)r(s);else if(n&&o){const t=e.exported.getImageData(o),i={};for(const r in n){const{width:o,height:s,x:a,y:l,sdf:c,pixelRatio:h,stretchX:u,stretchY:p,content:d}=n[r],f=new e.RGBAImage({width:o,height:s});e.RGBAImage.copy(t,f,{x:a,y:l},{x:0,y:0},{width:o,height:s}),i[r]={data:f,pixelRatio:h,sdf:c,stretchX:u,stretchY:p,content:d}}r(null,i)}}return{cancel(){l&&(l.cancel(),l=null),c&&(c.cancel(),c=null)}}}(t,this.map._requestManager,(t,i)=>{if(this._spriteRequest=null,t)this.fire(new e.ErrorEvent(t));else if(i)for(const e in i)this.imageManager.addImage(e,i[e]);this.imageManager.setLoaded(!0),this._availableImages=this.imageManager.listImages(),this.dispatcher.broadcast("setImages",this._availableImages),this.dispatcher.broadcast("spriteLoaded",!0),this.fire(new e.Event("data",{dataType:"style"}))})}_validateLayer(t){const i=this.getSource(t.source);if(!i)return;const r=t.sourceLayer;r&&("geojson"===i.type||i.vectorLayerIds&&-1===i.vectorLayerIds.indexOf(r))&&this.fire(new e.ErrorEvent(new Error(`Source layer "${r}" does not exist on source "${i.id}" as specified by style layer "${t.id}"`)))}loaded(){if(!this._loaded)return!1;if(Object.keys(this._updatedSources).length)return!1;for(const e in this._sourceCaches)if(!this._sourceCaches[e].loaded())return!1;return!!this.imageManager.isLoaded()}_serializeLayers(e){const t=[];for(const i of e){const e=this._layers[i];"custom"!==e.type&&t.push(e.serialize())}return t}hasTransitions(){if(this.light&&this.light.hasTransition())return!0;if(this.fog&&this.fog.hasTransition())return!0;for(const e in this._sourceCaches)if(this._sourceCaches[e].hasTransition())return!0;for(const e in this._layers)if(this._layers[e].hasTransition())return!0;return!1}get order(){return this.map._optimizeForTerrain&&this.terrain?this._drapedFirstOrder:this._order}isLayerDraped(e){return!!this.terrain&&Xt[e.type]}_checkLoaded(){if(!this._loaded)throw new Error("Style is not done loading")}update(t){if(!this._loaded)return;const i=this._changed;if(this._changed){const e=Object.keys(this._updatedLayers),i=Object.keys(this._removedLayers);(e.length||i.length)&&this._updateWorkerLayers(e,i);for(const t in this._updatedSources){const e=this._updatedSources[t];"reload"===e?this._reloadSource(t):"clear"===e&&this._clearSource(t)}this._updateTilesForChangedImages();for(const r in this._updatedPaintProps)this._layers[r].updateTransitions(t);this.light.updateTransitions(t),this.fog&&this.fog.updateTransitions(t),this._resetUpdates()}const r={};for(const e in this._sourceCaches){const t=this._sourceCaches[e];r[e]=t.used,t.used=!1}for(const e of this._order){const i=this._layers[e];if(i.recalculate(t,this._availableImages),!i.isHidden(t.zoom)){const e=this._getLayerSourceCache(i);e&&(e.used=!0)}const r=this.map.painter;if(r){const e=i.getProgramIds();if(!e)continue;const n=i.getProgramConfiguration(t.zoom);for(const t of e)r.useProgram(t,n)}}for(const n in r){const t=this._sourceCaches[n];r[n]!==t.used&&t.getSource().fire(new e.Event("data",{sourceDataType:"visibility",dataType:"source",sourceId:t.getSource().id}))}this.light.recalculate(t),this.terrain&&this.terrain.recalculate(t),this.fog&&this.fog.recalculate(t),this.z=t.zoom,this._markersNeedUpdate&&(this._updateMarkersOpacity(),this._markersNeedUpdate=!1),i&&this.fire(new e.Event("data",{dataType:"style"}))}_updateTilesForChangedImages(){const e=Object.keys(this._changedImages);if(e.length){for(const t in this._sourceCaches)this._sourceCaches[t].reloadTilesForDependencies(["icons","patterns"],e);this._changedImages={}}}_updateWorkerLayers(e,t){this.dispatcher.broadcast("updateLayers",{layers:this._serializeLayers(e),removedIds:t})}_resetUpdates(){this._changed=!1,this._updatedLayers={},this._removedLayers={},this._updatedSources={},this._updatedPaintProps={},this._changedImages={}}setState(t){if(this._checkLoaded(),Gt(this,e.validateStyle(t)))return!1;(t=e.clone$1(t)).layers=Ne(t.layers);const i=function(e,t){if(!e)return[{command:je.setStyle,args:[t]}];let i=[];try{if(!n(e.version,t.version))return[{command:je.setStyle,args:[t]}];n(e.center,t.center)||i.push({command:je.setCenter,args:[t.center]}),n(e.zoom,t.zoom)||i.push({command:je.setZoom,args:[t.zoom]}),n(e.bearing,t.bearing)||i.push({command:je.setBearing,args:[t.bearing]}),n(e.pitch,t.pitch)||i.push({command:je.setPitch,args:[t.pitch]}),n(e.sprite,t.sprite)||i.push({command:je.setSprite,args:[t.sprite]}),n(e.glyphs,t.glyphs)||i.push({command:je.setGlyphs,args:[t.glyphs]}),n(e.transition,t.transition)||i.push({command:je.setTransition,args:[t.transition]}),n(e.light,t.light)||i.push({command:je.setLight,args:[t.light]}),n(e.fog,t.fog)||i.push({command:je.setFog,args:[t.fog]}),n(e.projection,t.projection)||i.push({command:je.setProjection,args:[t.projection]});const r={},o=[];!function(e,t,i,r){let o;for(o in t=t||{},e=e||{})e.hasOwnProperty(o)&&(t.hasOwnProperty(o)||Ze(o,i,r));for(o in t)t.hasOwnProperty(o)&&(e.hasOwnProperty(o)?n(e[o],t[o])||("geojson"===e[o].type&&"geojson"===t[o].type&&$e(e,t,o)?i.push({command:je.setGeoJSONSourceData,args:[o,t[o].data]}):qe(o,t,i,r)):Ge(o,t,i))}(e.sources,t.sources,o,r);const s=[];e.layers&&e.layers.forEach(e=>{e.source&&r[e.source]?i.push({command:je.removeLayer,args:[e.id]}):s.push(e)});let a=e.terrain;a&&r[a.source]&&(i.push({command:je.setTerrain,args:[void 0]}),a=void 0),i=i.concat(o),n(a,t.terrain)||i.push({command:je.setTerrain,args:[t.terrain]}),function(e,t,i){t=t||[];const r=(e=e||[]).map(We),o=t.map(We),s=e.reduce(He,{}),a=t.reduce(He,{}),l=r.slice(),c=Object.create(null);let h,u,p,d,f,m,_;for(h=0,u=0;h!(e.command in qt));if(0===i.length)return!1;const r=i.filter(e=>!(e.command in Zt));if(r.length>0)throw new Error(`Unimplemented: ${r.map(e=>e.command).join(", ")}.`);return i.forEach(e=>{"setTransition"!==e.command&&this[e.command].apply(this,e.args)}),this.stylesheet=t,this._updateMapProjection(),!0}addImage(t,i){return this.getImage(t)?this.fire(new e.ErrorEvent(new Error("An image with this name already exists."))):(this.imageManager.addImage(t,i),this._afterImageUpdated(t),this)}updateImage(e,t){this.imageManager.updateImage(e,t)}getImage(e){return this.imageManager.getImage(e)}removeImage(t){return this.getImage(t)?(this.imageManager.removeImage(t),this._afterImageUpdated(t),this):this.fire(new e.ErrorEvent(new Error("No image with this name exists.")))}_afterImageUpdated(t){this._availableImages=this.imageManager.listImages(),this._changedImages[t]=!0,this._changed=!0,this.dispatcher.broadcast("setImages",this._availableImages),this.fire(new e.Event("data",{dataType:"style"}))}listImages(){return this._checkLoaded(),this._availableImages.slice()}addSource(t,i,r={}){if(this._checkLoaded(),void 0!==this.getSource(t))throw new Error("There is already a source with this ID");if(!i.type)throw new Error(`The type property must be defined, but only the following properties were given: ${Object.keys(i).join(", ")}.`);if(["vector","raster","geojson","video","image"].indexOf(i.type)>=0&&this._validate(e.validateSource,"sources."+t,i,null,r))return;this.map&&this.map._collectResourceTiming&&(i.collectResourceTiming=!0);const n=Ce(t,i,this.dispatcher,this);n.setEventedParent(this,()=>({isSourceLoaded:this._isSourceCacheLoaded(t),source:n.serialize(),sourceId:t}));const o=i=>{const r=(i?"symbol:":"other:")+t,o=this._sourceCaches[r]=new e.SourceCache(r,n,i);(i?this._symbolSourceCaches:this._otherSourceCaches)[t]=o,o.style=this,o.onAdd(this.map)};o(!1),"vector"!==i.type&&"geojson"!==i.type||o(!0),n.onAdd&&n.onAdd(this.map),this._changed=!0}removeSource(t){this._checkLoaded();const i=this.getSource(t);if(!i)throw new Error("There is no source with this ID");for(const n in this._layers)if(this._layers[n].source===t)return this.fire(new e.ErrorEvent(new Error(`Source "${t}" cannot be removed while layer "${n}" is using it.`)));if(this.terrain&&this.terrain.get().source===t)return this.fire(new e.ErrorEvent(new Error(`Source "${t}" cannot be removed while terrain is using it.`)));const r=this._getSourceCaches(t);for(const n of r)delete this._sourceCaches[n.id],delete this._updatedSources[n.id],n.fire(new e.Event("data",{sourceDataType:"metadata",dataType:"source",sourceId:n.getSource().id})),n.setEventedParent(null),n.clearTiles();return delete this._otherSourceCaches[t],delete this._symbolSourceCaches[t],i.setEventedParent(null),i.onRemove&&i.onRemove(this.map),this._changed=!0,this}setGeoJSONSourceData(e,t){this._checkLoaded(),this.getSource(e).setData(t),this._changed=!0}getSource(e){const t=this._getSourceCache(e);return t&&t.getSource()}addLayer(t,i,r={}){this._checkLoaded();const n=t.id;if(this.getLayer(n))return void this.fire(new e.ErrorEvent(new Error(`Layer with id "${n}" already exists on this map`)));let o;if("custom"===t.type){if(Gt(this,e.validateCustomStyleLayer(t)))return;o=e.createStyleLayer(t)}else{if("object"==typeof t.source&&(this.addSource(n,t.source),t=e.clone$1(t),t=e.extend(t,{source:n})),this._validate(e.validateLayer,"layers."+n,t,{arrayIndex:-1},r))return;o=e.createStyleLayer(t),this._validateLayer(o),o.setEventedParent(this,{layer:{id:n}}),this._serializedLayers[o.id]=o.serialize(),this._updateLayerCount(o,!0)}const s=i?this._order.indexOf(i):this._order.length;if(i&&-1===s)return void this.fire(new e.ErrorEvent(new Error(`Layer with id "${i}" does not exist on this map.`)));this._order.splice(s,0,n),this._layerOrderChanged=!0,this._layers[n]=o;const a=this._getLayerSourceCache(o);if(this._removedLayers[n]&&o.source&&a&&"custom"!==o.type){const e=this._removedLayers[n];delete this._removedLayers[n],e.type!==o.type?this._updatedSources[o.source]="clear":(this._updatedSources[o.source]="reload",a.pause())}this._updateLayer(o),o.onAdd&&o.onAdd(this.map),this._updateDrapeFirstLayers()}moveLayer(t,i){if(this._checkLoaded(),this._changed=!0,!this._layers[t])return void this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot be moved.`)));if(t===i)return;const r=this._order.indexOf(t);this._order.splice(r,1);const n=i?this._order.indexOf(i):this._order.length;i&&-1===n?this.fire(new e.ErrorEvent(new Error(`Layer with id "${i}" does not exist on this map.`))):(this._order.splice(n,0,t),this._layerOrderChanged=!0,this._updateDrapeFirstLayers())}removeLayer(t){this._checkLoaded();const i=this._layers[t];if(!i)return void this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot be removed.`)));i.setEventedParent(null),this._updateLayerCount(i,!1);const r=this._order.indexOf(t);this._order.splice(r,1),this._layerOrderChanged=!0,this._changed=!0,this._removedLayers[t]=i,delete this._layers[t],delete this._serializedLayers[t],delete this._updatedLayers[t],delete this._updatedPaintProps[t],i.onRemove&&i.onRemove(this.map),this._updateDrapeFirstLayers()}getLayer(e){return this._layers[e]}hasLayer(e){return e in this._layers}hasLayerType(e){for(const t in this._layers)if(this._layers[t].type===e)return!0;return!1}setLayerZoomRange(t,i,r){this._checkLoaded();const n=this.getLayer(t);n?n.minzoom===i&&n.maxzoom===r||(null!=i&&(n.minzoom=i),null!=r&&(n.maxzoom=r),this._updateLayer(n)):this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot have zoom extent.`)))}setFilter(t,i,r={}){this._checkLoaded();const o=this.getLayer(t);if(o){if(!n(o.filter,i))return null==i?(o.filter=void 0,void this._updateLayer(o)):void(this._validate(e.validateFilter,`layers.${o.id}.filter`,i,{layerType:o.type},r)||(o.filter=e.clone$1(i),this._updateLayer(o)))}else this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot be filtered.`)))}getFilter(t){const i=this.getLayer(t);return i&&e.clone$1(i.filter)}setLayoutProperty(t,i,r,o={}){this._checkLoaded();const s=this.getLayer(t);s?n(s.getLayoutProperty(i),r)||(s.setLayoutProperty(i,r,o),this._updateLayer(s)):this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot be styled.`)))}getLayoutProperty(t,i){const r=this.getLayer(t);if(r)return r.getLayoutProperty(i);this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style.`)))}setPaintProperty(t,i,r,o={}){this._checkLoaded();const s=this.getLayer(t);s?n(s.getPaintProperty(i),r)||(s.setPaintProperty(i,r,o)&&this._updateLayer(s),this._changed=!0,this._updatedPaintProps[t]=!0):this.fire(new e.ErrorEvent(new Error(`The layer '${t}' does not exist in the map's style and cannot be styled.`)))}getPaintProperty(e,t){const i=this.getLayer(e);return i&&i.getPaintProperty(t)}setFeatureState(t,i){this._checkLoaded();const r=t.source,n=t.sourceLayer,o=this.getSource(r);if(!o)return void this.fire(new e.ErrorEvent(new Error(`The source '${r}' does not exist in the map's style.`)));const s=o.type;if("geojson"===s&&n)return void this.fire(new e.ErrorEvent(new Error("GeoJSON sources cannot have a sourceLayer parameter.")));if("vector"===s&&!n)return void this.fire(new e.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")));void 0===t.id&&this.fire(new e.ErrorEvent(new Error("The feature id parameter must be provided.")));const a=this._getSourceCaches(r);for(const e of a)e.setFeatureState(n,t.id,i)}removeFeatureState(t,i){this._checkLoaded();const r=t.source,n=this.getSource(r);if(!n)return void this.fire(new e.ErrorEvent(new Error(`The source '${r}' does not exist in the map's style.`)));const o=n.type,s="vector"===o?t.sourceLayer:void 0;if("vector"===o&&!s)return void this.fire(new e.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")));if(i&&"string"!=typeof t.id&&"number"!=typeof t.id)return void this.fire(new e.ErrorEvent(new Error("A feature id is required to remove its specific state property.")));const a=this._getSourceCaches(r);for(const e of a)e.removeFeatureState(s,t.id,i)}getFeatureState(t){this._checkLoaded();const i=t.source,r=t.sourceLayer,n=this.getSource(i);if(n){if("vector"!==n.type||r)return void 0===t.id&&this.fire(new e.ErrorEvent(new Error("The feature id parameter must be provided."))),this._getSourceCaches(i)[0].getFeatureState(r,t.id);this.fire(new e.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")))}else this.fire(new e.ErrorEvent(new Error(`The source '${i}' does not exist in the map's style.`)))}getTransition(){return e.extend({duration:300,delay:0},this.stylesheet&&this.stylesheet.transition)}serialize(){const t={};for(const e in this._sourceCaches){const i=this._sourceCaches[e].getSource();t[i.id]||(t[i.id]=i.serialize())}return e.filterObject({version:this.stylesheet.version,name:this.stylesheet.name,metadata:this.stylesheet.metadata,light:this.stylesheet.light,terrain:this.stylesheet.terrain,fog:this.stylesheet.fog,center:this.stylesheet.center,zoom:this.stylesheet.zoom,bearing:this.stylesheet.bearing,pitch:this.stylesheet.pitch,sprite:this.stylesheet.sprite,glyphs:this.stylesheet.glyphs,transition:this.stylesheet.transition,projection:this.stylesheet.projection,sources:t,layers:this._serializeLayers(this._order)},e=>void 0!==e)}_updateLayer(e){this._updatedLayers[e.id]=!0;const t=this._getLayerSourceCache(e);e.source&&!this._updatedSources[e.source]&&t&&"raster"!==t.getSource().type&&(this._updatedSources[e.source]="reload",t.pause()),this._changed=!0,e.invalidateCompiledFilter()}_flattenAndSortRenderedFeatures(e){const t=e=>"fill-extrusion"===this._layers[e].type,i={},r=[];for(let o=this._order.length-1;o>=0;o--){const n=this._order[o];if(t(n)){i[n]=o;for(const t of e){const e=t[n];if(e)for(const t of e)r.push(t)}}}r.sort((e,t)=>t.intersectionZ-e.intersectionZ);const n=[];for(let o=this._order.length-1;o>=0;o--){const s=this._order[o];if(t(s))for(let e=r.length-1;e>=0;e--){const t=r[e].feature;if(i[t.layer.id]{const t=this.getLayer(e);return t&&t.is3D()}):this.has3DLayers(),a=L.createFromScreenPoints(t,r);for(const e in this._sourceCaches){const t=this._sourceCaches[e].getSource().id;i.layers&&!n[t]||o.push(De(this._sourceCaches[e],this._layers,this._serializedLayers,a,i,r,s,!!this.map._showQueryGeometry))}return this.placement&&o.push(function(e,t,i,r,n,o,s){const a={},l=o.queryRenderedSymbols(r),c=[];for(const h of Object.keys(l).map(Number))c.push(s[h]);c.sort(Le);for(const h of c){const i=h.featureIndex.lookupSymbolFeatures(l[h.bucketInstanceId],t,h.bucketIndex,h.sourceLayerIndex,n.filter,n.layers,n.availableImages,e);for(const e in i){const t=a[e]=a[e]||[],r=i[e];r.sort((e,t)=>{const i=h.featureSortOrder;if(i){const r=i.indexOf(e.featureIndex);return i.indexOf(t.featureIndex)-r}return t.featureIndex-e.featureIndex});for(const e of r)t.push(e)}}for(const h in a)a[h].forEach(t=>{const r=t.feature,n=i(e[h]).getFeatureState(r.layer["source-layer"],r.id);r.source=r.layer.source,r.layer["source-layer"]&&(r.sourceLayer=r.layer["source-layer"]),r.state=n});return a}(this._layers,this._serializedLayers,this._getLayerSourceCache.bind(this),a.screenGeometry,i,this.placement.collisionIndex,this.placement.retainedQueryData)),this._flattenAndSortRenderedFeatures(o)}querySourceFeatures(t,i){i&&i.filter&&this._validate(e.validateFilter,"querySourceFeatures.filter",i.filter,null,i);const r=this._getSourceCaches(t);let n=[];for(const e of r)n=n.concat(Pe(e,i));return n}addSourceType(e,t,i){return Wt.getSourceType(e)?i(new Error(`A source type called "${e}" already exists.`)):(Wt.setSourceType(e,t),t.workerSourceURL?void this.dispatcher.broadcast("loadWorkerSource",{name:e,url:t.workerSourceURL},i):i(null,null))}getLight(){return this.light.getLight()}setLight(t,i={}){this._checkLoaded();const r=this.light.getLight();let o=!1;for(const e in t)if(!n(t[e],r[e])){o=!0;break}if(!o)return;const s={now:e.exported.now(),transition:e.extend({duration:300,delay:0},this.stylesheet.transition)};this.light.setLight(t,i),this.light.updateTransitions(s)}getTerrain(){return this.terrain&&1===this.terrain.drapeRenderMode?this.terrain.get():null}setTerrainForDraping(){this.setTerrain({source:"",exaggeration:0},0)}setTerrain(t,i=1){if(this._checkLoaded(),!t)return delete this.terrain,delete this.stylesheet.terrain,this.dispatcher.broadcast("enableTerrain",!1),this._force3DLayerUpdate(),void(this._markersNeedUpdate=!0);if(1===i){if("object"==typeof t.source){const i="terrain-dem-src";this.addSource(i,t.source),t=e.clone$1(t),t=e.extend(t,{source:i})}if(this._validate(e.validateTerrain,"terrain",t))return}if(!this.terrain||this.terrain&&i!==this.terrain.drapeRenderMode)this._createTerrain(t,i);else{const i=this.terrain,r=i.get();for(const o in t)if(!n(t[o],r[o])){i.set(t),this.stylesheet.terrain=t;const r={now:e.exported.now(),transition:e.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r);break}}this._updateDrapeFirstLayers(),this._markersNeedUpdate=!0}_createFog(t){const i=this.fog=new k(t,this.map.transform);this.stylesheet.fog=t;const r={now:e.exported.now(),transition:e.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r)}_updateMarkersOpacity(){0!==this.map._markers.length&&this.map._requestDomTask(()=>{for(const e of this.map._markers)e._evaluateOpacity()})}getFog(){return this.fog?this.fog.get():null}setFog(t){if(this._checkLoaded(),!t)return delete this.fog,delete this.stylesheet.fog,void(this._markersNeedUpdate=!0);if(this.fog){const i=this.fog,r=i.get();for(const o in t)if(!n(t[o],r[o])){i.set(t),this.stylesheet.fog=t;const r={now:e.exported.now(),transition:e.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r);break}}else this._createFog(t);this._markersNeedUpdate=!0}_updateDrapeFirstLayers(){if(!this.map._optimizeForTerrain||!this.terrain)return;const e=this._order.filter(e=>this.isLayerDraped(this._layers[e])),t=this._order.filter(e=>!this.isLayerDraped(this._layers[e]));this._drapedFirstOrder=[],this._drapedFirstOrder.push(...e),this._drapedFirstOrder.push(...t)}_createTerrain(t,i){const r=this.terrain=new I(t,i);this.stylesheet.terrain=t,this.dispatcher.broadcast("enableTerrain",!this.terrainSetForDrapingOnly()),this._force3DLayerUpdate();const n={now:e.exported.now(),transition:e.extend({duration:0},this.stylesheet.transition)};r.updateTransitions(n)}_force3DLayerUpdate(){for(const e in this._layers){const t=this._layers[e];"fill-extrusion"===t.type&&this._updateLayer(t)}}_forceSymbolLayerUpdate(){for(const e in this._layers){const t=this._layers[e];"symbol"===t.type&&this._updateLayer(t)}}_validate(t,i,r,n,o={}){return(!o||!1!==o.validate)&&Gt(this,t.call(e.validateStyle,e.extend({key:i,style:this.serialize(),value:r,styleSpec:e.spec},n)))}_remove(){this._request&&(this._request.cancel(),this._request=null),this._spriteRequest&&(this._spriteRequest.cancel(),this._spriteRequest=null),e.evented.off("pluginStateChange",this._rtlTextPluginCallback);for(const e in this._layers)this._layers[e].setEventedParent(null);for(const e in this._sourceCaches)this._sourceCaches[e].clearTiles(),this._sourceCaches[e].setEventedParent(null);this.imageManager.setEventedParent(null),this.setEventedParent(null),this.dispatcher.remove()}_clearSource(e){const t=this._getSourceCaches(e);for(const i of t)i.clearTiles()}_reloadSource(e){const t=this._getSourceCaches(e);for(const i of t)i.resume(),i.reload()}_updateSources(e){for(const t in this._sourceCaches)this._sourceCaches[t].update(e)}_generateCollisionBoxes(){for(const e in this._sourceCaches){const t=this._sourceCaches[e];t.resume(),t.reload()}}_updatePlacement(t,i,r,n,o=!1){let s=!1,a=!1;const l={};for(const e of this._order){const i=this._layers[e];if("symbol"!==i.type)continue;if(!l[i.source]){const e=this._getLayerSourceCache(i);if(!e)continue;l[i.source]=e.getRenderableIds(!0).map(t=>e.getTileByID(t)).sort((e,t)=>t.tileID.overscaledZ-e.tileID.overscaledZ||(e.tileID.isLessThan(t.tileID)?-1:1))}const r=this.crossTileSymbolIndex.addLayer(i,l[i.source],t.center.lng,t.projection);s=s||r}if(this.crossTileSymbolIndex.pruneUnusedLayers(this._order),o=o||this._layerOrderChanged||0===r,this._layerOrderChanged&&this.fire(new e.Event("neworder")),(o||!this.pauseablePlacement||this.pauseablePlacement.isDone()&&!this.placement.stillRecent(e.exported.now(),t.zoom))&&(this.pauseablePlacement=new Ft(t,this._order,o,i,r,n,this.placement,this.fog&&t.projection.supportsFog?this.fog.state:null),this._layerOrderChanged=!1),this.pauseablePlacement.isDone()?this.placement.setStale():(this.pauseablePlacement.continuePlacement(this._order,this._layers,l),this.pauseablePlacement.isDone()&&(this.placement=this.pauseablePlacement.commit(e.exported.now()),a=!0),s&&this.pauseablePlacement.placement.setStale()),a||s)for(const e of this._order){const t=this._layers[e];"symbol"===t.type&&this.placement.updateLayerOpacities(t,l[t.source])}return!this.pauseablePlacement.isDone()||this.placement.hasTransitions(e.exported.now())}_releaseSymbolFadeTiles(){for(const e in this._sourceCaches)this._sourceCaches[e].releaseSymbolFadeTiles()}getImages(e,t,i){this.imageManager.getImages(t.icons,i),this._updateTilesForChangedImages();const r=e=>{e&&e.setDependencies(t.tileID.key,t.type,t.icons)};r(this._otherSourceCaches[t.source]),r(this._symbolSourceCaches[t.source])}getGlyphs(e,t,i){this.glyphManager.getGlyphs(t.stacks,i)}getResource(t,i,r){return e.makeRequest(i,r)}_getSourceCache(e){return this._otherSourceCaches[e]}_getLayerSourceCache(e){return"symbol"===e.type?this._symbolSourceCaches[e.source]:this._otherSourceCaches[e.source]}_getSourceCaches(e){const t=[];return this._otherSourceCaches[e]&&t.push(this._otherSourceCaches[e]),this._symbolSourceCaches[e]&&t.push(this._symbolSourceCaches[e]),t}_isSourceCacheLoaded(t){const i=this._getSourceCaches(t);return 0===i.length?(this.fire(new e.ErrorEvent(new Error(`There is no source with ID '${t}'`))),!1):i.every(e=>e.loaded())}has3DLayers(){return this._num3DLayers>0}hasSymbolLayers(){return this._numSymbolLayers>0}hasCircleLayers(){return this._numCircleLayers>0}_clearWorkerCaches(){this.dispatcher.broadcast("clearCaches")}destroy(){this._clearWorkerCaches(),this.terrainSetForDrapingOnly()&&(delete this.terrain,delete this.stylesheet.terrain)}}Wt.getSourceType=function(e){return ze[e]},Wt.setSourceType=function(e,t){ze[e]=t},Wt.registerForPluginStateChange=e.registerForPluginStateChange;var Ht="\n#define EPSILON 0.0000001\n#define PI 3.141592653589793\n#define EXTENT 8192.0\n#define HALF_PI PI/2.0\n#define QUARTER_PI PI/4.0\n#define RAD_TO_DEG 180.0/PI\n#define DEG_TO_RAD PI/180.0\n#define GLOBE_RADIUS EXTENT/PI/2.0\n#ifdef FOG\nuniform mediump vec4 u_fog_color;uniform mediump vec2 u_fog_range;uniform mediump float u_fog_horizon_blend;varying vec3 v_fog_pos;float fog_range(float depth) {return (depth-u_fog_range[0])/(u_fog_range[1]-u_fog_range[0]);}float fog_horizon_blending(vec3 camera_dir) {float t=max(0.0,camera_dir.z/u_fog_horizon_blend);return u_fog_color.a*exp(-3.0*t*t);}float fog_opacity(float t) {const float decay=6.0;float falloff=1.0-min(1.0,exp(-decay*t));falloff*=falloff*falloff;return u_fog_color.a*min(1.0,1.00747*falloff);}\n#endif",Yt="attribute highp vec3 a_pos_3f;uniform lowp mat4 u_matrix;varying highp vec3 v_uv;void main() {const mat3 half_neg_pi_around_x=mat3(1.0,0.0, 0.0,0.0,0.0,-1.0,0.0,1.0, 0.0);v_uv=half_neg_pi_around_x*a_pos_3f;vec4 pos=u_matrix*vec4(a_pos_3f,1.0);gl_Position=pos.xyww;}";let Kt={},Jt={};Kt=ii("","\n#define ELEVATION_SCALE 7.0\n#define ELEVATION_OFFSET 450.0\n#ifdef PROJECTION_GLOBE_VIEW\nuniform vec3 u_tile_tl_up;uniform vec3 u_tile_tr_up;uniform vec3 u_tile_br_up;uniform vec3 u_tile_bl_up;uniform float u_tile_up_scale;vec3 elevationVector(vec2 pos) {vec2 uv=pos/EXTENT;vec3 up=normalize(mix(\nmix(u_tile_tl_up,u_tile_tr_up,uv.xxx),mix(u_tile_bl_up,u_tile_br_up,uv.xxx),uv.yyy));return up*u_tile_up_scale;}\n#else\nvec3 elevationVector(vec2 pos) { return vec3(0,0,1); }\n#endif\n#ifdef TERRAIN\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nuniform highp sampler2D u_dem;uniform highp sampler2D u_dem_prev;\n#else\nuniform sampler2D u_dem;uniform sampler2D u_dem_prev;\n#endif\nuniform vec4 u_dem_unpack;uniform vec2 u_dem_tl;uniform vec2 u_dem_tl_prev;uniform float u_dem_scale;uniform float u_dem_scale_prev;uniform float u_dem_size;uniform float u_dem_lerp;uniform float u_exaggeration;uniform float u_meter_to_dem;uniform mat4 u_label_plane_matrix_inv;uniform sampler2D u_depth;uniform vec2 u_depth_size_inv;vec4 tileUvToDemSample(vec2 uv,float dem_size,float dem_scale,vec2 dem_tl) {vec2 pos=dem_size*(uv*dem_scale+dem_tl)+1.0;vec2 f=fract(pos);return vec4((pos-f+0.5)/(dem_size+2.0),f);}float decodeElevation(vec4 v) {return dot(vec4(v.xyz*255.0,-1.0),u_dem_unpack);}float currentElevation(vec2 apos) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nvec2 pos=(u_dem_size*(apos/8192.0*u_dem_scale+u_dem_tl)+1.5)/(u_dem_size+2.0);return u_exaggeration*texture2D(u_dem,pos).a;\n#else\nfloat dd=1.0/(u_dem_size+2.0);vec4 r=tileUvToDemSample(apos/8192.0,u_dem_size,u_dem_scale,u_dem_tl);vec2 pos=r.xy;vec2 f=r.zw;float tl=decodeElevation(texture2D(u_dem,pos));\n#ifdef TERRAIN_DEM_NEAREST_FILTER\nreturn u_exaggeration*tl;\n#endif\nfloat tr=decodeElevation(texture2D(u_dem,pos+vec2(dd,0.0)));float bl=decodeElevation(texture2D(u_dem,pos+vec2(0.0,dd)));float br=decodeElevation(texture2D(u_dem,pos+vec2(dd,dd)));return u_exaggeration*mix(mix(tl,tr,f.x),mix(bl,br,f.x),f.y);\n#endif\n}float prevElevation(vec2 apos) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nvec2 pos=(u_dem_size*(apos/8192.0*u_dem_scale_prev+u_dem_tl_prev)+1.5)/(u_dem_size+2.0);return u_exaggeration*texture2D(u_dem_prev,pos).a;\n#else\nfloat dd=1.0/(u_dem_size+2.0);vec4 r=tileUvToDemSample(apos/8192.0,u_dem_size,u_dem_scale_prev,u_dem_tl_prev);vec2 pos=r.xy;vec2 f=r.zw;float tl=decodeElevation(texture2D(u_dem_prev,pos));float tr=decodeElevation(texture2D(u_dem_prev,pos+vec2(dd,0.0)));float bl=decodeElevation(texture2D(u_dem_prev,pos+vec2(0.0,dd)));float br=decodeElevation(texture2D(u_dem_prev,pos+vec2(dd,dd)));return u_exaggeration*mix(mix(tl,tr,f.x),mix(bl,br,f.x),f.y);\n#endif\n}\n#ifdef TERRAIN_VERTEX_MORPHING\nfloat elevation(vec2 apos) {float nextElevation=currentElevation(apos);float prevElevation=prevElevation(apos);return mix(prevElevation,nextElevation,u_dem_lerp);}\n#else\nfloat elevation(vec2 apos) {return currentElevation(apos);}\n#endif\nfloat unpack_depth(vec4 rgba_depth)\n{const vec4 bit_shift=vec4(1.0/(256.0*256.0*256.0),1.0/(256.0*256.0),1.0/256.0,1.0);return dot(rgba_depth,bit_shift)*2.0-1.0;}bool isOccluded(vec4 frag) {vec3 coord=frag.xyz/frag.w;float depth=unpack_depth(texture2D(u_depth,(coord.xy+1.0)*0.5));return coord.z > depth+0.0005;}float occlusionFade(vec4 frag) {vec3 coord=frag.xyz/frag.w;vec3 df=vec3(5.0*u_depth_size_inv,0.0);vec2 uv=0.5*coord.xy+0.5;vec4 depth=vec4(\nunpack_depth(texture2D(u_depth,uv-df.xz)),unpack_depth(texture2D(u_depth,uv+df.xz)),unpack_depth(texture2D(u_depth,uv-df.zy)),unpack_depth(texture2D(u_depth,uv+df.zy))\n);return dot(vec4(0.25),vec4(1.0)-clamp(300.0*(vec4(coord.z-0.001)-depth),0.0,1.0));}vec4 fourSample(vec2 pos,vec2 off) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nfloat tl=texture2D(u_dem,pos).a;float tr=texture2D(u_dem,pos+vec2(off.x,0.0)).a;float bl=texture2D(u_dem,pos+vec2(0.0,off.y)).a;float br=texture2D(u_dem,pos+off).a;\n#else\nvec4 demtl=vec4(texture2D(u_dem,pos).xyz*255.0,-1.0);float tl=dot(demtl,u_dem_unpack);vec4 demtr=vec4(texture2D(u_dem,pos+vec2(off.x,0.0)).xyz*255.0,-1.0);float tr=dot(demtr,u_dem_unpack);vec4 dembl=vec4(texture2D(u_dem,pos+vec2(0.0,off.y)).xyz*255.0,-1.0);float bl=dot(dembl,u_dem_unpack);vec4 dembr=vec4(texture2D(u_dem,pos+off).xyz*255.0,-1.0);float br=dot(dembr,u_dem_unpack);\n#endif\nreturn vec4(tl,tr,bl,br);}float flatElevation(vec2 pack) {vec2 apos=floor(pack/8.0);vec2 span=10.0*(pack-apos*8.0);vec2 uvTex=(apos-vec2(1.0,1.0))/8190.0;float size=u_dem_size+2.0;float dd=1.0/size;vec2 pos=u_dem_size*(uvTex*u_dem_scale+u_dem_tl)+1.0;vec2 f=fract(pos);pos=(pos-f+0.5)*dd;vec4 h=fourSample(pos,vec2(dd));float z=mix(mix(h.x,h.y,f.x),mix(h.z,h.w,f.x),f.y);vec2 w=floor(0.5*(span*u_meter_to_dem-1.0));vec2 d=dd*w;vec4 bounds=vec4(d,vec2(1.0)-d);h=fourSample(pos-d,2.0*d+vec2(dd));vec4 diff=abs(h.xzxy-h.ywzw);vec2 slope=min(vec2(0.25),u_meter_to_dem*0.5*(diff.xz+diff.yw)/(2.0*w+vec2(1.0)));vec2 fix=slope*span;float base=z+max(fix.x,fix.y);return u_exaggeration*base;}float elevationFromUint16(float word) {return u_exaggeration*(word/ELEVATION_SCALE-ELEVATION_OFFSET);}\n#else\nfloat elevation(vec2 pos) { return 0.0; }bool isOccluded(vec4 frag) { return false; }float occlusionFade(vec4 frag) { return 1.0; }\n#endif",!0),Jt=ii("#ifdef FOG\nuniform float u_fog_temporal_offset;float fog_opacity(vec3 pos) {float depth=length(pos);return fog_opacity(fog_range(depth));}vec3 fog_apply(vec3 color,vec3 pos) {float depth=length(pos);float opacity=fog_opacity(fog_range(depth));opacity*=fog_horizon_blending(pos/depth);return mix(color,u_fog_color.rgb,opacity);}vec4 fog_apply_from_vert(vec4 color,float fog_opac) {float alpha=EPSILON+color.a;color.rgb=mix(color.rgb/alpha,u_fog_color.rgb,fog_opac)*alpha;return color;}vec3 fog_apply_sky_gradient(vec3 camera_ray,vec3 sky_color) {float horizon_blend=fog_horizon_blending(normalize(camera_ray));return mix(sky_color,u_fog_color.rgb,horizon_blend);}vec4 fog_apply_premultiplied(vec4 color,vec3 pos) {float alpha=EPSILON+color.a;color.rgb=fog_apply(color.rgb/alpha,pos)*alpha;return color;}vec3 fog_dither(vec3 color) {vec2 dither_seed=gl_FragCoord.xy+u_fog_temporal_offset;return dither(color,dither_seed);}vec4 fog_dither(vec4 color) {return vec4(fog_dither(color.rgb),color.a);}\n#endif","#ifdef FOG\nuniform mat4 u_fog_matrix;vec3 fog_position(vec3 pos) {return (u_fog_matrix*vec4(pos,1.0)).xyz;}vec3 fog_position(vec2 pos) {return fog_position(vec3(pos,0.0));}float fog(vec3 pos) {float depth=length(pos);float opacity=fog_opacity(fog_range(depth));return opacity*fog_horizon_blending(pos/depth);}\n#endif",!0);const Qt=ii("\nhighp vec3 hash(highp vec2 p) {highp vec3 p3=fract(p.xyx*vec3(443.8975,397.2973,491.1871));p3+=dot(p3,p3.yxz+19.19);return fract((p3.xxy+p3.yzz)*p3.zyx);}vec3 dither(vec3 color,highp vec2 seed) {vec3 rnd=hash(seed)+hash(seed+0.59374)-0.5;return color+rnd/255.0;}\n#ifdef TERRAIN\nhighp vec4 pack_depth(highp float ndc_z) {highp float depth=ndc_z*0.5+0.5;const highp vec4 bit_shift=vec4(256.0*256.0*256.0,256.0*256.0,256.0,1.0);const highp vec4 bit_mask =vec4(0.0,1.0/256.0,1.0/256.0,1.0/256.0);highp vec4 res=fract(depth*bit_shift);res-=res.xxyz*bit_mask;return res;}\n#endif","\nfloat wrap(float n,float min,float max) {float d=max-min;float w=mod(mod(n-min,d)+d,d)+min;return (w==min) ? max : w;}\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 mercator_tile_position(mat4 matrix,vec2 tile_anchor,vec3 tile_id,vec2 mercator_center) {\n#ifndef PROJECTED_POS_ON_VIEWPORT\nfloat tiles=tile_id.z;vec2 mercator=(tile_anchor/EXTENT+tile_id.xy)/tiles;mercator-=mercator_center;mercator.x=wrap(mercator.x,-0.5,0.5);vec4 mercator_tile=vec4(mercator.xy*EXTENT,EXTENT/(2.0*PI),1.0);mercator_tile=matrix*mercator_tile;return mercator_tile.xyz;\n#else\nreturn vec3(0.0);\n#endif\n}vec3 mix_globe_mercator(vec3 globe,vec3 mercator,float t) {return mix(globe,mercator,t);}mat3 globe_mercator_surface_vectors(vec3 pos_normal,vec3 up_dir,float zoom_transition) {vec3 normal=zoom_transition==0.0 ? pos_normal : normalize(mix(pos_normal,up_dir,zoom_transition));vec3 xAxis=normalize(vec3(normal.z,0.0,-normal.x));vec3 yAxis=normalize(cross(normal,xAxis));return mat3(xAxis,yAxis,normal);}\n#endif\nvec2 unpack_float(const float packedValue) {int packedIntValue=int(packedValue);int v0=packedIntValue/256;return vec2(v0,packedIntValue-v0*256);}vec2 unpack_opacity(const float packedOpacity) {int intOpacity=int(packedOpacity)/2;return vec2(float(intOpacity)/127.0,mod(packedOpacity,2.0));}vec4 decode_color(const vec2 encodedColor) {return vec4(\nunpack_float(encodedColor[0])/255.0,unpack_float(encodedColor[1])/255.0\n);}float unpack_mix_vec2(const vec2 packedValue,const float t) {return mix(packedValue[0],packedValue[1],t);}vec4 unpack_mix_color(const vec4 packedColors,const float t) {vec4 minColor=decode_color(vec2(packedColors[0],packedColors[1]));vec4 maxColor=decode_color(vec2(packedColors[2],packedColors[3]));return mix(minColor,maxColor,t);}vec2 get_pattern_pos(const vec2 pixel_coord_upper,const vec2 pixel_coord_lower,const vec2 pattern_size,const float tile_units_to_pixels,const vec2 pos) {vec2 offset=mod(mod(mod(pixel_coord_upper,pattern_size)*256.0,pattern_size)*256.0+pixel_coord_lower,pattern_size);return (tile_units_to_pixels*pos+offset)/pattern_size;}const vec4 AWAY=vec4(-1000.0,-1000.0,-1000.0,1);//Normalized device coordinate that is not rendered."),ei=Ht;var ti={background:ii("uniform vec4 u_color;uniform float u_opacity;void main() {vec4 out_color=u_color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),backgroundPattern:ii("uniform vec2 u_pattern_tl_a;uniform vec2 u_pattern_br_a;uniform vec2 u_pattern_tl_b;uniform vec2 u_pattern_br_b;uniform vec2 u_texsize;uniform float u_mix;uniform float u_opacity;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;void main() {vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(u_pattern_tl_a/u_texsize,u_pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(u_pattern_tl_b/u_texsize,u_pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_mix);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pattern_size_a;uniform vec2 u_pattern_size_b;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform float u_scale_a;uniform float u_scale_b;uniform float u_tile_units_to_pixels;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,u_scale_a*u_pattern_size_a,u_tile_units_to_pixels,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,u_scale_b*u_pattern_size_b,u_tile_units_to_pixels,a_pos);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),circle:ii("varying vec3 v_data;varying float v_visibility;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define mediump float radius\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define highp vec4 stroke_color\n#pragma mapbox: define mediump float stroke_width\n#pragma mapbox: define lowp float stroke_opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize mediump float radius\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize highp vec4 stroke_color\n#pragma mapbox: initialize mediump float stroke_width\n#pragma mapbox: initialize lowp float stroke_opacity\nvec2 extrude=v_data.xy;float extrude_length=length(extrude);lowp float antialiasblur=v_data.z;float antialiased_blur=-max(blur,antialiasblur);float opacity_t=smoothstep(0.0,antialiased_blur,extrude_length-1.0);float color_t=stroke_width < 0.01 ? 0.0 : smoothstep(\nantialiased_blur,0.0,extrude_length-radius/(radius+stroke_width)\n);vec4 out_color=mix(color*opacity,stroke_color*stroke_opacity,color_t);\n#ifdef FOG\nout_color=fog_apply_premultiplied(out_color,v_fog_pos);\n#endif\ngl_FragColor=out_color*(v_visibility*opacity_t);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","#define NUM_VISIBILITY_RINGS 2\n#define INV_SQRT2 0.70710678\n#define ELEVATION_BIAS 0.0001\n#define NUM_SAMPLES_PER_RING 16\nuniform mat4 u_matrix;uniform mat2 u_extrude_scale;uniform lowp float u_device_pixel_ratio;uniform highp float u_camera_to_center_distance;attribute vec2 a_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;attribute vec3 a_pos_normal_3;attribute float a_scale;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform vec3 u_up_dir;\n#endif\nvarying vec3 v_data;varying float v_visibility;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define mediump float radius\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define highp vec4 stroke_color\n#pragma mapbox: define mediump float stroke_width\n#pragma mapbox: define lowp float stroke_opacity\nvec2 calc_offset(vec2 extrusion,float radius,float stroke_width, float view_scale) {return extrusion*(radius+stroke_width)*u_extrude_scale*view_scale;}float cantilevered_elevation(vec2 pos,float radius,float stroke_width,float view_scale) {vec2 c1=pos+calc_offset(vec2(-1,-1),radius,stroke_width,view_scale);vec2 c2=pos+calc_offset(vec2(1,-1),radius,stroke_width,view_scale);vec2 c3=pos+calc_offset(vec2(1,1),radius,stroke_width,view_scale);vec2 c4=pos+calc_offset(vec2(-1,1),radius,stroke_width,view_scale);float h1=elevation(c1)+ELEVATION_BIAS;float h2=elevation(c2)+ELEVATION_BIAS;float h3=elevation(c3)+ELEVATION_BIAS;float h4=elevation(c4)+ELEVATION_BIAS;return max(h4,max(h3,max(h1,h2)));}float circle_elevation(vec2 pos) {\n#if defined(TERRAIN)\nreturn elevation(pos)+ELEVATION_BIAS;\n#else\nreturn 0.0;\n#endif\n}vec4 project_vertex(vec2 extrusion,vec4 world_center,vec4 projected_center,float radius,float stroke_width, float view_scale,mat3 surface_vectors) {vec2 sample_offset=calc_offset(extrusion,radius,stroke_width,view_scale);\n#ifdef PITCH_WITH_MAP\n#ifdef PROJECTION_GLOBE_VIEW\nreturn u_matrix*( world_center+vec4(sample_offset.x*surface_vectors[0]+sample_offset.y*surface_vectors[1],0) );\n#else\nreturn u_matrix*( world_center+vec4(sample_offset,0,0) );\n#endif\n#else\nreturn projected_center+vec4(sample_offset,0,0);\n#endif\n}float get_sample_step() {\n#ifdef PITCH_WITH_MAP\nreturn 2.0*PI/float(NUM_SAMPLES_PER_RING);\n#else\nreturn PI/float(NUM_SAMPLES_PER_RING);\n#endif\n}void main(void) {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize mediump float radius\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize highp vec4 stroke_color\n#pragma mapbox: initialize mediump float stroke_width\n#pragma mapbox: initialize lowp float stroke_opacity\nvec2 extrude=vec2(mod(a_pos,2.0)*2.0-1.0);vec2 circle_center=floor(a_pos*0.5);\n#ifdef PROJECTION_GLOBE_VIEW\nvec2 scaled_extrude=extrude*a_scale;vec3 pos_normal_3=a_pos_normal_3/16384.0;mat3 surface_vectors=globe_mercator_surface_vectors(pos_normal_3,u_up_dir,u_zoom_transition);vec3 surface_extrusion=scaled_extrude.x*surface_vectors[0]+scaled_extrude.y*surface_vectors[1];vec3 globe_elevation=elevationVector(circle_center)*circle_elevation(circle_center);vec3 globe_pos=a_pos_3+surface_extrusion+globe_elevation;vec3 mercator_elevation=u_up_dir*u_tile_up_scale*circle_elevation(circle_center);vec3 merc_pos=mercator_tile_position(u_inv_rot_matrix,circle_center,u_tile_id,u_merc_center)+surface_extrusion+mercator_elevation;vec3 pos=mix_globe_mercator(globe_pos,merc_pos,u_zoom_transition);vec4 world_center=vec4(pos,1);\n#else \nmat3 surface_vectors=mat3(1.0);float height=circle_elevation(circle_center);vec4 world_center=vec4(circle_center,height,1);\n#endif\nvec4 projected_center=u_matrix*world_center;float view_scale=0.0;\n#ifdef PITCH_WITH_MAP\n#ifdef SCALE_WITH_MAP\nview_scale=1.0;\n#else\nview_scale=projected_center.w/u_camera_to_center_distance;\n#endif\n#else\n#ifdef SCALE_WITH_MAP\nview_scale=u_camera_to_center_distance;\n#else\nview_scale=projected_center.w;\n#endif\n#endif\n#if defined(SCALE_WITH_MAP) && defined(PROJECTION_GLOBE_VIEW)\nview_scale*=a_scale;\n#endif\ngl_Position=project_vertex(extrude,world_center,projected_center,radius,stroke_width,view_scale,surface_vectors);float visibility=0.0;\n#ifdef TERRAIN\nfloat step=get_sample_step();\n#ifdef PITCH_WITH_MAP\nfloat cantilevered_height=cantilevered_elevation(circle_center,radius,stroke_width,view_scale);vec4 occlusion_world_center=vec4(circle_center,cantilevered_height,1);vec4 occlusion_projected_center=u_matrix*occlusion_world_center;\n#else\nvec4 occlusion_world_center=world_center;vec4 occlusion_projected_center=projected_center;\n#endif\nfor(int ring=0; ring < NUM_VISIBILITY_RINGS; ring++) {float scale=(float(ring)+1.0)/float(NUM_VISIBILITY_RINGS);for(int i=0; i < NUM_SAMPLES_PER_RING; i++) {vec2 extrusion=vec2(cos(step*float(i)),-sin(step*float(i)))*scale;vec4 frag_pos=project_vertex(extrusion,occlusion_world_center,occlusion_projected_center,radius,stroke_width,view_scale,surface_vectors);visibility+=float(!isOccluded(frag_pos));}}visibility/=float(NUM_VISIBILITY_RINGS)*float(NUM_SAMPLES_PER_RING);\n#else\nvisibility=1.0;\n#endif\n#ifdef PROJECTION_GLOBE_VIEW\nvisibility=1.0;\n#endif\nv_visibility=visibility;lowp float antialiasblur=1.0/u_device_pixel_ratio/(radius+stroke_width);v_data=vec3(extrude.x,extrude.y,antialiasblur);\n#ifdef FOG\nv_fog_pos=fog_position(world_center.xyz);\n#endif\n}"),clippingMask:ii("void main() {gl_FragColor=vec4(1.0);}","attribute vec2 a_pos;uniform mat4 u_matrix;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);}"),heatmap:ii("uniform highp float u_intensity;varying vec2 v_extrude;\n#pragma mapbox: define highp float weight\n#define GAUSS_COEF 0.3989422804014327\nvoid main() {\n#pragma mapbox: initialize highp float weight\nfloat d=-0.5*3.0*3.0*dot(v_extrude,v_extrude);float val=weight*u_intensity*GAUSS_COEF*exp(d);gl_FragColor=vec4(val,1.0,1.0,1.0);\n#ifdef FOG\ngl_FragColor.r*=pow(1.0-fog_opacity(v_fog_pos),2.0);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform float u_extrude_scale;uniform float u_opacity;uniform float u_intensity;attribute vec2 a_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;attribute vec3 a_pos_normal_3;attribute float a_scale;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform vec3 u_up_dir;\n#endif\nvarying vec2 v_extrude;\n#pragma mapbox: define highp float weight\n#pragma mapbox: define mediump float radius\nconst highp float ZERO=1.0/255.0/16.0;\n#define GAUSS_COEF 0.3989422804014327\nvoid main(void) {\n#pragma mapbox: initialize highp float weight\n#pragma mapbox: initialize mediump float radius\nvec2 unscaled_extrude=vec2(mod(a_pos,2.0)*2.0-1.0);float S=sqrt(-2.0*log(ZERO/weight/u_intensity/GAUSS_COEF))/3.0;v_extrude=S*unscaled_extrude;vec2 extrude=v_extrude*radius*u_extrude_scale;vec2 tilePos=floor(a_pos*0.5);\n#ifdef PROJECTION_GLOBE_VIEW\nextrude*=a_scale;vec3 pos_normal_3=a_pos_normal_3/16384.0;mat3 surface_vectors=globe_mercator_surface_vectors(pos_normal_3,u_up_dir,u_zoom_transition);vec3 surface_extrusion=extrude.x*surface_vectors[0]+extrude.y*surface_vectors[1];vec3 globe_elevation=elevationVector(tilePos)*elevation(tilePos);vec3 globe_pos=a_pos_3+surface_extrusion+globe_elevation;vec3 mercator_elevation=u_up_dir*u_tile_up_scale*elevation(tilePos);vec3 merc_pos=mercator_tile_position(u_inv_rot_matrix,tilePos,u_tile_id,u_merc_center)+surface_extrusion+mercator_elevation;vec3 pos=mix_globe_mercator(globe_pos,merc_pos,u_zoom_transition);\n#else\nvec3 pos=vec3(tilePos+extrude,elevation(tilePos));\n#endif\ngl_Position=u_matrix*vec4(pos,1);\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),heatmapTexture:ii("uniform sampler2D u_image;uniform sampler2D u_color_ramp;uniform float u_opacity;varying vec2 v_pos;void main() {float t=texture2D(u_image,v_pos).r;vec4 color=texture2D(u_color_ramp,vec2(t,0.5));gl_FragColor=color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(0.0);\n#endif\n}","attribute vec2 a_pos;varying vec2 v_pos;void main() {gl_Position=vec4(a_pos,0,1);v_pos=a_pos*0.5+0.5;}"),collisionBox:ii("varying float v_placed;varying float v_notUsed;void main() {vec4 red =vec4(1.0,0.0,0.0,1.0);vec4 blue=vec4(0.0,0.0,1.0,0.5);gl_FragColor =mix(red,blue,step(0.5,v_placed))*0.5;gl_FragColor*=mix(1.0,0.1,step(0.5,v_notUsed));}","attribute vec3 a_pos;attribute vec2 a_anchor_pos;attribute vec2 a_extrude;attribute vec2 a_placed;attribute vec2 a_shift;attribute float a_size_scale;attribute vec2 a_padding;uniform mat4 u_matrix;uniform vec2 u_extrude_scale;uniform float u_camera_to_center_distance;varying float v_placed;varying float v_notUsed;void main() {vec4 projectedPoint=u_matrix*vec4(a_pos+elevationVector(a_anchor_pos)*elevation(a_anchor_pos),1);highp float camera_to_anchor_distance=projectedPoint.w;highp float collision_perspective_ratio=clamp(\n0.5+0.5*(u_camera_to_center_distance/camera_to_anchor_distance),0.0,1.5);gl_Position=projectedPoint;gl_Position.xy+=(a_extrude*a_size_scale+a_shift+a_padding)*u_extrude_scale*gl_Position.w*collision_perspective_ratio;v_placed=a_placed.x;v_notUsed=a_placed.y;}"),collisionCircle:ii("varying float v_radius;varying vec2 v_extrude;varying float v_perspective_ratio;varying float v_collision;void main() {float alpha=0.5*min(v_perspective_ratio,1.0);float stroke_radius=0.9*max(v_perspective_ratio,1.0);float distance_to_center=length(v_extrude);float distance_to_edge=abs(distance_to_center-v_radius);float opacity_t=smoothstep(-stroke_radius,0.0,-distance_to_edge);vec4 color=mix(vec4(0.0,0.0,1.0,0.5),vec4(1.0,0.0,0.0,1.0),v_collision);gl_FragColor=color*alpha*opacity_t;}","attribute vec2 a_pos_2f;attribute float a_radius;attribute vec2 a_flags;uniform mat4 u_matrix;uniform mat4 u_inv_matrix;uniform vec2 u_viewport_size;uniform float u_camera_to_center_distance;varying float v_radius;varying vec2 v_extrude;varying float v_perspective_ratio;varying float v_collision;vec3 toTilePosition(vec2 screenPos) {vec4 rayStart=u_inv_matrix*vec4(screenPos,-1.0,1.0);vec4 rayEnd =u_inv_matrix*vec4(screenPos, 1.0,1.0);rayStart.xyz/=rayStart.w;rayEnd.xyz /=rayEnd.w;highp float t=(0.0-rayStart.z)/(rayEnd.z-rayStart.z);return mix(rayStart.xyz,rayEnd.xyz,t);}void main() {vec2 quadCenterPos=a_pos_2f;float radius=a_radius;float collision=a_flags.x;float vertexIdx=a_flags.y;vec2 quadVertexOffset=vec2(\nmix(-1.0,1.0,float(vertexIdx >=2.0)),mix(-1.0,1.0,float(vertexIdx >=1.0 && vertexIdx <=2.0)));vec2 quadVertexExtent=quadVertexOffset*radius;vec3 tilePos=toTilePosition(quadCenterPos);vec4 clipPos=u_matrix*vec4(tilePos,1.0);highp float camera_to_anchor_distance=clipPos.w;highp float collision_perspective_ratio=clamp(\n0.5+0.5*(u_camera_to_center_distance/camera_to_anchor_distance),0.0,4.0);float padding_factor=1.2;v_radius=radius;v_extrude=quadVertexExtent*padding_factor;v_perspective_ratio=collision_perspective_ratio;v_collision=collision;gl_Position=vec4(clipPos.xyz/clipPos.w,1.0)+vec4(quadVertexExtent*padding_factor/u_viewport_size*2.0,0.0,0.0);}"),debug:ii("uniform highp vec4 u_color;uniform sampler2D u_overlay;varying vec2 v_uv;void main() {vec4 overlay_color=texture2D(u_overlay,v_uv);gl_FragColor=mix(u_color,overlay_color,overlay_color.a);}","attribute vec2 a_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;\n#endif\nvarying vec2 v_uv;uniform mat4 u_matrix;uniform float u_overlay_scale;void main() {float h=elevation(a_pos);v_uv=a_pos/8192.0;\n#ifdef PROJECTION_GLOBE_VIEW\ngl_Position=u_matrix*vec4(a_pos_3+elevationVector(a_pos)*h,1);\n#else\ngl_Position=u_matrix*vec4(a_pos*u_overlay_scale,h,1);\n#endif\n}"),fill:ii("#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float opacity\nvec4 out_color=color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float opacity\ngl_Position=u_matrix*vec4(a_pos,0,1);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillOutline:ii("varying vec2 v_pos;\n#pragma mapbox: define highp vec4 outline_color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 outline_color\n#pragma mapbox: initialize lowp float opacity\nfloat dist=length(v_pos-gl_FragCoord.xy);float alpha=1.0-smoothstep(0.0,1.0,dist);vec4 out_color=outline_color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;uniform vec2 u_world;varying vec2 v_pos;\n#pragma mapbox: define highp vec4 outline_color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 outline_color\n#pragma mapbox: initialize lowp float opacity\ngl_Position=u_matrix*vec4(a_pos,0,1);v_pos=(gl_Position.xy/gl_Position.w+1.0)/2.0*u_world;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillOutlinePattern:ii("uniform vec2 u_texsize;uniform sampler2D u_image;uniform float u_fade;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec2 v_pos;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);float dist=length(v_pos-gl_FragCoord.xy);float alpha=1.0-smoothstep(0.0,1.0,dist);vec4 out_color=mix(color1,color2,u_fade);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_world;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform vec3 u_scale;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec2 v_pos;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;gl_Position=u_matrix*vec4(a_pos,0,1);vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileRatio,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileRatio,a_pos);v_pos=(gl_Position.xy/gl_Position.w+1.0)/2.0*u_world;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillPattern:ii("uniform vec2 u_texsize;uniform float u_fade;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_fade);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform vec3 u_scale;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;gl_Position=u_matrix*vec4(a_pos,0,1);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileZoomRatio,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileZoomRatio,a_pos);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillExtrusion:ii("varying vec4 v_color;void main() {vec4 color=v_color;\n#ifdef FOG\ncolor=fog_dither(fog_apply_premultiplied(color,v_fog_pos));\n#endif\ngl_FragColor=color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec3 u_lightcolor;uniform lowp vec3 u_lightpos;uniform lowp float u_lightintensity;uniform float u_vertical_gradient;uniform lowp float u_opacity;attribute vec4 a_pos_normal_ed;attribute vec2 a_centroid_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;attribute vec3 a_pos_normal_3;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform vec3 u_up_dir;uniform float u_height_lift;\n#endif\nvarying vec4 v_color;\n#pragma mapbox: define highp float base\n#pragma mapbox: define highp float height\n#pragma mapbox: define highp vec4 color\nvoid main() {\n#pragma mapbox: initialize highp float base\n#pragma mapbox: initialize highp float height\n#pragma mapbox: initialize highp vec4 color\nvec3 pos_nx=floor(a_pos_normal_ed.xyz*0.5);mediump vec3 top_up_ny=a_pos_normal_ed.xyz-2.0*pos_nx;float x_normal=pos_nx.z/8192.0;vec3 normal=top_up_ny.y==1.0 ? vec3(0.0,0.0,1.0) : normalize(vec3(x_normal,(2.0*top_up_ny.z-1.0)*(1.0-abs(x_normal)),0.0));base=max(0.0,base);height=max(0.0,height);float t=top_up_ny.x;vec2 centroid_pos=vec2(0.0);\n#if defined(HAS_CENTROID) || defined(TERRAIN)\ncentroid_pos=a_centroid_pos;\n#endif\n#ifdef TERRAIN\nbool flat_roof=centroid_pos.x !=0.0 && t > 0.0;float ele=elevation(pos_nx.xy);float c_ele=flat_roof ? centroid_pos.y==0.0 ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos) : ele;float h=flat_roof ? max(c_ele+height,ele+base+2.0) : ele+(t > 0.0 ? height : base==0.0 ?-5.0 : base);vec3 pos=vec3(pos_nx.xy,h);\n#else\nvec3 pos=vec3(pos_nx.xy,t > 0.0 ? height : base);\n#endif\n#ifdef PROJECTION_GLOBE_VIEW\nfloat lift=float((t+base) > 0.0)*u_height_lift;vec3 globe_normal=normalize(mix(a_pos_normal_3/16384.0,u_up_dir,u_zoom_transition));vec3 globe_pos=a_pos_3+globe_normal*(u_tile_up_scale*(pos.z+lift));vec3 merc_pos=mercator_tile_position(u_inv_rot_matrix,pos.xy,u_tile_id,u_merc_center)+u_up_dir*u_tile_up_scale*pos.z;pos=mix_globe_mercator(globe_pos,merc_pos,u_zoom_transition);\n#endif\nfloat hidden=float(centroid_pos.x==0.0 && centroid_pos.y==1.0);gl_Position=mix(u_matrix*vec4(pos,1),AWAY,hidden);float colorvalue=color.r*0.2126+color.g*0.7152+color.b*0.0722;v_color=vec4(0.0,0.0,0.0,1.0);vec4 ambientlight=vec4(0.03,0.03,0.03,1.0);color+=ambientlight;float directional=clamp(dot(normal,u_lightpos),0.0,1.0);directional=mix((1.0-u_lightintensity),max((1.0-colorvalue+u_lightintensity),1.0),directional);if (normal.y !=0.0) {directional*=(\n(1.0-u_vertical_gradient)+(u_vertical_gradient*clamp((t+base)*pow(height/150.0,0.5),mix(0.7,0.98,1.0-u_lightintensity),1.0)));}v_color.rgb+=clamp(color.rgb*directional*u_lightcolor,mix(vec3(0.0),vec3(0.3),1.0-u_lightcolor),vec3(1.0));v_color*=u_opacity;\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),fillExtrusionPattern:ii("uniform vec2 u_texsize;uniform float u_fade;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec4 v_lighting;\n#pragma mapbox: define lowp float base\n#pragma mapbox: define lowp float height\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float base\n#pragma mapbox: initialize lowp float height\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_fade);out_color=out_color*v_lighting;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform float u_height_factor;uniform vec3 u_scale;uniform float u_vertical_gradient;uniform lowp float u_opacity;uniform vec3 u_lightcolor;uniform lowp vec3 u_lightpos;uniform lowp float u_lightintensity;attribute vec4 a_pos_normal_ed;attribute vec2 a_centroid_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;attribute vec3 a_pos_normal_3;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform vec3 u_up_dir;uniform float u_height_lift;\n#endif\nvarying vec2 v_pos_a;varying vec2 v_pos_b;varying vec4 v_lighting;\n#pragma mapbox: define lowp float base\n#pragma mapbox: define lowp float height\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float base\n#pragma mapbox: initialize lowp float height\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec3 pos_nx=floor(a_pos_normal_ed.xyz*0.5);mediump vec3 top_up_ny=a_pos_normal_ed.xyz-2.0*pos_nx;float x_normal=pos_nx.z/8192.0;vec3 normal=top_up_ny.y==1.0 ? vec3(0.0,0.0,1.0) : normalize(vec3(x_normal,(2.0*top_up_ny.z-1.0)*(1.0-abs(x_normal)),0.0));float edgedistance=a_pos_normal_ed.w;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;base=max(0.0,base);height=max(0.0,height);float t=top_up_ny.x;float z=t > 0.0 ? height : base;vec2 centroid_pos=vec2(0.0);\n#if defined(HAS_CENTROID) || defined(TERRAIN)\ncentroid_pos=a_centroid_pos;\n#endif\n#ifdef TERRAIN\nbool flat_roof=centroid_pos.x !=0.0 && t > 0.0;float ele=elevation(pos_nx.xy);float c_ele=flat_roof ? centroid_pos.y==0.0 ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos) : ele;float h=flat_roof ? max(c_ele+height,ele+base+2.0) : ele+(t > 0.0 ? height : base==0.0 ?-5.0 : base);vec3 p=vec3(pos_nx.xy,h);\n#else\nvec3 p=vec3(pos_nx.xy,z);\n#endif\n#ifdef PROJECTION_GLOBE_VIEW\nfloat lift=float((t+base) > 0.0)*u_height_lift;vec3 globe_normal=normalize(mix(a_pos_normal_3/16384.0,u_up_dir,u_zoom_transition));vec3 globe_pos=a_pos_3+globe_normal*(u_tile_up_scale*(p.z+lift));vec3 merc_pos=mercator_tile_position(u_inv_rot_matrix,p.xy,u_tile_id,u_merc_center)+u_up_dir*u_tile_up_scale*p.z;p=mix_globe_mercator(globe_pos,merc_pos,u_zoom_transition);\n#endif\nfloat hidden=float(centroid_pos.x==0.0 && centroid_pos.y==1.0);gl_Position=mix(u_matrix*vec4(p,1),AWAY,hidden);vec2 pos=normal.z==1.0\n? pos_nx.xy\n: vec2(edgedistance,z*u_height_factor);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileRatio,pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileRatio,pos);v_lighting=vec4(0.0,0.0,0.0,1.0);float directional=clamp(dot(normal,u_lightpos),0.0,1.0);directional=mix((1.0-u_lightintensity),max((0.5+u_lightintensity),1.0),directional);if (normal.y !=0.0) {directional*=(\n(1.0-u_vertical_gradient)+(u_vertical_gradient*clamp((t+base)*pow(height/150.0,0.5),mix(0.7,0.98,1.0-u_lightintensity),1.0)));}v_lighting.rgb+=clamp(directional*u_lightcolor,mix(vec3(0.0),vec3(0.3),1.0-u_lightcolor),vec3(1.0));v_lighting*=u_opacity;\n#ifdef FOG\nv_fog_pos=fog_position(p);\n#endif\n}"),hillshadePrepare:ii("#ifdef GL_ES\nprecision highp float;\n#endif\nuniform sampler2D u_image;varying vec2 v_pos;uniform vec2 u_dimension;uniform float u_zoom;uniform vec4 u_unpack;float getElevation(vec2 coord) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nreturn texture2D(u_image,coord).a/4.0;\n#else\nvec4 data=texture2D(u_image,coord)*255.0;data.a=-1.0;return dot(data,u_unpack)/4.0;\n#endif\n}void main() {vec2 epsilon=1.0/u_dimension;float a=getElevation(v_pos+vec2(-epsilon.x,-epsilon.y));float b=getElevation(v_pos+vec2(0,-epsilon.y));float c=getElevation(v_pos+vec2(epsilon.x,-epsilon.y));float d=getElevation(v_pos+vec2(-epsilon.x,0));float e=getElevation(v_pos);float f=getElevation(v_pos+vec2(epsilon.x,0));float g=getElevation(v_pos+vec2(-epsilon.x,epsilon.y));float h=getElevation(v_pos+vec2(0,epsilon.y));float i=getElevation(v_pos+vec2(epsilon.x,epsilon.y));float exaggerationFactor=u_zoom < 2.0 ? 0.4 : u_zoom < 4.5 ? 0.35 : 0.3;float exaggeration=u_zoom < 15.0 ? (u_zoom-15.0)*exaggerationFactor : 0.0;vec2 deriv=vec2(\n(c+f+f+i)-(a+d+d+g),(g+h+h+i)-(a+b+b+c)\n)/pow(2.0,exaggeration+(19.2562-u_zoom));gl_FragColor=clamp(vec4(\nderiv.x/2.0+0.5,deriv.y/2.0+0.5,1.0,1.0),0.0,1.0);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_dimension;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);highp vec2 epsilon=1.0/u_dimension;float scale=(u_dimension.x-2.0)/u_dimension.x;v_pos=(a_texture_pos/8192.0)*scale+epsilon;}"),hillshade:ii("uniform sampler2D u_image;varying vec2 v_pos;uniform vec2 u_latrange;uniform vec2 u_light;uniform vec4 u_shadow;uniform vec4 u_highlight;uniform vec4 u_accent;void main() {vec4 pixel=texture2D(u_image,v_pos);vec2 deriv=((pixel.rg*2.0)-1.0);float scaleFactor=cos(radians((u_latrange[0]-u_latrange[1])*(1.0-v_pos.y)+u_latrange[1]));float slope=atan(1.25*length(deriv)/scaleFactor);float aspect=deriv.x !=0.0 ? atan(deriv.y,-deriv.x) : PI/2.0*(deriv.y > 0.0 ? 1.0 :-1.0);float intensity=u_light.x;float azimuth=u_light.y+PI;float base=1.875-intensity*1.75;float maxValue=0.5*PI;float scaledSlope=intensity !=0.5 ? ((pow(base,slope)-1.0)/(pow(base,maxValue)-1.0))*maxValue : slope;float accent=cos(scaledSlope);vec4 accent_color=(1.0-accent)*u_accent*clamp(intensity*2.0,0.0,1.0);float shade=abs(mod((aspect+azimuth)/PI+0.5,2.0)-1.0);vec4 shade_color=mix(u_shadow,u_highlight,shade)*sin(scaledSlope)*clamp(intensity*2.0,0.0,1.0);gl_FragColor=accent_color*(1.0-shade_color.a)+shade_color;\n#ifdef FOG\ngl_FragColor=fog_dither(fog_apply_premultiplied(gl_FragColor,v_fog_pos));\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);v_pos=a_texture_pos/8192.0;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),line:ii("uniform lowp float u_device_pixel_ratio;uniform float u_alpha_discard_threshold;varying vec2 v_width2;varying vec2 v_normal;varying float v_gamma_scale;\n#ifdef RENDER_LINE_DASH\nuniform sampler2D u_dash_image;uniform float u_mix;uniform vec3 u_scale;varying vec2 v_tex_a;varying vec2 v_tex_b;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nuniform sampler2D u_gradient_image;varying highp vec2 v_uv;\n#endif\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 dash_from\n#pragma mapbox: define lowp vec4 dash_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize lowp vec4 dash_from\n#pragma mapbox: initialize lowp vec4 dash_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\nfloat dist=length(v_normal)*v_width2.s;float blur2=(blur+1.0/u_device_pixel_ratio)*v_gamma_scale;float alpha=clamp(min(dist-(v_width2.t-blur2),v_width2.s-dist)/blur2,0.0,1.0);\n#ifdef RENDER_LINE_DASH\nfloat sdfdist_a=texture2D(u_dash_image,v_tex_a).a;float sdfdist_b=texture2D(u_dash_image,v_tex_b).a;float sdfdist=mix(sdfdist_a,sdfdist_b,u_mix);float sdfwidth=min(dash_from.z*u_scale.y,dash_to.z*u_scale.z);float sdfgamma=1.0/(2.0*u_device_pixel_ratio)/sdfwidth;alpha*=smoothstep(0.5-sdfgamma/floorwidth,0.5+sdfgamma/floorwidth,sdfdist);\n#endif\n#ifdef RENDER_LINE_GRADIENT\nvec4 out_color=texture2D(u_gradient_image,v_uv);\n#else\nvec4 out_color=color;\n#endif\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\n#ifdef RENDER_LINE_ALPHA_DISCARD\nif (alpha < u_alpha_discard_threshold) {discard;}\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","\n#define EXTRUDE_SCALE 0.015873016\nattribute vec2 a_pos_normal;attribute vec4 a_data;\n#ifdef RENDER_LINE_GRADIENT\nattribute vec3 a_packed;\n#else\nattribute float a_linesofar;\n#endif\nuniform mat4 u_matrix;uniform mat2 u_pixels_to_tile_units;uniform vec2 u_units_to_pixels;uniform lowp float u_device_pixel_ratio;varying vec2 v_normal;varying vec2 v_width2;varying float v_gamma_scale;\n#ifdef RENDER_LINE_DASH\nuniform vec2 u_texsize;uniform mediump vec3 u_scale;varying vec2 v_tex_a;varying vec2 v_tex_b;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nuniform float u_image_height;varying highp vec2 v_uv;\n#endif\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 dash_from\n#pragma mapbox: define lowp vec4 dash_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define mediump float gapwidth\n#pragma mapbox: define lowp float offset\n#pragma mapbox: define mediump float width\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize lowp vec4 dash_from\n#pragma mapbox: initialize lowp vec4 dash_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump float gapwidth\n#pragma mapbox: initialize lowp float offset\n#pragma mapbox: initialize mediump float width\nfloat ANTIALIASING=1.0/u_device_pixel_ratio/2.0;vec2 a_extrude=a_data.xy-128.0;float a_direction=mod(a_data.z,4.0)-1.0;vec2 pos=floor(a_pos_normal*0.5);mediump vec2 normal=a_pos_normal-2.0*pos;normal.y=normal.y*2.0-1.0;v_normal=normal;gapwidth=gapwidth/2.0;float halfwidth=width/2.0;offset=-1.0*offset;float inset=gapwidth+(gapwidth > 0.0 ? ANTIALIASING : 0.0);float outset=gapwidth+halfwidth*(gapwidth > 0.0 ? 2.0 : 1.0)+(halfwidth==0.0 ? 0.0 : ANTIALIASING);mediump vec2 dist=outset*a_extrude*EXTRUDE_SCALE;mediump float u=0.5*a_direction;mediump float t=1.0-abs(u);mediump vec2 offset2=offset*a_extrude*EXTRUDE_SCALE*normal.y*mat2(t,-u,u,t);vec4 projected_extrude=u_matrix*vec4(dist*u_pixels_to_tile_units,0.0,0.0);gl_Position=u_matrix*vec4(pos+offset2*u_pixels_to_tile_units,0.0,1.0)+projected_extrude;\n#ifndef RENDER_TO_TEXTURE\nfloat extrude_length_without_perspective=length(dist);float extrude_length_with_perspective=length(projected_extrude.xy/gl_Position.w*u_units_to_pixels);v_gamma_scale=extrude_length_without_perspective/extrude_length_with_perspective;\n#else\nv_gamma_scale=1.0;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nfloat a_uv_x=a_packed[0];float a_split_index=a_packed[1];float a_linesofar=a_packed[2];highp float texel_height=1.0/u_image_height;highp float half_texel_height=0.5*texel_height;v_uv=vec2(a_uv_x,a_split_index*texel_height-half_texel_height);\n#endif\n#ifdef RENDER_LINE_DASH\nfloat tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;float scaleA=dash_from.z==0.0 ? 0.0 : tileZoomRatio/(dash_from.z*fromScale);float scaleB=dash_to.z==0.0 ? 0.0 : tileZoomRatio/(dash_to.z*toScale);float heightA=dash_from.y;float heightB=dash_to.y;v_tex_a=vec2(a_linesofar*scaleA/floorwidth,(-normal.y*heightA+dash_from.x+0.5)/u_texsize.y);v_tex_b=vec2(a_linesofar*scaleB/floorwidth,(-normal.y*heightB+dash_to.x+0.5)/u_texsize.y);\n#endif\nv_width2=vec2(outset,inset);\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),linePattern:ii("uniform lowp float u_device_pixel_ratio;uniform vec2 u_texsize;uniform float u_fade;uniform mediump vec3 u_scale;uniform sampler2D u_image;varying vec2 v_normal;varying vec2 v_width2;varying float v_linesofar;varying float v_gamma_scale;varying float v_width;\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;vec2 pattern_size_a=vec2(display_size_a.x*fromScale/tileZoomRatio,display_size_a.y);vec2 pattern_size_b=vec2(display_size_b.x*toScale/tileZoomRatio,display_size_b.y);float aspect_a=display_size_a.y/v_width;float aspect_b=display_size_b.y/v_width;float dist=length(v_normal)*v_width2.s;float blur2=(blur+1.0/u_device_pixel_ratio)*v_gamma_scale;float alpha=clamp(min(dist-(v_width2.t-blur2),v_width2.s-dist)/blur2,0.0,1.0);float x_a=mod(v_linesofar/pattern_size_a.x*aspect_a,1.0);float x_b=mod(v_linesofar/pattern_size_b.x*aspect_b,1.0);float y=0.5*v_normal.y+0.5;vec2 texel_size=1.0/u_texsize;vec2 pos_a=mix(pattern_tl_a*texel_size-texel_size,pattern_br_a*texel_size+texel_size,vec2(x_a,y));vec2 pos_b=mix(pattern_tl_b*texel_size-texel_size,pattern_br_b*texel_size+texel_size,vec2(x_b,y));vec4 color=mix(texture2D(u_image,pos_a),texture2D(u_image,pos_b),u_fade);\n#ifdef FOG\ncolor=fog_dither(fog_apply_premultiplied(color,v_fog_pos));\n#endif\ngl_FragColor=color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","\n#define scale 0.015873016\nattribute vec2 a_pos_normal;attribute vec4 a_data;attribute float a_linesofar;uniform mat4 u_matrix;uniform vec2 u_units_to_pixels;uniform mat2 u_pixels_to_tile_units;uniform lowp float u_device_pixel_ratio;varying vec2 v_normal;varying vec2 v_width2;varying float v_linesofar;varying float v_gamma_scale;varying float v_width;\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float offset\n#pragma mapbox: define mediump float gapwidth\n#pragma mapbox: define mediump float width\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float offset\n#pragma mapbox: initialize mediump float gapwidth\n#pragma mapbox: initialize mediump float width\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nfloat ANTIALIASING=1.0/u_device_pixel_ratio/2.0;vec2 a_extrude=a_data.xy-128.0;float a_direction=mod(a_data.z,4.0)-1.0;vec2 pos=floor(a_pos_normal*0.5);mediump vec2 normal=a_pos_normal-2.0*pos;normal.y=normal.y*2.0-1.0;v_normal=normal;gapwidth=gapwidth/2.0;float halfwidth=width/2.0;offset=-1.0*offset;float inset=gapwidth+(gapwidth > 0.0 ? ANTIALIASING : 0.0);float outset=gapwidth+halfwidth*(gapwidth > 0.0 ? 2.0 : 1.0)+(halfwidth==0.0 ? 0.0 : ANTIALIASING);mediump vec2 dist=outset*a_extrude*scale;mediump float u=0.5*a_direction;mediump float t=1.0-abs(u);mediump vec2 offset2=offset*a_extrude*scale*normal.y*mat2(t,-u,u,t);vec4 projected_extrude=u_matrix*vec4(dist*u_pixels_to_tile_units,0.0,0.0);gl_Position=u_matrix*vec4(pos+offset2*u_pixels_to_tile_units,0.0,1.0)+projected_extrude;\n#ifndef RENDER_TO_TEXTURE\nfloat extrude_length_without_perspective=length(dist);float extrude_length_with_perspective=length(projected_extrude.xy/gl_Position.w*u_units_to_pixels);v_gamma_scale=extrude_length_without_perspective/extrude_length_with_perspective;\n#else\nv_gamma_scale=1.0;\n#endif\nv_linesofar=a_linesofar;v_width2=vec2(outset,inset);v_width=floorwidth;\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),raster:ii("uniform float u_fade_t;uniform float u_opacity;uniform sampler2D u_image0;uniform sampler2D u_image1;varying vec2 v_pos0;varying vec2 v_pos1;uniform float u_brightness_low;uniform float u_brightness_high;uniform float u_saturation_factor;uniform float u_contrast_factor;uniform vec3 u_spin_weights;void main() {vec4 color0=texture2D(u_image0,v_pos0);vec4 color1=texture2D(u_image1,v_pos1);if (color0.a > 0.0) {color0.rgb=color0.rgb/color0.a;}if (color1.a > 0.0) {color1.rgb=color1.rgb/color1.a;}vec4 color=mix(color0,color1,u_fade_t);color.a*=u_opacity;vec3 rgb=color.rgb;rgb=vec3(\ndot(rgb,u_spin_weights.xyz),dot(rgb,u_spin_weights.zxy),dot(rgb,u_spin_weights.yzx));float average=(color.r+color.g+color.b)/3.0;rgb+=(average-rgb)*u_saturation_factor;rgb=(rgb-0.5)*u_contrast_factor+0.5;vec3 u_high_vec=vec3(u_brightness_low,u_brightness_low,u_brightness_low);vec3 u_low_vec=vec3(u_brightness_high,u_brightness_high,u_brightness_high);vec3 out_color=mix(u_high_vec,u_low_vec,rgb);\n#ifdef FOG\nout_color=fog_dither(fog_apply(out_color,v_fog_pos));\n#endif\ngl_FragColor=vec4(out_color*color.a,color.a);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_tl_parent;uniform float u_scale_parent;uniform vec2 u_perspective_transform;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos0;varying vec2 v_pos1;void main() {float w=1.0+dot(a_texture_pos,u_perspective_transform);gl_Position=u_matrix*vec4(a_pos*w,0,w);v_pos0=a_texture_pos/8192.0;v_pos1=(v_pos0*u_scale_parent)+u_tl_parent;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),symbolIcon:ii("uniform sampler2D u_texture;varying vec2 v_tex;varying float v_fade_opacity;\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\nlowp float alpha=opacity*v_fade_opacity;gl_FragColor=texture2D(u_texture,v_tex)*alpha;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_pixeloffset;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform highp float u_camera_to_center_distance;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform float u_fade_change;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform vec2 u_texsize;\n#ifdef PROJECTION_GLOBE_VIEW\nuniform vec3 u_tile_id;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_camera_forward;uniform float u_zoom_transition;uniform vec3 u_ecef_origin;uniform mat4 u_tile_matrix;\n#endif\nvarying vec2 v_tex;varying float v_fade_opacity;\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);vec2 a_pxoffset=a_pixeloffset.xy;vec2 a_min_font_scale=a_pixeloffset.zw/256.0;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchor_z=a_z_tile_anchor.x;vec2 tile_anchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tile_anchor)*elevation(tile_anchor);\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tile_anchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchor_z)+h,mercator_pos,u_zoom_transition);vec4 ecef_point=u_tile_matrix*vec4(world_pos,1.0);vec3 origin_to_point=ecef_point.xyz-u_ecef_origin;float globe_occlusion_fade=dot(origin_to_point,u_camera_forward) >=0.0 ? 0.0 : 1.0;\n#else\nvec3 world_pos=vec3(a_pos,anchor_z)+h;float globe_occlusion_fade=1.0;\n#endif\nvec4 projected_point=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projected_point.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float font_scale=u_is_text ? size/24.0 : size;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offsetProjected_point=u_matrix*vec4(a_pos+vec2(1,0),anchor_z,1);vec2 a=projected_point.xy/projected_point.w;vec2 b=offsetProjected_point.xy/offsetProjected_point.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchor_z),mercator_pos,u_zoom_transition);\n#else\nvec3 proj_pos=vec3(a_projected_pos.xy,anchor_z);\n#endif\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*max(a_min_font_scale,font_scale)+a_pxoffset/16.0);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projected_point)*globe_occlusion_fade;gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projected_point.w <=0.0 || occlusion_fade==0.0));float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nv_tex=a_tex/u_texsize;vec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;v_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change))*projection_transition_fade;}"),symbolSDF:ii("#define SDF_PX 8.0\nuniform bool u_is_halo;uniform sampler2D u_texture;uniform highp float u_gamma_scale;uniform lowp float u_device_pixel_ratio;uniform bool u_is_text;varying vec2 v_data0;varying vec3 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nfloat EDGE_GAMMA=0.105/u_device_pixel_ratio;vec2 tex=v_data0.xy;float gamma_scale=v_data1.x;float size=v_data1.y;float fade_opacity=v_data1[2];float fontScale=u_is_text ? size/24.0 : size;lowp vec4 color=fill_color;highp float gamma=EDGE_GAMMA/(fontScale*u_gamma_scale);lowp float buff=(256.0-64.0)/256.0;if (u_is_halo) {color=halo_color;gamma=(halo_blur*1.19/SDF_PX+EDGE_GAMMA)/(fontScale*u_gamma_scale);buff=(6.0-halo_width/fontScale)/SDF_PX;}lowp float dist=texture2D(u_texture,tex).a;highp float gamma_scaled=gamma*gamma_scale;highp float alpha=smoothstep(buff-gamma_scaled,buff+gamma_scaled,dist);gl_FragColor=color*(alpha*opacity*fade_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_pixeloffset;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform highp float u_camera_to_center_distance;uniform float u_fade_change;uniform vec2 u_texsize;\n#ifdef PROJECTION_GLOBE_VIEW\nuniform vec3 u_tile_id;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_camera_forward;uniform float u_zoom_transition;uniform vec3 u_ecef_origin;uniform mat4 u_tile_matrix;\n#endif\nvarying vec2 v_data0;varying vec3 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);vec2 a_pxoffset=a_pixeloffset.xy;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchor_z=a_z_tile_anchor.x;vec2 tile_anchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tile_anchor)*elevation(tile_anchor);\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tile_anchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchor_z)+h,mercator_pos,u_zoom_transition);vec4 ecef_point=u_tile_matrix*vec4(world_pos,1.0);vec3 origin_to_point=ecef_point.xyz-u_ecef_origin;float globe_occlusion_fade=dot(origin_to_point,u_camera_forward) >=0.0 ? 0.0 : 1.0;\n#else\nvec3 world_pos=vec3(a_pos,anchor_z)+h;float globe_occlusion_fade=1.0;\n#endif\nvec4 projected_point=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projected_point.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float fontScale=u_is_text ? size/24.0 : size;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offsetprojected_point=u_matrix*vec4(a_pos+vec2(1,0),anchor_z,1);vec2 a=projected_point.xy/projected_point.w;vec2 b=offsetprojected_point.xy/offsetprojected_point.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchor_z),mercator_pos,u_zoom_transition);\n#else\nvec3 proj_pos=vec3(a_projected_pos.xy,anchor_z);\n#endif\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*fontScale+a_pxoffset);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projected_point)*globe_occlusion_fade;gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projected_point.w <=0.0 || occlusion_fade==0.0));float gamma_scale=gl_Position.w;float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nvec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;float interpolated_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change));v_data0=a_tex/u_texsize;v_data1=vec3(gamma_scale,size,interpolated_fade_opacity*projection_transition_fade);}"),symbolTextAndIcon:ii("#define SDF_PX 8.0\n#define SDF 1.0\n#define ICON 0.0\nuniform bool u_is_halo;uniform sampler2D u_texture;uniform sampler2D u_texture_icon;uniform highp float u_gamma_scale;uniform lowp float u_device_pixel_ratio;varying vec4 v_data0;varying vec4 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nfloat fade_opacity=v_data1[2];if (v_data1.w==ICON) {vec2 tex_icon=v_data0.zw;lowp float alpha=opacity*fade_opacity;gl_FragColor=texture2D(u_texture_icon,tex_icon)*alpha;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\nreturn;}vec2 tex=v_data0.xy;float EDGE_GAMMA=0.105/u_device_pixel_ratio;float gamma_scale=v_data1.x;float size=v_data1.y;float fontScale=size/24.0;lowp vec4 color=fill_color;highp float gamma=EDGE_GAMMA/(fontScale*u_gamma_scale);lowp float buff=(256.0-64.0)/256.0;if (u_is_halo) {color=halo_color;gamma=(halo_blur*1.19/SDF_PX+EDGE_GAMMA)/(fontScale*u_gamma_scale);buff=(6.0-halo_width/fontScale)/SDF_PX;}lowp float dist=texture2D(u_texture,tex).a;highp float gamma_scaled=gamma*gamma_scale;highp float alpha=smoothstep(buff-gamma_scaled,buff+gamma_scaled,dist);gl_FragColor=color*(alpha*opacity*fade_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform highp float u_camera_to_center_distance;uniform float u_fade_change;uniform vec2 u_texsize;uniform vec2 u_texsize_icon;\n#ifdef PROJECTION_GLOBE_VIEW\nuniform vec3 u_tile_id;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_camera_forward;uniform float u_zoom_transition;uniform vec3 u_ecef_origin;uniform mat4 u_tile_matrix;\n#endif\nvarying vec4 v_data0;varying vec4 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);float is_sdf=a_size[0]-2.0*a_size_min;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchor_z=a_z_tile_anchor.x;vec2 tile_anchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tile_anchor)*elevation(tile_anchor);\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tile_anchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchor_z)+h,mercator_pos,u_zoom_transition);vec4 ecef_point=u_tile_matrix*vec4(world_pos,1.0);vec3 origin_to_point=ecef_point.xyz-u_ecef_origin;float globe_occlusion_fade=dot(origin_to_point,u_camera_forward) >=0.0 ? 0.0 : 1.0;\n#else\nvec3 world_pos=vec3(a_pos,anchor_z)+h;float globe_occlusion_fade=1.0;\n#endif\nvec4 projected_point=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projected_point.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float font_scale=size/24.0;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offset_projected_point=u_matrix*vec4(a_pos+vec2(1,0),anchor_z,1);vec2 a=projected_point.xy/projected_point.w;vec2 b=offset_projected_point.xy/offset_projected_point.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}\n#ifdef PROJECTION_GLOBE_VIEW\nvec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchor_z),mercator_pos,u_zoom_transition);\n#else\nvec3 proj_pos=vec3(a_projected_pos.xy,anchor_z);\n#endif\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*font_scale);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projected_point)*globe_occlusion_fade;gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projected_point.w <=0.0 || occlusion_fade==0.0));float gamma_scale=gl_Position.w;vec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;float interpolated_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change));float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nv_data0.xy=a_tex/u_texsize;v_data0.zw=a_tex/u_texsize_icon;v_data1=vec4(gamma_scale,size,interpolated_fade_opacity*projection_transition_fade,is_sdf);}"),terrainRaster:ii("uniform sampler2D u_image0;varying vec2 v_pos0;\n#ifdef FOG\nvarying float v_fog_opacity;\n#endif\nvoid main() {vec4 color=texture2D(u_image0,v_pos0);\n#ifdef FOG\ncolor=fog_dither(fog_apply_from_vert(color,v_fog_opacity));\n#endif\ngl_FragColor=color;\n#ifdef TERRAIN_WIREFRAME\ngl_FragColor=vec4(1.0,0.0,0.0,0.8);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform float u_skirt_height;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos0;\n#ifdef FOG\nvarying float v_fog_opacity;\n#endif\nconst float skirtOffset=24575.0;const float wireframeOffset=0.00015;void main() {v_pos0=a_texture_pos/8192.0;float skirt=float(a_pos.x >=skirtOffset);float elevation=elevation(a_texture_pos)-skirt*u_skirt_height;\n#ifdef TERRAIN_WIREFRAME\nelevation+=u_skirt_height*u_skirt_height*wireframeOffset;\n#endif\nvec2 decodedPos=a_pos-vec2(skirt*skirtOffset,0.0);gl_Position=u_matrix*vec4(decodedPos,elevation,1.0);\n#ifdef FOG\nv_fog_opacity=fog(fog_position(vec3(decodedPos,elevation)));\n#endif\n}"),terrainDepth:ii("#ifdef GL_ES\nprecision highp float;\n#endif\nvarying float v_depth;void main() {gl_FragColor=pack_depth(v_depth);}","uniform mat4 u_matrix;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying float v_depth;void main() {float elevation=elevation(a_texture_pos);gl_Position=u_matrix*vec4(a_pos,elevation,1.0);v_depth=gl_Position.z/gl_Position.w;}"),skybox:ii("\nvarying lowp vec3 v_uv;uniform lowp samplerCube u_cubemap;uniform lowp float u_opacity;uniform highp float u_temporal_offset;uniform highp vec3 u_sun_direction;float sun_disk(highp vec3 ray_direction,highp vec3 sun_direction) {highp float cos_angle=dot(normalize(ray_direction),sun_direction);const highp float cos_sun_angular_diameter=0.99996192306;const highp float smoothstep_delta=1e-5;return smoothstep(\ncos_sun_angular_diameter-smoothstep_delta,cos_sun_angular_diameter+smoothstep_delta,cos_angle);}float map(float value,float start,float end,float new_start,float new_end) {return ((value-start)*(new_end-new_start))/(end-start)+new_start;}void main() {vec3 uv=v_uv;const float y_bias=0.015;uv.y+=y_bias;uv.y=pow(abs(uv.y),1.0/5.0);uv.y=map(uv.y,0.0,1.0,-1.0,1.0);vec3 sky_color=textureCube(u_cubemap,uv).rgb;\n#ifdef FOG\nsky_color=fog_apply_sky_gradient(v_uv.xzy,sky_color);\n#endif\nsky_color.rgb=dither(sky_color.rgb,gl_FragCoord.xy+u_temporal_offset);sky_color+=0.1*sun_disk(v_uv,u_sun_direction);gl_FragColor=vec4(sky_color*u_opacity,u_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}",Yt),skyboxGradient:ii("varying highp vec3 v_uv;uniform lowp sampler2D u_color_ramp;uniform highp vec3 u_center_direction;uniform lowp float u_radius;uniform lowp float u_opacity;uniform highp float u_temporal_offset;void main() {float progress=acos(dot(normalize(v_uv),u_center_direction))/u_radius;vec4 color=texture2D(u_color_ramp,vec2(progress,0.5));\n#ifdef FOG\ncolor.rgb=fog_apply_sky_gradient(v_uv.xzy,color.rgb/color.a)*color.a;\n#endif\ncolor*=u_opacity;color.rgb=dither(color.rgb,gl_FragCoord.xy+u_temporal_offset);gl_FragColor=color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}",Yt),skyboxCapture:ii("\nvarying highp vec3 v_position;uniform highp float u_sun_intensity;uniform highp float u_luminance;uniform lowp vec3 u_sun_direction;uniform highp vec4 u_color_tint_r;uniform highp vec4 u_color_tint_m;\n#ifdef GL_ES\nprecision highp float;\n#endif\n#define BETA_R vec3(5.5e-6,13.0e-6,22.4e-6)\n#define BETA_M vec3(21e-6,21e-6,21e-6)\n#define MIE_G 0.76\n#define DENSITY_HEIGHT_SCALE_R 8000.0\n#define DENSITY_HEIGHT_SCALE_M 1200.0\n#define PLANET_RADIUS 6360e3\n#define ATMOSPHERE_RADIUS 6420e3\n#define SAMPLE_STEPS 10\n#define DENSITY_STEPS 4\nfloat ray_sphere_exit(vec3 orig,vec3 dir,float radius) {float a=dot(dir,dir);float b=2.0*dot(dir,orig);float c=dot(orig,orig)-radius*radius;float d=sqrt(b*b-4.0*a*c);return (-b+d)/(2.0*a);}vec3 extinction(vec2 density) {return exp(-vec3(BETA_R*u_color_tint_r.a*density.x+BETA_M*u_color_tint_m.a*density.y));}vec2 local_density(vec3 point) {float height=max(length(point)-PLANET_RADIUS,0.0);float exp_r=exp(-height/DENSITY_HEIGHT_SCALE_R);float exp_m=exp(-height/DENSITY_HEIGHT_SCALE_M);return vec2(exp_r,exp_m);}float phase_ray(float cos_angle) {return (3.0/(16.0*PI))*(1.0+cos_angle*cos_angle);}float phase_mie(float cos_angle) {return (3.0/(8.0*PI))*((1.0-MIE_G*MIE_G)*(1.0+cos_angle*cos_angle))/((2.0+MIE_G*MIE_G)*pow(1.0+MIE_G*MIE_G-2.0*MIE_G*cos_angle,1.5));}vec2 density_to_atmosphere(vec3 point,vec3 light_dir) {float ray_len=ray_sphere_exit(point,light_dir,ATMOSPHERE_RADIUS);float step_len=ray_len/float(DENSITY_STEPS);vec2 density_point_to_atmosphere=vec2(0.0);for (int i=0; i < DENSITY_STEPS;++i) {vec3 point_on_ray=point+light_dir*((float(i)+0.5)*step_len);density_point_to_atmosphere+=local_density(point_on_ray)*step_len;;}return density_point_to_atmosphere;}vec3 atmosphere(vec3 ray_dir,vec3 sun_direction,float sun_intensity) {vec2 density_orig_to_point=vec2(0.0);vec3 scatter_r=vec3(0.0);vec3 scatter_m=vec3(0.0);vec3 origin=vec3(0.0,PLANET_RADIUS,0.0);float ray_len=ray_sphere_exit(origin,ray_dir,ATMOSPHERE_RADIUS);float step_len=ray_len/float(SAMPLE_STEPS);for (int i=0; i < SAMPLE_STEPS;++i) {vec3 point_on_ray=origin+ray_dir*((float(i)+0.5)*step_len);vec2 density=local_density(point_on_ray)*step_len;density_orig_to_point+=density;vec2 density_point_to_atmosphere=density_to_atmosphere(point_on_ray,sun_direction);vec2 density_orig_to_atmosphere=density_orig_to_point+density_point_to_atmosphere;vec3 extinction=extinction(density_orig_to_atmosphere);scatter_r+=density.x*extinction;scatter_m+=density.y*extinction;}float cos_angle=dot(ray_dir,sun_direction);float phase_r=phase_ray(cos_angle);float phase_m=phase_mie(cos_angle);vec3 beta_r=BETA_R*u_color_tint_r.rgb*u_color_tint_r.a;vec3 beta_m=BETA_M*u_color_tint_m.rgb*u_color_tint_m.a;return (scatter_r*phase_r*beta_r+scatter_m*phase_m*beta_m)*sun_intensity;}const float A=0.15;const float B=0.50;const float C=0.10;const float D=0.20;const float E=0.02;const float F=0.30;vec3 uncharted2_tonemap(vec3 x) {return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;}void main() {vec3 ray_direction=v_position;ray_direction.y=pow(ray_direction.y,5.0);const float y_bias=0.015;ray_direction.y+=y_bias;vec3 color=atmosphere(normalize(ray_direction),u_sun_direction,u_sun_intensity);float white_scale=1.0748724675633854;color=uncharted2_tonemap((log2(2.0/pow(u_luminance,4.0)))*color)*white_scale;gl_FragColor=vec4(color,1.0);}","attribute highp vec3 a_pos_3f;uniform mat3 u_matrix_3f;varying highp vec3 v_position;float map(float value,float start,float end,float new_start,float new_end) {return ((value-start)*(new_end-new_start))/(end-start)+new_start;}void main() {vec4 pos=vec4(u_matrix_3f*a_pos_3f,1.0);v_position=pos.xyz;v_position.y*=-1.0;v_position.y=map(v_position.y,-1.0,1.0,0.0,1.0);gl_Position=vec4(a_pos_3f.xy,0.0,1.0);}"),globeRaster:ii("uniform sampler2D u_image0;varying vec2 v_pos0;void main() {gl_FragColor=texture2D(u_image0,v_pos0);\n#ifdef TERRAIN_WIREFRAME\ngl_FragColor=vec4(1.0,0.0,0.0,0.8);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_proj_matrix;uniform mat4 u_globe_matrix;uniform mat4 u_merc_matrix;uniform float u_zoom_transition;uniform vec2 u_merc_center;uniform mat3 u_grid_matrix;\n#ifdef GLOBE_POLES\nattribute vec3 a_globe_pos;attribute vec2 a_merc_pos;attribute vec2 a_uv;\n#else\nattribute vec2 a_pos;\n#endif\nvarying vec2 v_pos0;const float wireframeOffset=1e3;float mercatorXfromLng(float lng) {return (180.0+lng)/360.0;}float mercatorYfromLat(float lat) {return (180.0-(RAD_TO_DEG*log(tan(QUARTER_PI+lat/2.0*DEG_TO_RAD))))/360.0;}vec3 latLngToECEF(vec2 latLng) {latLng=DEG_TO_RAD*latLng;float cosLat=cos(latLng[0]);float sinLat=sin(latLng[0]);float cosLng=cos(latLng[1]);float sinLng=sin(latLng[1]);float sx=cosLat*sinLng*GLOBE_RADIUS;float sy=-sinLat*GLOBE_RADIUS;float sz=cosLat*cosLng*GLOBE_RADIUS;return vec3(sx,sy,sz);}void main() {\n#ifdef GLOBE_POLES\nvec3 globe_pos=a_globe_pos;vec2 merc_pos=a_merc_pos;vec2 uv=a_uv;\n#else\nfloat tiles=u_grid_matrix[0][2];float idy=u_grid_matrix[1][2];float S=u_grid_matrix[2][2];vec3 latLng=u_grid_matrix*vec3(a_pos,1.0);float mercatorY=mercatorYfromLat(latLng[0]);float uvY=mercatorY*tiles-idy;float mercatorX=mercatorXfromLng(latLng[1]);float uvX=a_pos[0]*S;vec3 globe_pos=latLngToECEF(latLng.xy);vec2 merc_pos=vec2(mercatorX,mercatorY);vec2 uv=vec2(uvX,uvY);\n#endif\nv_pos0=uv;uv=uv*EXTENT;vec4 up_vector=vec4(elevationVector(uv),1.0);float height=elevation(uv);\n#ifdef TERRAIN_WIREFRAME\nheight+=wireframeOffset;\n#endif\nvec4 globe=u_globe_matrix*vec4(globe_pos+up_vector.xyz*height,1.0);vec4 mercator=vec4(0.0);if (u_zoom_transition > 0.0) {mercator=vec4(merc_pos,height,1.0);mercator.xy-=u_merc_center;mercator.x=wrap(mercator.x,-0.5,0.5);mercator=u_merc_matrix*mercator;}vec3 position=mix(globe.xyz,mercator.xyz,u_zoom_transition);gl_Position=u_proj_matrix*vec4(position,1.0);}"),globeAtmosphere:ii("uniform float u_opacity;uniform highp float u_fadeout_range;uniform vec3 u_start_color;uniform vec3 u_end_color;uniform highp vec3 u_globe_pos;uniform highp float u_globe_radius;varying highp vec3 v_ray_dir;void main() {highp vec3 dir=normalize(v_ray_dir);highp vec3 closest_point=abs(dot(u_globe_pos,dir))*dir;float norm_dist_from_center=length(closest_point-u_globe_pos)/u_globe_radius;if (norm_dist_from_center < 1.0)\ndiscard;float t=clamp(1.0-sqrt(norm_dist_from_center-1.0)/u_fadeout_range,0.0,1.0);vec3 color=mix(u_start_color,u_end_color,1.0-t);gl_FragColor=vec4(color*t*u_opacity,u_opacity);}","attribute vec3 a_pos;attribute vec2 a_uv;uniform vec3 u_frustum_tl;uniform vec3 u_frustum_tr;uniform vec3 u_frustum_br;uniform vec3 u_frustum_bl;varying highp vec3 v_ray_dir;void main() {v_ray_dir=mix(mix(u_frustum_tl,u_frustum_tr,a_uv.x),mix(u_frustum_bl,u_frustum_br,a_uv.x),a_uv.y);gl_Position=vec4(a_pos,1.0);}")};function ii(e,t,i){const r=/#pragma mapbox: ([\w]+) ([\w]+) ([\w]+) ([\w]+)/g,n=/uniform (highp |mediump |lowp )?([\w]+) ([\w]+)([\s]*)([\w]*)/g,o=t.match(/attribute (highp |mediump |lowp )?([\w]+) ([\w]+)/g),s=e.match(n),a=t.match(n),l=Ht.match(n);let c=a?a.concat(s):s;i||(Kt.staticUniforms&&(c=Kt.staticUniforms.concat(c)),Jt.staticUniforms&&(c=Jt.staticUniforms.concat(c))),c&&(c=c.concat(l));const h={};return{fragmentSource:e=e.replace(r,(e,t,i,r,n)=>(h[n]=!0,"define"===t?`\n#ifndef HAS_UNIFORM_u_${n}\nvarying ${i} ${r} ${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:`\n#ifdef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = u_${n};\n#endif\n`)),vertexSource:t=t.replace(r,(e,t,i,r,n)=>{const o="float"===r?"vec2":"vec4",s=n.match(/color/)?"color":o;return h[n]?"define"===t?`\n#ifndef HAS_UNIFORM_u_${n}\nuniform lowp float u_${n}_t;\nattribute ${i} ${o} a_${n};\nvarying ${i} ${r} ${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:"vec4"===s?`\n#ifndef HAS_UNIFORM_u_${n}\n ${n} = a_${n};\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:`\n#ifndef HAS_UNIFORM_u_${n}\n ${n} = unpack_mix_${s}(a_${n}, u_${n}_t);\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:"define"===t?`\n#ifndef HAS_UNIFORM_u_${n}\nuniform lowp float u_${n}_t;\nattribute ${i} ${o} a_${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:"vec4"===s?`\n#ifndef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = a_${n};\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:`\n#ifndef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = unpack_mix_${s}(a_${n}, u_${n}_t);\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`}),staticAttributes:o,staticUniforms:c}}class ri{constructor(){this.boundProgram=null,this.boundLayoutVertexBuffer=null,this.boundPaintVertexBuffers=[],this.boundIndexBuffer=null,this.boundVertexOffset=null,this.boundDynamicVertexBuffer=null,this.vao=null}bind(e,t,i,r,n,o,s,a){this.context=e;let l=this.boundPaintVertexBuffers.length!==r.length;for(let c=0;!l&&c{const n=i.paint.get("hillshade-shadow-color"),o=i.paint.get("hillshade-highlight-color"),s=i.paint.get("hillshade-accent-color");let a=i.paint.get("hillshade-illumination-direction")*(Math.PI/180);"viewport"===i.paint.get("hillshade-illumination-anchor")&&(a-=e.transform.angle);const l=!e.options.moving;return{u_matrix:r||e.transform.calculateProjMatrix(t.tileID.toUnwrapped(),l),u_image:0,u_latrange:ni(0,t.tileID),u_light:[i.paint.get("hillshade-exaggeration"),a],u_shadow:n,u_highlight:o,u_accent:s}})(t,r,n,t.terrain?i.projMatrix:null);t.prepareDrawProgram(l,u,i.toUnwrapped());const{tileBoundsBuffer:d,tileBoundsIndexBuffer:f,tileBoundsSegments:m}=t.getTileBoundsBuffers(r);u.draw(l,c.TRIANGLES,o,s,a,e.CullFaceMode.disabled,p,n.id,d,f,m)}function si(t,i,r){if(!i.needsDEMTextureUpload)return;const n=t.context,o=n.gl;n.pixelStoreUnpackPremultiplyAlpha.set(!1),i.demTexture=i.demTexture||t.getTileTexture(r.stride);const s=r.getPixels();i.demTexture?i.demTexture.update(s,{premultiply:!1}):i.demTexture=new e.Texture(n,s,o.RGBA,{premultiply:!1}),i.needsDEMTextureUpload=!1}function ai(t,i,r,n,o,s){const a=t.context,l=a.gl;if(!i.dem)return;const c=i.dem;if(a.activeTexture.set(l.TEXTURE1),si(t,i,c),!i.demTexture)return;i.demTexture.bind(l.NEAREST,l.CLAMP_TO_EDGE);const h=c.dim;a.activeTexture.set(l.TEXTURE0);let u=i.fbo;if(!u){const t=new e.Texture(a,{width:h,height:h,data:null},l.RGBA);t.bind(l.LINEAR,l.CLAMP_TO_EDGE),u=i.fbo=a.createFramebuffer(h,h,!0),u.colorAttachment.set(t.texture)}a.bindFramebuffer.set(u.framebuffer),a.viewport.set([0,0,h,h]);const{tileBoundsBuffer:p,tileBoundsIndexBuffer:d,tileBoundsSegments:f}=t.getMercatorTileBoundsBuffers();t.useProgram("hillshadePrepare").draw(a,l.TRIANGLES,n,o,s,e.CullFaceMode.disabled,((t,i)=>{const r=i.stride,n=e.create();return e.ortho(n,0,e.EXTENT,-e.EXTENT,0,0,1),e.translate(n,n,[0,-e.EXTENT,0]),{u_matrix:n,u_image:1,u_dimension:[r,r],u_zoom:t.overscaledZ,u_unpack:i.unpackVector}})(i.tileID,c),r.id,p,d,f),i.needsHillshadePrepare=!1}const li=(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_image0:new e.Uniform1i(t,i.u_image0),u_skirt_height:new e.Uniform1f(t,i.u_skirt_height)}),ci=(e,t)=>({u_matrix:e,u_image0:0,u_skirt_height:t}),hi=(e,t,i,r,n,o)=>({u_proj_matrix:Float32Array.from(e),u_globe_matrix:t,u_merc_matrix:i,u_zoom_transition:r,u_merc_center:n,u_image0:0,u_grid_matrix:o?Float32Array.from(o):new Float32Array(9)});function ui(e,t){return null!=e&&null!=t&&!(!e.hasData()||!t.hasData())&&null!=e.demTexture&&null!=t.demTexture&&e.tileID.key!==t.tileID.key}const pi=new class{constructor(){this.operations={}}newMorphing(e,t,i,r,n){if(e in this.operations){const t=this.operations[e];t.to.tileID.key!==i.tileID.key&&(t.queued=i)}else this.operations[e]={startTime:r,phase:0,duration:n,from:t,to:i,queued:null}}getMorphValuesForProxy(e){if(!(e in this.operations))return null;const t=this.operations[e];return{from:t.from,to:t.to,phase:t.phase}}update(e){for(const t in this.operations){const i=this.operations[t];for(i.phase=(e-i.startTime)/i.duration;i.phase>=1||!this._validOp(i);)if(!this._nextOp(i,e)){delete this.operations[t];break}}}_nextOp(e,t){return!!e.queued&&(e.from=e.to,e.to=e.queued,e.queued=null,e.phase=0,e.startTime=t,!0)}_validOp(e){return e.from.hasData()&&e.to.hasData()}},di={0:null,1:"TERRAIN_VERTEX_MORPHING",2:"TERRAIN_WIREFRAME"};function fi(e,t){const i=1<({u_matrix:e});function _i(t,i,r,n,o){if(o>0){const s=e.exported.now(),a=(s-t.timeAdded)/o,l=i?(s-i.timeAdded)/o:-1,c=r.getSource(),h=n.coveringZoomLevel({tileSize:c.tileSize,roundZoom:c.roundZoom}),u=!i||Math.abs(i.tileID.overscaledZ-h)>Math.abs(t.tileID.overscaledZ-h),p=u&&t.refreshedUponExpiration?1:e.clamp(u?a:1-l,0,1);return t.refreshedUponExpiration&&a>=1&&(t.refreshedUponExpiration=!1),i?{opacity:1,mix:1-p}:{opacity:p,mix:0}}return{opacity:1,mix:0}}const gi=2*e.mercatorZfromAltitude(1,0)*e.GLOBE_RADIUS*Math.PI;class yi extends e.SourceCache{constructor(e){const t={type:"raster-dem",maxzoom:e.transform.maxZoom},i=new D(Ue(),null),r=Ce("mock-dem",t,i,e.style);super("mock-dem",r,!1),r.setEventedParent(this),this._sourceLoaded=!0}_loadTile(e,t){e.state="loaded",t(null)}}class xi extends e.SourceCache{constructor(e){const t=Ce("proxy",{type:"geojson",maxzoom:e.transform.maxZoom},new D(Ue(),null),e.style);super("proxy",t,!1),t.setEventedParent(this),this.map=this.getSource().map=e,this.used=this._sourceLoaded=!0,this.renderCache=[],this.renderCachePool=[],this.proxyCachedFBO={}}update(t,i,r){if(t.freezeTileCoverage)return;this.transform=t;const n=t.coveringTiles({tileSize:this._source.tileSize,minzoom:this._source.minzoom,maxzoom:this._source.maxzoom,roundZoom:this._source.roundZoom,reparseOverscaled:this._source.reparseOverscaled}).reduce((i,r)=>{if(i[r.key]="",!this._tiles[r.key]){const i=new e.Tile(r,this._source.tileSize*r.overscaleFactor(),t.tileZoom);i.state="loaded",this._tiles[r.key]=i}return i},{});for(const e in this._tiles)e in n||(this.freeFBO(e),this._tiles[e].unloadVectorData(),delete this._tiles[e])}freeFBO(e){const t=this.proxyCachedFBO[e];if(void 0!==t){const i=Object.values(t);this.renderCachePool.push(...i),delete this.proxyCachedFBO[e]}}deallocRenderCache(){this.renderCache.forEach(e=>e.fb.destroy()),this.renderCache=[],this.renderCachePool=[],this.proxyCachedFBO={}}}class vi extends e.OverscaledTileID{constructor(e,t,i){super(e.overscaledZ,e.wrap,e.canonical.z,e.canonical.x,e.canonical.y),this.proxyTileKey=t,this.projMatrix=i}}class bi extends e.Elevation{constructor(t,i){super(),this.painter=t,this.terrainTileForTile={},this.prevTerrainTileForTile={};const[r,n,o]=function(t){const i=new e.StructArrayLayout4i8,r=new e.StructArrayLayout3ui6,n=131;i.reserve(17161),r.reserve(33800);const o=e.EXTENT/128,s=e.EXTENT+o/2,a=s+o;for(let c=-o;cs||c<0||c>s?24575:0,n=e.clamp(Math.round(t),0,e.EXTENT),o=e.clamp(Math.round(c),0,e.EXTENT);i.emplaceBack(n+r,o,n,o)}const l=(e,t)=>{const i=t*n+e;r.emplaceBack(i+1,i,i+n),r.emplaceBack(i+n,i+n+1,i+1)};for(let e=1;e<129;e++)for(let t=1;t<129;t++)l(t,e);return[0,129].forEach(e=>{for(let t=0;t<130;t++)l(t,e),l(e,t)}),[i,r,32768]}(),s=t.context;this.gridBuffer=s.createVertexBuffer(r,e.boundsAttributes.members),this.gridIndexBuffer=s.createIndexBuffer(n),this.gridSegments=e.SegmentVector.simpleSegment(0,0,r.length,n.length),this.gridNoSkirtSegments=e.SegmentVector.simpleSegment(0,0,r.length,o),this.proxyCoords=[],this.proxiedCoords={},this._visibleDemTiles=[],this._drapedRenderBatches=[],this._sourceTilesOverlap={},this.proxySourceCache=new xi(i.map),this.orthoMatrix=e.create(),e.ortho(this.orthoMatrix,0,e.EXTENT,0,e.EXTENT,0,1);const a=s.gl;this._overlapStencilMode=new e.StencilMode({func:a.GEQUAL,mask:255},0,255,a.KEEP,a.KEEP,a.REPLACE),this._previousZoom=t.transform.zoom,this.pool=[],this._findCoveringTileCache={},this._tilesDirty={},this.style=i,this._useVertexMorphing=!0,this._exaggeration=1,this._mockSourceCache=new yi(i.map)}set style(e){e.on("data",this._onStyleDataEvent.bind(this)),e.on("neworder",this._checkRenderCacheEfficiency.bind(this)),this._style=e,this._checkRenderCacheEfficiency()}update(t,i,r){if(t&&t.terrain){this._style!==t&&(this.style=t),this.enabled=!0;const n=t.terrain.properties;this.sourceCache=0===t.terrain.drapeRenderMode?this._mockSourceCache:t._getSourceCache(n.get("source")),this._exaggeration=n.get("exaggeration");const o=()=>{this.sourceCache.used&&e.warnOnce(`Raster DEM source '${this.sourceCache.id}' is used both for terrain and as layer source.\nThis leads to lower resolution of hillshade. For full hillshade resolution but higher memory consumption, define another raster DEM source.`);const t=this.getScaledDemTileSize();this.sourceCache.update(i,t,!0),this.resetTileLookupCache(this.sourceCache.id)};this.sourceCache.usedForTerrain||(this.resetTileLookupCache(this.sourceCache.id),this.sourceCache.usedForTerrain=!0,o(),this._initializing=!0),o(),i.updateElevation(!r),this.resetTileLookupCache(this.proxySourceCache.id),this.proxySourceCache.update(i),this._emptyDEMTextureDirty=!0}else this._disable()}resetTileLookupCache(e){this._findCoveringTileCache[e]={}}getScaledDemTileSize(){return this.sourceCache.getSource().tileSize/128*this.proxySourceCache.getSource().tileSize}_checkRenderCacheEfficiency(){const t=this.renderCacheEfficiency(this._style);this._style.map._optimizeForTerrain||100!==t.efficiency&&e.warnOnce(`Terrain render cache efficiency is not optimal (${t.efficiency}%) and performance\n may be affected negatively, consider placing all background, fill and line layers before layer\n with id '${t.firstUndrapedLayer}' or create a map using optimizeForTerrain: true option.`)}_onStyleDataEvent(e){e.coord&&"source"===e.dataType?this._clearRenderCacheForTile(e.sourceCacheId,e.coord):"style"===e.dataType&&(this._invalidateRenderCache=!0)}_disable(){if(this.enabled&&(this.enabled=!1,this._sharedDepthStencil=void 0,this.proxySourceCache.deallocRenderCache(),this._style))for(const e in this._style._sourceCaches)this._style._sourceCaches[e].usedForTerrain=!1}destroy(){this._disable(),this._emptyDEMTexture&&this._emptyDEMTexture.destroy(),this._emptyDepthBufferTexture&&this._emptyDepthBufferTexture.destroy(),this.pool.forEach(e=>e.fb.destroy()),this.pool=[],this._depthFBO&&(this._depthFBO.destroy(),this._depthFBO=void 0,this._depthTexture=void 0)}_source(){return this.enabled?this.sourceCache:null}exaggeration(){return this._exaggeration}get visibleDemTiles(){return this._visibleDemTiles}get drapeBufferSize(){const e=2*this.proxySourceCache.getSource().tileSize;return[e,e]}set useVertexMorphing(e){this._useVertexMorphing=e}updateTileBinding(t){if(!this.enabled)return;this.prevTerrainTileForTile=this.terrainTileForTile;const i=this.proxySourceCache,r=this.painter.transform;this._initializing&&(this._initializing=0===r._centerAltitude&&-1===this.getAtPointOrZero(e.MercatorCoordinate.fromLngLat(r.center),-1),this._emptyDEMTextureDirty=!this._initializing);const n=this.proxyCoords=i.getIds().map(e=>{const t=i.getTileByID(e).tileID;return t.projMatrix=r.calculateProjMatrix(t.toUnwrapped()),t});!function(t,i){const r=i.transform.pointCoordinate(i.transform.getCameraPoint()),n=new e.pointGeometry(r.x,r.y);t.sort((t,i)=>{if(i.overscaledZ-t.overscaledZ)return i.overscaledZ-t.overscaledZ;const r=new e.pointGeometry(t.canonical.x+(1<{this.proxyToSource[e.key]={}}),this.terrainTileForTile={};const s=this._style._sourceCaches;for(const e in s){const i=s[e];if(!i.used)continue;if(i!==this.sourceCache&&this.resetTileLookupCache(i.id),this._setupProxiedCoordsForOrtho(i,t[e],o),i.usedForTerrain)continue;const r=t[e];i.getSource().reparseOverscaled&&this._assignTerrainTiles(r)}this.proxiedCoords[i.id]=n.map(e=>new vi(e,e.key,this.orthoMatrix)),this._assignTerrainTiles(n),this._prepareDEMTextures(),this._setupDrapedRenderBatches(),this._initFBOPool(),this._setupRenderCache(o),this.renderingToTexture=!1,this._updateTimestamp=e.exported.now();const a={};this._visibleDemTiles=[];for(const e of this.proxyCoords){const t=this.terrainTileForTile[e.key];if(!t)continue;const i=t.tileID.key;i in a||(this._visibleDemTiles.push(t),a[i]=i)}}_assignTerrainTiles(e){this._initializing||e.forEach(e=>{if(this.terrainTileForTile[e.key])return;const t=this._findTileCoveringTileID(e,this.sourceCache);t&&(this.terrainTileForTile[e.key]=t)})}_prepareDEMTextures(){const e=this.painter.context,t=e.gl;for(const i in this.terrainTileForTile){const r=this.terrainTileForTile[i],n=r.dem;!n||r.demTexture&&!r.needsDEMTextureUpload||(e.activeTexture.set(t.TEXTURE1),si(this.painter,r,n))}}_prepareDemTileUniforms(e,t,i,r){if(!t||null==t.demTexture)return!1;const n=e.tileID.canonical,o=Math.pow(2,t.tileID.canonical.z-n.z),s=r||"";return i["u_dem_tl"+s]=[n.x*o%1,n.y*o%1],i["u_dem_scale"+s]=o,!0}get emptyDEMTexture(){return!this._emptyDEMTextureDirty&&this._emptyDEMTexture?this._emptyDEMTexture:this._updateEmptyDEMTexture()}get emptyDepthBufferTexture(){const t=this.painter.context,i=t.gl;if(!this._emptyDepthBufferTexture){const r=new e.RGBAImage({width:1,height:1},Uint8Array.of(255,255,255,255));this._emptyDepthBufferTexture=new e.Texture(t,r,i.RGBA,{premultiply:!1})}return this._emptyDepthBufferTexture}_getLoadedAreaMinimum(){let e=0;const t=this._visibleDemTiles.reduce((t,i)=>{if(!i.dem)return t;const r=i.dem.tree.minimums[0];return r>0&&e++,t+r},0);return e?t/e:0}_updateEmptyDEMTexture(){const t=this.painter.context,i=t.gl;t.activeTexture.set(i.TEXTURE2);const r=this._getLoadedAreaMinimum(),n=new e.RGBAImage({width:1,height:1},new Uint8Array(e.DEMData.pack(r,this.sourceCache.getSource().encoding)));this._emptyDEMTextureDirty=!1;let o=this._emptyDEMTexture;return o?o.update(n,{premultiply:!1}):o=this._emptyDEMTexture=new e.Texture(t,n,i.RGBA,{premultiply:!1}),o}setupElevationDraw(t,i,r){const n=this.painter.context,o=n.gl,s=(a=this.sourceCache.getSource().encoding,{u_dem:2,u_dem_prev:4,u_dem_unpack:e.DEMData.getUnpackVector(a),u_dem_tl:[0,0],u_dem_tl_prev:[0,0],u_dem_scale:0,u_dem_scale_prev:0,u_dem_size:0,u_dem_lerp:1,u_depth:3,u_depth_size_inv:[0,0],u_exaggeration:0,u_tile_tl_up:[0,0,1],u_tile_tr_up:[0,0,1],u_tile_br_up:[0,0,1],u_tile_bl_up:[0,0,1],u_tile_up_scale:1});var a;s.u_dem_size=this.sourceCache.getSource().tileSize,s.u_exaggeration=this.exaggeration();const l=this.painter.transform,c=l.projection,h=t.tileID.canonical;s.u_tile_tl_up=c.upVector(h,0,0),s.u_tile_tr_up=c.upVector(h,e.EXTENT,0),s.u_tile_br_up=c.upVector(h,e.EXTENT,e.EXTENT),s.u_tile_bl_up=c.upVector(h,0,e.EXTENT),s.u_tile_up_scale=r&&r.useDenormalizedUpVectorScale?gi:c.upVectorScale(h,l.center.lat,l.worldSize).metersToTile;let u=null,p=null,d=1;if(r&&r.morphing&&this._useVertexMorphing){const e=r.morphing.srcDemTile,i=r.morphing.dstDemTile;d=r.morphing.phase,e&&i&&(this._prepareDemTileUniforms(t,e,s,"_prev")&&(p=e),this._prepareDemTileUniforms(t,i,s)&&(u=i))}if(p&&u?(n.activeTexture.set(o.TEXTURE2),u.demTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE,o.NEAREST),n.activeTexture.set(o.TEXTURE4),p.demTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE,o.NEAREST),s.u_dem_lerp=d):(u=this.terrainTileForTile[t.tileID.key],n.activeTexture.set(o.TEXTURE2),(this._prepareDemTileUniforms(t,u,s)?u.demTexture:this.emptyDEMTexture).bind(o.NEAREST,o.CLAMP_TO_EDGE)),n.activeTexture.set(o.TEXTURE3),r&&r.useDepthForOcclusion?(this._depthTexture&&this._depthTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE),this._depthFBO&&(s.u_depth_size_inv=[1/this._depthFBO.width,1/this._depthFBO.height])):(this.emptyDepthBufferTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE),s.u_depth_size_inv=[1,1]),r&&r.useMeterToDem&&u){const t=(1<{if(c===e)return;const r=[di[e],"PROJECTION_GLOBE_VIEW"];i&&r.push(di[h]),l=t.useProgram("globeRaster",null,r),c=e},p=t.colorModeForRenderPass(),d=new e.DepthMode(a.LEQUAL,e.DepthMode.ReadWrite,t.depthRangeFor3D);pi.update(o);const f=t.transform,m=e.calculateGlobeMercatorMatrix(f),_=[e.mercatorXfromLng(f.center.lng),e.mercatorYfromLat(f.center.lat)],g=t.globeSharedBuffers;if((h?[!1,!0]:[!1]).forEach(h=>{c=-1;const y=h?a.LINES:a.TRIANGLES;for(const c of n){const n=r.getTile(c),x=e.StencilMode.disabled,v=i.prevTerrainTileForTile[c.key],b=i.terrainTileForTile[c.key];ui(v,b)&&pi.newMorphing(c.key,v,b,o,250),s.activeTexture.set(a.TEXTURE0),n.texture.bind(a.LINEAR,a.CLAMP_TO_EDGE);const w=pi.getMorphValuesForProxy(c.key),T=w?1:0,E={useDenormalizedUpVectorScale:!0};w&&e.extend$1(E,{morphing:{srcDemTile:w.from,dstDemTile:w.to,phase:e.easeCubicInOut(w.phase)}});const S=Float32Array.from(f.globeMatrix),I=e.globeTileLatLngCorners(c.canonical),M=e.getGridMatrix(c.canonical,I),A=hi(f.projMatrix,S,m,e.globeToMercatorTransition(f.zoom),_,M);if(u(T,h),i.setupElevationDraw(n,l,E),t.prepareDrawProgram(s,l,c.toUnwrapped()),g){const[i,r,n]=h?g.getWirefameBuffers(t.context):g.getGridBuffers();l.draw(s,y,d,x,p,e.CullFaceMode.backCCW,A,"globe_raster",i,r,n)}}}),g){l=t.useProgram("globeRaster",null,["GLOBE_POLES","PROJECTION_GLOBE_VIEW"]);for(const o of n){const{x:n,y:c,z:h}=o.canonical,u=0===c,m=c===(1<t.draw(s,a.TRIANGLES,d,e.StencilMode.disabled,p,e.CullFaceMode.disabled,hi(f.projMatrix,g,g,0,_),"globe_pole_raster",i,v,b);i.setupElevationDraw(c,l,{}),t.prepareDrawProgram(s,l,o.toUnwrapped()),u&&w(l,y),m&&(g=e.scale(e.create(),g,[1,-1,1]),w(l,x))}}}}(t,i,r,n,o);else{const s=t.context,a=s.gl;let l,c;const h=t.options.showTerrainWireframe?2:0,u=(e,i)=>{if(c===e)return;const r=[di[e]];i&&r.push(di[h]),l=t.useProgram("terrainRaster",null,r),c=e},p=t.colorModeForRenderPass(),d=new e.DepthMode(a.LEQUAL,e.DepthMode.ReadWrite,t.depthRangeFor3D);pi.update(o);const f=t.transform,m=6*Math.pow(1.5,22-f.zoom)*i.exaggeration();(h?[!1,!0]:[!1]).forEach(h=>{c=-1;const _=h?a.LINES:a.TRIANGLES,[g,y]=h?i.getWirefameBuffer():[i.gridIndexBuffer,i.gridSegments];for(const c of n){const n=r.getTile(c),x=e.StencilMode.disabled,v=i.prevTerrainTileForTile[c.key],b=i.terrainTileForTile[c.key];ui(v,b)&&pi.newMorphing(c.key,v,b,o,250),s.activeTexture.set(a.TEXTURE0),n.texture.bind(a.LINEAR,a.CLAMP_TO_EDGE,a.LINEAR_MIPMAP_NEAREST);const w=pi.getMorphValuesForProxy(c.key),T=w?1:0;let E;w&&(E={morphing:{srcDemTile:w.from,dstDemTile:w.to,phase:e.easeCubicInOut(w.phase)}});const S=ci(c.projMatrix,fi(c.canonical,f.renderWorldCopies)?m/10:m);u(T,h),i.setupElevationDraw(n,l,E),t.prepareDrawProgram(s,l,c.toUnwrapped()),l.draw(s,_,d,x,p,e.CullFaceMode.backCCW,S,"terrain_raster",i.gridBuffer,g,y)}})}}(i,this,this.proxySourceCache,t,this._updateTimestamp),this.renderingToTexture=!0,t.splice(0,t.length))}renderBatch(t){if(0===this._drapedRenderBatches.length)return t+1;this.renderingToTexture=!0;const i=this.painter,r=this.painter.context,n=this.proxySourceCache,o=this.proxiedCoords[n.id],s=this._drapedRenderBatches.shift(),a=[],l=i.style.order;let c=0;for(const h of o){const o=n.getTileByID(h.proxyTileKey),u=n.proxyCachedFBO[h.key]?n.proxyCachedFBO[h.key][t]:void 0,p=void 0!==u?n.renderCache[u]:this.pool[c++],d=void 0!==u;if(o.texture=p.tex,d&&!p.dirty){a.push(o.tileID);continue}let f;r.bindFramebuffer.set(p.fb.framebuffer),this.renderedToTile=!1,p.dirty&&(r.clear({color:e.Color.transparent,stencil:0}),p.dirty=!1);for(let e=s.start;e<=s.end;++e){const t=i.style._layers[l[e]];if(t.isHidden(i.transform.zoom))continue;const n=i.style._getLayerSourceCache(t),o=n?this.proxyToSource[h.key][n.id]:[h];if(!o)continue;const s=o;r.viewport.set([0,0,p.fb.width,p.fb.height]),f!==(n?n.id:null)&&(this._setupStencil(p,o,t,n),f=n?n.id:null),i.renderLayer(i,n,t,s)}this.renderedToTile?(p.dirty=!0,a.push(o.tileID)):d||--c,5===c&&(c=0,this.renderToBackBuffer(a))}return this.renderToBackBuffer(a),this.renderingToTexture=!1,r.bindFramebuffer.set(null),r.viewport.set([0,0,i.width,i.height]),s.end+1}postRender(){}renderCacheEfficiency(e){const t=e.order.length;if(0===t)return{efficiency:100};let i,r=0,n=0,o=!1;for(let s=0;se.dem).forEach(t=>{e=Math.min(e,t.dem.tree.minimums[0])}),0===e?e:(e-30)*this._exaggeration}raycast(e,t,i){if(!this._visibleDemTiles)return null;const r=this._visibleDemTiles.filter(e=>e.dem).map(r=>{const n=r.tileID,o=Math.pow(2,n.overscaledZ),{x:s,y:a}=n.canonical,l=s/o,c=(s+1)/o,h=a/o,u=(a+1)/o;return{minx:l,miny:h,maxx:c,maxy:u,t:r.dem.tree.raycastRoot(l,h,c,u,e,t,i),tile:r}});r.sort((e,t)=>(null!==e.t?e.t:Number.MAX_VALUE)-(null!==t.t?t.t:Number.MAX_VALUE));for(const n of r){if(null==n.t)return null;const r=n.tile.dem.tree.raycast(n.minx,n.miny,n.maxx,n.maxy,e,t,i);if(null!=r)return r}return null}_createFBO(){const t=this.painter.context,i=t.gl,r=this.drapeBufferSize;t.activeTexture.set(i.TEXTURE0);const n=new e.Texture(t,{width:r[0],height:r[1],data:null},i.RGBA);n.bind(i.LINEAR,i.CLAMP_TO_EDGE);const o=t.createFramebuffer(r[0],r[1],!1);return o.colorAttachment.set(n.texture),o.depthAttachment=new we(t,o.framebuffer),void 0===this._sharedDepthStencil?(this._sharedDepthStencil=t.createRenderbuffer(t.gl.DEPTH_STENCIL,r[0],r[1]),this._stencilRef=0,o.depthAttachment.set(this._sharedDepthStencil),t.clear({stencil:0})):o.depthAttachment.set(this._sharedDepthStencil),t.extTextureFilterAnisotropic&&!t.extTextureFilterAnisotropicForceOff&&i.texParameterf(i.TEXTURE_2D,t.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,t.extTextureFilterAnisotropicMax),{fb:o,tex:n,dirty:!1}}_initFBOPool(){for(;this.pool.length{const t=this._style._layers[e],i=t.isHidden(this.painter.transform.zoom),r=t.getCrossfadeParameters(),n=!!r&&1!==r.t,o=t.hasTransition();return"custom"!==t.type&&!i&&(n||o)})}_clearRasterFadeFromRenderCache(){let e=!1;for(const t in this._style._sourceCaches)if(this._style._sourceCaches[t]._source instanceof Se){e=!0;break}if(e)for(let t=0;tt.renderCachePool.length){const e=Object.values(t.proxyCachedFBO);t.proxyCachedFBO={};for(let i=0;i=0;o--){const n=i[o];if(t.getTileByID(n.key),void 0!==t.proxyCachedFBO[n.key]){const i=e[n.key],o=this.proxyToSource[n.key];let s=0;for(const e in o){const t=o[e],n=i[e];if(!n||n.length!==t.length||t.some((t,i)=>t!==n[i]||r[e]&&r[e].hasOwnProperty(t.key))){s=-1;break}++s}for(const e in t.proxyCachedFBO[n.key])t.renderCache[t.proxyCachedFBO[n.key][e]].dirty=s<0||s!==Object.values(i).length}}const n=[...this._drapedRenderBatches];n.sort((e,t)=>t.end-t.start-(e.end-e.start));for(const o of n)for(const e of i){if(t.proxyCachedFBO[e.key])continue;let i=t.renderCachePool.pop();void 0===i&&t.renderCache.length<50&&(i=t.renderCache.length,t.renderCache.push(this._createFBO())),void 0!==i&&(t.proxyCachedFBO[e.key]={},t.proxyCachedFBO[e.key][o.start]=i,t.renderCache[i].dirty=!0)}this._tilesDirty={}}_setupStencil(e,t,i,r){if(!r||!this._sourceTilesOverlap[r.id])return void(this._overlapStencilType&&(this._overlapStencilType=!1));const n=this.painter.context,o=n.gl;if(t.length<=1)return void(this._overlapStencilType=!1);let s;if(i.isTileClipped())s=t.length,this._overlapStencilMode.test={func:o.EQUAL,mask:255},this._overlapStencilType="Clip";else{if(!(t[0].overscaledZ>t[t.length-1].overscaledZ))return void(this._overlapStencilType=!1);s=1,this._overlapStencilMode.test={func:o.GREATER,mask:255},this._overlapStencilType="Mask"}this._stencilRef+s>255&&(n.clear({stencil:0}),this._stencilRef=0),this._stencilRef+=s,this._overlapStencilMode.ref=this._stencilRef,i.isTileClipped()&&this._renderTileClippingMasks(t,this._overlapStencilMode.ref)}clipOrMaskOverlapStencilType(){return"Clip"===this._overlapStencilType||"Mask"===this._overlapStencilType}stencilModeForRTTOverlap(t){return this.renderingToTexture&&this._overlapStencilType?("Clip"===this._overlapStencilType&&(this._overlapStencilMode.ref=this.painter._tileClippingMaskIDs.get(t.key)||0),this._overlapStencilMode):e.StencilMode.disabled}_renderTileClippingMasks(t,i){const r=this.painter,n=this.painter.context,o=n.gl;r._tileClippingMaskIDs.clear(),n.setColorMode(e.ColorMode.disabled),n.setDepthMode(e.DepthMode.disabled);const s=r.useProgram("clippingMask");for(const a of t){const t=--i;r._tileClippingMaskIDs.set(a.key,t),s.draw(n,o.TRIANGLES,e.DepthMode.disabled,new e.StencilMode({func:o.ALWAYS,mask:0},t,255,o.KEEP,o.KEEP,o.REPLACE),e.ColorMode.disabled,e.CullFaceMode.disabled,mi(a.projMatrix),"$clipping",r.tileExtentBuffer,r.quadTriangleIndexBuffer,r.tileExtentSegments)}}pointCoordinate(t){const i=this.painter.transform;if(t.x<0||t.x>i.width||t.y<0||t.y>i.height)return null;const r=[t.x,t.y,1,1];e.transformMat4$1(r,r,i.pixelMatrixInverse),e.scale$1(r,r,1/r[3]),r[0]/=i.worldSize,r[1]/=i.worldSize;const n=i._camera.position,o=e.mercatorZfromAltitude(1,i.center.lat),s=[n[0],n[1],n[2]/o,0],a=e.subtract([],r.slice(0,3),s);e.normalize(a,a);const l=this.raycast(s,a,this._exaggeration);return null!==l&&l?(e.scaleAndAdd(s,s,a,l),s[3]=s[2],s[2]*=o,s):null}drawDepth(){const t=this.painter,i=t.context,r=this.proxySourceCache,n=Math.ceil(t.width),o=Math.ceil(t.height);if(!this._depthFBO||this._depthFBO.width===n&&this._depthFBO.height===o||(this._depthFBO.destroy(),this._depthFBO=void 0,this._depthTexture=void 0),!this._depthFBO){const t=i.gl,r=i.createFramebuffer(n,o,!0);i.activeTexture.set(t.TEXTURE0);const s=new e.Texture(i,{width:n,height:o,data:null},t.RGBA);s.bind(t.NEAREST,t.CLAMP_TO_EDGE),r.colorAttachment.set(s.texture);const a=i.createRenderbuffer(i.gl.DEPTH_COMPONENT16,n,o);r.depthAttachment.set(a),this._depthFBO=r,this._depthTexture=s}i.bindFramebuffer.set(this._depthFBO.framebuffer),i.viewport.set([0,0,n,o]),function(t,i,r,n){if("globe"===t.transform.projection.name)return;const o=t.context,s=o.gl;o.clear({depth:1});const a=t.useProgram("terrainDepth"),l=new e.DepthMode(s.LESS,e.DepthMode.ReadWrite,t.depthRangeFor3D);for(const c of n){const t=r.getTile(c),n=ci(c.projMatrix,0);i.setupElevationDraw(t,a),a.draw(o,s.TRIANGLES,l,e.StencilMode.disabled,e.ColorMode.unblended,e.CullFaceMode.backCCW,n,"terrain_depth",i.gridBuffer,i.gridIndexBuffer,i.gridNoSkirtSegments)}}(t,this,r,this.proxyCoords)}_setupProxiedCoordsForOrtho(e,t,i){if(e.getSource()instanceof Ae)return this._setupProxiedCoordsForImageSource(e,t,i);this._findCoveringTileCache[e.id]=this._findCoveringTileCache[e.id]||{};const r=this.proxiedCoords[e.id]=[],n=this.proxyCoords;for(let s=0;s(e.min.x=Math.min(e.min.x,t.x-a.x),e.min.y=Math.min(e.min.y,t.y-a.y),e.max.x=Math.max(e.max.x,t.x-a.x),e.max.y=Math.max(e.max.y,t.y-a.y),e),{min:new e.pointGeometry(Number.MAX_VALUE,Number.MAX_VALUE),max:new e.pointGeometry(-Number.MAX_VALUE,-Number.MAX_VALUE)}),c=(t,i)=>{const r=t.wrap+t.canonical.x/(1<s+l.max.x||n+oa+l.max.y};for(let e=0;ee.key===i.tileID.key);if(e)return e}if(i.tileID.key!==t.key){const r=t.canonical.z-i.tileID.canonical.z;let o,s,a;n=e.create();const l=i.tileID.wrap-t.wrap<0?(o=e.EXTENT>>r,s=o*((i.tileID.canonical.x<=n){const r=t.canonical.z-n;i.getSource().reparseOverscaled?(a=Math.max(t.canonical.z+2,i.transform.tileZoom),s=new e.OverscaledTileID(a,t.wrap,n,t.canonical.x>>r,t.canonical.y>>r)):0!==r&&(a=n,s=new e.OverscaledTileID(a,t.wrap,n,t.canonical.x>>r,t.canonical.y>>r))}s.key!==t.key&&(c.push(s.key),r=i.getTile(s))}const h=e=>{c.forEach(t=>{n[t]=e}),c.length=0};for(a-=1;a>=l&&(!r||!r.hasData());a--){r&&h(r.tileID.key);const e=s.calculateScaledKey(a);if(r=i.getTileByID(e),r&&r.hasData())break;const t=n[e];if(null===t)break;void 0===t?c.push(e):r=i.getTileByID(t)}return h(r?r.tileID.key:null),r&&r.hasData()?r:null}findDEMTileFor(e){return this.enabled?this._findTileCoveringTileID(e,this.sourceCache):null}prepareDrawTile(){this.renderedToTile=!0}_clearRenderCacheForTile(e,t){let i=this._tilesDirty[e];i||(i=this._tilesDirty[e]={}),i[t.key]=!0}getWirefameBuffer(){if(!this.wireframeSegments){const t=function(t){let i=0;const r=new e.StructArrayLayout2ui4,n=131;for(let e=1;e<129;e++){for(let t=1;t<129;t++)i=e*n+t,r.emplaceBack(i,i+1),r.emplaceBack(i,i+n),r.emplaceBack(i+1,i+n),128===e&&r.emplaceBack(i+n,i+n+1);r.emplaceBack(i+1,i+1+n)}return r}();this.wireframeIndexBuffer=this.painter.context.createIndexBuffer(t),this.wireframeSegments=e.SegmentVector.simpleSegment(0,0,this.gridBuffer.length,t.length)}return[this.wireframeIndexBuffer,this.wireframeSegments]}}function wi(e){const t=[];for(let i=0;i"#define "+e));const _=m.concat("\n#ifdef GL_ES\nprecision mediump float;\n#else\n\n#if !defined(lowp)\n#define lowp\n#endif\n\n#if !defined(mediump)\n#define mediump\n#endif\n\n#if !defined(highp)\n#define highp\n#endif\n\n#endif",ei,Qt.fragmentSource,Jt.fragmentSource,r.fragmentSource).join("\n"),g=m.concat("\n#ifdef GL_ES\nprecision highp float;\n#else\n\n#if !defined(lowp)\n#define lowp\n#endif\n\n#if !defined(mediump)\n#define mediump\n#endif\n\n#if !defined(highp)\n#define highp\n#endif\n\n#endif",ei,Qt.vertexSource,Jt.vertexSource,Kt.vertexSource,r.vertexSource).join("\n"),y=a.createShader(a.FRAGMENT_SHADER);if(a.isContextLost())return void(this.failedToCreate=!0);a.shaderSource(y,_),a.compileShader(y),a.attachShader(this.program,y);const x=a.createShader(a.VERTEX_SHADER);if(a.isContextLost())return void(this.failedToCreate=!0);a.shaderSource(x,g),a.compileShader(x),a.attachShader(this.program,x),this.attributes={};const v={};this.numAttributes=h.length;for(let e=0;e({u_dem:new e.Uniform1i(t,i.u_dem),u_dem_prev:new e.Uniform1i(t,i.u_dem_prev),u_dem_unpack:new e.Uniform4f(t,i.u_dem_unpack),u_dem_tl:new e.Uniform2f(t,i.u_dem_tl),u_dem_scale:new e.Uniform1f(t,i.u_dem_scale),u_dem_tl_prev:new e.Uniform2f(t,i.u_dem_tl_prev),u_dem_scale_prev:new e.Uniform1f(t,i.u_dem_scale_prev),u_dem_size:new e.Uniform1f(t,i.u_dem_size),u_dem_lerp:new e.Uniform1f(t,i.u_dem_lerp),u_exaggeration:new e.Uniform1f(t,i.u_exaggeration),u_depth:new e.Uniform1i(t,i.u_depth),u_depth_size_inv:new e.Uniform2f(t,i.u_depth_size_inv),u_meter_to_dem:new e.Uniform1f(t,i.u_meter_to_dem),u_label_plane_matrix_inv:new e.UniformMatrix4f(t,i.u_label_plane_matrix_inv),u_tile_tl_up:new e.Uniform3f(t,i.u_tile_tl_up),u_tile_tr_up:new e.Uniform3f(t,i.u_tile_tr_up),u_tile_br_up:new e.Uniform3f(t,i.u_tile_br_up),u_tile_bl_up:new e.Uniform3f(t,i.u_tile_bl_up),u_tile_up_scale:new e.Uniform1f(t,i.u_tile_up_scale)}))(t,v)),-1!==s.indexOf("FOG")&&(this.fogUniforms=((t,i)=>({u_fog_matrix:new e.UniformMatrix4f(t,i.u_fog_matrix),u_fog_range:new e.Uniform2f(t,i.u_fog_range),u_fog_color:new e.Uniform4f(t,i.u_fog_color),u_fog_horizon_blend:new e.Uniform1f(t,i.u_fog_horizon_blend),u_fog_temporal_offset:new e.Uniform1f(t,i.u_fog_temporal_offset)}))(t,v))}setTerrainUniformValues(e,t){if(!this.terrainUniforms)return;const i=this.terrainUniforms;if(!this.failedToCreate){e.program.set(this.program);for(const e in t)i[e].set(t[e])}}setFogUniformValues(e,t){if(!this.fogUniforms)return;const i=this.fogUniforms;if(!this.failedToCreate){e.program.set(this.program);for(const e in t)i[e].location&&i[e].set(t[e])}}draw(e,t,i,r,n,o,s,a,l,c,h,u,p,d,f,m){const _=e.gl;if(this.failedToCreate)return;e.program.set(this.program),e.setDepthMode(i),e.setStencilMode(r),e.setColorMode(n),e.setCullFace(o);for(const y of Object.keys(this.fixedUniforms))this.fixedUniforms[y].set(s[y]);d&&d.setUniforms(e,this.binderUniforms,u,{zoom:p});const g={[_.LINES]:2,[_.TRIANGLES]:3,[_.LINE_STRIP]:1}[t];for(const y of h.get()){const i=y.vaos||(y.vaos={});(i[a]||(i[a]=new ri)).bind(e,this,l,d?d.getPaintVertexBuffers():[],c,y.vertexOffset,f,m),_.drawElements(t,y.primitiveLength*g,_.UNSIGNED_SHORT,y.primitiveOffset*g*2)}}}function Ei(e,t,i){const r=1/P(i,1,t.transform.tileZoom),n=Math.pow(2,i.tileID.overscaledZ),o=i.tileSize*Math.pow(2,t.transform.tileZoom)/n,s=o*(i.tileID.canonical.x+i.tileID.wrap*n),a=o*i.tileID.canonical.y;return{u_image:0,u_texsize:i.imageAtlasTexture.size,u_scale:[r,e.fromScale,e.toScale],u_fade:e.t,u_pixel_coord_upper:[s>>16,a>>16],u_pixel_coord_lower:[65535&s,65535&a]}}const Si=e.create(),Ii=(t,i,r,n,o,s,a,l,c)=>{const h=i.style.light,u=h.properties.get("position"),p=[u.x,u.y,u.z],d=e.create$1();"viewport"===h.properties.get("anchor")&&(e.fromRotation(d,-i.transform.angle),e.transformMat3(p,p,d));const f=h.properties.get("color"),m=i.transform,_={u_matrix:t,u_lightpos:p,u_lightintensity:h.properties.get("intensity"),u_lightcolor:[f.r,f.g,f.b],u_vertical_gradient:+r,u_opacity:n,u_tile_id:[0,0,0],u_zoom_transition:0,u_inv_rot_matrix:Si,u_merc_center:[0,0],u_up_dir:[0,0,0],u_height_lift:0};return"globe"===m.projection.name&&(_.u_tile_id=[o.canonical.x,o.canonical.y,1<{const p=Ii(t,i,r,n,o,l,c,h,u),d={u_height_factor:-Math.pow(2,o.overscaledZ)/a.tileSize/8};return e.extend(p,Ei(s,i,a),d)},Ai=e=>({u_matrix:e}),zi=(t,i,r,n)=>e.extend(Ai(t),Ei(r,i,n)),Ci=(e,t)=>({u_matrix:e,u_world:t}),ki=(t,i,r,n,o)=>e.extend(zi(t,i,r,n),{u_world:o}),Di=e.create(),Pi=(t,i,r,n,o,s)=>{const a=t.transform,l="globe"===a.projection.name;let c;if("map"===s.paint.get("circle-pitch-alignment"))if(l){const t=e.globePixelsToTileUnits(a.zoom,i.canonical);c=Float32Array.from([t,0,0,t])}else c=a.calculatePixelsToTileUnitsMatrix(r);else c=new Float32Array([a.pixelsToGLUnits[0],0,0,a.pixelsToGLUnits[1]]);const h={u_camera_to_center_distance:a.cameraToCenterDistance,u_matrix:t.translatePosMatrix(i.projMatrix,r,s.paint.get("circle-translate"),s.paint.get("circle-translate-anchor")),u_device_pixel_ratio:e.exported.devicePixelRatio,u_extrude_scale:c,u_inv_rot_matrix:Di,u_merc_center:[0,0],u_tile_id:[0,0,0],u_zoom_transition:0,u_up_dir:[0,0,0]};return l&&(h.u_inv_rot_matrix=n,h.u_merc_center=o,h.u_tile_id=[i.canonical.x,i.canonical.y,1<{const t=[];return"map"===e.paint.get("circle-pitch-alignment")&&t.push("PITCH_WITH_MAP"),"map"===e.paint.get("circle-pitch-scale")&&t.push("SCALE_WITH_MAP"),t},Bi=(t,i,r)=>{const n=e.EXTENT/r.tileSize;return{u_matrix:t,u_camera_to_center_distance:i.cameraToCenterDistance,u_extrude_scale:[i.pixelsToGLUnits[0]/n,i.pixelsToGLUnits[1]/n]}},Ri=(e,t,i=1)=>({u_matrix:e,u_color:t,u_overlay:0,u_overlay_scale:i}),Fi=e.create(),Oi=(t,i,r,n,o,s,a)=>{const l=t.transform,c="globe"===l.projection.name,h=c?e.globePixelsToTileUnits(l.zoom,i.canonical):P(r,1,s),u={u_matrix:i.projMatrix,u_extrude_scale:h,u_intensity:a,u_inv_rot_matrix:Fi,u_merc_center:[0,0],u_tile_id:[0,0,0],u_zoom_transition:0,u_up_dir:[0,0,0]};return c&&(u.u_inv_rot_matrix=n,u.u_merc_center=o,u.u_tile_id=[i.canonical.x,i.canonical.y,1<{const a=e.transform,l=a.calculatePixelsToTileUnitsMatrix(t),c={u_matrix:ji(e,t,i,n),u_pixels_to_tile_units:l,u_device_pixel_ratio:s,u_units_to_pixels:[1/a.pixelsToGLUnits[0],1/a.pixelsToGLUnits[1]],u_dash_image:0,u_gradient_image:1,u_image_height:o,u_texsize:[0,0],u_scale:[0,0,0],u_mix:0,u_alpha_discard_threshold:0};if(Gi(i)){const i=Ni(t,e.transform);c.u_texsize=t.lineAtlasTexture.size,c.u_scale=[i,r.fromScale,r.toScale],c.u_mix=r.t}return c},Vi=(e,t,i,r,n,o)=>{const s=e.transform,a=Ni(t,s);return{u_matrix:ji(e,t,i,n),u_texsize:t.imageAtlasTexture.size,u_pixels_to_tile_units:s.calculatePixelsToTileUnitsMatrix(t),u_device_pixel_ratio:o,u_image:0,u_scale:[a,r.fromScale,r.toScale],u_fade:r.t,u_units_to_pixels:[1/s.pixelsToGLUnits[0],1/s.pixelsToGLUnits[1]],u_alpha_discard_threshold:0}};function Ni(e,t){return 1/P(e,1,t.tileZoom)}function ji(e,t,i,r){return e.translatePosMatrix(r||t.tileID.projMatrix,t,i.paint.get("line-translate"),i.paint.get("line-translate-anchor"))}function Gi(e){const t=e.paint.get("line-dasharray").value;return t.value||"constant"!==t.kind}const Zi=(e,t,i,r,n,o)=>{return{u_matrix:e,u_tl_parent:t,u_scale_parent:i,u_fade_t:r.mix,u_opacity:r.opacity*n.paint.get("raster-opacity"),u_image0:0,u_image1:1,u_brightness_low:n.paint.get("raster-brightness-min"),u_brightness_high:n.paint.get("raster-brightness-max"),u_saturation_factor:(a=n.paint.get("raster-saturation"),a>0?1-1/(1.001-a):-a),u_contrast_factor:(s=n.paint.get("raster-contrast"),s>0?1/(1-s):1+s),u_spin_weights:qi(n.paint.get("raster-hue-rotate")),u_perspective_transform:o};var s,a};function qi(e){e*=Math.PI/180;const t=Math.sin(e),i=Math.cos(e);return[(2*i+1)/3,(-Math.sqrt(3)*t-i+1)/3,(Math.sqrt(3)*t-i+1)/3]}const $i=e.create(),Xi=(t,i,r,n,o,s,a,l,c,h,u,p,d,f)=>{const m=o.transform,_={u_is_size_zoom_constant:+("constant"===t||"source"===t),u_is_size_feature_constant:+("constant"===t||"camera"===t),u_size_t:i?i.uSizeT:0,u_size:i?i.uSize:0,u_camera_to_center_distance:m.cameraToCenterDistance,u_rotate_symbol:+r,u_aspect_ratio:m.width/m.height,u_fade_change:o.options.fadeDuration?o.symbolFadeChange:1,u_matrix:s,u_label_plane_matrix:a,u_coord_matrix:l,u_is_text:+c,u_pitch_with_map:+n,u_texsize:h,u_texture:0,u_tile_id:[0,0,0],u_zoom_transition:0,u_inv_rot_matrix:$i,u_merc_center:[0,0],u_camera_forward:[0,0,0],u_ecef_origin:[0,0,0],u_tile_matrix:$i};return"globe"===m.projection.name&&(_.u_tile_id=[u.canonical.x,u.canonical.y,1<{const{cameraToCenterDistance:_,_pitch:g}=o.transform;return e.extend(Xi(t,i,r,n,o,s,a,l,c,h,p,d,f,m),{u_gamma_scale:n?_*Math.cos(o.terrain?0:g):1,u_device_pixel_ratio:e.exported.devicePixelRatio,u_is_halo:+u})},Hi=(t,i,r,n,o,s,a,l,c,h,u,p,d,f)=>e.extend(Wi(t,i,r,n,o,s,a,l,!0,c,!0,u,p,d,f),{u_texsize_icon:h,u_texture_icon:1}),Yi=(e,t,i)=>({u_matrix:e,u_opacity:t,u_color:i}),Ki=(t,i,r,n,o,s)=>e.extend(function(e,t,i,r){const n=i.imageManager.getPattern(e.from.toString()),o=i.imageManager.getPattern(e.to.toString()),{width:s,height:a}=i.imageManager.getPixelSize(),l=Math.pow(2,r.tileID.overscaledZ),c=r.tileSize*Math.pow(2,i.transform.tileZoom)/l,h=c*(r.tileID.canonical.x+r.tileID.wrap*l),u=c*r.tileID.canonical.y;return{u_image:0,u_pattern_tl_a:n.tl,u_pattern_br_a:n.br,u_pattern_tl_b:o.tl,u_pattern_br_b:o.br,u_texsize:[s,a],u_mix:t.t,u_pattern_size_a:n.displaySize,u_pattern_size_b:o.displaySize,u_scale_a:t.fromScale,u_scale_b:t.toScale,u_tile_units_to_pixels:1/P(r,1,i.transform.tileZoom),u_pixel_coord_upper:[h>>16,u>>16],u_pixel_coord_lower:[65535&h,65535&u]}}(n,s,r,o),{u_matrix:t,u_opacity:i}),Ji={fillExtrusion:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_lightpos:new e.Uniform3f(t,i.u_lightpos),u_lightintensity:new e.Uniform1f(t,i.u_lightintensity),u_lightcolor:new e.Uniform3f(t,i.u_lightcolor),u_vertical_gradient:new e.Uniform1f(t,i.u_vertical_gradient),u_opacity:new e.Uniform1f(t,i.u_opacity),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_up_dir:new e.Uniform3f(t,i.u_up_dir),u_height_lift:new e.Uniform1f(t,i.u_height_lift)}),fillExtrusionPattern:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_lightpos:new e.Uniform3f(t,i.u_lightpos),u_lightintensity:new e.Uniform1f(t,i.u_lightintensity),u_lightcolor:new e.Uniform3f(t,i.u_lightcolor),u_vertical_gradient:new e.Uniform1f(t,i.u_vertical_gradient),u_height_factor:new e.Uniform1f(t,i.u_height_factor),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_up_dir:new e.Uniform3f(t,i.u_up_dir),u_height_lift:new e.Uniform1f(t,i.u_height_lift),u_image:new e.Uniform1i(t,i.u_image),u_texsize:new e.Uniform2f(t,i.u_texsize),u_pixel_coord_upper:new e.Uniform2f(t,i.u_pixel_coord_upper),u_pixel_coord_lower:new e.Uniform2f(t,i.u_pixel_coord_lower),u_scale:new e.Uniform3f(t,i.u_scale),u_fade:new e.Uniform1f(t,i.u_fade),u_opacity:new e.Uniform1f(t,i.u_opacity)}),fill:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix)}),fillPattern:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_image:new e.Uniform1i(t,i.u_image),u_texsize:new e.Uniform2f(t,i.u_texsize),u_pixel_coord_upper:new e.Uniform2f(t,i.u_pixel_coord_upper),u_pixel_coord_lower:new e.Uniform2f(t,i.u_pixel_coord_lower),u_scale:new e.Uniform3f(t,i.u_scale),u_fade:new e.Uniform1f(t,i.u_fade)}),fillOutline:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_world:new e.Uniform2f(t,i.u_world)}),fillOutlinePattern:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_world:new e.Uniform2f(t,i.u_world),u_image:new e.Uniform1i(t,i.u_image),u_texsize:new e.Uniform2f(t,i.u_texsize),u_pixel_coord_upper:new e.Uniform2f(t,i.u_pixel_coord_upper),u_pixel_coord_lower:new e.Uniform2f(t,i.u_pixel_coord_lower),u_scale:new e.Uniform3f(t,i.u_scale),u_fade:new e.Uniform1f(t,i.u_fade)}),circle:(t,i)=>({u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_extrude_scale:new e.UniformMatrix2f(t,i.u_extrude_scale),u_device_pixel_ratio:new e.Uniform1f(t,i.u_device_pixel_ratio),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_up_dir:new e.Uniform3f(t,i.u_up_dir)}),collisionBox:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_extrude_scale:new e.Uniform2f(t,i.u_extrude_scale)}),collisionCircle:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_inv_matrix:new e.UniformMatrix4f(t,i.u_inv_matrix),u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_viewport_size:new e.Uniform2f(t,i.u_viewport_size)}),debug:(t,i)=>({u_color:new e.UniformColor(t,i.u_color),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_overlay:new e.Uniform1i(t,i.u_overlay),u_overlay_scale:new e.Uniform1f(t,i.u_overlay_scale)}),clippingMask:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix)}),heatmap:(t,i)=>({u_extrude_scale:new e.Uniform1f(t,i.u_extrude_scale),u_intensity:new e.Uniform1f(t,i.u_intensity),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_up_dir:new e.Uniform3f(t,i.u_up_dir)}),heatmapTexture:(t,i)=>({u_image:new e.Uniform1i(t,i.u_image),u_color_ramp:new e.Uniform1i(t,i.u_color_ramp),u_opacity:new e.Uniform1f(t,i.u_opacity)}),hillshade:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_image:new e.Uniform1i(t,i.u_image),u_latrange:new e.Uniform2f(t,i.u_latrange),u_light:new e.Uniform2f(t,i.u_light),u_shadow:new e.UniformColor(t,i.u_shadow),u_highlight:new e.UniformColor(t,i.u_highlight),u_accent:new e.UniformColor(t,i.u_accent)}),hillshadePrepare:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_image:new e.Uniform1i(t,i.u_image),u_dimension:new e.Uniform2f(t,i.u_dimension),u_zoom:new e.Uniform1f(t,i.u_zoom),u_unpack:new e.Uniform4f(t,i.u_unpack)}),line:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_pixels_to_tile_units:new e.UniformMatrix2f(t,i.u_pixels_to_tile_units),u_device_pixel_ratio:new e.Uniform1f(t,i.u_device_pixel_ratio),u_units_to_pixels:new e.Uniform2f(t,i.u_units_to_pixels),u_dash_image:new e.Uniform1i(t,i.u_dash_image),u_gradient_image:new e.Uniform1i(t,i.u_gradient_image),u_image_height:new e.Uniform1f(t,i.u_image_height),u_texsize:new e.Uniform2f(t,i.u_texsize),u_scale:new e.Uniform3f(t,i.u_scale),u_mix:new e.Uniform1f(t,i.u_mix),u_alpha_discard_threshold:new e.Uniform1f(t,i.u_alpha_discard_threshold)}),linePattern:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_texsize:new e.Uniform2f(t,i.u_texsize),u_pixels_to_tile_units:new e.UniformMatrix2f(t,i.u_pixels_to_tile_units),u_device_pixel_ratio:new e.Uniform1f(t,i.u_device_pixel_ratio),u_image:new e.Uniform1i(t,i.u_image),u_units_to_pixels:new e.Uniform2f(t,i.u_units_to_pixels),u_scale:new e.Uniform3f(t,i.u_scale),u_fade:new e.Uniform1f(t,i.u_fade),u_alpha_discard_threshold:new e.Uniform1f(t,i.u_alpha_discard_threshold)}),raster:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_tl_parent:new e.Uniform2f(t,i.u_tl_parent),u_scale_parent:new e.Uniform1f(t,i.u_scale_parent),u_fade_t:new e.Uniform1f(t,i.u_fade_t),u_opacity:new e.Uniform1f(t,i.u_opacity),u_image0:new e.Uniform1i(t,i.u_image0),u_image1:new e.Uniform1i(t,i.u_image1),u_brightness_low:new e.Uniform1f(t,i.u_brightness_low),u_brightness_high:new e.Uniform1f(t,i.u_brightness_high),u_saturation_factor:new e.Uniform1f(t,i.u_saturation_factor),u_contrast_factor:new e.Uniform1f(t,i.u_contrast_factor),u_spin_weights:new e.Uniform3f(t,i.u_spin_weights),u_perspective_transform:new e.Uniform2f(t,i.u_perspective_transform)}),symbolIcon:(t,i)=>({u_is_size_zoom_constant:new e.Uniform1i(t,i.u_is_size_zoom_constant),u_is_size_feature_constant:new e.Uniform1i(t,i.u_is_size_feature_constant),u_size_t:new e.Uniform1f(t,i.u_size_t),u_size:new e.Uniform1f(t,i.u_size),u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_rotate_symbol:new e.Uniform1i(t,i.u_rotate_symbol),u_aspect_ratio:new e.Uniform1f(t,i.u_aspect_ratio),u_fade_change:new e.Uniform1f(t,i.u_fade_change),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_label_plane_matrix:new e.UniformMatrix4f(t,i.u_label_plane_matrix),u_coord_matrix:new e.UniformMatrix4f(t,i.u_coord_matrix),u_is_text:new e.Uniform1i(t,i.u_is_text),u_pitch_with_map:new e.Uniform1i(t,i.u_pitch_with_map),u_texsize:new e.Uniform2f(t,i.u_texsize),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_camera_forward:new e.Uniform3f(t,i.u_camera_forward),u_tile_matrix:new e.UniformMatrix4f(t,i.u_tile_matrix),u_ecef_origin:new e.Uniform3f(t,i.u_ecef_origin),u_texture:new e.Uniform1i(t,i.u_texture)}),symbolSDF:(t,i)=>({u_is_size_zoom_constant:new e.Uniform1i(t,i.u_is_size_zoom_constant),u_is_size_feature_constant:new e.Uniform1i(t,i.u_is_size_feature_constant),u_size_t:new e.Uniform1f(t,i.u_size_t),u_size:new e.Uniform1f(t,i.u_size),u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_rotate_symbol:new e.Uniform1i(t,i.u_rotate_symbol),u_aspect_ratio:new e.Uniform1f(t,i.u_aspect_ratio),u_fade_change:new e.Uniform1f(t,i.u_fade_change),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_label_plane_matrix:new e.UniformMatrix4f(t,i.u_label_plane_matrix),u_coord_matrix:new e.UniformMatrix4f(t,i.u_coord_matrix),u_is_text:new e.Uniform1i(t,i.u_is_text),u_pitch_with_map:new e.Uniform1i(t,i.u_pitch_with_map),u_texsize:new e.Uniform2f(t,i.u_texsize),u_texture:new e.Uniform1i(t,i.u_texture),u_gamma_scale:new e.Uniform1f(t,i.u_gamma_scale),u_device_pixel_ratio:new e.Uniform1f(t,i.u_device_pixel_ratio),u_tile_id:new e.Uniform3f(t,i.u_tile_id),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_inv_rot_matrix:new e.UniformMatrix4f(t,i.u_inv_rot_matrix),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_camera_forward:new e.Uniform3f(t,i.u_camera_forward),u_tile_matrix:new e.UniformMatrix4f(t,i.u_tile_matrix),u_ecef_origin:new e.Uniform3f(t,i.u_ecef_origin),u_is_halo:new e.Uniform1i(t,i.u_is_halo)}),symbolTextAndIcon:(t,i)=>({u_is_size_zoom_constant:new e.Uniform1i(t,i.u_is_size_zoom_constant),u_is_size_feature_constant:new e.Uniform1i(t,i.u_is_size_feature_constant),u_size_t:new e.Uniform1f(t,i.u_size_t),u_size:new e.Uniform1f(t,i.u_size),u_camera_to_center_distance:new e.Uniform1f(t,i.u_camera_to_center_distance),u_rotate_symbol:new e.Uniform1i(t,i.u_rotate_symbol),u_aspect_ratio:new e.Uniform1f(t,i.u_aspect_ratio),u_fade_change:new e.Uniform1f(t,i.u_fade_change),u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_label_plane_matrix:new e.UniformMatrix4f(t,i.u_label_plane_matrix),u_coord_matrix:new e.UniformMatrix4f(t,i.u_coord_matrix),u_is_text:new e.Uniform1i(t,i.u_is_text),u_pitch_with_map:new e.Uniform1i(t,i.u_pitch_with_map),u_texsize:new e.Uniform2f(t,i.u_texsize),u_texsize_icon:new e.Uniform2f(t,i.u_texsize_icon),u_texture:new e.Uniform1i(t,i.u_texture),u_texture_icon:new e.Uniform1i(t,i.u_texture_icon),u_gamma_scale:new e.Uniform1f(t,i.u_gamma_scale),u_device_pixel_ratio:new e.Uniform1f(t,i.u_device_pixel_ratio),u_is_halo:new e.Uniform1i(t,i.u_is_halo)}),background:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_opacity:new e.Uniform1f(t,i.u_opacity),u_color:new e.UniformColor(t,i.u_color)}),backgroundPattern:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_opacity:new e.Uniform1f(t,i.u_opacity),u_image:new e.Uniform1i(t,i.u_image),u_pattern_tl_a:new e.Uniform2f(t,i.u_pattern_tl_a),u_pattern_br_a:new e.Uniform2f(t,i.u_pattern_br_a),u_pattern_tl_b:new e.Uniform2f(t,i.u_pattern_tl_b),u_pattern_br_b:new e.Uniform2f(t,i.u_pattern_br_b),u_texsize:new e.Uniform2f(t,i.u_texsize),u_mix:new e.Uniform1f(t,i.u_mix),u_pattern_size_a:new e.Uniform2f(t,i.u_pattern_size_a),u_pattern_size_b:new e.Uniform2f(t,i.u_pattern_size_b),u_scale_a:new e.Uniform1f(t,i.u_scale_a),u_scale_b:new e.Uniform1f(t,i.u_scale_b),u_pixel_coord_upper:new e.Uniform2f(t,i.u_pixel_coord_upper),u_pixel_coord_lower:new e.Uniform2f(t,i.u_pixel_coord_lower),u_tile_units_to_pixels:new e.Uniform1f(t,i.u_tile_units_to_pixels)}),terrainRaster:li,terrainDepth:li,skybox:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_sun_direction:new e.Uniform3f(t,i.u_sun_direction),u_cubemap:new e.Uniform1i(t,i.u_cubemap),u_opacity:new e.Uniform1f(t,i.u_opacity),u_temporal_offset:new e.Uniform1f(t,i.u_temporal_offset)}),skyboxGradient:(t,i)=>({u_matrix:new e.UniformMatrix4f(t,i.u_matrix),u_color_ramp:new e.Uniform1i(t,i.u_color_ramp),u_center_direction:new e.Uniform3f(t,i.u_center_direction),u_radius:new e.Uniform1f(t,i.u_radius),u_opacity:new e.Uniform1f(t,i.u_opacity),u_temporal_offset:new e.Uniform1f(t,i.u_temporal_offset)}),skyboxCapture:(t,i)=>({u_matrix_3f:new e.UniformMatrix3f(t,i.u_matrix_3f),u_sun_direction:new e.Uniform3f(t,i.u_sun_direction),u_sun_intensity:new e.Uniform1f(t,i.u_sun_intensity),u_color_tint_r:new e.Uniform4f(t,i.u_color_tint_r),u_color_tint_m:new e.Uniform4f(t,i.u_color_tint_m),u_luminance:new e.Uniform1f(t,i.u_luminance)}),globeRaster:(t,i)=>({u_proj_matrix:new e.UniformMatrix4f(t,i.u_proj_matrix),u_globe_matrix:new e.UniformMatrix4f(t,i.u_globe_matrix),u_merc_matrix:new e.UniformMatrix4f(t,i.u_merc_matrix),u_zoom_transition:new e.Uniform1f(t,i.u_zoom_transition),u_merc_center:new e.Uniform2f(t,i.u_merc_center),u_image0:new e.Uniform1i(t,i.u_image0),u_grid_matrix:new e.UniformMatrix3f(t,i.u_grid_matrix)}),globeAtmosphere:(t,i)=>({u_frustum_tl:new e.Uniform3f(t,i.u_frustum_tl),u_frustum_tr:new e.Uniform3f(t,i.u_frustum_tr),u_frustum_br:new e.Uniform3f(t,i.u_frustum_br),u_frustum_bl:new e.Uniform3f(t,i.u_frustum_bl),u_globe_pos:new e.Uniform3f(t,i.u_globe_pos),u_globe_radius:new e.Uniform1f(t,i.u_globe_radius),u_opacity:new e.Uniform1f(t,i.u_opacity),u_fadeout_range:new e.Uniform1f(t,i.u_fadeout_range),u_start_color:new e.Uniform3f(t,i.u_start_color),u_end_color:new e.Uniform3f(t,i.u_end_color)})};let Qi;function er(t,i,r,n,o,s,a){const l=t.context,c=l.gl,h=t.useProgram("collisionBox"),u=[];let p=0,d=0;for(let v=0;v0){const i=e.create(),r=g;e.mul(i,_.placementInvProjMatrix,t.transform.glCoordMatrix),e.mul(i,i,_.placementViewportMatrix),u.push({circleArray:x,circleOffset:d,transform:r,invTransform:i}),p+=x.length/4,d=p}y&&(t.terrain&&t.terrain.setupElevationDraw(m,h),h.draw(l,c.LINES,e.DepthMode.disabled,e.StencilMode.disabled,t.colorModeForRenderPass(),e.CullFaceMode.disabled,Bi(g,t.transform,m),r.id,y.layoutVertexBuffer,y.indexBuffer,y.segments,null,t.transform.zoom,null,y.collisionVertexBuffer,y.collisionVertexBufferExt))}if(!a||!u.length)return;const f=t.useProgram("collisionCircle"),m=new e.StructArrayLayout2f1f2i16;m.resize(4*p),m._trim();let _=0;for(const e of u)for(let t=0;t=0&&(_[m.associatedIconIndex]={shiftedAnchor:k,angle:D})}else dt(m.numGlyphs,f)}if(u){m.clear();const i=t.icon.placedSymbolArray;for(let t=0;t[0,0,0];ot(l,z.projMatrix,t,o,F,U,g,h,i,z)}const j=y||o&&E||N,G=t.translatePosMatrix(z.projMatrix,n,s,a),Z=j?tr:F,q=t.translatePosMatrix(U,n,s,a,!0),$=m.projection.createInversionMatrix(m,z.canonical),X=j?A.concat(["PROJECTED_POS_ON_VIEWPORT"]):A,W=p&&0!==r.paint.get(o?"text-halo-width":"icon-halo-width").constantOr(1);let H;H=p?l.iconsInText?Hi(d.kind,S,x,g,t,G,Z,q,C,L,z,I,T,$):Wi(d.kind,S,x,g,t,G,Z,q,o,C,!0,z,I,T,$):Xi(d.kind,S,x,g,t,G,Z,q,o,C,z,I,T,$);const Y={program:t.useProgram(nr(p,o,l),u,X),buffers:c,uniformValues:H,atlasTexture:k,atlasTextureIcon:B,atlasInterpolation:D,atlasInterpolationIcon:P,isSDF:p,hasHalo:W,tile:n,labelPlaneMatrixInv:O};if(v&&l.canOverlap){b=!0;const t=c.segments.get();for(const i of t)M.push({segments:new e.SegmentVector([i]),sortKey:i.sortKey,state:Y})}else M.push({segments:c.segments,sortKey:0,state:Y})}b&&M.sort((e,t)=>e.sortKey-t.sortKey);for(const e of M){const i=e.state;if(t.terrain&&t.terrain.setupElevationDraw(i.tile,i.program,{useDepthForOcclusion:!S,labelPlaneMatrixInv:i.labelPlaneMatrixInv}),d.activeTexture.set(f.TEXTURE0),i.atlasTexture.bind(i.atlasInterpolation,f.CLAMP_TO_EDGE),i.atlasTextureIcon&&(d.activeTexture.set(f.TEXTURE1),i.atlasTextureIcon&&i.atlasTextureIcon.bind(i.atlasInterpolationIcon,f.CLAMP_TO_EDGE)),i.isSDF){const n=i.uniformValues;i.hasHalo&&(n.u_is_halo=1,sr(i.buffers,e.segments,r,t,i.program,w,u,p,n)),n.u_is_halo=0}sr(i.buffers,e.segments,r,t,i.program,w,u,p,i.uniformValues)}}function sr(t,i,r,n,o,s,a,l,c){const h=n.context;o.draw(h,h.gl.TRIANGLES,s,a,l,e.CullFaceMode.disabled,c,r.id,t.layoutVertexBuffer,t.indexBuffer,i,r.paint,n.transform.zoom,t.programConfigurations.get(r.id),t.dynamicLayoutVertexBuffer,t.opacityVertexBuffer)}function ar(t,i,r,n,o,s,a){const l=t.context.gl,c=r.paint.get("fill-pattern"),h=c&&c.constantOr(1),u=r.getCrossfadeParameters();let p,d,f,m,_;a?(d=h&&!r.getPaintProperty("fill-outline-color")?"fillOutlinePattern":"fillOutline",p=l.LINES):(d=h?"fillPattern":"fill",p=l.TRIANGLES);for(const g of n){const n=i.getTile(g);if(h&&!n.patternsLoaded())continue;const y=n.getBucket(r);if(!y)continue;t.prepareDrawTile();const x=y.programConfigurations.get(r.id),v=t.useProgram(d,x);h&&(t.context.activeTexture.set(l.TEXTURE0),n.imageAtlasTexture.bind(l.LINEAR,l.CLAMP_TO_EDGE),x.updatePaintBuffers(u));const b=c.constantOr(null);if(b&&n.imageAtlas){const e=n.imageAtlas,t=e.patternPositions[b.to.toString()],i=e.patternPositions[b.from.toString()];t&&i&&x.setConstantPatternPositions(t,i)}const w=t.translatePosMatrix(g.projMatrix,n,r.paint.get("fill-translate"),r.paint.get("fill-translate-anchor"));if(a){m=y.indexBuffer2,_=y.segments2;const e=t.terrain&&t.terrain.renderingToTexture?t.terrain.drapeBufferSize:[l.drawingBufferWidth,l.drawingBufferHeight];f="fillOutlinePattern"===d&&h?ki(w,t,u,n,e):Ci(w,e)}else m=y.indexBuffer,_=y.segments,f=h?zi(w,t,u,n):Ai(w);t.prepareDrawProgram(t.context,v,g.toUnwrapped()),v.draw(t.context,p,o,t.stencilModeForClipping(g),s,e.CullFaceMode.disabled,f,r.id,y.layoutVertexBuffer,m,_,r.paint,t.transform.zoom,x)}}function lr(t,i,r,n,o,s,a){const l=t.context,c=l.gl,h=t.transform,u=r.paint.get("fill-extrusion-pattern"),p=u.constantOr(1),d=r.getCrossfadeParameters(),f=r.paint.get("fill-extrusion-opacity"),m=function(t){if("globe"!==t.projection.name)return 0;const i=Math.PI/32,r=Math.tan(i),n=e.earthRadius;return n*Math.sqrt(1+2*r*r)-n}(h),_="globe"===h.projection.name,g=_?e.globeToMercatorTransition(h.zoom):0,y=[e.mercatorXfromLng(h.center.lng),e.mercatorYfromLat(h.center.lat)],x=[];_&&x.push("PROJECTION_GLOBE_VIEW");for(const v of n){const n=i.getTile(v),b=n.getBucket(r);if(!b||b.projection!==h.projection.name)continue;const w=b.programConfigurations.get(r.id),T=t.useProgram(p?"fillExtrusionPattern":"fillExtrusion",w,x);if(t.terrain){const e=t.terrain;if(t.style.terrainSetForDrapingOnly())e.setupElevationDraw(n,T,{useMeterToDem:!0});else{if(!b.enableTerrain)continue;if(e.setupElevationDraw(n,T,{useMeterToDem:!0}),cr(l,i,v,b,r,e),!b.centroidVertexBuffer){const e=T.attributes.a_centroid_pos;void 0!==e&&c.vertexAttrib2f(e,0,0)}}}p&&(t.context.activeTexture.set(c.TEXTURE0),n.imageAtlasTexture.bind(c.LINEAR,c.CLAMP_TO_EDGE),w.updatePaintBuffers(d));const E=u.constantOr(null);if(E&&n.imageAtlas){const e=n.imageAtlas,t=e.patternPositions[E.to.toString()],i=e.patternPositions[E.from.toString()];t&&i&&w.setConstantPatternPositions(t,i)}const S=t.translatePosMatrix(v.projMatrix,n,r.paint.get("fill-extrusion-translate"),r.paint.get("fill-extrusion-translate-anchor")),I=h.projection.createInversionMatrix(h,v.canonical),M=r.paint.get("fill-extrusion-vertical-gradient"),A=p?Mi(S,t,M,f,v,d,n,m,g,y,I):Ii(S,t,M,f,v,m,g,y,I);t.prepareDrawProgram(l,T,v.toUnwrapped()),T.draw(l,l.gl.TRIANGLES,o,s,a,e.CullFaceMode.backCCW,A,r.id,b.layoutVertexBuffer,b.indexBuffer,b.segments,r.paint,t.transform.zoom,w,t.terrain?b.centroidVertexBuffer:null,_?b.layoutVertexExtBuffer:null)}}function cr(t,i,r,n,o,s){const a=[t=>{let i=t.canonical.x-1,r=t.wrap;return i<0&&(i=(1<{let i=t.canonical.x+1,r=t.wrap;return i===1<new e.OverscaledTileID(t.overscaledZ,t.wrap,t.canonical.z,t.canonical.x,(0===t.canonical.y?1<new e.OverscaledTileID(t.overscaledZ,t.wrap,t.canonical.z,t.canonical.x,t.canonical.y===(1<{const t=i.getSource().minzoom,r=e=>{const t=i.getTileByID(e);if(t&&t.hasData())return t.getBucket(o)},n=[0,-1,1];for(const i of n){if(e.overscaledZ+i(c[0]=Math.min(t.min.y,i.min.y),c[1]=Math.max(t.max.y,i.max.y),c[2]=e.EXTENT-i.min.x>t.max.x?i.min.x-e.EXTENT:t.max.x,c),u=(t,i)=>(c[0]=Math.min(t.min.x,i.min.x),c[1]=Math.max(t.max.x,i.max.x),c[2]=e.EXTENT-i.min.y>t.max.y?i.min.y-e.EXTENT:t.max.y,c),p=[(e,t)=>h(e,t),(e,t)=>h(t,e),(e,t)=>u(e,t),(e,t)=>u(t,e)],d=new e.pointGeometry(0,0);let f,m,_;const g=(t,i,n,o,a)=>{const l=[[o?n:t,o?t:n,0],[o?n:i,o?i:n,0]],c=a<0?e.EXTENT+a:a,h=[o?c:(t+i)/2,o?(t+i)/2:c,0];return 0===n&&a<0||0!==n&&a>0?s.getForTilePoints(_,[h],!0,m):l.push(h),s.getForTilePoints(r,l,!0,f),Math.max(l[0][2],l[1][2],h[2])/s.exaggeration()};for(let y=0;y<4;y++){const t=(y<2?1:5)-y,i=n.borders[y];if(0===i.length)continue;const o=_=a[y](r),c=l(o);if(!(c&&c instanceof e.FillExtrusionBucket&&c.enableTerrain))continue;if(n.borderDoneWithNeighborZ[y]===c.canonical.z&&c.borderDoneWithNeighborZ[t]===n.canonical.z)continue;if(m=s.findDEMTileFor(o),!m||!m.dem)continue;if(!f){const e=s.findDEMTileFor(r);if(!e||!e.dem)return;f=e}const h=c.borders[t];let u=0;const x=c.borderDoneWithNeighborZ[t]!==n.canonical.z;if(n.canonical.z===c.canonical.z){for(let r=0;rs[0]+3));)x&&c.encodeCentroid(void 0,a,!1),u++;if(a&&us[1]-3)&&(r++,++u!==h.length);)a=c.featuresOnBorder[h[u]];if(a=c.featuresOnBorder[h[i]],o.intersectsCount()>1||a.intersectsCount()>1||1!==r){1!==r&&(u=i),n.encodeCentroid(void 0,o,!1),x&&c.encodeCentroid(void 0,a,!1);continue}const l=p[y](o,a),f=y%2?e.EXTENT-1:0;d.x=g(l[0],Math.min(e.EXTENT-1,l[1]),f,y<2,l[2]),d.y=0,n.encodeCentroid(d,o,!1),x&&c.encodeCentroid(d,a,!1)}else n.encodeCentroid(void 0,o,!1)}n.borderDoneWithNeighborZ[y]=c.canonical.z,n.needsCentroidUpdate=!0,x&&(c.borderDoneWithNeighborZ[t]=n.canonical.z,c.needsCentroidUpdate=!0)}else{for(const e of i)n.encodeCentroid(void 0,n.featuresOnBorder[e],!1);if(x){for(const e of h)c.encodeCentroid(void 0,c.featuresOnBorder[e],!1);c.borderDoneWithNeighborZ[t]=n.canonical.z,c.needsCentroidUpdate=!0}n.borderDoneWithNeighborZ[y]=c.canonical.z,n.needsCentroidUpdate=!0}}(n.needsCentroidUpdate||!n.centroidVertexBuffer&&0!==n.centroidVertexArray.length)&&n.uploadCentroid(t)}const hr=new e.Color(1,0,0,1),ur=new e.Color(0,1,0,1),pr=new e.Color(0,0,1,1),dr=new e.Color(1,0,1,1),fr=new e.Color(0,1,1,1);function mr(e,t,i,r){gr(e,0,t+i/2,e.transform.width,i,r)}function _r(e,t,i,r){gr(e,t-i/2,0,i,e.transform.height,r)}function gr(t,i,r,n,o,s){const a=t.context,l=a.gl;l.enable(l.SCISSOR_TEST),l.scissor(i*e.exported.devicePixelRatio,r*e.exported.devicePixelRatio,n*e.exported.devicePixelRatio,o*e.exported.devicePixelRatio),a.clear({color:s}),l.disable(l.SCISSOR_TEST)}function yr(t,i,r){const n=t.context,o=n.gl,s="globe"===t.transform.projection.name,a=r.projMatrix,l=t.useProgram("debug",null,s?["PROJECTION_GLOBE_VIEW"]:null),c=i.getTileByID(r.key);t.terrain&&t.terrain.setupElevationDraw(c,l);const h=e.DepthMode.disabled,u=e.StencilMode.disabled,p=t.colorModeForRenderPass(),d="$debug";n.activeTexture.set(o.TEXTURE0),t.emptyTexture.bind(o.LINEAR,o.CLAMP_TO_EDGE),s?c._makeGlobeTileDebugBuffers(t.context,t.transform.projection):c._makeDebugTileBoundsBuffers(t.context,t.transform.projection);const f=c._tileDebugBuffer||t.debugBuffer,m=c._tileDebugIndexBuffer||t.debugIndexBuffer,_=c._tileDebugSegments||t.debugSegments;l.draw(n,o.LINE_STRIP,h,u,p,e.CullFaceMode.disabled,Ri(a,e.Color.red),d,f,m,_,null,null,null,c._globeTileDebugBorderBuffer);const g=c.latestRawTileData,y=Math.floor((g&&g.byteLength||0)/1024),x=i.getTile(r).tileSize,v=512/Math.min(x,512)*(r.overscaledZ/t.transform.zoom)*.5;let b=r.canonical.toString();r.overscaledZ!==r.canonical.z&&(b+=" => "+r.overscaledZ),function(e,t){e.initDebugOverlayCanvas();const i=e.debugOverlayCanvas,r=e.context.gl,n=e.debugOverlayCanvas.getContext("2d");n.clearRect(0,0,i.width,i.height),n.shadowColor="white",n.shadowBlur=2,n.lineWidth=1.5,n.strokeStyle="white",n.textBaseline="top",n.font="bold 36px Open Sans, sans-serif",n.fillText(t,5,5),n.strokeText(t,5,5),e.debugOverlayTexture.update(i),e.debugOverlayTexture.bind(r.LINEAR,r.CLAMP_TO_EDGE)}(t,`${b} ${y}kb`);const w=c._tileDebugTextBuffer||t.debugBuffer,T=c._tileDebugTextIndexBuffer||t.quadTriangleIndexBuffer,E=c._tileDebugTextSegments||t.debugSegments;l.draw(n,o.TRIANGLES,h,u,e.ColorMode.alphaBlended,e.CullFaceMode.disabled,Ri(a,e.Color.transparent,v),d,w,T,E,null,null,null,c._globeTileDebugTextBuffer)}const xr=e.createLayout([{name:"a_pos_3f",components:3,type:"Float32"}]),{members:vr}=xr;function br(e,t,i,r){e.emplaceBack(t,i,r)}class wr{constructor(t){this.vertexArray=new e.StructArrayLayout3f12,this.indices=new e.StructArrayLayout3ui6,br(this.vertexArray,-1,-1,1),br(this.vertexArray,1,-1,1),br(this.vertexArray,-1,1,1),br(this.vertexArray,1,1,1),br(this.vertexArray,-1,-1,-1),br(this.vertexArray,1,-1,-1),br(this.vertexArray,-1,1,-1),br(this.vertexArray,1,1,-1),this.indices.emplaceBack(5,1,3),this.indices.emplaceBack(3,7,5),this.indices.emplaceBack(6,2,0),this.indices.emplaceBack(0,4,6),this.indices.emplaceBack(2,6,7),this.indices.emplaceBack(7,3,2),this.indices.emplaceBack(5,4,0),this.indices.emplaceBack(0,1,5),this.indices.emplaceBack(0,2,3),this.indices.emplaceBack(3,1,0),this.indices.emplaceBack(7,6,4),this.indices.emplaceBack(4,5,7),this.vertexBuffer=t.createVertexBuffer(this.vertexArray,vr),this.indexBuffer=t.createIndexBuffer(this.indices),this.segment=e.SegmentVector.simpleSegment(0,0,36,12)}}function Tr(t,i,r,n,o,s){const a=t.gl,l=i.paint.get("sky-atmosphere-color"),c=i.paint.get("sky-atmosphere-halo-color"),h=i.paint.get("sky-atmosphere-sun-intensity"),u=((e,t,i,r,n)=>({u_matrix_3f:e,u_sun_direction:t,u_sun_intensity:i,u_color_tint_r:[r.r,r.g,r.b,r.a],u_color_tint_m:[n.r,n.g,n.b,n.a],u_luminance:5e-5}))(e.fromMat4(e.create$1(),n),o,h,l,c);a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_CUBE_MAP_POSITIVE_X+s,i.skyboxTexture,0),r.draw(t,a.TRIANGLES,e.DepthMode.disabled,e.StencilMode.disabled,e.ColorMode.unblended,e.CullFaceMode.frontCW,u,"skyboxCapture",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}function Er(t,i){return e.transformMat4(t,t,i)}const Sr={symbol:function(t,i,r,n,o){if("translucent"!==t.renderPass)return;const s=e.StencilMode.disabled,a=t.colorModeForRenderPass();r.layout.get("text-variable-anchor")&&function(t,i,r,n,o,s,a){const l=i.transform,c="map"===o,h="map"===s;for(const u of t){const t=n.getTile(u),o=t.getBucket(r);if(!o||o.projection!==l.projection.name||!o.text||!o.text.segments.get().length)continue;const s=e.evaluateSizeForZoom(o.textSizeData,l.zoom),p=i.transform.calculatePixelsToTileUnitsMatrix(t),d=Qe(u.projMatrix,t.tileID.canonical,h,c,i.transform,p),f="none"!==r.layout.get("icon-text-fit")&&o.hasIconData();if(s){const i=Math.pow(2,l.zoom-t.tileID.overscaledZ);rr(o,c,h,a,e.symbolSize,l,d,u,i,s,f,l.projection)}}}(n,t,r,i,r.layout.get("text-rotation-alignment"),r.layout.get("text-pitch-alignment"),o),0!==r.paint.get("icon-opacity").constantOr(1)&&or(t,i,r,n,!1,r.paint.get("icon-translate"),r.paint.get("icon-translate-anchor"),r.layout.get("icon-rotation-alignment"),r.layout.get("icon-pitch-alignment"),r.layout.get("icon-keep-upright"),s,a),0!==r.paint.get("text-opacity").constantOr(1)&&or(t,i,r,n,!0,r.paint.get("text-translate"),r.paint.get("text-translate-anchor"),r.layout.get("text-rotation-alignment"),r.layout.get("text-pitch-alignment"),r.layout.get("text-keep-upright"),s,a),i.map.showCollisionBoxes&&(er(t,i,r,n,r.paint.get("text-translate"),r.paint.get("text-translate-anchor"),!0),er(t,i,r,n,r.paint.get("icon-translate"),r.paint.get("icon-translate-anchor"),!1))},circle:function(t,i,r,n){if("translucent"!==t.renderPass)return;const o=r.paint.get("circle-opacity"),s=r.paint.get("circle-stroke-width"),a=r.paint.get("circle-stroke-opacity"),l=void 0!==r.layout.get("circle-sort-key").constantOr(1);if(0===o.constantOr(1)&&(0===s.constantOr(1)||0===a.constantOr(1)))return;const c=t.context,h=c.gl,u=t.transform,p=t.depthModeForSublayer(0,e.DepthMode.ReadOnly),d=e.StencilMode.disabled,f=t.colorModeForRenderPass(),m="globe"===u.projection.name,_=[e.mercatorXfromLng(u.center.lng),e.mercatorYfromLat(u.center.lat)],g=[];for(let x=0;xe.sortKey-t.sortKey);const y={useDepthForOcclusion:!m};for(const x of g){const{programConfiguration:i,program:n,layoutVertexBuffer:o,globeExtVertexBuffer:s,indexBuffer:a,uniformValues:l,tile:_}=x.state,g=x.segments;t.terrain&&t.terrain.setupElevationDraw(_,n,y),t.prepareDrawProgram(c,n,_.tileID.toUnwrapped()),n.draw(c,h.TRIANGLES,p,d,f,e.CullFaceMode.disabled,l,r.id,o,a,g,r.paint,u.zoom,i,m?s:null)}},heatmap:function(t,i,r,n){if(0!==r.paint.get("heatmap-opacity"))if("offscreen"===t.renderPass){const o=t.context,s=o.gl,a=e.StencilMode.disabled,l=new e.ColorMode([s.ONE,s.ONE],e.Color.transparent,[!0,!0,!0,!0]);!function(e,t,i){const r=e.gl;e.activeTexture.set(r.TEXTURE1),e.viewport.set([0,0,t.width/4,t.height/4]);let n=i.heatmapFbo;if(n)r.bindTexture(r.TEXTURE_2D,n.colorAttachment.get()),e.bindFramebuffer.set(n.framebuffer);else{const o=r.createTexture();r.bindTexture(r.TEXTURE_2D,o),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR),n=i.heatmapFbo=e.createFramebuffer(t.width/4,t.height/4,!1),function(e,t,i,r){const n=e.gl;n.texImage2D(n.TEXTURE_2D,0,n.RGBA,t.width/4,t.height/4,0,n.RGBA,e.extRenderToTextureHalfFloat?e.extTextureHalfFloat.HALF_FLOAT_OES:n.UNSIGNED_BYTE,null),r.colorAttachment.set(i)}(e,t,o,n)}}(o,t,r),o.clear({color:e.Color.transparent});const c=t.transform,h="globe"===c.projection.name,u=h?["PROJECTION_GLOBE_VIEW"]:null,p=[e.mercatorXfromLng(c.center.lng),e.mercatorYfromLat(c.center.lat)];for(let d=0;d({u_image:0,u_color_ramp:1,u_opacity:t.paint.get("heatmap-opacity")}))(0,i),i.id,t.viewportBuffer,t.quadTriangleIndexBuffer,t.viewportSegments,i.paint,t.transform.zoom)}(t,r))},line:function(t,i,r,n){if("translucent"!==t.renderPass)return;const o=r.paint.get("line-opacity"),s=r.paint.get("line-width");if(0===o.constantOr(1)||0===s.constantOr(1))return;const a=t.depthModeForSublayer(0,e.DepthMode.ReadOnly),l=t.colorModeForRenderPass(),c=t.terrain&&t.terrain.renderingToTexture?1:e.exported.devicePixelRatio,h=r.paint.get("line-dasharray"),u=h.constantOr(1),p=r.layout.get("line-cap"),d=r.paint.get("line-pattern"),f=d.constantOr(1),m=r.paint.get("line-gradient"),_=r.getCrossfadeParameters(),g=f?"linePattern":"line",y=t.context,x=y.gl,v=(e=>{const t=[];Gi(e)&&t.push("RENDER_LINE_DASH"),e.paint.get("line-gradient")&&t.push("RENDER_LINE_GRADIENT");const i=e.paint.get("line-pattern").constantOr(1),r=1!==e.paint.get("line-opacity").constantOr(1);return!i&&r&&t.push("RENDER_LINE_ALPHA_DISCARD"),t})(r);let b=v.includes("RENDER_LINE_ALPHA_DISCARD");t.terrain&&t.terrain.clipOrMaskOverlapStencilType()&&(b=!1);for(const w of n){const n=i.getTile(w);if(f&&!n.patternsLoaded())continue;const o=n.getBucket(r);if(!o)continue;t.prepareDrawTile();const s=o.programConfigurations.get(r.id),T=t.useProgram(g,s,v),E=d.constantOr(null);if(E&&n.imageAtlas){const e=n.imageAtlas,t=e.patternPositions[E.to.toString()],i=e.patternPositions[E.from.toString()];t&&i&&s.setConstantPatternPositions(t,i)}const S=h.constantOr(null),I=p.constantOr(null);if(!f&&S&&I&&n.lineAtlas){const e=n.lineAtlas,t=e.getDash(S.to,I),i=e.getDash(S.from,I);t&&i&&s.setConstantPatternPositions(t,i)}const M=t.terrain?w.projMatrix:null,A=f?Vi(t,n,r,_,M,c):Ui(t,n,r,_,M,o.lineClipsArray.length,c);if(m){const n=o.gradients[r.id];let s=n.texture;if(r.gradientVersion!==n.version){let a=256;if(r.stepInterpolant){const r=i.getSource().maxzoom,n=w.canonical.z===r?Math.ceil(1<{T.draw(y,x.TRIANGLES,a,i,l,e.CullFaceMode.disabled,A,r.id,o.layoutVertexBuffer,o.indexBuffer,o.segments,r.paint,t.transform.zoom,s,o.layoutVertexBuffer2)};if(b){const i=t.stencilModeForClipping(w).ref;0===i&&t.terrain&&y.clear({stencil:0});const r={func:x.EQUAL,mask:255};A.u_alpha_discard_threshold=.8,z(new e.StencilMode(r,i,255,x.KEEP,x.KEEP,x.INVERT)),A.u_alpha_discard_threshold=0,z(new e.StencilMode(r,i,255,x.KEEP,x.KEEP,x.KEEP))}else z(t.stencilModeForClipping(w))}b&&(t.resetStencilClippingMasks(),t.terrain&&y.clear({stencil:0}))},fill:function(t,i,r,n){const o=r.paint.get("fill-color"),s=r.paint.get("fill-opacity");if(0===s.constantOr(1))return;const a=t.colorModeForRenderPass(),l=r.paint.get("fill-pattern"),c=t.opaquePassEnabledForLayer()&&!l.constantOr(1)&&1===o.constantOr(e.Color.transparent).a&&1===s.constantOr(0)?"opaque":"translucent";if(t.renderPass===c){const o=t.depthModeForSublayer(1,"opaque"===t.renderPass?e.DepthMode.ReadWrite:e.DepthMode.ReadOnly);ar(t,i,r,n,o,a,!1)}if("translucent"===t.renderPass&&r.paint.get("fill-antialias")){const o=t.depthModeForSublayer(r.getPaintProperty("fill-outline-color")?2:0,e.DepthMode.ReadOnly);ar(t,i,r,n,o,a,!0)}},"fill-extrusion":function(t,i,r,n){const o=r.paint.get("fill-extrusion-opacity");if(0!==o&&"translucent"===t.renderPass){const s=new e.DepthMode(t.context.gl.LEQUAL,e.DepthMode.ReadWrite,t.depthRangeFor3D);if(1!==o||r.paint.get("fill-extrusion-pattern").constantOr(1))lr(t,i,r,n,s,e.StencilMode.disabled,e.ColorMode.disabled),lr(t,i,r,n,s,t.stencilModeFor3D(),t.colorModeForRenderPass()),t.resetStencilClippingMasks();else{const o=t.colorModeForRenderPass();lr(t,i,r,n,s,e.StencilMode.disabled,o)}}},hillshade:function(t,i,r,n){if("offscreen"!==t.renderPass&&"translucent"!==t.renderPass)return;const o=t.context,s=t.depthModeForSublayer(0,e.DepthMode.ReadOnly),a=t.colorModeForRenderPass(),l=t.terrain&&t.terrain.renderingToTexture,[c,h]="translucent"!==t.renderPass||l?[{},n]:t.stencilConfigForOverlap(n);for(const u of h){const n=i.getTile(u);if(n.needsHillshadePrepare&&"offscreen"===t.renderPass)ai(t,n,r,s,e.StencilMode.disabled,a);else if("translucent"===t.renderPass){const e=l&&t.terrain?t.terrain.stencilModeForRTTOverlap(u):c[u.overscaledZ];oi(t,u,n,r,s,e,a)}}o.viewport.set([0,0,t.width,t.height]),t.resetStencilClippingMasks()},raster:function(t,i,r,n,o,s){if("translucent"!==t.renderPass)return;if(0===r.paint.get("raster-opacity"))return;if(!n.length)return;const a=t.context,l=a.gl,c=i.getSource(),h=t.useProgram("raster"),u=t.colorModeForRenderPass(),p=t.terrain&&t.terrain.renderingToTexture,[d,f]=c instanceof Ae||p?[{},n]:t.stencilConfigForOverlap(n),m=f[f.length-1].overscaledZ,_=!t.options.moving;for(const g of f){const n=p?e.DepthMode.disabled:t.depthModeForSublayer(g.overscaledZ-m,1===r.paint.get("raster-opacity")?e.DepthMode.ReadWrite:e.DepthMode.ReadOnly,l.LESS),o=g.toUnwrapped(),f=i.getTile(g);if(p&&(!f||!f.hasData()))continue;const y=p?g.projMatrix:t.transform.calculateProjMatrix(o,_),x=t.terrain&&p?t.terrain.stencilModeForRTTOverlap(g):d[g.overscaledZ],v=s?0:r.paint.get("raster-fade-duration");f.registerFadeDuration(v);const b=i.findLoadedParent(g,0),w=_i(f,b,i,t.transform,v);let T,E;t.terrain&&t.terrain.prepareDrawTile();const S="nearest"===r.paint.get("raster-resampling")?l.NEAREST:l.LINEAR;a.activeTexture.set(l.TEXTURE0),f.texture.bind(S,l.CLAMP_TO_EDGE),a.activeTexture.set(l.TEXTURE1),b?(b.texture.bind(S,l.CLAMP_TO_EDGE),T=Math.pow(2,b.tileID.overscaledZ-f.tileID.overscaledZ),E=[f.tileID.canonical.x*T%1,f.tileID.canonical.y*T%1]):f.texture.bind(S,l.CLAMP_TO_EDGE);const I=Zi(y,E||[0,0],T||1,w,r,c instanceof Ae?c.perspectiveTransform:[0,0]);if(t.prepareDrawProgram(a,h,o),c instanceof Ae)c.boundsBuffer&&c.boundsSegments&&h.draw(a,l.TRIANGLES,n,e.StencilMode.disabled,u,e.CullFaceMode.disabled,I,r.id,c.boundsBuffer,t.quadTriangleIndexBuffer,c.boundsSegments);else{const{tileBoundsBuffer:i,tileBoundsIndexBuffer:o,tileBoundsSegments:s}=t.getTileBoundsBuffers(f);h.draw(a,l.TRIANGLES,n,x,u,e.CullFaceMode.disabled,I,r.id,i,o,s)}}t.resetStencilClippingMasks()},background:function(t,i,r,n){const o=r.paint.get("background-color"),s=r.paint.get("background-opacity");if(0===s)return;const a=t.context,l=a.gl,c=t.transform,h=c.tileSize,u=r.paint.get("background-pattern");if(t.isPatternMissing(u))return;const p=!u&&1===o.a&&1===s&&t.opaquePassEnabledForLayer()?"opaque":"translucent";if(t.renderPass!==p)return;const d=e.StencilMode.disabled,f=t.depthModeForSublayer(0,"opaque"===p?e.DepthMode.ReadWrite:e.DepthMode.ReadOnly),m=t.colorModeForRenderPass(),_=t.useProgram(u?"backgroundPattern":"background");let g,y=n;y||(g=t.getBackgroundTiles(),y=Object.values(g).map(e=>e.tileID)),u&&(a.activeTexture.set(l.TEXTURE0),t.imageManager.bind(t.context));const x=r.getCrossfadeParameters();for(const v of y){const p=v.toUnwrapped(),y=n?v.projMatrix:t.transform.calculateProjMatrix(p);t.prepareDrawTile();const b=i?i.getTile(v):g?g[v.key]:new e.Tile(v,h,c.zoom,t),w=u?Ki(y,s,t,u,{tileID:v,tileSize:h},x):Yi(y,s,o);t.prepareDrawProgram(a,_,p);const{tileBoundsBuffer:T,tileBoundsIndexBuffer:E,tileBoundsSegments:S}=t.getTileBoundsBuffers(b);_.draw(a,l.TRIANGLES,f,d,m,e.CullFaceMode.disabled,w,r.id,T,E,S)}},sky:function(t,i,r){const n=t.transform,o="mercator"===n.projection.name||"globe"===n.projection.name?1:e.smoothstep(7,8,n.zoom),s=r.paint.get("sky-opacity")*o;if(0===s)return;const a=t.context,l=r.paint.get("sky-type"),c=new e.DepthMode(a.gl.LEQUAL,e.DepthMode.ReadOnly,[0,1]),h=t.frameCounter/1e3%1;"atmosphere"===l?"offscreen"===t.renderPass?r.needsSkyboxCapture(t)&&(function(t,i,r,n){const o=t.context,s=o.gl;let a=i.skyboxFbo;if(!a){a=i.skyboxFbo=o.createFramebuffer(32,32,!1),i.skyboxGeometry=new wr(o),i.skyboxTexture=o.gl.createTexture(),s.bindTexture(s.TEXTURE_CUBE_MAP,i.skyboxTexture),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_WRAP_S,s.CLAMP_TO_EDGE),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_WRAP_T,s.CLAMP_TO_EDGE),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_MIN_FILTER,s.LINEAR),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_MAG_FILTER,s.LINEAR);for(let e=0;e<6;++e)s.texImage2D(s.TEXTURE_CUBE_MAP_POSITIVE_X+e,0,s.RGBA,32,32,0,s.RGBA,s.UNSIGNED_BYTE,null)}o.bindFramebuffer.set(a.framebuffer),o.viewport.set([0,0,32,32]);const l=i.getCenter(t,!0),c=t.useProgram("skyboxCapture"),h=new Float64Array(16);e.identity(h),e.rotateY(h,h,.5*-Math.PI),Tr(o,i,c,h,l,0),e.identity(h),e.rotateY(h,h,.5*Math.PI),Tr(o,i,c,h,l,1),e.identity(h),e.rotateX(h,h,.5*-Math.PI),Tr(o,i,c,h,l,2),e.identity(h),e.rotateX(h,h,.5*Math.PI),Tr(o,i,c,h,l,3),e.identity(h),Tr(o,i,c,h,l,4),e.identity(h),e.rotateY(h,h,Math.PI),Tr(o,i,c,h,l,5),o.viewport.set([0,0,t.width,t.height])}(t,r),r.markSkyboxValid(t)):"sky"===t.renderPass&&function(t,i,r,n,o){const s=t.context,a=s.gl,l=t.transform,c=t.useProgram("skybox");s.activeTexture.set(a.TEXTURE0),a.bindTexture(a.TEXTURE_CUBE_MAP,i.skyboxTexture);const h=((e,t,i,r,n)=>({u_matrix:e,u_sun_direction:t,u_cubemap:0,u_opacity:r,u_temporal_offset:n}))(l.skyboxMatrix,i.getCenter(t,!1),0,n,o);t.prepareDrawProgram(s,c),c.draw(s,a.TRIANGLES,r,e.StencilMode.disabled,t.colorModeForRenderPass(),e.CullFaceMode.backCW,h,"skybox",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}(t,r,c,s,h):"gradient"===l&&"sky"===t.renderPass&&function(t,i,r,n,o){const s=t.context,a=s.gl,l=t.transform,c=t.useProgram("skyboxGradient");i.skyboxGeometry||(i.skyboxGeometry=new wr(s)),s.activeTexture.set(a.TEXTURE0);let h=i.colorRampTexture;h||(h=i.colorRampTexture=new e.Texture(s,i.colorRamp,a.RGBA)),h.bind(a.LINEAR,a.CLAMP_TO_EDGE);const u=((t,i,r,n,o)=>({u_matrix:t,u_color_ramp:0,u_center_direction:i,u_radius:e.degToRad(r),u_opacity:n,u_temporal_offset:o}))(l.skyboxMatrix,i.getCenter(t,!1),i.paint.get("sky-gradient-radius"),n,o);t.prepareDrawProgram(s,c),c.draw(s,a.TRIANGLES,r,e.StencilMode.disabled,t.colorModeForRenderPass(),e.CullFaceMode.backCW,u,"skyboxGradient",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}(t,r,c,s,h)},debug:function(e,t,i){for(let r=0;rr)return void(this.transform.fogCullDistSq=null);const n=i+.78*(r-i);this.transform.fogCullDistSq=n*n}get terrain(){return this.transform._terrainEnabled()&&this._terrain&&this._terrain.enabled?this._terrain:null}resize(t,i){if(this.width=t*e.exported.devicePixelRatio,this.height=i*e.exported.devicePixelRatio,this.context.viewport.set([0,0,this.width,this.height]),this.style)for(const e of this.style.order)this.style._layers[e].resize()}setup(){const t=this.context,i=new e.StructArrayLayout2i4;i.emplaceBack(0,0),i.emplaceBack(e.EXTENT,0),i.emplaceBack(0,e.EXTENT),i.emplaceBack(e.EXTENT,e.EXTENT),this.tileExtentBuffer=t.createVertexBuffer(i,e.posAttributes.members),this.tileExtentSegments=e.SegmentVector.simpleSegment(0,0,4,2);const r=new e.StructArrayLayout2i4;r.emplaceBack(0,0),r.emplaceBack(e.EXTENT,0),r.emplaceBack(0,e.EXTENT),r.emplaceBack(e.EXTENT,e.EXTENT),this.debugBuffer=t.createVertexBuffer(r,e.posAttributes.members),this.debugSegments=e.SegmentVector.simpleSegment(0,0,4,5);const n=new e.StructArrayLayout2i4;n.emplaceBack(-1,-1),n.emplaceBack(1,-1),n.emplaceBack(-1,1),n.emplaceBack(1,1),this.viewportBuffer=t.createVertexBuffer(n,e.posAttributes.members),this.viewportSegments=e.SegmentVector.simpleSegment(0,0,4,2);const o=new e.StructArrayLayout4i8;o.emplaceBack(0,0,0,0),o.emplaceBack(e.EXTENT,0,e.EXTENT,0),o.emplaceBack(0,e.EXTENT,0,e.EXTENT),o.emplaceBack(e.EXTENT,e.EXTENT,e.EXTENT,e.EXTENT),this.mercatorBoundsBuffer=t.createVertexBuffer(o,e.boundsAttributes.members),this.mercatorBoundsSegments=e.SegmentVector.simpleSegment(0,0,4,2);const s=new e.StructArrayLayout3ui6;s.emplaceBack(0,1,2),s.emplaceBack(2,1,3),this.quadTriangleIndexBuffer=t.createIndexBuffer(s);const a=new e.StructArrayLayout1ui2;for(const e of[0,1,3,2,0])a.emplaceBack(e);this.debugIndexBuffer=t.createIndexBuffer(a),this.emptyTexture=new e.Texture(t,new e.RGBAImage({width:1,height:1},Uint8Array.of(0,0,0,0)),t.gl.RGBA),this.identityMat=e.create();const l=this.context.gl;this.stencilClearMode=new e.StencilMode({func:l.ALWAYS,mask:0},0,255,l.ZERO,l.ZERO,l.ZERO),this.loadTimeStamps.push(e.window.performance.now())}getMercatorTileBoundsBuffers(){return{tileBoundsBuffer:this.mercatorBoundsBuffer,tileBoundsIndexBuffer:this.quadTriangleIndexBuffer,tileBoundsSegments:this.mercatorBoundsSegments}}getTileBoundsBuffers(e){return e._makeTileBoundsBuffers(this.context,this.transform.projection),e._tileBoundsBuffer?{tileBoundsBuffer:e._tileBoundsBuffer,tileBoundsIndexBuffer:e._tileBoundsIndexBuffer,tileBoundsSegments:e._tileBoundsSegments}:this.getMercatorTileBoundsBuffers()}clearStencil(){const t=this.context,i=t.gl;this.nextStencilID=1,this.currentStencilSource=void 0,this._tileClippingMaskIDs.clear(),this._skippedStencilTileIDs.clear(),this.useProgram("clippingMask").draw(t,i.TRIANGLES,e.DepthMode.disabled,this.stencilClearMode,e.ColorMode.disabled,e.CullFaceMode.disabled,mi(this.identityMat),"$clipping",this.viewportBuffer,this.quadTriangleIndexBuffer,this.viewportSegments)}resetStencilClippingMasks(){this.terrain||(this.currentStencilSource=void 0,this._tileClippingMaskIDs.clear(),this._skippedStencilTileIDs.clear())}_renderTileClippingMasks(t,i,r){if(!i||this.currentStencilSource===i.id||!t.isTileClipped()||!r||0===r.length)return;const n=[];let o=!1;if(this._tileClippingMaskIDs&&!this.terrain){for(const e of r)if(this._tileClippingMaskIDs.has(e.key)||(o=!0),this._skippedStencilTileIDs.has(e.key)){if(!i.getTile(e).getBucket(t))continue;this._skippedStencilTileIDs.delete(e.key),n.push(e)}if(!o&&0===n.length)return}const s=this.context,a=s.gl;s.setColorMode(e.ColorMode.disabled),s.setDepthMode(e.DepthMode.disabled);const l=this.useProgram("clippingMask"),c=t=>{const r=i.getTile(t),{tileBoundsBuffer:n,tileBoundsIndexBuffer:o,tileBoundsSegments:c}=this.getTileBoundsBuffers(r);l.draw(s,a.TRIANGLES,e.DepthMode.disabled,new e.StencilMode({func:a.GREATER,mask:255},this._tileClippingMaskIDs.get(t.key)||0,255,a.KEEP,a.KEEP,a.REPLACE),e.ColorMode.disabled,e.CullFaceMode.disabled,mi(t.projMatrix),"$clipping",n,o,c)};if(!o&&n.length>0)for(const e of n)c(e);else{(0===this._tileClippingMaskIDs.size||this.nextStencilID+r.length>256)&&this.clearStencil(),this._tileClippingMaskIDs.clear(),this._skippedStencilTileIDs.clear();for(const e of r)this._tileClippingMaskIDs.set(e.key,this.nextStencilID++),i.getTile(e).getBucket(t)?c(e):this._skippedStencilTileIDs.add(e.key)}0===this._skippedStencilTileIDs.size&&(this.currentStencilSource=i.id)}stencilModeFor3D(){this.currentStencilSource=void 0,this.nextStencilID+1>256&&this.clearStencil();const t=this.nextStencilID++,i=this.context.gl;return new e.StencilMode({func:i.NOTEQUAL,mask:255},t,255,i.KEEP,i.KEEP,i.REPLACE)}stencilModeForClipping(t){if(this.terrain)return this.terrain.stencilModeForRTTOverlap(t);const i=this.context.gl;return new e.StencilMode({func:i.EQUAL,mask:255},this._tileClippingMaskIDs.get(t.key)||0,0,i.KEEP,i.KEEP,i.REPLACE)}stencilConfigForOverlap(t){const i=this.context.gl,r=t.sort((e,t)=>t.overscaledZ-e.overscaledZ),n=r[r.length-1].overscaledZ,o=r[0].overscaledZ-n+1;if(o>1){this.currentStencilSource=void 0,this.nextStencilID+o>256&&this.clearStencil();const t={};for(let r=0;r=0;this.currentLayer--){const e=this.style._layers[r[this.currentLayer]],i=t._getLayerSourceCache(e);if(e.isSky())continue;const n=i?s[i.id]:void 0;this._renderTileClippingMasks(e,i,n),this.renderLayer(this,i,e,n)}if(this.renderPass="sky",(e.globeToMercatorTransition(this.transform.zoom)>0||"globe"!==this.transform.projection.name)&&this.transform.isHorizonVisible())for(this.currentLayer=0;this.currentLayer{const r=t._getLayerSourceCache(e);r&&!e.isHidden(this.transform.zoom)&&(!i||i.getSource().maxzoom0?t.pop():null}isPatternMissing(e){if(!e)return!1;if(!e.from||!e.to)return!0;const t=this.imageManager.getPattern(e.from.toString()),i=this.imageManager.getPattern(e.to.toString());return!t||!i}currentGlobalDefines(){const e=this.terrain&&this.terrain.renderingToTexture,t=this.style&&this.style.fog,i=[];return this.terrain&&!this.terrain.renderingToTexture&&i.push("TERRAIN"),t&&!e&&0!==t.getOpacity(this.transform.pitch)&&i.push("FOG"),e&&i.push("RENDER_TO_TEXTURE"),this._showOverdrawInspector&&i.push("OVERDRAW_INSPECTOR"),i}useProgram(e,t,i){this.cache=this.cache||{};const r=i||[],n=this.currentGlobalDefines().concat(r),o=Ti.cacheKey(e,n,t);return this.cache[o]||(this.cache[o]=new Ti(this.context,e,ti[e],t,Ji[e],n)),this.cache[o]}setCustomLayerDefaults(){this.context.unbindVAO(),this.context.cullFace.setDefault(),this.context.frontFace.setDefault(),this.context.cullFaceSide.setDefault(),this.context.activeTexture.setDefault(),this.context.pixelStoreUnpack.setDefault(),this.context.pixelStoreUnpackPremultiplyAlpha.setDefault(),this.context.pixelStoreUnpackFlipY.setDefault()}setBaseState(){const e=this.context.gl;this.context.cullFace.set(!1),this.context.viewport.set([0,0,this.width,this.height]),this.context.blendEquation.set(e.FUNC_ADD)}initDebugOverlayCanvas(){null==this.debugOverlayCanvas&&(this.debugOverlayCanvas=e.window.document.createElement("canvas"),this.debugOverlayCanvas.width=512,this.debugOverlayCanvas.height=512,this.debugOverlayTexture=new e.Texture(this.context,this.debugOverlayCanvas,this.context.gl.RGBA))}destroy(){this._terrain&&this._terrain.destroy(),this.globeSharedBuffers&&this.globeSharedBuffers.destroy(),this.emptyTexture.destroy(),this.debugOverlayTexture&&this.debugOverlayTexture.destroy()}prepareDrawTile(){this.terrain&&this.terrain.prepareDrawTile()}prepareDrawProgram(e,t,i){if(this.terrain&&this.terrain.renderingToTexture)return;const r=this.style.fog;if(r){const n=r.getOpacity(this.transform.pitch);0!==n&&t.setFogUniformValues(e,((e,t,i,r)=>{const n=t.properties.get("color"),o=e.frameCounter/1e3%1,s=[n.r/n.a,n.g/n.a,n.b/n.a,r];return{u_fog_matrix:i?e.transform.calculateFogTileMatrix(i):e.identityMat,u_fog_range:t.getFovAdjustedRange(e.transform._fov),u_fog_color:s,u_fog_horizon_blend:t.properties.get("horizon-blend"),u_fog_temporal_offset:o}})(this,r,i,n))}}setTileLoadedFlag(e){this.tileLoaded=e}saveCanvasCopy(){this.frameCopies.push(this.canvasCopy()),this.tileLoaded=!1}canvasCopy(){const e=this.context.gl,t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.copyTexImage2D(e.TEXTURE_2D,0,e.RGBA,0,0,e.drawingBufferWidth,e.drawingBufferHeight,0),t}getCanvasCopiesAndTimestamps(){return{canvasCopies:this.frameCopies,timeStamps:this.loadTimeStamps}}averageElevationNeedsEasing(){if(!this.transform._elevation)return!1;const e=this.style&&this.style.fog;return!!e&&0!==e.getOpacity(this.transform.pitch)}getBackgroundTiles(){const t=this._backgroundTiles,i=this._backgroundTiles={},r=this.transform.coveringTiles({tileSize:512});for(const n of r)i[n.key]=t[n.key]||new e.Tile(n,512,this.transform.tileZoom,this);return i}clearBackgroundTiles(){this._backgroundTiles={}}}class Mr{constructor(e=0,t=0,i=0,r=0){if(isNaN(e)||e<0||isNaN(t)||t<0||isNaN(i)||i<0||isNaN(r)||r<0)throw new Error("Invalid value for edge-insets, top, bottom, left and right must all be numbers");this.top=e,this.bottom=t,this.left=i,this.right=r}interpolate(t,i,r){return null!=i.top&&null!=t.top&&(this.top=e.number(t.top,i.top,r)),null!=i.bottom&&null!=t.bottom&&(this.bottom=e.number(t.bottom,i.bottom,r)),null!=i.left&&null!=t.left&&(this.left=e.number(t.left,i.left,r)),null!=i.right&&null!=t.right&&(this.right=e.number(t.right,i.right,r)),this}getCenter(t,i){const r=e.clamp((this.left+t-this.right)/2,0,t),n=e.clamp((this.top+i-this.bottom)/2,0,i);return new e.pointGeometry(r,n)}equals(e){return this.top===e.top&&this.bottom===e.bottom&&this.left===e.left&&this.right===e.right}clone(){return new Mr(this.top,this.bottom,this.left,this.right)}toJSON(){return{top:this.top,bottom:this.bottom,left:this.left,right:this.right}}}function Ar(t,i){const r=e.getColumn(t,3);e.fromQuat(t,i),e.setColumn(t,3,r)}function zr(t,i){const r=e.identity$1([]);return e.rotateZ$1(r,r,-i),e.rotateX$1(r,r,-t),r}function Cr(t,i){const r=[t[0],t[1],0],n=[i[0],i[1],0];if(e.length(r)>=1e-15){const t=e.normalize([],r);e.scale$2(n,t,e.dot(n,t)),i[0]=n[0],i[1]=n[1]}const o=e.cross([],i,t);if(e.len(o)<1e-15)return null;const s=Math.atan2(-o[1],o[0]);return zr(Math.atan2(Math.sqrt(t[0]*t[0]+t[1]*t[1]),-t[2]),s)}class kr{constructor(e,t){this.position=e,this.orientation=t}get position(){return this._position}set position(t){if(t){const i=t instanceof e.MercatorCoordinate?t:new e.MercatorCoordinate(t[0],t[1],t[2]);this._renderWorldCopies&&(i.x=e.wrap(i.x,0,1)),this._position=i}else this._position=null}lookAtPoint(t,i){if(this.orientation=null,!this.position)return;const r=this._elevation?this._elevation.getAtPointOrZero(e.MercatorCoordinate.fromLngLat(t)):0,n=this.position,o=e.MercatorCoordinate.fromLngLat(t,r),s=[o.x-n.x,o.y-n.y,o.z-n.z];i||(i=[0,0,1]),i[2]=Math.abs(i[2]),this.orientation=Cr(s,i)}setPitchBearing(t,i){this.orientation=zr(e.degToRad(t),e.degToRad(-i))}}class Dr{constructor(t,i){this._transform=e.identity([]),this.orientation=i,this.position=t}get mercatorPosition(){const t=this.position;return new e.MercatorCoordinate(t[0],t[1],t[2])}get position(){const t=e.getColumn(this._transform,3);return[t[0],t[1],t[2]]}set position(t){var i;t&&e.setColumn(this._transform,3,[(i=t)[0],i[1],i[2],1])}get orientation(){return this._orientation}set orientation(t){this._orientation=t||e.identity$1([]),t&&Ar(this._transform,this._orientation)}getPitchBearing(){const e=this.forward(),t=this.right();return{bearing:Math.atan2(-t[1],t[0]),pitch:Math.atan2(Math.sqrt(e[0]*e[0]+e[1]*e[1]),-e[2])}}setPitchBearing(e,t){this._orientation=zr(e,t),Ar(this._transform,this._orientation)}forward(){const t=e.getColumn(this._transform,2);return[-t[0],-t[1],-t[2]]}up(){const t=e.getColumn(this._transform,1);return[-t[0],-t[1],-t[2]]}right(){const t=e.getColumn(this._transform,0);return[t[0],t[1],t[2]]}getCameraToWorld(t,i){const r=new Float64Array(16);return e.invert(r,this.getWorldToCamera(t,i)),r}getWorldToCameraPosition(t,i,r){const n=this.position;e.scale$2(n,n,-t);const o=new Float64Array(16);return e.fromScaling(o,[r,r,r]),e.translate(o,o,n),o[10]*=i,o}getWorldToCamera(t,i){const r=new Float64Array(16),n=new Float64Array(4),o=this.position;return e.conjugate(n,this._orientation),e.scale$2(o,o,-t),e.fromQuat(r,n),e.translate(r,r,o),r[1]*=-1,r[5]*=-1,r[9]*=-1,r[13]*=-1,r[8]*=i,r[9]*=i,r[10]*=i,r[11]*=i,r}getCameraToClipPerspective(t,i,r,n){const o=new Float64Array(16);return e.perspective(o,t,i,r,n),o}getDistanceToElevation(t){const i=0===t?0:e.mercatorZfromAltitude(t,this.position[1]),r=this.forward();return(i-this.position[2])/r[2]}clone(){return new Dr([...this.position],[...this.orientation])}}function Pr(t,i){const r=Br(t),n=function(t,i,r,n,o){const s=new e.LngLat(r.lng-180*Rr,r.lat),a=new e.LngLat(r.lng+180*Rr,r.lat),l=t.project(s.lng,s.lat),c=t.project(a.lng,a.lat),h=-Math.atan2(c.y-l.y,c.x-l.x),u=e.MercatorCoordinate.fromLngLat(r);u.y=e.clamp(u.y,-.999975,.999975);const p=u.toLngLat(),d=t.project(p.lng,p.lat),f=e.MercatorCoordinate.fromLngLat(p);f.x+=Rr;const m=f.toLngLat(),_=t.project(m.lng,m.lat),g=Or(_.x-d.x,_.y-d.y,h),y=e.MercatorCoordinate.fromLngLat(p);y.y+=Rr;const x=y.toLngLat(),v=t.project(x.lng,x.lat),b=Or(v.x-d.x,v.y-d.y,h),w=Math.abs(g.x)/Math.abs(b.y),T=e.identity([]);e.rotateZ(T,T,-h*(1-(o?0:n)));const E=e.identity([]);return e.scale(E,E,[1,1-(1-w)*n,1]),E[4]=-b.x/b.y*n,e.rotateZ(E,E,h),e.multiply$1(E,T,E),E}(t.projection,0,t.center,r,i),o=Lr(t);return e.scale(n,n,[o,o,1]),n}function Lr(t){const i=t.projection,r=Br(t),n=Fr(i,t.center),o=Fr(i,e.LngLat.convert(i.center));return Math.pow(2,n*r+(1-r)*o)}function Br(t){const i=t.projection.range;if(!i)return 0;const r=Math.max(t.width,t.height),n=Math.log(r/1024)/Math.LN2;return e.smoothstep(i[0]+n,i[1]+n,t.zoom)}const Rr=1/4e4;function Fr(t,i){const r=e.clamp(i.lat,-e.MAX_MERCATOR_LATITUDE,e.MAX_MERCATOR_LATITUDE),n=new e.LngLat(i.lng-180*Rr,r),o=new e.LngLat(i.lng+180*Rr,r),s=t.project(n.lng,r),a=t.project(o.lng,r),l=e.MercatorCoordinate.fromLngLat(n),c=e.MercatorCoordinate.fromLngLat(o),h=a.x-s.x,u=a.y-s.y,p=c.x-l.x,d=c.y-l.y,f=Math.sqrt((p*p+d*d)/(h*h+u*u));return Math.log(f)/Math.LN2}function Or(e,t,i){const r=Math.cos(i),n=Math.sin(i);return{x:e*r-t*n,y:e*n+t*r}}class Ur{constructor(t,i,r,n,o,s,a){this.tileSize=512,this._renderWorldCopies=void 0===o||o,this._minZoom=t||0,this._maxZoom=i||22,this._minPitch=null==r?0:r,this._maxPitch=null==n?60:n,this.setProjection(s),this.setMaxBounds(a),this.width=0,this.height=0,this._center=new e.LngLat(0,0),this.zoom=0,this.angle=0,this._fov=.6435011087932844,this._pitch=0,this._nearZ=0,this._farZ=0,this._unmodified=!0,this._edgeInsets=new Mr,this._projMatrixCache={},this._alignedProjMatrixCache={},this._fogTileMatrixCache={},this._distanceTileDataCache={},this._camera=new Dr,this._centerAltitude=0,this._centerAltitudeValidForExaggeration=0,this._averageElevation=0,this.cameraElevationReference="ground",this._projectionScaler=1,this._horizonShift=.1}clone(){const e=new Ur(this._minZoom,this._maxZoom,this._minPitch,this.maxPitch,this._renderWorldCopies,this.getProjection());return e._elevation=this._elevation,e._centerAltitude=this._centerAltitude,e._centerAltitudeValidForExaggeration=this._centerAltitudeValidForExaggeration,e.tileSize=this.tileSize,e.width=this.width,e.height=this.height,e.cameraElevationReference=this.cameraElevationReference,e._center=this._center,e._setZoom(this.zoom),e._seaLevelZoom=this._seaLevelZoom,e.angle=this.angle,e._fov=this._fov,e._pitch=this._pitch,e._nearZ=this._nearZ,e._farZ=this._farZ,e._averageElevation=this._averageElevation,e._unmodified=this._unmodified,e._edgeInsets=this._edgeInsets.clone(),e._camera=this._camera.clone(),e._calcMatrices(),e.freezeTileCoverage=this.freezeTileCoverage,e}get elevation(){return this._elevation}set elevation(e){this._elevation!==e&&(this._elevation=e,this._updateCameraOnTerrain(),this._calcMatrices())}updateElevation(e){const t=this._elevation&&this._elevation.exaggeration()!==this._centerAltitudeValidForExaggeration;(null==this._seaLevelZoom||t)&&this._updateCameraOnTerrain(),(e||t)&&this._constrainCameraAltitude(),this._calcMatrices()}getProjection(){return e.pick(this.projection,["name","center","parallels"])}setProjection(t){null==t&&(t={name:"mercator"}),this.projectionOptions=t;const i=this.projection?this.getProjection():void 0;this.projection=e.getProjection(t);const r=this.getProjection();return n(i,r)?null:(this._calcMatrices(),r)}get minZoom(){return this._minZoom}set minZoom(e){this._minZoom!==e&&(this._minZoom=e,this.zoom=Math.max(this.zoom,e))}get maxZoom(){return this._maxZoom}set maxZoom(e){this._maxZoom!==e&&(this._maxZoom=e,this.zoom=Math.min(this.zoom,e))}get minPitch(){return this._minPitch}set minPitch(e){this._minPitch!==e&&(this._minPitch=e,this.pitch=Math.max(this.pitch,e))}get maxPitch(){return this._maxPitch}set maxPitch(e){this._maxPitch!==e&&(this._maxPitch=e,this.pitch=Math.min(this.pitch,e))}get renderWorldCopies(){return this._renderWorldCopies&&!0===this.projection.supportsWorldCopies}set renderWorldCopies(e){void 0===e?e=!0:null===e&&(e=!1),this._renderWorldCopies=e}get worldSize(){return this.tileSize*this.scale}get cameraWorldSize(){const e=Math.max(this._camera.getDistanceToElevation(this._averageElevation),Number.EPSILON);return this._worldSizeFromZoom(this._zoomFromMercatorZ(e))}get pixelsPerMeter(){return this.projection.pixelsPerMeter(this.center.lat,this.worldSize)}get cameraPixelsPerMeter(){return this.projection.pixelsPerMeter(this.center.lat,this.cameraWorldSize)}get centerOffset(){return this.centerPoint._sub(this.size._div(2))}get size(){return new e.pointGeometry(this.width,this.height)}get bearing(){return e.wrap(this.rotation,-180,180)}set bearing(e){this.rotation=e}get rotation(){return-this.angle/Math.PI*180}set rotation(t){const i=-t*Math.PI/180;var r;this.angle!==i&&(this._unmodified=!1,this.angle=i,this._calcMatrices(),this.rotationMatrix=(r=new e.ARRAY_TYPE(4),e.ARRAY_TYPE!=Float32Array&&(r[1]=0,r[2]=0),r[0]=1,r[3]=1,r),function(e,t,i){var r=t[0],n=t[1],o=t[2],s=t[3],a=Math.sin(i),l=Math.cos(i);e[0]=r*l+o*a,e[1]=n*l+s*a,e[2]=r*-a+o*l,e[3]=n*-a+s*l}(this.rotationMatrix,this.rotationMatrix,this.angle))}get pitch(){return this._pitch/Math.PI*180}set pitch(t){const i=e.clamp(t,this.minPitch,this.maxPitch)/180*Math.PI;this._pitch!==i&&(this._unmodified=!1,this._pitch=i,this._calcMatrices())}get fov(){return this._fov/Math.PI*180}set fov(e){e=Math.max(.01,Math.min(60,e)),this._fov!==e&&(this._unmodified=!1,this._fov=e/180*Math.PI,this._calcMatrices())}get averageElevation(){return this._averageElevation}set averageElevation(e){this._averageElevation=e,this._calcFogMatrices(),this._distanceTileDataCache={}}get zoom(){return this._zoom}set zoom(e){const t=Math.min(Math.max(e,this.minZoom),this.maxZoom);this._zoom!==t&&(this._unmodified=!1,this._setZoom(t),this._updateSeaLevelZoom(),this._constrain(),this._calcMatrices())}_setZoom(e){this._zoom=e,this.scale=this.zoomScale(e),this.tileZoom=Math.floor(e),this.zoomFraction=e-this.tileZoom}_updateCameraOnTerrain(){if(!this._elevation||!this._elevation.isDataAvailableAtPoint(this.locationCoordinate(this.center)))return this._centerAltitude=0,this._seaLevelZoom=null,void(this._centerAltitudeValidForExaggeration=0);const e=this._elevation;this._centerAltitude=e.getAtPointOrZero(this.locationCoordinate(this.center)),this._centerAltitudeValidForExaggeration=e.exaggeration(),this._updateSeaLevelZoom()}_updateSeaLevelZoom(){0!==this._centerAltitudeValidForExaggeration&&(this._seaLevelZoom=this._zoomFromMercatorZ((this.pixelsPerMeter*this._centerAltitude+this.cameraToCenterDistance)/this.worldSize))}sampleAverageElevation(){if(!this._elevation)return 0;const t=this._elevation,i=[[.5,.2],[.3,.5],[.5,.5],[.7,.5],[.5,.8]],r=this.horizonLineFromTop();let n=0,o=0;for(let s=0;st.maxzoom&&(i=t.maxzoom);const s=this.locationCoordinate(this.center),a=this.center.lat,l=1<{const i=1/4e4,r=new e.MercatorCoordinate(t.x+i,t.y,t.z),n=new e.MercatorCoordinate(t.x,t.y+i,t.z),o=t.toLngLat(),s=r.toLngLat(),a=n.toLngLat(),l=this.locationCoordinate(o),c=this.locationCoordinate(s),h=this.locationCoordinate(a),u=Math.hypot(c.x-l.x,c.y-l.y),p=Math.hypot(h.x-l.x,h.y-l.y);return Math.sqrt(u*p)*b/i},T=t=>{const i=x,r=v;return{aabb:e.tileAABB(this,l,0,0,0,t,r,i,this.projection),zoom:0,x:0,y:0,minZ:r,maxZ:i,wrap:t,fullyVisible:!1}},E=[];let S=[];const I=i,M=t.reparseOverscaled?r:i,A=e=>e*e,z=A((m-this._centerAltitude)*f),C=e=>{if(!this._elevation||!e.tileID||!o)return;const t=this._elevation.getMinMaxForTile(e.tileID),i=e.aabb;t?(i.min[2]=t.min,i.max[2]=t.max,i.center[2]=(i.min[2]+i.max[2])/2):(e.shouldSplit=k(e),e.shouldSplit||(i.min[2]=i.max[2]=i.center[2]=this._centerAltitude))},k=t=>{if(t.zoom.85?1:r}const c=i*i+o*o+s;return c{if(t*A(.707)0;){const r=E.pop(),s=r.x,a=r.y;let u=r.fullyVisible;if(!u){const e=r.aabb.intersects(p);if(0===e)continue;u=2===e}if(r.zoom!==I&&k(r))for(let t=0;t<4;t++){const i=(s<<1)+t%2,c=(a<<1)+(t>>1),p={aabb:o?r.aabb.quadrant(t):e.tileAABB(this,l,r.zoom+1,i,c,r.wrap,r.minZ,r.maxZ,this.projection),zoom:r.zoom+1,x:i,y:c,wrap:r.wrap,fullyVisible:u,tileID:void 0,shouldSplit:void 0,minZ:r.minZ,maxZ:r.maxZ};n&&!h&&(p.tileID=new e.OverscaledTileID(r.zoom+1===I?M:r.zoom+1,r.wrap,r.zoom+1,i,c),C(p)),E.push(p)}else{const n=r.zoom===I?M:r.zoom;if(t.minzoom&&t.minzoom>n)continue;const o=c[0]-(.5+s+(r.wrap<{const o=[0,0,0,1],s=[e.EXTENT,e.EXTENT,0,1],a=this.calculateFogTileMatrix(n.tileID.toUnwrapped());e.transformMat4$1(o,o,a),e.transformMat4$1(s,s,a);const l=e.getAABBPointSquareDist(o,s);if(0===l)return!0;let c=!1;const h=this._elevation;if(h&&l>i&&0!==r){const i=this.calculateProjMatrix(n.tileID.toUnwrapped());let o;t.isTerrainDEM||(o=h.getMinMaxForTile(n.tileID)),o||(o={min:v,max:x});const s=e.furthestTileCorner(this.rotation),a=[s[0]*e.EXTENT,s[1]*e.EXTENT,o.max];e.transformMat4(a,a,i),c=(1-a[1])*this.height*.5e.distanceSq-t.distanceSq).map(e=>e.tileID)}resize(e,t){this.width=e,this.height=t,this.pixelsToGLUnits=[2/e,-2/t],this._constrain(),this._calcMatrices()}get unmodified(){return this._unmodified}zoomScale(e){return Math.pow(2,e)}scaleZoom(e){return Math.log(e)/Math.LN2}project(t){const i=e.clamp(t.lat,-e.MAX_MERCATOR_LATITUDE,e.MAX_MERCATOR_LATITUDE),r=this.projection.project(t.lng,i);return new e.pointGeometry(r.x*this.worldSize,r.y*this.worldSize)}unproject(e){return this.projection.unproject(e.x/this.worldSize,e.y/this.worldSize)}get point(){return this.project(this.center)}setLocationAtPoint(t,i){let r,n;const o=this.centerPoint;if("globe"===this.projection.name){const e=this.worldSize;r=(i.x-o.x)/e,n=(i.y-o.y)/e}else{const e=this.pointCoordinate(i),t=this.pointCoordinate(o);r=e.x-t.x,n=e.y-t.y}const s=this.locationCoordinate(t);this.setLocation(new e.MercatorCoordinate(s.x-r,s.y-n))}setLocation(e){this.center=this.coordinateLocation(e),this.projection.wrap&&(this.center=this.center.wrap())}locationPoint(e){return this.projection.locationPoint(this,e)}locationPoint3D(e){return this._coordinatePoint(this.locationCoordinate(e),!0)}pointLocation(e){return this.coordinateLocation(this.pointCoordinate(e))}pointLocation3D(e){return this.coordinateLocation(this.pointCoordinate3D(e))}locationCoordinate(t,i){const r=i?e.mercatorZfromAltitude(i,t.lat):void 0,n=this.projection.project(t.lng,t.lat);return new e.MercatorCoordinate(n.x,n.y,r)}coordinateLocation(e){return this.projection.unproject(e.x,e.y)}pointRayIntersection(t,i){const r=null!=i?i:this._centerAltitude,n=[t.x,t.y,0,1],o=[t.x,t.y,1,1];e.transformMat4$1(n,n,this.pixelMatrixInverse),e.transformMat4$1(o,o,this.pixelMatrixInverse);const s=o[3];e.scale$1(n,n,1/n[3]),e.scale$1(o,o,1/s);const a=n[2],l=o[2];return{p0:n,p1:o,t:a===l?0:(r-a)/(l-a)}}screenPointToMercatorRay(t){const i=[t.x,t.y,0,1],r=[t.x,t.y,1,1];return e.transformMat4$1(i,i,this.pixelMatrixInverse),e.transformMat4$1(r,r,this.pixelMatrixInverse),e.scale$1(i,i,1/i[3]),e.scale$1(r,r,1/r[3]),i[2]=e.mercatorZfromAltitude(i[2],this._center.lat)*this.worldSize,r[2]=e.mercatorZfromAltitude(r[2],this._center.lat)*this.worldSize,e.scale$1(i,i,1/this.worldSize),e.scale$1(r,r,1/this.worldSize),new e.Ray([i[0],i[1],i[2]],e.normalize([],e.sub([],r,i)))}rayIntersectionCoordinate(t){const{p0:i,p1:r,t:n}=t,o=e.mercatorZfromAltitude(i[2],this._center.lat),s=e.mercatorZfromAltitude(r[2],this._center.lat);return new e.MercatorCoordinate(e.number(i[0],r[0],n)/this.worldSize,e.number(i[1],r[1],n)/this.worldSize,e.number(o,s,n))}pointCoordinate(e,t=this._centerAltitude){return this.projection.pointCoordinate(this,e.x,e.y,t)}pointCoordinate3D(t){if(!this.elevation)return this.pointCoordinate(t);const i=this.elevation;let r=this.elevation.pointCoordinate(t);if(r)return new e.MercatorCoordinate(r[0],r[1],r[2]);let n=0,o=this.horizonLineFromTop();if(t.y>o)return this.pointCoordinate(t);const s=.02*o,a=t.clone();for(let l=0;l<10&&o-n>s;l++){a.y=e.number(n,o,.66);const t=i.pointCoordinate(a);t?(o=a.y,r=t):n=a.y}return r?new e.MercatorCoordinate(r[0],r[1],r[2]):this.pointCoordinate(t)}isPointAboveHorizon(e){if(this.elevation)return!this.elevation.pointCoordinate(e);{const t=this.horizonLineFromTop();return e.y0?new e.pointGeometry(n[0]/n[3],n[1]/n[3]):new e.pointGeometry(Number.MAX_VALUE,Number.MAX_VALUE)}_getBounds(t,i){const r=new e.pointGeometry(this._edgeInsets.left,this._edgeInsets.top),n=new e.pointGeometry(this.width-this._edgeInsets.right,this._edgeInsets.top),o=new e.pointGeometry(this.width-this._edgeInsets.right,this.height-this._edgeInsets.bottom),s=new e.pointGeometry(this._edgeInsets.left,this.height-this._edgeInsets.bottom);let a=this.pointCoordinate(r,t),l=this.pointCoordinate(n,t);const c=this.pointCoordinate(o,i),h=this.pointCoordinate(s,i),u=(e,t)=>(t.y-e.y)/(t.x-e.x);return a.y>1&&l.y>=0?a=new e.MercatorCoordinate((1-h.y)/u(h,a)+h.x,1):a.y<0&&l.y<=1&&(a=new e.MercatorCoordinate(-h.y/u(h,a)+h.x,0)),l.y>1&&a.y>=0?l=new e.MercatorCoordinate((1-c.y)/u(c,l)+c.x,1):l.y<0&&a.y<=1&&(l=new e.MercatorCoordinate(-c.y/u(c,l)+c.x,0)),(new e.LngLatBounds).extend(this.coordinateLocation(a)).extend(this.coordinateLocation(l)).extend(this.coordinateLocation(h)).extend(this.coordinateLocation(c))}_getBounds3D(){const e=this.elevation;if(!e.visibleDemTiles.length)return this._getBounds(0,0);const t=e.visibleDemTiles.reduce((e,t)=>{if(t.dem){const i=t.dem.tree;e.min=Math.min(e.min,i.minimums[0]),e.max=Math.max(e.max,i.maximums[0])}return e},{min:Number.MAX_VALUE,max:0});return this._getBounds(t.min*e.exaggeration(),t.max*e.exaggeration())}getBounds(){return this._terrainEnabled()?this._getBounds3D():this._getBounds(0,0)}horizonLineFromTop(e=!0){const t=this.height/2/Math.tan(this._fov/2)/Math.tan(Math.max(this._pitch,.1))+this.centerOffset.y,i=this.height/2-t*(1-this._horizonShift);return e?Math.max(0,i):i}getMaxBounds(){return this.maxBounds}setMaxBounds(t){this.maxBounds=t,this.minLat=-e.MAX_MERCATOR_LATITUDE,this.maxLat=e.MAX_MERCATOR_LATITUDE,this.minLng=-180,this.maxLng=180,t&&(this.minLat=t.getSouth(),this.maxLat=t.getNorth(),this.minLng=t.getWest(),this.maxLng=t.getEast(),this.maxLngh&&(s=h-l),h-ct&&(o=t-a),t-e.5?g-1:g,x>.5?x-1:x,0]),this.alignedProjMatrix=v,s=e.create(),e.scale(s,s,[this.width/2,-this.height/2,1]),e.translate(s,s,[1,-1,0]),this.labelPlaneMatrix=s,s=e.create(),e.scale(s,s,[1,-1,1]),e.translate(s,s,[-1,-1,0]),e.scale(s,s,[2/this.width,2/this.height,1]),this.glCoordMatrix=s,this.pixelMatrix=e.multiply$1(new Float64Array(16),this.labelPlaneMatrix,this.projMatrix),this._calcFogMatrices(),this._distanceTileDataCache={},s=e.invert(new Float64Array(16),this.pixelMatrix),!s)throw new Error("failed to invert matrix");this.pixelMatrixInverse=s,this.globeMatrix="globe"===this.projection.name?e.calculateGlobeMatrix(this):s,this._projMatrixCache={},this._alignedProjMatrixCache={},this._pixelsToTileUnitsCache={}}_calcFogMatrices(){this._fogTileMatrixCache={};const t=this.cameraWorldSize,i=this.cameraPixelsPerMeter,r=this._camera.position,n=1/this.height,o=[t,t,i];e.scale$2(o,o,n),e.scale$2(r,r,-1),e.multiply$2(r,r,o);const s=e.create();e.translate(s,s,r),e.scale(s,s,o),this.mercatorFogMatrix=s,this.worldToFogMatrix=this._camera.getWorldToCameraPosition(t,i,n)}_computeCameraPosition(e){const t=(e=e||this.pixelsPerMeter)/this.pixelsPerMeter,i=this._camera.forward(),r=this.point,n=this._mercatorZfromZoom(this._seaLevelZoom?this._seaLevelZoom:this._zoom)*t-e/this.worldSize*this._centerAltitude;return[r.x/this.worldSize-i[0]*n,r.y/this.worldSize-i[1]*n,e/this.worldSize*this._centerAltitude-i[2]*n]}_updateCameraState(){this.height&&(this._camera.setPitchBearing(this._pitch,this.angle),this._camera.position=this._computeCameraPosition())}_translateCameraConstrained(t){const i=this._maxCameraBoundsDistance()*Math.cos(this._pitch),r=t[2];let n=1;r>0&&(n=Math.min((i-this._camera.position[2])/r,1)),this._camera.position=e.scaleAndAdd([],this._camera.position,t,n),this._updateStateFromCamera(),this.projection.wrap&&(this.center=this.center.wrap())}_updateStateFromCamera(){const t=this._camera.position,i=this._camera.forward(),{pitch:r,bearing:n}=this._camera.getPitchBearing(),o=e.mercatorZfromAltitude(this._centerAltitude,this.center.lat)*this._projectionScaler,s=this._mercatorZfromZoom(this._maxZoom)*Math.cos(e.degToRad(this._maxPitch)),a=Math.max((t[2]-o)/Math.cos(r),s),l=this._zoomFromMercatorZ(a);e.scaleAndAdd(t,t,i,a),this._pitch=e.clamp(r,e.degToRad(this.minPitch),e.degToRad(this.maxPitch)),this.angle=e.wrap(n,-Math.PI,Math.PI),this._setZoom(e.clamp(l,this._minZoom,this._maxZoom)),this._updateSeaLevelZoom(),this._center=this.coordinateLocation(new e.MercatorCoordinate(t[0],t[1],t[2])),this._unmodified=!1,this._constrain(),this._calcMatrices()}_worldSizeFromZoom(e){return Math.pow(2,e)*this.tileSize}_mercatorZfromZoom(e){return this.cameraToCenterDistance/this._worldSizeFromZoom(e)}_minimumHeightOverTerrain(){const e=Math.min((null!=this._seaLevelZoom?this._seaLevelZoom:this._zoom)+2,this._maxZoom);return this._mercatorZfromZoom(e)}_zoomFromMercatorZ(e){return this.scaleZoom(this.cameraToCenterDistance/(e*this.tileSize))}_terrainEnabled(){return!(!this._elevation||!this.projection.supportsTerrain&&(e.warnOnce("Terrain is not yet supported with alternate projections. Use mercator to enable terrain."),1))}anyCornerOffEdge(t,i){const r=Math.min(t.x,i.x),n=Math.max(t.x,i.x),o=Math.min(t.y,i.y),s=Math.max(t.y,i.y);if(oc||i.y>1)return!0}return!1}isHorizonVisible(){return this.pitch+e.radToDeg(this.fovAboveCenter)>88||this.anyCornerOffEdge(new e.pointGeometry(0,0),new e.pointGeometry(this.width,this.height))}zoomDeltaToMovement(t,i){const r=e.length(e.sub([],this._camera.position,t)),n=this._zoomFromMercatorZ(r)+i;return r-this._mercatorZfromZoom(n)}getCameraPoint(){const t=Math.tan(this._pitch)*(this.cameraToCenterDistance||1);return this.centerPoint.add(new e.pointGeometry(0,t))}}function Vr(e,t){let i=!1,r=null;const n=()=>{r=null,i&&(e(),r=setTimeout(n,t),i=!1)};return()=>(i=!0,r||n(),r)}class Nr{constructor(t){this._hashName=t&&encodeURIComponent(t),e.bindAll(["_getCurrentHash","_onHashChange","_updateHash"],this),this._updateHash=Vr(this._updateHashUnthrottled.bind(this),300)}addTo(t){return this._map=t,e.window.addEventListener("hashchange",this._onHashChange,!1),t.on("moveend",this._updateHash),this}remove(){return this._map?(this._map.off("moveend",this._updateHash),e.window.removeEventListener("hashchange",this._onHashChange,!1),clearTimeout(this._updateHash()),this._map=void 0,this):this}getHashString(t){const i=this._map;if(!i)return"";const r=i.getCenter(),n=Math.round(100*i.getZoom())/100,o=Math.ceil((n*Math.LN2+Math.log(512/360/.5))/Math.LN10),s=Math.pow(10,o),a=Math.round(r.lng*s)/s,l=Math.round(r.lat*s)/s,c=i.getBearing(),h=i.getPitch();let u="";if(u+=t?`/${a}/${l}/${n}`:`${n}/${l}/${a}`,(c||h)&&(u+="/"+Math.round(10*c)/10),h&&(u+="/"+Math.round(h)),this._hashName){const t=this._hashName;let i=!1;const r=e.window.location.hash.slice(1).split("&").map(e=>{const r=e.split("=")[0];return r===t?(i=!0,`${r}=${u}`):e}).filter(e=>e);return i||r.push(`${t}=${u}`),"#"+r.join("&")}return"#"+u}_getCurrentHash(){const t=e.window.location.hash.replace("#","");if(this._hashName){let e;return t.split("&").map(e=>e.split("=")).forEach(t=>{t[0]===this._hashName&&(e=t)}),(e&&e[1]||"").split("/")}return t.split("/")}_onHashChange(){const e=this._map;if(!e)return!1;const t=this._getCurrentHash();if(t.length>=3&&!t.some(e=>isNaN(e))){const i=e.dragRotate.isEnabled()&&e.touchZoomRotate.isEnabled()?+(t[3]||0):e.getBearing();return e.jumpTo({center:[+t[2],+t[1]],zoom:+t[0],bearing:i,pitch:+(t[4]||0)}),!0}return!1}_updateHashUnthrottled(){const t=e.window.location.href.replace(/(#.+)?$/,this.getHashString());e.window.history.replaceState(e.window.history.state,null,t)}}const jr={linearity:.3,easing:e.bezier(0,0,.3,1)},Gr=e.extend({deceleration:2500,maxSpeed:1400},jr),Zr=e.extend({deceleration:20,maxSpeed:1400},jr),qr=e.extend({deceleration:1e3,maxSpeed:360},jr),$r=e.extend({deceleration:1e3,maxSpeed:90},jr);class Xr{constructor(e){this._map=e,this.clear()}clear(){this._inertiaBuffer=[]}record(t){this._drainInertiaBuffer(),this._inertiaBuffer.push({time:e.exported.now(),settings:t})}_drainInertiaBuffer(){const t=this._inertiaBuffer,i=e.exported.now();for(;t.length>0&&i-t[0].time>160;)t.shift()}_onMoveEnd(t){if(this._drainInertiaBuffer(),this._inertiaBuffer.length<2)return;const i={zoom:0,bearing:0,pitch:0,pan:new e.pointGeometry(0,0),pinchAround:void 0,around:void 0};for(const{settings:e}of this._inertiaBuffer)i.zoom+=e.zoomDelta||0,i.bearing+=e.bearingDelta||0,i.pitch+=e.pitchDelta||0,e.panDelta&&i.pan._add(e.panDelta),e.around&&(i.around=e.around),e.pinchAround&&(i.pinchAround=e.pinchAround);const r=this._inertiaBuffer[this._inertiaBuffer.length-1].time-this._inertiaBuffer[0].time,n={};if(i.pan.mag()){const o=Hr(i.pan.mag(),r,e.extend({},Gr,t||{}));n.offset=i.pan.mult(o.amount/i.pan.mag()),n.center=this._map.transform.center,Wr(n,o)}if(i.zoom){const e=Hr(i.zoom,r,Zr);n.zoom=this._map.transform.zoom+e.amount,Wr(n,e)}if(i.bearing){const t=Hr(i.bearing,r,qr);n.bearing=this._map.transform.bearing+e.clamp(t.amount,-179,179),Wr(n,t)}if(i.pitch){const e=Hr(i.pitch,r,$r);n.pitch=this._map.transform.pitch+e.amount,Wr(n,e)}if(n.zoom||n.bearing){const e=void 0===i.pinchAround?i.around:i.pinchAround;n.around=e?this._map.unproject(e):this._map.getCenter()}return this.clear(),n.noMoveStart=!0,n}}function Wr(e,t){(!e.duration||e.durationi.unproject(e)),a=o.reduce((e,t,i,r)=>e.add(t.div(r.length)),new e.pointGeometry(0,0));super(t,{points:o,point:a,lngLats:s,lngLat:i.unproject(a),originalEvent:r}),this._defaultPrevented=!1}}class Jr extends e.Event{preventDefault(){this._defaultPrevented=!0}get defaultPrevented(){return this._defaultPrevented}constructor(e,t,i){super(e,{originalEvent:i}),this._defaultPrevented=!1}}class Qr{constructor(e,t){this._map=e,this._clickTolerance=t.clickTolerance}reset(){this._mousedownPos=void 0}wheel(e){return this._firePreventable(new Jr(e.type,this._map,e))}mousedown(e,t){return this._mousedownPos=t,this._firePreventable(new Yr(e.type,this._map,e))}mouseup(e){this._map.fire(new Yr(e.type,this._map,e))}preclick(t){const i=e.extend({},t);i.type="preclick",this._map.fire(new Yr(i.type,this._map,i))}click(e,t){this._mousedownPos&&this._mousedownPos.dist(t)>=this._clickTolerance||(this.preclick(e),this._map.fire(new Yr(e.type,this._map,e)))}dblclick(e){return this._firePreventable(new Yr(e.type,this._map,e))}mouseover(e){this._map.fire(new Yr(e.type,this._map,e))}mouseout(e){this._map.fire(new Yr(e.type,this._map,e))}touchstart(e){return this._firePreventable(new Kr(e.type,this._map,e))}touchmove(e){this._map.fire(new Kr(e.type,this._map,e))}touchend(e){this._map.fire(new Kr(e.type,this._map,e))}touchcancel(e){this._map.fire(new Kr(e.type,this._map,e))}_firePreventable(e){if(this._map.fire(e),e.defaultPrevented)return{}}isEnabled(){return!0}isActive(){return!1}enable(){}disable(){}}class en{constructor(e){this._map=e}reset(){this._delayContextMenu=!1,this._contextMenuEvent=void 0}mousemove(e){this._map.fire(new Yr(e.type,this._map,e))}mousedown(){this._delayContextMenu=!0}mouseup(){this._delayContextMenu=!1,this._contextMenuEvent&&(this._map.fire(new Yr("contextmenu",this._map,this._contextMenuEvent)),delete this._contextMenuEvent)}contextmenu(e){this._delayContextMenu?this._contextMenuEvent=e:this._map.fire(new Yr(e.type,this._map,e)),this._map.listens("contextmenu")&&e.preventDefault()}isEnabled(){return!0}isActive(){return!1}enable(){}disable(){}}class tn{constructor(e,t){this._map=e,this._el=e.getCanvasContainer(),this._container=e.getContainer(),this._clickTolerance=t.clickTolerance||1}isEnabled(){return!!this._enabled}isActive(){return!!this._active}enable(){this.isEnabled()||(this._enabled=!0)}disable(){this.isEnabled()&&(this._enabled=!1)}mousedown(e,t){this.isEnabled()&&e.shiftKey&&0===e.button&&(h(),this._startPos=this._lastPos=t,this._active=!0)}mousemoveWindow(e,t){if(!this._active)return;const i=t;if(this._lastPos.equals(i)||!this._box&&i.dist(this._startPos){this._box&&(this._box.style.transform=`translate(${n}px,${a}px)`,this._box.style.width=s-n+"px",this._box.style.height=l-a+"px")})}mouseupWindow(t,i){if(!this._active)return;if(0!==t.button)return;const r=this._startPos,n=i;if(this.reset(),d(),r.x!==n.x||r.y!==n.y)return this._map.fire(new e.Event("boxzoomend",{originalEvent:t})),{cameraAnimation:e=>e.fitScreenCoordinates(r,n,this._map.getBearing(),{linear:!1})};this._fireEvent("boxzoomcancel",t)}keydown(e){this._active&&27===e.keyCode&&(this.reset(),this._fireEvent("boxzoomcancel",e))}blur(){this.reset()}reset(){this._active=!1,this._container.classList.remove("mapboxgl-crosshair"),this._box&&(this._box.remove(),this._box=null),u(),delete this._startPos,delete this._lastPos}_fireEvent(t,i){return this._map.fire(new e.Event(t,{originalEvent:i}))}}function rn(e,t){const i={};for(let r=0;rthis.numTouches)&&(this.aborted=!0),this.aborted||(0===this.startTime&&(this.startTime=t.timeStamp),r.length===this.numTouches&&(this.centroid=function(t){const i=new e.pointGeometry(0,0);for(const e of t)i._add(e);return i.div(t.length)}(i),this.touches=rn(r,i)))}touchmove(e,t,i){if(this.aborted||!this.centroid)return;const r=rn(i,t);for(const n in this.touches){const e=this.touches[n],t=r[n];(!t||t.dist(e)>30)&&(this.aborted=!0)}}touchend(e,t,i){if((!this.centroid||e.timeStamp-this.startTime>500)&&(this.aborted=!0),0===i.length){const e=!this.aborted&&this.centroid;if(this.reset(),e)return e}}}class on{constructor(e){this.singleTap=new nn(e),this.numTaps=e.numTaps,this.reset()}reset(){this.lastTime=1/0,this.lastTap=void 0,this.count=0,this.singleTap.reset()}touchstart(e,t,i){this.singleTap.touchstart(e,t,i)}touchmove(e,t,i){this.singleTap.touchmove(e,t,i)}touchend(e,t,i){const r=this.singleTap.touchend(e,t,i);if(r){const t=e.timeStamp-this.lastTime<500,i=!this.lastTap||this.lastTap.dist(r)<30;if(t&&i||this.reset(),this.count++,this.lastTime=e.timeStamp,this.lastTap=r,this.count===this.numTaps)return this.reset(),r}}}class sn{constructor(){this._zoomIn=new on({numTouches:1,numTaps:2}),this._zoomOut=new on({numTouches:2,numTaps:1}),this.reset()}reset(){this._active=!1,this._zoomIn.reset(),this._zoomOut.reset()}touchstart(e,t,i){this._zoomIn.touchstart(e,t,i),this._zoomOut.touchstart(e,t,i)}touchmove(e,t,i){this._zoomIn.touchmove(e,t,i),this._zoomOut.touchmove(e,t,i)}touchend(e,t,i){const r=this._zoomIn.touchend(e,t,i),n=this._zoomOut.touchend(e,t,i);return r?(this._active=!0,e.preventDefault(),setTimeout(()=>this.reset(),0),{cameraAnimation:t=>t.easeTo({duration:300,zoom:t.getZoom()+1,around:t.unproject(r)},{originalEvent:e})}):n?(this._active=!0,e.preventDefault(),setTimeout(()=>this.reset(),0),{cameraAnimation:t=>t.easeTo({duration:300,zoom:t.getZoom()-1,around:t.unproject(n)},{originalEvent:e})}):void 0}touchcancel(){this.reset()}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}const an={0:1,2:2};class ln{constructor(e){this.reset(),this._clickTolerance=e.clickTolerance||1}blur(){this.reset()}reset(){this._active=!1,this._moved=!1,this._lastPoint=void 0,this._eventButton=void 0}_correctButton(e,t){return!1}_move(e,t){return{}}mousedown(e,t){if(this._lastPoint)return;const i=_(e);this._correctButton(e,i)&&(this._lastPoint=t,this._eventButton=i)}mousemoveWindow(e,t){const i=this._lastPoint;if(i)if(e.preventDefault(),null!=this._eventButton&&function(e,t){const i=an[t];return void 0===e.buttons||(e.buttons&i)!==i}(e,this._eventButton))this.reset();else if(this._moved||!(t.dist(i)0&&(this._active=!0);const n=rn(r,i),o=new e.pointGeometry(0,0),s=new e.pointGeometry(0,0);let a=0;for(const e in n){const t=n[e],i=this._touches[e];i&&(o._add(t),s._add(t.sub(i)),a++,n[e]=t)}if(this._touches=n,a{this._alertContainer.classList.remove("mapboxgl-touch-pan-blocker-show")},500)}}class dn{constructor(){this.reset()}reset(){this._active=!1,this._firstTwoTouches=void 0}_start(e){}_move(e,t,i){return{}}touchstart(e,t,i){this._firstTwoTouches||i.length<2||(this._firstTwoTouches=[i[0].identifier,i[1].identifier],this._start([t[0],t[1]]))}touchmove(e,t,i){const r=this._firstTwoTouches;if(!r)return;e.preventDefault();const[n,o]=r,s=fn(i,t,n),a=fn(i,t,o);if(!s||!a)return;const l=this._aroundCenter?null:s.add(a).div(2);return this._move([s,a],l,e)}touchend(e,t,i){if(!this._firstTwoTouches)return;const[r,n]=this._firstTwoTouches,o=fn(i,t,r),s=fn(i,t,n);o&&s||(this._active&&d(),this.reset())}touchcancel(){this.reset()}enable(e){this._enabled=!0,this._aroundCenter=!!e&&"center"===e.around}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}function fn(e,t,i){for(let r=0;rMath.abs(e.x)}class vn extends dn{constructor(e){super(),this._map=e}reset(){super.reset(),this._valid=void 0,this._firstMove=void 0,this._lastPoints=void 0}_start(e){this._lastPoints=e,xn(e[0].sub(e[1]))&&(this._valid=!1)}_move(e,t,i){const r=this._lastPoints;if(!r)return;const n=e[0].sub(r[0]),o=e[1].sub(r[1]);return this._map._cooperativeGestures&&i.touches.length<3||(this._valid=this.gestureBeginsVertically(n,o,i.timeStamp),!this._valid)?void 0:(this._lastPoints=e,this._active=!0,{pitchDelta:(n.y+o.y)/2*-.5})}gestureBeginsVertically(e,t,i){if(void 0!==this._valid)return this._valid;const r=e.mag()>=2,n=t.mag()>=2;if(!r&&!n)return;if(!r||!n)return null==this._firstMove&&(this._firstMove=i),i-this._firstMove<100&&void 0;const o=e.y>0==t.y>0;return xn(e)&&xn(t)&&o}}const bn={panStep:100,bearingStep:15,pitchStep:10};class wn{constructor(){const e=bn;this._panStep=e.panStep,this._bearingStep=e.bearingStep,this._pitchStep=e.pitchStep,this._rotationDisabled=!1}blur(){this.reset()}reset(){this._active=!1}keydown(e){if(e.altKey||e.ctrlKey||e.metaKey)return;let t=0,i=0,r=0,n=0,o=0;switch(e.keyCode){case 61:case 107:case 171:case 187:t=1;break;case 189:case 109:case 173:t=-1;break;case 37:e.shiftKey?i=-1:(e.preventDefault(),n=-1);break;case 39:e.shiftKey?i=1:(e.preventDefault(),n=1);break;case 38:e.shiftKey?r=1:(e.preventDefault(),o=-1);break;case 40:e.shiftKey?r=-1:(e.preventDefault(),o=1);break;default:return}return this._rotationDisabled&&(i=0,r=0),{cameraAnimation:s=>{const a=s.getZoom();s.easeTo({duration:300,easeId:"keyboardHandler",easing:Tn,zoom:t?Math.round(a)+t*(e.shiftKey?2:1):a,bearing:s.getBearing()+i*this._bearingStep,pitch:s.getPitch()+r*this._pitchStep,offset:[-n*this._panStep,-o*this._panStep],center:s.getCenter()},{originalEvent:e})}}}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}disableRotation(){this._rotationDisabled=!0}enableRotation(){this._rotationDisabled=!1}}function Tn(e){return e*(2-e)}const En=4.000244140625;class Sn{constructor(t,i){this._map=t,this._el=t.getCanvasContainer(),this._handler=i,this._delta=0,this._defaultZoomRate=.01,this._wheelZoomRate=.0022222222222222222,e.bindAll(["_onTimeout","_addScrollZoomBlocker","_showBlockerAlert","_isFullscreen"],this)}setZoomRate(e){this._defaultZoomRate=e}setWheelZoomRate(e){this._wheelZoomRate=e}isEnabled(){return!!this._enabled}isActive(){return!!this._active||void 0!==this._finishTimeout}isZooming(){return!!this._zooming}enable(e){this.isEnabled()||(this._enabled=!0,this._aroundCenter=!!e&&"center"===e.around,this._map._cooperativeGestures&&this._addScrollZoomBlocker())}disable(){this.isEnabled()&&(this._enabled=!1,this._map._cooperativeGestures&&(clearTimeout(this._alertTimer),this._alertContainer.remove()))}wheel(t){if(!this.isEnabled())return;if(this._map._cooperativeGestures){if(!(t.ctrlKey||t.metaKey||this.isZooming()||this._isFullscreen()))return void this._showBlockerAlert();"hidden"!==this._alertContainer.style.visibility&&(this._alertContainer.style.visibility="hidden",clearTimeout(this._alertTimer))}let i=t.deltaMode===e.window.WheelEvent.DOM_DELTA_LINE?40*t.deltaY:t.deltaY;const r=e.exported.now(),n=r-(this._lastWheelEventTime||0);this._lastWheelEventTime=r,0!==i&&i%En==0?this._type="wheel":0!==i&&Math.abs(i)<4?this._type="trackpad":n>400?(this._type=null,this._lastValue=i,this._timeout=setTimeout(this._onTimeout,40,t)):this._type||(this._type=Math.abs(n*i)<200?"trackpad":"wheel",this._timeout&&(clearTimeout(this._timeout),this._timeout=null,i+=this._lastValue)),t.shiftKey&&i&&(i/=4),this._type&&(this._lastWheelEvent=t,this._delta-=i,this._active||this._start(t)),t.preventDefault()}_onTimeout(e){this._type="wheel",this._delta-=this._lastValue,this._active||this._start(e)}_start(e){if(!this._delta)return;this._frameId&&(this._frameId=null),this._active=!0,this.isZooming()||(this._zooming=!0),this._finishTimeout&&(clearTimeout(this._finishTimeout),delete this._finishTimeout);const t=f(this._el,e);this._aroundPoint=this._aroundCenter?this._map.transform.centerPoint:t,this._aroundCoord=this._map.transform.pointCoordinate3D(this._aroundPoint),this._targetZoom=void 0,this._frameId||(this._frameId=!0,this._handler._triggerRenderFrame())}renderFrame(){if(!this._frameId)return;if(this._frameId=null,!this.isActive())return;const t=this._map.transform,i=()=>t._terrainEnabled()&&this._aroundCoord?t.computeZoomRelativeTo(this._aroundCoord):t.zoom;if(0!==this._delta){const e="wheel"===this._type&&Math.abs(this._delta)>En?this._wheelZoomRate:this._defaultZoomRate;let r=2/(1+Math.exp(-Math.abs(this._delta*e)));this._delta<0&&0!==r&&(r=1/r);const n=i(),o=Math.pow(2,n),s="number"==typeof this._targetZoom?t.zoomScale(this._targetZoom):o;this._targetZoom=Math.min(t.maxZoom,Math.max(t.minZoom,t.scaleZoom(s*r))),"wheel"===this._type&&(this._startZoom=i(),this._easing=this._smoothOutEasing(200)),this._delta=0}const r="number"==typeof this._targetZoom?this._targetZoom:i(),n=this._startZoom,o=this._easing;let s,a=!1;if("wheel"===this._type&&n&&o){const t=Math.min((e.exported.now()-this._lastWheelEventTime)/200,1),i=o(t);s=e.number(n,r,i),t<1?this._frameId||(this._frameId=!0):a=!0}else s=r,a=!0;return this._active=!0,a&&(this._active=!1,this._finishTimeout=setTimeout(()=>{this._zooming=!1,this._handler._triggerRenderFrame(),delete this._targetZoom,delete this._finishTimeout},200)),{noInertia:!0,needsRenderFrame:!a,zoomDelta:s-i(),around:this._aroundPoint,aroundCoord:this._aroundCoord,originalEvent:this._lastWheelEvent}}_smoothOutEasing(t){let i=e.ease;if(this._prevEase){const t=this._prevEase,r=(e.exported.now()-t.start)/t.duration,n=t.easing(r+.01)-t.easing(r),o=.27/Math.sqrt(n*n+1e-4)*.01,s=Math.sqrt(.0729-o*o);i=e.bezier(o,s,.25,1)}return this._prevEase={start:e.exported.now(),duration:t,easing:i},i}blur(){this.reset()}reset(){this._active=!1}_addScrollZoomBlocker(){this._map&&!this._alertContainer&&(this._alertContainer=o("div","mapboxgl-scroll-zoom-blocker",this._map._container),this._alertContainer.textContent=/(Mac|iPad)/i.test(e.window.navigator.userAgent)?this._map._getUIString("ScrollZoomBlocker.CmdMessage"):this._map._getUIString("ScrollZoomBlocker.CtrlMessage"),this._alertContainer.style.fontSize=Math.max(10,Math.min(24,Math.floor(.05*this._el.clientWidth)))+"px")}_isFullscreen(){return!!e.window.document.fullscreenElement||!!e.window.document.webkitFullscreenElement}_showBlockerAlert(){"hidden"===this._alertContainer.style.visibility&&(this._alertContainer.style.visibility="visible"),this._alertContainer.classList.add("mapboxgl-scroll-zoom-blocker-show"),clearTimeout(this._alertTimer),this._alertTimer=setTimeout(()=>{this._alertContainer.classList.remove("mapboxgl-scroll-zoom-blocker-show")},200)}}class In{constructor(e,t){this._clickZoom=e,this._tapZoom=t}enable(){this._clickZoom.enable(),this._tapZoom.enable()}disable(){this._clickZoom.disable(),this._tapZoom.disable()}isEnabled(){return this._clickZoom.isEnabled()&&this._tapZoom.isEnabled()}isActive(){return this._clickZoom.isActive()||this._tapZoom.isActive()}}class Mn{constructor(){this.reset()}reset(){this._active=!1}blur(){this.reset()}dblclick(e,t){return e.preventDefault(),{cameraAnimation:i=>{i.easeTo({duration:300,zoom:i.getZoom()+(e.shiftKey?-1:1),around:i.unproject(t)},{originalEvent:e})}}}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}class An{constructor(){this._tap=new on({numTouches:1,numTaps:1}),this.reset()}reset(){this._active=!1,this._swipePoint=void 0,this._swipeTouch=0,this._tapTime=0,this._tap.reset()}touchstart(e,t,i){this._swipePoint||(this._tapTime&&e.timeStamp-this._tapTime>500&&this.reset(),this._tapTime?i.length>0&&(this._swipePoint=t[0],this._swipeTouch=i[0].identifier):this._tap.touchstart(e,t,i))}touchmove(e,t,i){if(this._tapTime){if(this._swipePoint){if(i[0].identifier!==this._swipeTouch)return;const r=t[0],n=r.y-this._swipePoint.y;return this._swipePoint=r,e.preventDefault(),this._active=!0,{zoomDelta:n/128}}}else this._tap.touchmove(e,t,i)}touchend(e,t,i){this._tapTime?this._swipePoint&&0===i.length&&this.reset():this._tap.touchend(e,t,i)&&(this._tapTime=e.timeStamp)}touchcancel(){this.reset()}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}class zn{constructor(e,t,i){this._el=e,this._mousePan=t,this._touchPan=i}enable(e){this._inertiaOptions=e||{},this._mousePan.enable(),this._touchPan.enable(),this._el.classList.add("mapboxgl-touch-drag-pan")}disable(){this._mousePan.disable(),this._touchPan.disable(),this._el.classList.remove("mapboxgl-touch-drag-pan")}isEnabled(){return this._mousePan.isEnabled()&&this._touchPan.isEnabled()}isActive(){return this._mousePan.isActive()||this._touchPan.isActive()}}class Cn{constructor(e,t,i){this._pitchWithRotate=e.pitchWithRotate,this._mouseRotate=t,this._mousePitch=i}enable(){this._mouseRotate.enable(),this._pitchWithRotate&&this._mousePitch.enable()}disable(){this._mouseRotate.disable(),this._mousePitch.disable()}isEnabled(){return this._mouseRotate.isEnabled()&&(!this._pitchWithRotate||this._mousePitch.isEnabled())}isActive(){return this._mouseRotate.isActive()||this._mousePitch.isActive()}}class kn{constructor(e,t,i,r){this._el=e,this._touchZoom=t,this._touchRotate=i,this._tapDragZoom=r,this._rotationDisabled=!1,this._enabled=!0}enable(e){this._touchZoom.enable(e),this._rotationDisabled||this._touchRotate.enable(e),this._tapDragZoom.enable(),this._el.classList.add("mapboxgl-touch-zoom-rotate")}disable(){this._touchZoom.disable(),this._touchRotate.disable(),this._tapDragZoom.disable(),this._el.classList.remove("mapboxgl-touch-zoom-rotate")}isEnabled(){return this._touchZoom.isEnabled()&&(this._rotationDisabled||this._touchRotate.isEnabled())&&this._tapDragZoom.isEnabled()}isActive(){return this._touchZoom.isActive()||this._touchRotate.isActive()||this._tapDragZoom.isActive()}disableRotation(){this._rotationDisabled=!0,this._touchRotate.disable()}enableRotation(){this._rotationDisabled=!1,this._touchZoom.isEnabled()&&this._touchRotate.enable()}}const Dn=e=>e.zoom||e.drag||e.pitch||e.rotate;class Pn extends e.Event{}class Ln{constructor(){this.constants=[1,1,.01],this.radius=0}setup(t,i){const r=e.sub([],i,t);this.radius=e.length(r[2]<0?e.div([],r,this.constants):[r[0],r[1],0])}projectRay(t){e.div(t,t,this.constants),e.normalize(t,t),e.mul$1(t,t,this.constants);const i=e.scale$2([],t,this.radius);if(i[2]>0){const t=e.scale$2([],[0,0,1],e.dot(i,[0,0,1])),r=e.scale$2([],e.normalize([],[i[0],i[1],0]),this.radius),n=e.add([],i,e.scale$2([],e.sub([],e.add([],r,t),i),2));i[0]=n[0],i[1]=n[1]}return i}}function Bn(e){return e.panDelta&&e.panDelta.mag()||e.zoomDelta||e.bearingDelta||e.pitchDelta}class Rn{constructor(t,i){this._map=t,this._el=this._map.getCanvasContainer(),this._handlers=[],this._handlersById={},this._changes=[],this._inertia=new Xr(t),this._bearingSnap=i.bearingSnap,this._previousActiveHandlers={},this._trackingEllipsoid=new Ln,this._dragOrigin=null,this._eventsInProgress={},this._addDefaultHandlers(i),e.bindAll(["handleEvent","handleWindowEvent"],this);const r=this._el;this._listeners=[[r,"touchstart",{passive:!0}],[r,"touchmove",{passive:!1}],[r,"touchend",void 0],[r,"touchcancel",void 0],[r,"mousedown",void 0],[r,"mousemove",void 0],[r,"mouseup",void 0],[e.window.document,"mousemove",{capture:!0}],[e.window.document,"mouseup",void 0],[r,"mouseover",void 0],[r,"mouseout",void 0],[r,"dblclick",void 0],[r,"click",void 0],[r,"keydown",{capture:!1}],[r,"keyup",void 0],[r,"wheel",{passive:!1}],[r,"contextmenu",void 0],[e.window,"blur",void 0]];for(const[n,o,s]of this._listeners)n.addEventListener(o,n===e.window.document?this.handleWindowEvent:this.handleEvent,s)}destroy(){for(const[t,i,r]of this._listeners)t.removeEventListener(i,t===e.window.document?this.handleWindowEvent:this.handleEvent,r)}_addDefaultHandlers(e){const t=this._map,i=t.getCanvasContainer();this._add("mapEvent",new Qr(t,e));const r=t.boxZoom=new tn(t,e);this._add("boxZoom",r);const n=new sn,o=new Mn;t.doubleClickZoom=new In(o,n),this._add("tapZoom",n),this._add("clickZoom",o);const s=new An;this._add("tapDragZoom",s);const a=t.touchPitch=new vn(t);this._add("touchPitch",a);const l=new hn(e),c=new un(e);t.dragRotate=new Cn(e,l,c),this._add("mouseRotate",l,["mousePitch"]),this._add("mousePitch",c,["mouseRotate"]);const h=new cn(e),u=new pn(t,e);t.dragPan=new zn(i,h,u),this._add("mousePan",h),this._add("touchPan",u,["touchZoom","touchRotate"]);const p=new yn,d=new _n;t.touchZoomRotate=new kn(i,d,p,s),this._add("touchRotate",p,["touchPan","touchZoom"]),this._add("touchZoom",d,["touchPan","touchRotate"]),this._add("blockableMapEvent",new en(t));const f=t.scrollZoom=new Sn(t,this);this._add("scrollZoom",f,["mousePan"]);const m=t.keyboard=new wn;this._add("keyboard",m);for(const _ of["boxZoom","doubleClickZoom","tapDragZoom","touchPitch","dragRotate","dragPan","touchZoomRotate","scrollZoom","keyboard"])e.interactive&&e[_]&&t[_].enable(e[_])}_add(e,t,i){this._handlers.push({handlerName:e,handler:t,allowed:i}),this._handlersById[e]=t}stop(e){if(!this._updatingCamera){for(const{handler:e}of this._handlers)e.reset();this._inertia.clear(),this._fireEvents({},{},e),this._changes=[]}}isActive(){for(const{handler:e}of this._handlers)if(e.isActive())return!0;return!1}isZooming(){return!!this._eventsInProgress.zoom||this._map.scrollZoom.isZooming()}isRotating(){return!!this._eventsInProgress.rotate}isMoving(){return!!Dn(this._eventsInProgress)||this.isZooming()}_blockedByActive(e,t,i){for(const r in e)if(r!==i&&(!t||t.indexOf(r)<0))return!0;return!1}handleWindowEvent(e){this.handleEvent(e,e.type+"Window")}_getMapTouches(e){const t=[];for(const i of e)this._el.contains(i.target)&&t.push(i);return t}handleEvent(e,t){this._updatingCamera=!0;const i="renderFrame"===e.type,r=i?void 0:e,n={needsRenderFrame:!1},o={},s={},a=e.touches?this._getMapTouches(e.touches):void 0,l=a?m(this._el,a):i?void 0:f(this._el,e);for(const{handlerName:u,handler:p,allowed:d}of this._handlers){if(!p.isEnabled())continue;let i;this._blockedByActive(s,d,u)?p.reset():p[t||e.type]&&(i=p[t||e.type](e,l,a),this.mergeHandlerResult(n,o,i,u,r),i&&i.needsRenderFrame&&this._triggerRenderFrame()),(i||p.isActive())&&(s[u]=p)}const c={};for(const u in this._previousActiveHandlers)s[u]||(c[u]=r);this._previousActiveHandlers=s,(Object.keys(c).length||Bn(n))&&(this._changes.push([n,o,c]),this._triggerRenderFrame()),(Object.keys(s).length||Bn(n))&&this._map._stop(!0),this._updatingCamera=!1;const{cameraAnimation:h}=n;h&&(this._inertia.clear(),this._fireEvents({},{},!0),this._changes=[],h(this._map))}mergeHandlerResult(t,i,r,n,o){if(!r)return;e.extend(t,r);const s={handlerName:n,originalEvent:r.originalEvent||o};void 0!==r.zoomDelta&&(i.zoom=s),void 0!==r.panDelta&&(i.drag=s),void 0!==r.pitchDelta&&(i.pitch=s),void 0!==r.bearingDelta&&(i.rotate=s)}_applyChanges(){const t={},i={},r={};for(const[n,o,s]of this._changes)n.panDelta&&(t.panDelta=(t.panDelta||new e.pointGeometry(0,0))._add(n.panDelta)),n.zoomDelta&&(t.zoomDelta=(t.zoomDelta||0)+n.zoomDelta),n.bearingDelta&&(t.bearingDelta=(t.bearingDelta||0)+n.bearingDelta),n.pitchDelta&&(t.pitchDelta=(t.pitchDelta||0)+n.pitchDelta),void 0!==n.around&&(t.around=n.around),void 0!==n.aroundCoord&&(t.aroundCoord=n.aroundCoord),void 0!==n.pinchAround&&(t.pinchAround=n.pinchAround),n.noInertia&&(t.noInertia=n.noInertia),e.extend(i,o),e.extend(r,s);this._updateMapTransform(t,i,r),this._changes=[]}_updateMapTransform(t,i,r){const n=this._map,o=n.transform,s=e=>[e.x,e.y,e.z];if((e=>{const t=this._eventsInProgress.drag;return t&&!this._handlersById[t.handlerName].isActive()})()&&!Bn(t)){const e=o.zoom;o.cameraElevationReference="sea",o.recenterOnTerrain(),o.cameraElevationReference="ground",e!==o.zoom&&this._map._update(!0)}if(!Bn(t))return void this._fireEvents(i,r,!0);let{panDelta:a,zoomDelta:l,bearingDelta:c,pitchDelta:h,around:u,aroundCoord:p,pinchAround:d}=t;void 0!==d&&(u=d),(e=>i.drag&&!this._eventsInProgress.drag)()&&u&&(this._dragOrigin=s(o.pointCoordinate3D(u)),this._trackingEllipsoid.setup(o._camera.position,this._dragOrigin)),o.cameraElevationReference="sea",n._stop(!0),u=u||n.transform.centerPoint,c&&(o.bearing+=c),h&&(o.pitch+=h),o._updateCameraState();const f=[0,0,0];if(a){const t=o.pointCoordinate(u);if("globe"===o.projection.name){const i=e.latFromMercatorY(t.y),r=o.center.lat,n=Math.min(e.mercatorZfromAltitude(1,i)/e.mercatorZfromAltitude(1,r),2);a=a.rotate(-o.angle),f[0]=-a.x/o.worldSize*n,f[1]=-a.y/o.worldSize*n}else{const e=o.pointCoordinate(u.sub(a));t&&e&&(f[0]=e.x-t.x,f[1]=e.y-t.y)}}const m=o.zoom,_=[0,0,0];if(l){const t=s(p||o.pointCoordinate3D(u)),i={dir:e.normalize([],e.sub([],t,o._camera.position))};if(i.dir[2]<0){const r=o.zoomDeltaToMovement(t,l);e.scale$2(_,i.dir,r)}}const g=e.add(f,f,_);o._translateCameraConstrained(g),l&&Math.abs(o.zoom-m)>1e-4&&o.recenterOnTerrain(),o.cameraElevationReference="ground",this._map._update(),t.noInertia||this._inertia.record(t),this._fireEvents(i,r,!0)}_fireEvents(t,i,r){const n=Dn(this._eventsInProgress),o=Dn(t),s={};for(const e in t){const{originalEvent:i}=t[e];this._eventsInProgress[e]||(s[e+"start"]=i),this._eventsInProgress[e]=t[e]}!n&&o&&this._fireEvent("movestart",o.originalEvent);for(const e in s)this._fireEvent(e,s[e]);o&&this._fireEvent("move",o.originalEvent);for(const e in t){const{originalEvent:i}=t[e];this._fireEvent(e,i)}const a={};let l;for(const e in this._eventsInProgress){const{handlerName:t,originalEvent:r}=this._eventsInProgress[e];this._handlersById[t].isActive()||(delete this._eventsInProgress[e],l=i[t]||r,a[e+"end"]=l)}for(const e in a)this._fireEvent(e,a[e]);const c=Dn(this._eventsInProgress);if(r&&(n||o)&&!c){this._updatingCamera=!0;const t=this._inertia._onMoveEnd(this._map.dragPan._inertiaOptions),i=e=>0!==e&&-this._bearingSnap{this._frameId=void 0,this.handleEvent(new Pn("renderFrame",{timeStamp:e})),this._applyChanges()})}_triggerRenderFrame(){void 0===this._frameId&&(this._frameId=this._requestFrame())}}const Fn="map.setFreeCameraOptions(...) and map.getFreeCameraOptions() are not yet supported for non-mercator projections.";class On extends e.Evented{constructor(t,i){super(),this._moving=!1,this._zooming=!1,this.transform=t,this._bearingSnap=i.bearingSnap,e.bindAll(["_renderFrameCallback"],this)}getCenter(){return new e.LngLat(this.transform.center.lng,this.transform.center.lat)}setCenter(e,t){return this.jumpTo({center:e},t)}panBy(t,i,r){return t=e.pointGeometry.convert(t).mult(-1),this.panTo(this.transform.center,e.extend({offset:t},i),r)}panTo(t,i,r){return this.easeTo(e.extend({center:t},i),r)}getZoom(){return this.transform.zoom}setZoom(e,t){return this.jumpTo({zoom:e},t),this}zoomTo(t,i,r){return this.easeTo(e.extend({zoom:t},i),r)}zoomIn(e,t){return this.zoomTo(this.getZoom()+1,e,t),this}zoomOut(e,t){return this.zoomTo(this.getZoom()-1,e,t),this}getBearing(){return this.transform.bearing}setBearing(e,t){return this.jumpTo({bearing:e},t),this}getPadding(){return this.transform.padding}setPadding(e,t){return this.jumpTo({padding:e},t),this}rotateTo(t,i,r){return this.easeTo(e.extend({bearing:t},i),r)}resetNorth(t,i){return this.rotateTo(0,e.extend({duration:1e3},t),i),this}resetNorthPitch(t,i){return this.easeTo(e.extend({bearing:0,pitch:0,duration:1e3},t),i),this}snapToNorth(e,t){return Math.abs(this.getBearing())T=>{if(x&&(r.zoom=e.number(n,l,T)),v&&(r.bearing=e.number(o,c,T)),b&&(r.pitch=e.number(s,h,T)),w&&(r.interpolatePadding(a,u,T),d=r.centerPoint.add(p)),g)r.setLocationAtPoint(g,y);else{const e=r.zoomScale(r.zoom-n),t=l>n?Math.min(2,_):Math.max(.5,_),i=Math.pow(t,1-T),o=r.unproject(f.add(m.mult(T*i)).mult(e));r.setLocationAtPoint(r.renderWorldCopies?o.wrap():o,d)}return t.preloadOnly||this._fireMoveEvents(i),r};if(t.preloadOnly){const e=this._emulate(T,t.duration,r);return this._preloadTiles(e),this}const E={moving:this._moving,zooming:this._zooming,rotating:this._rotating,pitching:this._pitching};return this._zooming=x,this._rotating=v,this._pitching=b,this._padding=w,this._easeId=t.easeId,this._prepareEase(i,t.noMoveStart,E),this._ease(T(r),e=>{r.recenterOnTerrain(),this._afterEase(i,e)},t),this}_prepareEase(t,i,r={}){this._moving=!0,this.transform.cameraElevationReference="sea",i||r.moving||this.fire(new e.Event("movestart",t)),this._zooming&&!r.zooming&&this.fire(new e.Event("zoomstart",t)),this._rotating&&!r.rotating&&this.fire(new e.Event("rotatestart",t)),this._pitching&&!r.pitching&&this.fire(new e.Event("pitchstart",t))}_fireMoveEvents(t){this.fire(new e.Event("move",t)),this._zooming&&this.fire(new e.Event("zoom",t)),this._rotating&&this.fire(new e.Event("rotate",t)),this._pitching&&this.fire(new e.Event("pitch",t))}_afterEase(t,i){if(this._easeId&&i&&this._easeId===i)return;this._easeId=void 0,this.transform.cameraElevationReference="ground";const r=this._zooming,n=this._rotating,o=this._pitching;this._moving=!1,this._zooming=!1,this._rotating=!1,this._pitching=!1,this._padding=!1,r&&this.fire(new e.Event("zoomend",t)),n&&this.fire(new e.Event("rotateend",t)),o&&this.fire(new e.Event("pitchend",t)),this.fire(new e.Event("moveend",t))}flyTo(t,i){if(!t.essential&&e.exported.prefersReducedMotion){const r=e.pick(t,["center","zoom","bearing","pitch","around"]);return this.jumpTo(r,i)}this.stop(),t=e.extend({offset:[0,0],speed:1.2,curve:1.42,easing:e.ease},t);const r=this.transform,n=this.getZoom(),o=this.getBearing(),s=this.getPitch(),a=this.getPadding(),l="zoom"in t?e.clamp(+t.zoom,r.minZoom,r.maxZoom):n,c="bearing"in t?this._normalizeBearing(t.bearing,o):o,h="pitch"in t?+t.pitch:s,u="padding"in t?t.padding:r.padding,p=r.zoomScale(l-n),d=e.pointGeometry.convert(t.offset);let f=r.centerPoint.add(d);const m=r.pointLocation(f),_=e.LngLat.convert(t.center||m);this._normalizeCenter(_);const g=r.project(m),y=r.project(_).sub(g);let x=t.curve;const v=Math.max(r.width,r.height),b=v/p,w=y.mag();if("minZoom"in t){const i=e.clamp(Math.min(t.minZoom,n,l),r.minZoom,r.maxZoom),o=v/r.zoomScale(i-n);x=Math.sqrt(o/w*2)}const T=x*x;function E(e){const t=(b*b-v*v+(e?-1:1)*T*T*w*w)/(2*(e?b:v)*T*w);return Math.log(Math.sqrt(t*t+1)-t)}function S(e){return(Math.exp(e)-Math.exp(-e))/2}function I(e){return(Math.exp(e)+Math.exp(-e))/2}const M=E(0);let A=function(e){return I(M)/I(M+x*e)},z=function(e){return v*((I(M)*(S(t=M+x*e)/I(t))-S(M))/T)/w;var t},C=(E(1)-M)/x;if(Math.abs(w)<1e-6||!isFinite(C)){if(Math.abs(v-b)<1e-6)return this.easeTo(t,i);const e=bt.maxDuration&&(t.duration=0);const k=o!==c,D=h!==s,P=!r.isPaddingEqual(u),L=r=>p=>{const m=p*C,x=1/A(m);r.zoom=1===p?l:n+r.scaleZoom(x),k&&(r.bearing=e.number(o,c,p)),D&&(r.pitch=e.number(s,h,p)),P&&(r.interpolatePadding(a,u,p),f=r.centerPoint.add(d));const v=1===p?_:r.unproject(g.add(y.mult(z(m))).mult(x));return r.setLocationAtPoint(r.renderWorldCopies?v.wrap():v,f),r._updateCameraOnTerrain(),t.preloadOnly||this._fireMoveEvents(i),r};if(t.preloadOnly){const e=this._emulate(L,t.duration,r);return this._preloadTiles(e),this}return this._zooming=!0,this._rotating=k,this._pitching=D,this._padding=P,this._prepareEase(i,!1),this._ease(L(r),()=>this._afterEase(i),t),this}isEasing(){return!!this._easeFrameId}stop(){return this._stop()}_stop(e,t){if(this._easeFrameId&&(this._cancelRenderFrame(this._easeFrameId),this._easeFrameId=void 0,this._onEaseFrame=void 0),this._onEaseEnd){const e=this._onEaseEnd;this._onEaseEnd=void 0,e.call(this,t)}if(!e){const e=this.handlers;e&&e.stop(!1)}return this}_ease(t,i,r){!1===r.animate||0===r.duration?(t(1),i()):(this._easeStart=e.exported.now(),this._easeOptions=r,this._onEaseFrame=t,this._onEaseEnd=i,this._easeFrameId=this._requestRenderFrame(this._renderFrameCallback))}_renderFrameCallback(){const t=Math.min((e.exported.now()-this._easeStart)/this._easeOptions.duration,1),i=this._onEaseFrame;i&&i(this._easeOptions.easing(t)),t<1?this._easeFrameId=this._requestRenderFrame(this._renderFrameCallback):this.stop()}_normalizeBearing(t,i){t=e.wrap(t,-180,180);const r=Math.abs(t-i);return Math.abs(t-360-i)180?-360:i<-180?360:0}_emulate(e,t,i){const r=Math.ceil(15*t/1e3),n=[],o=e(i.clone());for(let s=0;s<=r;s++){const e=o(s/r);n.push(e.clone())}return n}}class Un{constructor(t={}){this.options=t,e.bindAll(["_toggleAttribution","_updateEditLink","_updateData","_updateCompact"],this)}getDefaultPosition(){return"bottom-right"}onAdd(e){const t=this.options&&this.options.compact;return this._map=e,this._container=o("div","mapboxgl-ctrl mapboxgl-ctrl-attrib"),this._compactButton=o("button","mapboxgl-ctrl-attrib-button",this._container),o("span","mapboxgl-ctrl-icon",this._compactButton).setAttribute("aria-hidden","true"),this._compactButton.type="button",this._compactButton.addEventListener("click",this._toggleAttribution),this._setElementTitle(this._compactButton,"ToggleAttribution"),this._innerContainer=o("div","mapboxgl-ctrl-attrib-inner",this._container),this._innerContainer.setAttribute("role","list"),t&&this._container.classList.add("mapboxgl-compact"),this._updateAttributions(),this._updateEditLink(),this._map.on("styledata",this._updateData),this._map.on("sourcedata",this._updateData),this._map.on("moveend",this._updateEditLink),void 0===t&&(this._map.on("resize",this._updateCompact),this._updateCompact()),this._container}onRemove(){this._container.remove(),this._map.off("styledata",this._updateData),this._map.off("sourcedata",this._updateData),this._map.off("moveend",this._updateEditLink),this._map.off("resize",this._updateCompact),this._map=void 0,this._attribHTML=void 0}_setElementTitle(e,t){const i=this._map._getUIString("AttributionControl."+t);e.setAttribute("aria-label",i),e.removeAttribute("title"),e.firstElementChild&&e.firstElementChild.setAttribute("title",i)}_toggleAttribution(){this._container.classList.contains("mapboxgl-compact-show")?(this._container.classList.remove("mapboxgl-compact-show"),this._compactButton.setAttribute("aria-expanded","false")):(this._container.classList.add("mapboxgl-compact-show"),this._compactButton.setAttribute("aria-expanded","true"))}_updateEditLink(){let t=this._editLink;t||(t=this._editLink=this._container.querySelector(".mapbox-improve-map"));const i=[{key:"owner",value:this.styleOwner},{key:"id",value:this.styleId},{key:"access_token",value:this._map._requestManager._customAccessToken||e.config.ACCESS_TOKEN}];if(t){const r=i.reduce((e,t,r)=>(t.value&&(e+=`${t.key}=${t.value}${re.length-t.length),e=e.filter((t,i)=>{for(let r=i+1;r=0)return!1;return!0}),this.options.customAttribution&&(Array.isArray(this.options.customAttribution)?e=[...this.options.customAttribution,...e]:e.unshift(this.options.customAttribution));const i=e.join(" | ");i!==this._attribHTML&&(this._attribHTML=i,e.length?(this._innerContainer.innerHTML=i,this._container.classList.remove("mapboxgl-attrib-empty")):this._container.classList.add("mapboxgl-attrib-empty"),this._editLink=null)}_updateCompact(){this._map.getCanvasContainer().offsetWidth<=640?this._container.classList.add("mapboxgl-compact"):this._container.classList.remove("mapboxgl-compact","mapboxgl-compact-show")}}class Vn{constructor(){e.bindAll(["_updateLogo","_updateCompact"],this)}onAdd(e){this._map=e,this._container=o("div","mapboxgl-ctrl");const t=o("a","mapboxgl-ctrl-logo");return t.target="_blank",t.rel="noopener nofollow",t.href="https://www.mapbox.com/",t.setAttribute("aria-label",this._map._getUIString("LogoControl.Title")),t.setAttribute("rel","noopener nofollow"),this._container.appendChild(t),this._container.style.display="none",this._map.on("sourcedata",this._updateLogo),this._updateLogo(),this._map.on("resize",this._updateCompact),this._updateCompact(),this._container}onRemove(){this._container.remove(),this._map.off("sourcedata",this._updateLogo),this._map.off("resize",this._updateCompact)}getDefaultPosition(){return"bottom-left"}_updateLogo(e){e&&"metadata"!==e.sourceDataType||(this._container.style.display=this._logoRequired()?"block":"none")}_logoRequired(){if(!this._map.style)return!0;const e=this._map.style._sourceCaches;if(0===Object.entries(e).length)return!0;for(const t in e){const i=e[t].getSource();if(i.hasOwnProperty("mapbox_logo")&&!i.mapbox_logo)return!1}return!0}_updateCompact(){const e=this._container.children;if(e.length){const t=e[0];this._map.getCanvasContainer().offsetWidth<250?t.classList.add("mapboxgl-compact"):t.classList.remove("mapboxgl-compact")}}}class Nn{constructor(){this._queue=[],this._id=0,this._cleared=!1,this._currentlyRunning=!1}add(e){const t=++this._id;return this._queue.push({callback:e,id:t,cancelled:!1}),t}remove(e){const t=this._currentlyRunning,i=t?this._queue.concat(t):this._queue;for(const r of i)if(r.id===e)return void(r.cancelled=!0)}run(e=0){const t=this._currentlyRunning=this._queue;this._queue=[];for(const i of t)if(!i.cancelled&&(i.callback(e),this._cleared))break;this._cleared=!1,this._currentlyRunning=!1}clear(){this._currentlyRunning&&(this._cleared=!0),this._queue=[]}}function jn(t,i,r){if(t=new e.LngLat(t.lng,t.lat),i){const n=new e.LngLat(t.lng-360,t.lat),o=new e.LngLat(t.lng+360,t.lat),s=360*Math.ceil(Math.abs(t.lng-r.center.lng)/360),a=r.locationPoint(t).distSqr(i),l=i.x<0||i.y<0||i.x>r.width||i.y>r.height;r.locationPoint(n).distSqr(i)180;){const e=r.locationPoint(t);if(e.x>=0&&e.y>=0&&e.x<=r.width&&e.y<=r.height)break;t.lng>r.center.lng?t.lng-=360:t.lng+=360}return t}const Gn={center:"translate(-50%,-50%)",top:"translate(-50%,0)","top-left":"translate(0,0)","top-right":"translate(-100%,0)",bottom:"translate(-50%,-100%)","bottom-left":"translate(0,-100%)","bottom-right":"translate(-100%,-100%)",left:"translate(0,-50%)",right:"translate(-100%,-50%)"};class Zn extends e.Evented{constructor(t,i){if(super(),(t instanceof e.window.HTMLElement||i)&&(t=e.extend({element:t},i)),e.bindAll(["_update","_onMove","_onUp","_addDragHandler","_onMapClick","_onKeyPress","_clearFadeTimer"],this),this._anchor=t&&t.anchor||"center",this._color=t&&t.color||"#3FB1CE",this._scale=t&&t.scale||1,this._draggable=t&&t.draggable||!1,this._clickTolerance=t&&t.clickTolerance||0,this._isDragging=!1,this._state="inactive",this._rotation=t&&t.rotation||0,this._rotationAlignment=t&&t.rotationAlignment||"auto",this._pitchAlignment=t&&t.pitchAlignment&&"auto"!==t.pitchAlignment?t.pitchAlignment:this._rotationAlignment,this._updateMoving=()=>this._update(!0),t&&t.element)this._element=t.element,this._offset=e.pointGeometry.convert(t&&t.offset||[0,0]);else{this._defaultMarker=!0,this._element=o("div");const i=41,r=27,n=s("svg",{display:"block",height:i*this._scale+"px",width:r*this._scale+"px",viewBox:`0 0 ${r} ${i}`},this._element),a=s("radialGradient",{id:"shadowGradient"},s("defs",{},n));s("stop",{offset:"10%","stop-opacity":.4},a),s("stop",{offset:"100%","stop-opacity":.05},a),s("ellipse",{cx:13.5,cy:34.8,rx:10.5,ry:5.25,fill:"url(#shadowGradient)"},n),s("path",{fill:this._color,d:"M27,13.5C27,19.07 20.25,27 14.75,34.5C14.02,35.5 12.98,35.5 12.25,34.5C6.75,27 0,19.22 0,13.5C0,6.04 6.04,0 13.5,0C20.96,0 27,6.04 27,13.5Z"},n),s("path",{opacity:.25,d:"M13.5,0C6.04,0 0,6.04 0,13.5C0,19.22 6.75,27 12.25,34.5C13,35.52 14.02,35.5 14.75,34.5C20.25,27 27,19.07 27,13.5C27,6.04 20.96,0 13.5,0ZM13.5,1C20.42,1 26,6.58 26,13.5C26,15.9 24.5,19.18 22.22,22.74C19.95,26.3 16.71,30.14 13.94,33.91C13.74,34.18 13.61,34.32 13.5,34.44C13.39,34.32 13.26,34.18 13.06,33.91C10.28,30.13 7.41,26.31 5.02,22.77C2.62,19.23 1,15.95 1,13.5C1,6.58 6.58,1 13.5,1Z"},n),s("circle",{fill:"white",cx:13.5,cy:13.5,r:5.5},n),this._offset=e.pointGeometry.convert(t&&t.offset||[0,-14])}this._element.hasAttribute("aria-label")||this._element.setAttribute("aria-label","Map marker"),this._element.classList.add("mapboxgl-marker"),this._element.addEventListener("dragstart",e=>{e.preventDefault()}),this._element.addEventListener("mousedown",e=>{e.preventDefault()});const r=this._element.classList;for(const e in Gn)r.remove("mapboxgl-marker-anchor-"+e);r.add("mapboxgl-marker-anchor-"+this._anchor),this._popup=null}addTo(e){return e===this._map||(this.remove(),this._map=e,e.getCanvasContainer().appendChild(this._element),e.on("move",this._updateMoving),e.on("moveend",this._update),e.on("remove",this._clearFadeTimer),e._addMarker(this),this.setDraggable(this._draggable),this._update(),e.on("click",this._onMapClick)),this}remove(){const e=this._map;return e&&(e.off("click",this._onMapClick),e.off("move",this._updateMoving),e.off("moveend",this._update),e.off("mousedown",this._addDragHandler),e.off("touchstart",this._addDragHandler),e.off("mouseup",this._onUp),e.off("touchend",this._onUp),e.off("mousemove",this._onMove),e.off("touchmove",this._onMove),e.off("remove",this._clearFadeTimer),e._removeMarker(this),this._map=void 0),this._clearFadeTimer(),this._element.remove(),this._popup&&this._popup.remove(),this}getLngLat(){return this._lngLat}setLngLat(t){return this._lngLat=e.LngLat.convert(t),this._pos=null,this._popup&&this._popup.setLngLat(this._lngLat),this._update(!0),this}getElement(){return this._element}setPopup(e){if(this._popup&&(this._popup.remove(),this._popup=null,this._element.removeAttribute("role"),this._element.removeEventListener("keypress",this._onKeyPress),this._originalTabIndex||this._element.removeAttribute("tabindex")),e){if(!("offset"in e.options)){const t=38.1,i=13.5,r=Math.sqrt(Math.pow(i,2)/2);e.options.offset=this._defaultMarker?{top:[0,0],"top-left":[0,0],"top-right":[0,0],bottom:[0,-t],"bottom-left":[r,-1*(t-i+r)],"bottom-right":[-r,-1*(t-i+r)],left:[i,-1*(t-i)],right:[-i,-1*(t-i)]}:this._offset}this._popup=e,this._lngLat&&this._popup.setLngLat(this._lngLat),this._element.setAttribute("role","button"),this._originalTabIndex=this._element.getAttribute("tabindex"),this._originalTabIndex||this._element.setAttribute("tabindex","0"),this._element.addEventListener("keypress",this._onKeyPress),this._element.setAttribute("aria-expanded","false")}return this}_onKeyPress(e){const t=e.code,i=e.charCode||e.keyCode;"Space"!==t&&"Enter"!==t&&32!==i&&13!==i||this.togglePopup()}_onMapClick(e){const t=e.originalEvent.target,i=this._element;this._popup&&(t===i||i.contains(t))&&this.togglePopup()}getPopup(){return this._popup}togglePopup(){const e=this._popup;return e?(e.isOpen()?(e.remove(),this._element.setAttribute("aria-expanded","false")):this._map&&(e.addTo(this._map),this._element.setAttribute("aria-expanded","true")),this):this}_evaluateOpacity(){const e=this._map;if(!e)return;const t=this._pos;if(!t||t.x<0||t.x>e.transform.width||t.y<0||t.y>e.transform.height)return void this._clearFadeTimer();const i=e.unproject(t);let r=!1;if(e.transform._terrainEnabled()&&e.getTerrain()){const t=e.getFreeCameraOptions();if(t.position){const e=t.position.toLngLat();r=e.distanceTo(i)<.9*e.distanceTo(this._lngLat)}}const n=(1-e._queryFogOpacity(i))*(r?.2:1);this._element.style.opacity=""+n,this._popup&&this._popup._setOpacity(""+n),this._fadeTimer=null}_clearFadeTimer(){this._fadeTimer&&(clearTimeout(this._fadeTimer),this._fadeTimer=null)}_updateDOM(){const e=this._pos;if(!e)return;const t=this._offset.mult(this._scale),i=this._calculatePitch(),r=this._calculateRotation();this._element.style.transform=`\n translate(${e.x}px, ${e.y}px) ${Gn[this._anchor]}\n rotateX(${i}deg) rotateZ(${r}deg)\n translate(${t.x}px, ${t.y}px)\n `}_calculatePitch(){return"viewport"===this._pitchAlignment||"auto"===this._pitchAlignment?0:this._map&&"map"===this._pitchAlignment?this._map.getPitch():0}_calculateRotation(){return"viewport"===this._rotationAlignment||"auto"===this._rotationAlignment?this._rotation:this._map&&"map"===this._rotationAlignment?this._rotation-this._map.getBearing():0}_update(t){e.window.cancelAnimationFrame(this._updateFrameId);const i=this._map;i&&(i.transform.renderWorldCopies&&(this._lngLat=jn(this._lngLat,this._pos,i.transform)),this._pos=i.project(this._lngLat),!0===t?this._updateFrameId=e.window.requestAnimationFrame(()=>{this._element&&this._pos&&this._anchor&&(this._pos=this._pos.round(),this._updateDOM())}):this._pos=this._pos.round(),i._requestDomTask(()=>{this._map&&(this._element&&this._pos&&this._anchor&&this._updateDOM(),!i.getTerrain()&&!i.getFog()||this._fadeTimer||(this._fadeTimer=setTimeout(this._evaluateOpacity.bind(this),60)))}))}getOffset(){return this._offset}setOffset(t){return this._offset=e.pointGeometry.convert(t),this._update(),this}_onMove(t){const i=this._map;if(i){if(!this._isDragging){const e=this._clickTolerance||i._clickTolerance;this._isDragging=t.point.dist(this._pointerdownPos)>=e}this._isDragging&&(this._pos=t.point.sub(this._positionDelta),this._lngLat=i.unproject(this._pos),this.setLngLat(this._lngLat),this._element.style.pointerEvents="none","pending"===this._state&&(this._state="active",this.fire(new e.Event("dragstart"))),this.fire(new e.Event("drag")))}}_onUp(){this._element.style.pointerEvents="auto",this._positionDelta=null,this._pointerdownPos=null,this._isDragging=!1;const t=this._map;t&&(t.off("mousemove",this._onMove),t.off("touchmove",this._onMove)),"active"===this._state&&this.fire(new e.Event("dragend")),this._state="inactive"}_addDragHandler(e){const t=this._map;t&&this._element.contains(e.originalEvent.target)&&(e.preventDefault(),this._positionDelta=e.point.sub(this._pos),this._pointerdownPos=e.point,this._state="pending",t.on("mousemove",this._onMove),t.on("touchmove",this._onMove),t.once("mouseup",this._onUp),t.once("touchend",this._onUp))}setDraggable(e){this._draggable=!!e;const t=this._map;return t&&(e?(t.on("mousedown",this._addDragHandler),t.on("touchstart",this._addDragHandler)):(t.off("mousedown",this._addDragHandler),t.off("touchstart",this._addDragHandler))),this}isDraggable(){return this._draggable}setRotation(e){return this._rotation=e||0,this._update(),this}getRotation(){return this._rotation}setRotationAlignment(e){return this._rotationAlignment=e||"auto",this._update(),this}getRotationAlignment(){return this._rotationAlignment}setPitchAlignment(e){return this._pitchAlignment=e&&"auto"!==e?e:this._rotationAlignment,this._update(),this}getPitchAlignment(){return this._pitchAlignment}}class qn{constructor(e){this.jumpTo(e)}getValue(t){if(t<=this._startTime)return this._start;if(t>=this._endTime)return this._end;const i=e.easeCubicInOut((t-this._startTime)/(this._endTime-this._startTime));return this._start*(1-i)+this._end*i}isEasing(e){return e>=this._startTime&&e<=this._endTime}jumpTo(e){this._startTime=-1/0,this._endTime=-1/0,this._start=e,this._end=e}easeTo(e,t,i){this._start=this.getValue(t),this._end=e,this._startTime=t,this._endTime=t+i}}const $n={"AttributionControl.ToggleAttribution":"Toggle attribution","AttributionControl.MapFeedback":"Map feedback","FullscreenControl.Enter":"Enter fullscreen","FullscreenControl.Exit":"Exit fullscreen","GeolocateControl.FindMyLocation":"Find my location","GeolocateControl.LocationNotAvailable":"Location not available","LogoControl.Title":"Mapbox logo","NavigationControl.ResetBearing":"Reset bearing to north","NavigationControl.ZoomIn":"Zoom in","NavigationControl.ZoomOut":"Zoom out","ScaleControl.Feet":"ft","ScaleControl.Meters":"m","ScaleControl.Kilometers":"km","ScaleControl.Miles":"mi","ScaleControl.NauticalMiles":"nm","ScrollZoomBlocker.CtrlMessage":"Use ctrl + scroll to zoom the map","ScrollZoomBlocker.CmdMessage":"Use ⌘ + scroll to zoom the map","TouchPanBlocker.Message":"Use two fingers to move the map"},Xn={center:[0,0],zoom:0,bearing:0,pitch:0,minZoom:-2,maxZoom:22,minPitch:0,maxPitch:85,interactive:!0,scrollZoom:!0,boxZoom:!0,dragRotate:!0,dragPan:!0,keyboard:!0,doubleClickZoom:!0,touchZoomRotate:!0,touchPitch:!0,cooperativeGestures:!1,bearingSnap:7,clickTolerance:3,pitchWithRotate:!0,hash:!1,attributionControl:!0,failIfMajorPerformanceCaveat:!1,preserveDrawingBuffer:!1,trackResize:!0,optimizeForTerrain:!0,renderWorldCopies:!0,refreshExpiredTiles:!0,minTileCacheSize:null,maxTileCacheSize:null,localIdeographFontFamily:"sans-serif",localFontFamily:null,transformRequest:null,accessToken:null,fadeDuration:300,crossSourceCollisions:!0};function Wn(e){e.parentNode&&e.parentNode.removeChild(e)}const Hn={showCompass:!0,showZoom:!0,visualizePitch:!1};class Yn{constructor(t,i,r=!1){this._clickTolerance=10,this.element=i,this.mouseRotate=new hn({clickTolerance:t.dragRotate._mouseRotate._clickTolerance}),this.map=t,r&&(this.mousePitch=new un({clickTolerance:t.dragRotate._mousePitch._clickTolerance})),e.bindAll(["mousedown","mousemove","mouseup","touchstart","touchmove","touchend","reset"],this),i.addEventListener("mousedown",this.mousedown),i.addEventListener("touchstart",this.touchstart,{passive:!1}),i.addEventListener("touchmove",this.touchmove),i.addEventListener("touchend",this.touchend),i.addEventListener("touchcancel",this.reset)}down(e,t){this.mouseRotate.mousedown(e,t),this.mousePitch&&this.mousePitch.mousedown(e,t),h()}move(e,t){const i=this.map,r=this.mouseRotate.mousemoveWindow(e,t),n=r&&r.bearingDelta;if(n&&i.setBearing(i.getBearing()+n),this.mousePitch){const r=this.mousePitch.mousemoveWindow(e,t),n=r&&r.pitchDelta;n&&i.setPitch(i.getPitch()+n)}}off(){const e=this.element;e.removeEventListener("mousedown",this.mousedown),e.removeEventListener("touchstart",this.touchstart,{passive:!1}),e.removeEventListener("touchmove",this.touchmove),e.removeEventListener("touchend",this.touchend),e.removeEventListener("touchcancel",this.reset),this.offTemp()}offTemp(){u(),e.window.removeEventListener("mousemove",this.mousemove),e.window.removeEventListener("mouseup",this.mouseup)}mousedown(t){this.down(e.extend({},t,{ctrlKey:!0,preventDefault:()=>t.preventDefault()}),f(this.element,t)),e.window.addEventListener("mousemove",this.mousemove),e.window.addEventListener("mouseup",this.mouseup)}mousemove(e){this.move(e,f(this.element,e))}mouseup(e){this.mouseRotate.mouseupWindow(e),this.mousePitch&&this.mousePitch.mouseupWindow(e),this.offTemp()}touchstart(e){1!==e.targetTouches.length?this.reset():(this._startPos=this._lastPos=m(this.element,e.targetTouches)[0],this.down({type:"mousedown",button:0,ctrlKey:!0,preventDefault:()=>e.preventDefault()},this._startPos))}touchmove(e){1!==e.targetTouches.length?this.reset():(this._lastPos=m(this.element,e.targetTouches)[0],this.move({preventDefault:()=>e.preventDefault()},this._lastPos))}touchend(e){0===e.targetTouches.length&&this._startPos&&this._lastPos&&this._startPos.dist(this._lastPos)5280?ro(t,r,i/5280,e._getUIString("ScaleControl.Miles"),e):ro(t,r,i,e._getUIString("ScaleControl.Feet"),e)}else i&&"nautical"===i.unit?ro(t,r,l/1852,e._getUIString("ScaleControl.NauticalMiles"),e):l>=1e3?ro(t,r,l/1e3,e._getUIString("ScaleControl.Kilometers"),e):ro(t,r,l,e._getUIString("ScaleControl.Meters"),e)}function ro(e,t,i,r,n){const o=function(e){const t=Math.pow(10,(""+Math.floor(e)).length-1);let i=e/t;return i=i>=10?10:i>=5?5:i>=3?3:i>=2?2:i>=1?1:function(e){const t=Math.pow(10,Math.ceil(-Math.log(e)/Math.LN10));return Math.round(e*t)/t}(i),t*i}(i),s=o/i;n._requestDomTask(()=>{e.style.width=t*s+"px",e.innerHTML=`${o} ${r}`})}const no={closeButton:!0,closeOnClick:!0,focusAfterOpen:!0,className:"",maxWidth:"240px"},oo=["a[href]","[tabindex]:not([tabindex='-1'])","[contenteditable]:not([contenteditable='false'])","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].join(", ");function so(t=new e.pointGeometry(0,0),i="bottom"){if("number"==typeof t){const r=Math.round(Math.sqrt(.5*Math.pow(t,2)));switch(i){case"top":return new e.pointGeometry(0,t);case"top-left":return new e.pointGeometry(r,r);case"top-right":return new e.pointGeometry(-r,r);case"bottom":return new e.pointGeometry(0,-t);case"bottom-left":return new e.pointGeometry(r,-r);case"bottom-right":return new e.pointGeometry(-r,-r);case"left":return new e.pointGeometry(t,0);case"right":return new e.pointGeometry(-t,0)}return new e.pointGeometry(0,0)}return t instanceof e.pointGeometry||Array.isArray(t)?e.pointGeometry.convert(t):e.pointGeometry.convert(t[i]||[0,0])}const ao={version:e.version,supported:t,setRTLTextPlugin:e.setRTLTextPlugin,getRTLTextPluginStatus:e.getRTLTextPluginStatus,Map:class extends On{constructor(t){if(null!=(t=e.extend({},Xn,t)).minZoom&&null!=t.maxZoom&&t.minZoom>t.maxZoom)throw new Error("maxZoom must be greater than or equal to minZoom");if(null!=t.minPitch&&null!=t.maxPitch&&t.minPitch>t.maxPitch)throw new Error("maxPitch must be greater than or equal to minPitch");if(null!=t.minPitch&&t.minPitch<0)throw new Error("minPitch must be greater than or equal to 0");if(null!=t.maxPitch&&t.maxPitch>85)throw new Error("maxPitch must be less than or equal to 85");if(t.antialias&&e.isSafariWithAntialiasingBug(e.window)&&(t.antialias=!1,e.warnOnce("Antialiasing is disabled for this WebGL context to avoid browser bug: https://github.com/mapbox/mapbox-gl-js/issues/11609")),super(new Ur(t.minZoom,t.maxZoom,t.minPitch,t.maxPitch,t.renderWorldCopies),t),this._interactive=t.interactive,this._minTileCacheSize=t.minTileCacheSize,this._maxTileCacheSize=t.maxTileCacheSize,this._failIfMajorPerformanceCaveat=t.failIfMajorPerformanceCaveat,this._preserveDrawingBuffer=t.preserveDrawingBuffer,this._antialias=t.antialias,this._trackResize=t.trackResize,this._bearingSnap=t.bearingSnap,this._refreshExpiredTiles=t.refreshExpiredTiles,this._fadeDuration=t.fadeDuration,this._isInitialLoad=!0,this._crossSourceCollisions=t.crossSourceCollisions,this._crossFadingFactor=1,this._collectResourceTiming=t.collectResourceTiming,this._optimizeForTerrain=t.optimizeForTerrain,this._renderTaskQueue=new Nn,this._domRenderTaskQueue=new Nn,this._controls=[],this._markers=[],this._mapId=e.uniqueId(),this._locale=e.extend({},$n,t.locale),this._clickTolerance=t.clickTolerance,this._cooperativeGestures=t.cooperativeGestures,this._containerWidth=0,this._containerHeight=0,this._averageElevationLastSampledAt=-1/0,this._averageElevationExaggeration=0,this._averageElevation=new qn(0),this._explicitProjection=null,this._requestManager=new e.RequestManager(t.transformRequest,t.accessToken,t.testMode),this._silenceAuthErrors=!!t.testMode,"string"==typeof t.container){if(this._container=e.window.document.getElementById(t.container),!this._container)throw new Error(`Container '${t.container}' not found.`)}else{if(!(t.container instanceof e.window.HTMLElement))throw new Error("Invalid type: 'container' must be a String or HTMLElement.");this._container=t.container}if(this._container.childNodes.length>0&&e.warnOnce("The map container element should be empty, otherwise the map's interactivity will be negatively impacted. If you want to display a message when WebGL is not supported, use the Mapbox GL Supported plugin instead."),t.maxBounds&&this.setMaxBounds(t.maxBounds),e.bindAll(["_onWindowOnline","_onWindowResize","_onMapScroll","_contextLost","_contextRestored"],this),this._setupContainer(),this._setupPainter(),void 0===this.painter)throw new Error("Failed to initialize WebGL.");this.on("move",()=>this._update(!1)),this.on("moveend",()=>this._update(!1)),this.on("zoom",()=>this._update(!0)),void 0!==e.window&&(e.window.addEventListener("online",this._onWindowOnline,!1),e.window.addEventListener("resize",this._onWindowResize,!1),e.window.addEventListener("orientationchange",this._onWindowResize,!1),e.window.addEventListener("webkitfullscreenchange",this._onWindowResize,!1)),this.handlers=new Rn(this,t),this._localFontFamily=t.localFontFamily,this._localIdeographFontFamily=t.localIdeographFontFamily,t.style&&this.setStyle(t.style,{localFontFamily:this._localFontFamily,localIdeographFontFamily:this._localIdeographFontFamily}),t.projection&&this.setProjection(t.projection),this._hash=t.hash&&new Nr("string"==typeof t.hash&&t.hash||void 0).addTo(this),this._hash&&this._hash._onHashChange()||(this.jumpTo({center:t.center,zoom:t.zoom,bearing:t.bearing,pitch:t.pitch}),t.bounds&&(this.resize(),this.fitBounds(t.bounds,e.extend({},t.fitBoundsOptions,{duration:0})))),this.resize(),t.attributionControl&&this.addControl(new Un({customAttribution:t.customAttribution})),this._logoControl=new Vn,this.addControl(this._logoControl,t.logoPosition),this.on("style.load",()=>{this.transform.unmodified&&this.jumpTo(this.style.stylesheet)}),this.on("data",t=>{this._update("style"===t.dataType),this.fire(new e.Event(t.dataType+"data",t))}),this.on("dataloading",t=>{this.fire(new e.Event(t.dataType+"dataloading",t))})}_getMapId(){return this._mapId}addControl(t,i){if(void 0===i&&(i=t.getDefaultPosition?t.getDefaultPosition():"top-right"),!t||!t.onAdd)return this.fire(new e.ErrorEvent(new Error("Invalid argument to map.addControl(). Argument must be a control with onAdd and onRemove methods.")));const r=t.onAdd(this);this._controls.push(t);const n=this._controlPositions[i];return-1!==i.indexOf("bottom")?n.insertBefore(r,n.firstChild):n.appendChild(r),this}removeControl(t){if(!t||!t.onRemove)return this.fire(new e.ErrorEvent(new Error("Invalid argument to map.removeControl(). Argument must be a control with onAdd and onRemove methods.")));const i=this._controls.indexOf(t);return i>-1&&this._controls.splice(i,1),t.onRemove(this),this}hasControl(e){return this._controls.indexOf(e)>-1}getContainer(){return this._container}getCanvasContainer(){return this._canvasContainer}getCanvas(){return this._canvas}resize(t){if(this._updateContainerDimensions(),this._containerWidth===this.transform.width&&this._containerHeight===this.transform.height)return this;this._resizeCanvas(this._containerWidth,this._containerHeight),this.transform.resize(this._containerWidth,this._containerHeight),this.painter.resize(Math.ceil(this._containerWidth),Math.ceil(this._containerHeight));const i=!this._moving;return i&&this.fire(new e.Event("movestart",t)).fire(new e.Event("move",t)),this.fire(new e.Event("resize",t)),i&&this.fire(new e.Event("moveend",t)),this}getBounds(){return this.transform.getBounds()}getMaxBounds(){return this.transform.getMaxBounds()||null}setMaxBounds(t){return this.transform.setMaxBounds(e.LngLatBounds.convert(t)),this._update()}setMinZoom(t){if((t=null==t?-2:t)>=-2&&t<=this.transform.maxZoom)return this.transform.minZoom=t,this._update(),this.getZoom()=this.transform.minZoom)return this.transform.maxZoom=t,this._update(),this.getZoom()>t?this.setZoom(t):this.fire(new e.Event("zoomstart")).fire(new e.Event("zoom")).fire(new e.Event("zoomend")),this;throw new Error("maxZoom must be greater than the current minZoom")}getMaxZoom(){return this.transform.maxZoom}setMinPitch(t){if((t=null==t?0:t)<0)throw new Error("minPitch must be greater than or equal to 0");if(t>=0&&t<=this.transform.maxPitch)return this.transform.minPitch=t,this._update(),this.getPitch()85)throw new Error("maxPitch must be less than or equal to 85");if(t>=this.transform.minPitch)return this.transform.maxPitch=t,this._update(),this.getPitch()>t?this.setPitch(t):this.fire(new e.Event("pitchstart")).fire(new e.Event("pitch")).fire(new e.Event("pitchend")),this;throw new Error("maxPitch must be greater than the current minPitch")}getMaxPitch(){return this.transform.maxPitch}getRenderWorldCopies(){return this.transform.renderWorldCopies}setRenderWorldCopies(e){return this.transform.renderWorldCopies=e,this._update()}getProjection(){return this._explicitProjection?this._explicitProjection:this.style&&this.style.stylesheet&&this.style.stylesheet.projection?this.style.stylesheet.projection:{name:"mercator",center:[0,0]}}setProjection(e){return this._lazyInitEmptyStyle(),e?"string"==typeof e&&(e={name:e}):e=null,this._updateProjection(e)}_updateProjection(e){null===e&&(this._explicitProjection=null);const t=e||this.getProjection(),i=this.transform.setProjection(t);if(e&&(this._explicitProjection=this.transform.getProjection()),i){this.painter.clearBackgroundTiles();for(const e in this.style._sourceCaches)this.style._sourceCaches[e].clearTiles();this.style.applyProjectionUpdate(),this._update(!0)}return this}project(t){return this.transform.locationPoint3D(e.LngLat.convert(t))}unproject(t){return this.transform.pointLocation3D(e.pointGeometry.convert(t))}isMoving(){return this._moving||this.handlers&&this.handlers.isMoving()||!1}isZooming(){return this._zooming||this.handlers&&this.handlers.isZooming()||!1}isRotating(){return this._rotating||this.handlers&&this.handlers.isRotating()||!1}_createDelegatedListener(e,t,i){if("mouseenter"===e||"mouseover"===e){let r=!1;const n=n=>{const o=t.filter(e=>this.getLayer(e)),s=o.length?this.queryRenderedFeatures(n.point,{layers:o}):[];s.length?r||(r=!0,i.call(this,new Yr(e,this,n.originalEvent,{features:s}))):r=!1},o=()=>{r=!1};return{layers:new Set(t),listener:i,delegates:{mousemove:n,mouseout:o}}}if("mouseleave"===e||"mouseout"===e){let r=!1;const n=n=>{const o=t.filter(e=>this.getLayer(e));(o.length?this.queryRenderedFeatures(n.point,{layers:o}):[]).length?r=!0:r&&(r=!1,i.call(this,new Yr(e,this,n.originalEvent)))},o=t=>{r&&(r=!1,i.call(this,new Yr(e,this,t.originalEvent)))};return{layers:new Set(t),listener:i,delegates:{mousemove:n,mouseout:o}}}{const r=e=>{const r=t.filter(e=>this.getLayer(e)),n=r.length?this.queryRenderedFeatures(e.point,{layers:r}):[];n.length&&(e.features=n,i.call(this,e),delete e.features)};return{layers:new Set(t),listener:i,delegates:{[e]:r}}}}on(e,t,i){if(void 0===i)return super.on(e,t);Array.isArray(t)||(t=[t]);const r=this._createDelegatedListener(e,t,i);this._delegatedListeners=this._delegatedListeners||{},this._delegatedListeners[e]=this._delegatedListeners[e]||[],this._delegatedListeners[e].push(r);for(const n in r.delegates)this.on(n,r.delegates[n]);return this}once(e,t,i){if(void 0===i)return super.once(e,t);Array.isArray(t)||(t=[t]);const r=this._createDelegatedListener(e,t,i);for(const n in r.delegates)this.once(n,r.delegates[n]);return this}off(e,t,i){if(void 0===i)return super.off(e,t);t=new Set(Array.isArray(t)?t:[t]);const r=(e,t)=>{if(e.size!==t.size)return!1;for(const i of e)if(!t.has(i))return!1;return!0},n=this._delegatedListeners?this._delegatedListeners[e]:void 0;return n&&(e=>{for(let n=0;n{t?this.fire(new e.ErrorEvent(t)):r&&this._updateDiff(r,i)})}else"object"==typeof t&&this._updateDiff(t,i)}_updateDiff(t,i){try{this.style.setState(t)&&this._update(!0)}catch(r){e.warnOnce(`Unable to perform style diff: ${r.message||r.error||r}. Rebuilding the style from scratch.`),this._updateStyle(t,i)}}getStyle(){if(this.style)return this.style.serialize()}isStyleLoaded(){return this.style?this.style.loaded():(e.warnOnce("There is no style added to the map."),!1)}addSource(e,t){return this._lazyInitEmptyStyle(),this.style.addSource(e,t),this._update(!0)}isSourceLoaded(e){return!!this.style&&this.style._isSourceCacheLoaded(e)}areTilesLoaded(){const e=this.style&&this.style._sourceCaches;for(const t in e){const i=e[t]._tiles;for(const e in i){const t=i[e];if("loaded"!==t.state&&"errored"!==t.state)return!1}}return!0}addSourceType(e,t,i){this._lazyInitEmptyStyle(),this.style.addSourceType(e,t,i)}removeSource(e){return this.style.removeSource(e),this._updateTerrain(),this._update(!0)}getSource(e){return this.style.getSource(e)}addImage(t,i,{pixelRatio:r=1,sdf:n=!1,stretchX:o,stretchY:s,content:a}={}){if(this._lazyInitEmptyStyle(),i instanceof e.window.HTMLImageElement||e.window.ImageBitmap&&i instanceof e.window.ImageBitmap){const{width:l,height:c,data:h}=e.exported.getImageData(i);this.style.addImage(t,{data:new e.RGBAImage({width:l,height:c},h),pixelRatio:r,stretchX:o,stretchY:s,content:a,sdf:n,version:0})}else if(void 0===i.width||void 0===i.height)this.fire(new e.ErrorEvent(new Error("Invalid arguments to map.addImage(). The second argument must be an `HTMLImageElement`, `ImageData`, `ImageBitmap`, or object with `width`, `height`, and `data` properties with the same format as `ImageData`")));else{const{width:l,height:c}=i,h=i;this.style.addImage(t,{data:new e.RGBAImage({width:l,height:c},new Uint8Array(h.data)),pixelRatio:r,stretchX:o,stretchY:s,content:a,sdf:n,version:0,userImage:h}),h.onAdd&&h.onAdd(this,t)}}updateImage(t,i){const r=this.style.getImage(t);if(!r)return void this.fire(new e.ErrorEvent(new Error("The map has no image with that id. If you are adding a new image use `map.addImage(...)` instead.")));const n=i instanceof e.window.HTMLImageElement||e.window.ImageBitmap&&i instanceof e.window.ImageBitmap?e.exported.getImageData(i):i,{width:o,height:s}=n;void 0!==o&&void 0!==s?o===r.data.width&&s===r.data.height?(r.data.replace(n.data,!(i instanceof e.window.HTMLImageElement||e.window.ImageBitmap&&i instanceof e.window.ImageBitmap)),this.style.updateImage(t,r)):this.fire(new e.ErrorEvent(new Error("The width and height of the updated image must be that same as the previous version of the image"))):this.fire(new e.ErrorEvent(new Error("Invalid arguments to map.updateImage(). The second argument must be an `HTMLImageElement`, `ImageData`, `ImageBitmap`, or object with `width`, `height`, and `data` properties with the same format as `ImageData`")))}hasImage(t){return t?!!this.style.getImage(t):(this.fire(new e.ErrorEvent(new Error("Missing required image id"))),!1)}removeImage(e){this.style.removeImage(e)}loadImage(t,i){e.getImage(this._requestManager.transformRequest(t,e.ResourceType.Image),(t,r)=>{i(t,r instanceof e.window.HTMLImageElement?e.exported.getImageData(r):r)})}listImages(){return this.style.listImages()}addLayer(e,t){return this._lazyInitEmptyStyle(),this.style.addLayer(e,t),this._update(!0)}moveLayer(e,t){return this.style.moveLayer(e,t),this._update(!0)}removeLayer(e){return this.style.removeLayer(e),this._update(!0)}getLayer(e){return this.style.getLayer(e)}setLayerZoomRange(e,t,i){return this.style.setLayerZoomRange(e,t,i),this._update(!0)}setFilter(e,t,i={}){return this.style.setFilter(e,t,i),this._update(!0)}getFilter(e){return this.style.getFilter(e)}setPaintProperty(e,t,i,r={}){return this.style.setPaintProperty(e,t,i,r),this._update(!0)}getPaintProperty(e,t){return this.style.getPaintProperty(e,t)}setLayoutProperty(e,t,i,r={}){return this.style.setLayoutProperty(e,t,i,r),this._update(!0)}getLayoutProperty(e,t){return this.style.getLayoutProperty(e,t)}setLight(e,t={}){return this._lazyInitEmptyStyle(),this.style.setLight(e,t),this._update(!0)}getLight(){return this.style.getLight()}setTerrain(e){return this._lazyInitEmptyStyle(),!e&&this.transform.projection.requiresDraping?this.style.setTerrainForDraping():this.style.setTerrain(e),this._averageElevationLastSampledAt=-1/0,this._update(!0)}getTerrain(){return this.style?this.style.getTerrain():null}setFog(e){return this._lazyInitEmptyStyle(),this.style.setFog(e),this._update(!0)}getFog(){return this.style?this.style.getFog():null}_queryFogOpacity(t){return this.style&&this.style.fog?this.style.fog.getOpacityAtLatLng(e.LngLat.convert(t),this.transform):0}setFeatureState(e,t){return this.style.setFeatureState(e,t),this._update()}removeFeatureState(e,t){return this.style.removeFeatureState(e,t),this._update()}getFeatureState(e){return this.style.getFeatureState(e)}_updateContainerDimensions(){if(!this._container)return;const t=this._container.getBoundingClientRect().width||400,i=this._container.getBoundingClientRect().height||300;let r,n,o,s=this._container;for(;s&&(!n||!o);){const t=e.window.getComputedStyle(s).transform;t&&"none"!==t&&(r=t.match(/matrix.*\((.+)\)/)[1].split(", "),r[0]&&"0"!==r[0]&&"1"!==r[0]&&(n=r[0]),r[3]&&"0"!==r[3]&&"1"!==r[3]&&(o=r[3])),s=s.parentElement}this._containerWidth=n?Math.abs(t/n):t,this._containerHeight=o?Math.abs(i/o):i}_detectMissingCSS(){"rgb(250, 128, 114)"!==e.window.getComputedStyle(this._missingCSSCanary).getPropertyValue("background-color")&&e.warnOnce("This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.")}_setupContainer(){const e=this._container;e.classList.add("mapboxgl-map"),(this._missingCSSCanary=o("div","mapboxgl-canary",e)).style.visibility="hidden",this._detectMissingCSS();const t=this._canvasContainer=o("div","mapboxgl-canvas-container",e);this._interactive&&t.classList.add("mapboxgl-interactive"),this._canvas=o("canvas","mapboxgl-canvas",t),this._canvas.addEventListener("webglcontextlost",this._contextLost,!1),this._canvas.addEventListener("webglcontextrestored",this._contextRestored,!1),this._canvas.setAttribute("tabindex","0"),this._canvas.setAttribute("aria-label","Map"),this._canvas.setAttribute("role","region"),this._updateContainerDimensions(),this._resizeCanvas(this._containerWidth,this._containerHeight);const i=this._controlContainer=o("div","mapboxgl-control-container",e),r=this._controlPositions={};["top-left","top-right","bottom-left","bottom-right"].forEach(e=>{r[e]=o("div","mapboxgl-ctrl-"+e,i)}),this._container.addEventListener("scroll",this._onMapScroll,!1)}_resizeCanvas(t,i){const r=e.exported.devicePixelRatio||1;this._canvas.width=r*Math.ceil(t),this._canvas.height=r*Math.ceil(i),this._canvas.style.width=t+"px",this._canvas.style.height=i+"px"}_addMarker(e){this._markers.push(e)}_removeMarker(e){const t=this._markers.indexOf(e);-1!==t&&this._markers.splice(t,1)}_setupPainter(){const i=e.extend({},t.webGLContextAttributes,{failIfMajorPerformanceCaveat:this._failIfMajorPerformanceCaveat,preserveDrawingBuffer:this._preserveDrawingBuffer,antialias:this._antialias||!1}),r=this._canvas.getContext("webgl",i)||this._canvas.getContext("experimental-webgl",i);r?(e.storeAuthState(r,!0),this.painter=new Ir(r,this.transform),this.on("data",e=>{"source"===e.dataType&&this.painter.setTileLoadedFlag(!0)}),e.exported$1.testSupport(r)):this.fire(new e.ErrorEvent(new Error("Failed to initialize WebGL")))}_contextLost(t){t.preventDefault(),this._frame&&(this._frame.cancel(),this._frame=null),this.fire(new e.Event("webglcontextlost",{originalEvent:t}))}_contextRestored(t){this._setupPainter(),this.resize(),this._update(),this.fire(new e.Event("webglcontextrestored",{originalEvent:t}))}_onMapScroll(e){if(e.target===this._container)return this._container.scrollTop=0,this._container.scrollLeft=0,!1}loaded(){return!this._styleDirty&&!this._sourcesDirty&&!!this.style&&this.style.loaded()}_update(e){return this.style?(this._styleDirty=this._styleDirty||e,this._sourcesDirty=!0,this.triggerRepaint(),this):this}_requestRenderFrame(e){return this._update(),this._renderTaskQueue.add(e)}_cancelRenderFrame(e){this._renderTaskQueue.remove(e)}_requestDomTask(e){!this.loaded()||this.loaded()&&!this.isMoving()?e():this._domRenderTaskQueue.add(e)}_render(t){let i;const r=this.painter.context.extTimerQuery,n=e.exported.now();if(this.listens("gpu-timing-frame")&&(i=r.createQueryEXT(),r.beginQueryEXT(r.TIME_ELAPSED_EXT,i)),this.painter.context.setDirty(),this.painter.setBaseState(),this._renderTaskQueue.run(t),this._domRenderTaskQueue.run(t),this._removed)return;let o=!1;const s=this._isInitialLoad?0:this._fadeDuration;if(this.style&&this._styleDirty){this._styleDirty=!1;const t=this.transform.zoom,i=this.transform.pitch,r=e.exported.now();this.style.zoomHistory.update(t,r);const n=new e.EvaluationParameters(t,{now:r,fadeDuration:s,pitch:i,zoomHistory:this.style.zoomHistory,transition:this.style.getTransition()}),a=n.crossFadingFactor();1===a&&a===this._crossFadingFactor||(o=!0,this._crossFadingFactor=a),this.style.update(n)}this.style&&this.style.fog&&this.style.fog.hasTransition()&&(this.style._markersNeedUpdate=!0,this._sourcesDirty=!0);let a=!1;if(this.style&&this._sourcesDirty?(this._sourcesDirty=!1,this.painter._updateFog(this.style),this._updateTerrain(),a=this._updateAverageElevation(n),this.style._updateSources(this.transform),this._forceMarkerUpdate()):a=this._updateAverageElevation(n),this._placementDirty=this.style&&this.style._updatePlacement(this.painter.transform,this.showCollisionBoxes,s,this._crossSourceCollisions),this.style&&this.painter.render(this.style,{showTileBoundaries:this.showTileBoundaries,showTerrainWireframe:this.showTerrainWireframe,showOverdrawInspector:this._showOverdrawInspector,showQueryGeometry:!!this._showQueryGeometry,rotating:this.isRotating(),zooming:this.isZooming(),moving:this.isMoving(),fadeDuration:s,isInitialLoad:this._isInitialLoad,showPadding:this.showPadding,gpuTiming:!!this.listens("gpu-timing-layer"),speedIndexTiming:this.speedIndexTiming}),this.fire(new e.Event("render")),this.loaded()&&!this._loaded&&(this._loaded=!0,this.fire(new e.Event("load"))),this.style&&(this.style.hasTransitions()||o)&&(this._styleDirty=!0),this.style&&!this._placementDirty&&this.style._releaseSymbolFadeTiles(),this.listens("gpu-timing-frame")){const t=e.exported.now()-n;r.endQueryEXT(r.TIME_ELAPSED_EXT,i),setTimeout(()=>{const n=r.getQueryObjectEXT(i,r.QUERY_RESULT_EXT)/1e6;r.deleteQueryEXT(i),this.fire(new e.Event("gpu-timing-frame",{cpuTime:t,gpuTime:n}))},50)}if(this.listens("gpu-timing-layer")){const t=this.painter.collectGpuTimers();setTimeout(()=>{const i=this.painter.queryGpuTimers(t);this.fire(new e.Event("gpu-timing-layer",{layerTimes:i}))},50)}const l=this._sourcesDirty||this._styleDirty||this._placementDirty||a;if(l||this._repaint)this.triggerRepaint();else{const t=!this.isMoving()&&this.loaded();if(t&&(a=this._updateAverageElevation(n,!0)),a)this.triggerRepaint();else if(this._triggerFrame(!1),t&&(this.fire(new e.Event("idle")),this._isInitialLoad=!1,this.speedIndexTiming)){const t=this._calculateSpeedIndex();this.fire(new e.Event("speedindexcompleted",{speedIndex:t})),this.speedIndexTiming=!1}}!this._loaded||this._fullyLoaded||l||(this._fullyLoaded=!0,this._authenticate())}_forceMarkerUpdate(){for(const e of this._markers)e._update()}_updateAverageElevation(e,t=!1){const i=e=>(this.transform.averageElevation=e,this._update(!1),!0);if(!this.painter.averageElevationNeedsEasing())return 0!==this.transform.averageElevation&&i(0);if((t||e-this._averageElevationLastSampledAt>500)&&!this._averageElevation.isEasing(e)){const t=this.transform.averageElevation;let r=this.transform.sampleAverageElevation(),n=!1;this.transform.elevation&&(n=this.transform.elevation.exaggeration()!==this._averageElevationExaggeration,this._averageElevationExaggeration=this.transform.elevation.exaggeration()),isNaN(r)?r=0:this._averageElevationLastSampledAt=e;const o=Math.abs(t-r);if(o>1){if(this._isInitialLoad||n)return this._averageElevation.jumpTo(r),i(r);this._averageElevation.easeTo(r,e,300)}else if(o>1e-4)return this._averageElevation.jumpTo(r),i(r)}return!!this._averageElevation.isEasing(e)&&i(this._averageElevation.getValue(e))}_authenticate(){e.getMapSessionAPI(this._getMapId(),this._requestManager._skuToken,this._requestManager._customAccessToken,t=>{if(t&&(t.message===e.AUTH_ERR_MSG||401===t.status)){const t=this.painter.context.gl;e.storeAuthState(t,!1),this._logoControl instanceof Vn&&this._logoControl._updateLogo(),t&&t.clear(t.DEPTH_BUFFER_BIT|t.COLOR_BUFFER_BIT|t.STENCIL_BUFFER_BIT),this._silenceAuthErrors||this.fire(new e.ErrorEvent(new Error("A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/")))}}),e.postMapLoadEvent(this._getMapId(),this._requestManager._skuToken,this._requestManager._customAccessToken,()=>{})}_updateTerrain(){this.painter.updateTerrain(this.style,this.isMoving()||this.isRotating()||this.isZooming())}_calculateSpeedIndex(){const e=this.painter.canvasCopy(),t=this.painter.getCanvasCopiesAndTimestamps();t.timeStamps.push(performance.now());const i=this.painter.context.gl,r=i.createFramebuffer();function n(e){i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,e,0);const t=new Uint8Array(i.drawingBufferWidth*i.drawingBufferHeight*4);return i.readPixels(0,0,i.drawingBufferWidth,i.drawingBufferHeight,i.RGBA,i.UNSIGNED_BYTE,t),t}return i.bindFramebuffer(i.FRAMEBUFFER,r),this._canvasPixelComparison(n(e),t.canvasCopies.map(n),t.timeStamps)}_canvasPixelComparison(e,t,i){let r=i[1]-i[0];const n=e.length/4;for(let o=0;o{const t=!!this._renderNextFrame;this._frame=null,this._renderNextFrame=null,t&&this._render(e)}))}_preloadTiles(t){const i=this.style?Object.values(this.style._sourceCaches):[];return e.asyncAll(i,(e,i)=>e._preloadTiles(t,i),()=>{this.triggerRepaint()}),this}_onWindowOnline(){this._update()}_onWindowResize(e){this._trackResize&&this.resize({originalEvent:e})._update()}get showTileBoundaries(){return!!this._showTileBoundaries}set showTileBoundaries(e){this._showTileBoundaries!==e&&(this._showTileBoundaries=e,this._update())}get showTerrainWireframe(){return!!this._showTerrainWireframe}set showTerrainWireframe(e){this._showTerrainWireframe!==e&&(this._showTerrainWireframe=e,this._update())}get speedIndexTiming(){return!!this._speedIndexTiming}set speedIndexTiming(e){this._speedIndexTiming!==e&&(this._speedIndexTiming=e,this._update())}get showPadding(){return!!this._showPadding}set showPadding(e){this._showPadding!==e&&(this._showPadding=e,this._update())}get showCollisionBoxes(){return!!this._showCollisionBoxes}set showCollisionBoxes(e){this._showCollisionBoxes!==e&&(this._showCollisionBoxes=e,e?this.style._generateCollisionBoxes():this._update())}get showOverdrawInspector(){return!!this._showOverdrawInspector}set showOverdrawInspector(e){this._showOverdrawInspector!==e&&(this._showOverdrawInspector=e,this._update())}get repaint(){return!!this._repaint}set repaint(e){this._repaint!==e&&(this._repaint=e,this.triggerRepaint())}get vertices(){return!!this._vertices}set vertices(e){this._vertices=e,this._update()}_setCacheLimits(t,i){e.setCacheLimits(t,i)}get version(){return e.version}},NavigationControl:class{constructor(t){this.options=e.extend({},Hn,t),this._container=o("div","mapboxgl-ctrl mapboxgl-ctrl-group"),this._container.addEventListener("contextmenu",e=>e.preventDefault()),this.options.showZoom&&(e.bindAll(["_setButtonTitle","_updateZoomButtons"],this),this._zoomInButton=this._createButton("mapboxgl-ctrl-zoom-in",e=>{this._map&&this._map.zoomIn({},{originalEvent:e})}),o("span","mapboxgl-ctrl-icon",this._zoomInButton).setAttribute("aria-hidden","true"),this._zoomOutButton=this._createButton("mapboxgl-ctrl-zoom-out",e=>{this._map&&this._map.zoomOut({},{originalEvent:e})}),o("span","mapboxgl-ctrl-icon",this._zoomOutButton).setAttribute("aria-hidden","true")),this.options.showCompass&&(e.bindAll(["_rotateCompassArrow"],this),this._compass=this._createButton("mapboxgl-ctrl-compass",e=>{const t=this._map;t&&(this.options.visualizePitch?t.resetNorthPitch({},{originalEvent:e}):t.resetNorth({},{originalEvent:e}))}),this._compassIcon=o("span","mapboxgl-ctrl-icon",this._compass),this._compassIcon.setAttribute("aria-hidden","true"))}_updateZoomButtons(){const e=this._map;if(!e)return;const t=e.getZoom(),i=t===e.getMaxZoom(),r=t===e.getMinZoom();this._zoomInButton.disabled=i,this._zoomOutButton.disabled=r,this._zoomInButton.setAttribute("aria-disabled",i.toString()),this._zoomOutButton.setAttribute("aria-disabled",r.toString())}_rotateCompassArrow(){const e=this._map;if(!e)return;const t=this.options.visualizePitch?`scale(${1/Math.pow(Math.cos(e.transform.pitch*(Math.PI/180)),.5)}) rotateX(${e.transform.pitch}deg) rotateZ(${e.transform.angle*(180/Math.PI)}deg)`:`rotate(${e.transform.angle*(180/Math.PI)}deg)`;e._requestDomTask(()=>{this._compassIcon&&(this._compassIcon.style.transform=t)})}onAdd(e){return this._map=e,this.options.showZoom&&(this._setButtonTitle(this._zoomInButton,"ZoomIn"),this._setButtonTitle(this._zoomOutButton,"ZoomOut"),e.on("zoom",this._updateZoomButtons),this._updateZoomButtons()),this.options.showCompass&&(this._setButtonTitle(this._compass,"ResetBearing"),this.options.visualizePitch&&e.on("pitch",this._rotateCompassArrow),e.on("rotate",this._rotateCompassArrow),this._rotateCompassArrow(),this._handler=new Yn(e,this._compass,this.options.visualizePitch)),this._container}onRemove(){const e=this._map;e&&(this._container.remove(),this.options.showZoom&&e.off("zoom",this._updateZoomButtons),this.options.showCompass&&(this.options.visualizePitch&&e.off("pitch",this._rotateCompassArrow),e.off("rotate",this._rotateCompassArrow),this._handler&&this._handler.off(),this._handler=void 0),this._map=void 0)}_createButton(e,t){const i=o("button",e,this._container);return i.type="button",i.addEventListener("click",t),i}_setButtonTitle(e,t){if(!this._map)return;const i=this._map._getUIString("NavigationControl."+t);e.setAttribute("aria-label",i),e.firstElementChild&&e.firstElementChild.setAttribute("title",i)}},GeolocateControl:class extends e.Evented{constructor(t){super(),this.options=e.extend({},Kn,t),e.bindAll(["_onSuccess","_onError","_onZoom","_finish","_setupUI","_updateCamera","_updateMarker","_updateMarkerRotation","_onDeviceOrientation"],this),this._updateMarkerRotationThrottled=Vr(this._updateMarkerRotation,20)}onAdd(t){var i;return this._map=t,this._container=o("div","mapboxgl-ctrl mapboxgl-ctrl-group"),i=this._setupUI,void 0!==Jn?i(Jn):void 0!==e.window.navigator.permissions?e.window.navigator.permissions.query({name:"geolocation"}).then(e=>{Jn="denied"!==e.state,i(Jn)}):(Jn=!!e.window.navigator.geolocation,i(Jn)),this._container}onRemove(){void 0!==this._geolocationWatchID&&(e.window.navigator.geolocation.clearWatch(this._geolocationWatchID),this._geolocationWatchID=void 0),this.options.showUserLocation&&this._userLocationDotMarker&&this._userLocationDotMarker.remove(),this.options.showAccuracyCircle&&this._accuracyCircleMarker&&this._accuracyCircleMarker.remove(),this._container.remove(),this._map.off("zoom",this._onZoom),this._map=void 0,Qn=0,eo=!1}_isOutOfMapMaxBounds(e){const t=this._map.getMaxBounds(),i=e.coords;return!!t&&(i.longitudet.getEast()||i.latitudet.getNorth())}_setErrorState(){switch(this._watchState){case"WAITING_ACTIVE":this._watchState="ACTIVE_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error");break;case"ACTIVE_LOCK":this._watchState="ACTIVE_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting");break;case"BACKGROUND":this._watchState="BACKGROUND_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting")}}_onSuccess(t){if(this._map){if(this._isOutOfMapMaxBounds(t))return this._setErrorState(),this.fire(new e.Event("outofmaxbounds",t)),this._updateMarker(),void this._finish();if(this.options.trackUserLocation)switch(this._lastKnownPosition=t,this._watchState){case"WAITING_ACTIVE":case"ACTIVE_LOCK":case"ACTIVE_ERROR":this._watchState="ACTIVE_LOCK",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"BACKGROUND":case"BACKGROUND_ERROR":this._watchState="BACKGROUND",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background")}this.options.showUserLocation&&"OFF"!==this._watchState&&this._updateMarker(t),this.options.trackUserLocation&&"ACTIVE_LOCK"!==this._watchState||this._updateCamera(t),this.options.showUserLocation&&this._dotElement.classList.remove("mapboxgl-user-location-dot-stale"),this.fire(new e.Event("geolocate",t)),this._finish()}}_updateCamera(t){const i=new e.LngLat(t.coords.longitude,t.coords.latitude),r=t.coords.accuracy,n=this._map.getBearing(),o=e.extend({bearing:n},this.options.fitBoundsOptions);this._map.fitBounds(i.toBounds(r),o,{geolocateSource:!0})}_updateMarker(t){if(t){const i=new e.LngLat(t.coords.longitude,t.coords.latitude);this._accuracyCircleMarker.setLngLat(i).addTo(this._map),this._userLocationDotMarker.setLngLat(i).addTo(this._map),this._accuracy=t.coords.accuracy,this.options.showUserLocation&&this.options.showAccuracyCircle&&this._updateCircleRadius()}else this._userLocationDotMarker.remove(),this._accuracyCircleMarker.remove()}_updateCircleRadius(){const e=this._map._containerHeight/2,t=this._map.unproject([0,e]),i=this._map.unproject([100,e]),r=t.distanceTo(i)/100,n=Math.ceil(2*this._accuracy/r);this._circleElement.style.width=n+"px",this._circleElement.style.height=n+"px"}_onZoom(){this.options.showUserLocation&&this.options.showAccuracyCircle&&this._updateCircleRadius()}_updateMarkerRotation(){this._userLocationDotMarker&&"number"==typeof this._heading?(this._userLocationDotMarker.setRotation(this._heading),this._dotElement.classList.add("mapboxgl-user-location-show-heading")):(this._dotElement.classList.remove("mapboxgl-user-location-show-heading"),this._userLocationDotMarker.setRotation(0))}_onError(t){if(this._map){if(this.options.trackUserLocation)if(1===t.code){this._watchState="OFF",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.disabled=!0;const e=this._map._getUIString("GeolocateControl.LocationNotAvailable");this._geolocateButton.setAttribute("aria-label",e),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",e),void 0!==this._geolocationWatchID&&this._clearWatch()}else{if(3===t.code&&eo)return;this._setErrorState()}"OFF"!==this._watchState&&this.options.showUserLocation&&this._dotElement.classList.add("mapboxgl-user-location-dot-stale"),this.fire(new e.Event("error",t)),this._finish()}}_finish(){this._timeoutId&&clearTimeout(this._timeoutId),this._timeoutId=void 0}_setupUI(t){if(this._container.addEventListener("contextmenu",e=>e.preventDefault()),this._geolocateButton=o("button","mapboxgl-ctrl-geolocate",this._container),o("span","mapboxgl-ctrl-icon",this._geolocateButton).setAttribute("aria-hidden","true"),this._geolocateButton.type="button",!1===t){e.warnOnce("Geolocation support is not available so the GeolocateControl will be disabled.");const t=this._map._getUIString("GeolocateControl.LocationNotAvailable");this._geolocateButton.disabled=!0,this._geolocateButton.setAttribute("aria-label",t),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",t)}else{const e=this._map._getUIString("GeolocateControl.FindMyLocation");this._geolocateButton.setAttribute("aria-label",e),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",e)}this.options.trackUserLocation&&(this._geolocateButton.setAttribute("aria-pressed","false"),this._watchState="OFF"),this.options.showUserLocation&&(this._dotElement=o("div","mapboxgl-user-location"),this._dotElement.appendChild(o("div","mapboxgl-user-location-dot")),this._dotElement.appendChild(o("div","mapboxgl-user-location-heading")),this._userLocationDotMarker=new Zn({element:this._dotElement,rotationAlignment:"map",pitchAlignment:"map"}),this._circleElement=o("div","mapboxgl-user-location-accuracy-circle"),this._accuracyCircleMarker=new Zn({element:this._circleElement,pitchAlignment:"map"}),this.options.trackUserLocation&&(this._watchState="OFF"),this._map.on("zoom",this._onZoom)),this._geolocateButton.addEventListener("click",this.trigger.bind(this)),this._setup=!0,this.options.trackUserLocation&&this._map.on("movestart",t=>{t.geolocateSource||"ACTIVE_LOCK"!==this._watchState||t.originalEvent&&"resize"===t.originalEvent.type||(this._watchState="BACKGROUND",this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this.fire(new e.Event("trackuserlocationend")))})}_onDeviceOrientation(e){this._userLocationDotMarker&&(e.webkitCompassHeading?this._heading=e.webkitCompassHeading:!0===e.absolute&&(this._heading=-1*e.alpha),this._updateMarkerRotationThrottled())}trigger(){if(!this._setup)return e.warnOnce("Geolocate control triggered before added to a map"),!1;if(this.options.trackUserLocation){switch(this._watchState){case"OFF":this._watchState="WAITING_ACTIVE",this.fire(new e.Event("trackuserlocationstart"));break;case"WAITING_ACTIVE":case"ACTIVE_LOCK":case"ACTIVE_ERROR":case"BACKGROUND_ERROR":Qn--,eo=!1,this._watchState="OFF",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this.fire(new e.Event("trackuserlocationend"));break;case"BACKGROUND":this._watchState="ACTIVE_LOCK",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._lastKnownPosition&&this._updateCamera(this._lastKnownPosition),this.fire(new e.Event("trackuserlocationstart"))}switch(this._watchState){case"WAITING_ACTIVE":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"ACTIVE_LOCK":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"ACTIVE_ERROR":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error");break;case"BACKGROUND":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background");break;case"BACKGROUND_ERROR":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background-error")}if("OFF"===this._watchState&&void 0!==this._geolocationWatchID)this._clearWatch();else if(void 0===this._geolocationWatchID){let t;this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.setAttribute("aria-pressed","true"),Qn++,Qn>1?(t={maximumAge:6e5,timeout:0},eo=!0):(t=this.options.positionOptions,eo=!1),this._geolocationWatchID=e.window.navigator.geolocation.watchPosition(this._onSuccess,this._onError,t),this.options.showUserHeading&&this._addDeviceOrientationListener()}}else e.window.navigator.geolocation.getCurrentPosition(this._onSuccess,this._onError,this.options.positionOptions),this._timeoutId=setTimeout(this._finish,1e4);return!0}_addDeviceOrientationListener(){const t=()=>{e.window.addEventListener("ondeviceorientationabsolute"in e.window?"deviceorientationabsolute":"deviceorientation",this._onDeviceOrientation)};void 0!==e.window.DeviceMotionEvent&&"function"==typeof e.window.DeviceMotionEvent.requestPermission?DeviceOrientationEvent.requestPermission().then(e=>{"granted"===e&&t()}).catch(console.error):t()}_clearWatch(){e.window.navigator.geolocation.clearWatch(this._geolocationWatchID),e.window.removeEventListener("deviceorientation",this._onDeviceOrientation),e.window.removeEventListener("deviceorientationabsolute",this._onDeviceOrientation),this._geolocationWatchID=void 0,this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.setAttribute("aria-pressed","false"),this.options.showUserLocation&&this._updateMarker(null)}},AttributionControl:Un,ScaleControl:class{constructor(t){this.options=e.extend({},to,t),e.bindAll(["_onMove","setUnit"],this)}getDefaultPosition(){return"bottom-left"}_onMove(){io(this._map,this._container,this.options)}onAdd(e){return this._map=e,this._container=o("div","mapboxgl-ctrl mapboxgl-ctrl-scale",e.getContainer()),this._map.on("move",this._onMove),this._onMove(),this._container}onRemove(){this._container.remove(),this._map.off("move",this._onMove),this._map=void 0}setUnit(e){this.options.unit=e,io(this._map,this._container,this.options)}},FullscreenControl:class{constructor(t){this._fullscreen=!1,t&&t.container&&(t.container instanceof e.window.HTMLElement?this._container=t.container:e.warnOnce("Full screen control 'container' must be a DOM element.")),e.bindAll(["_onClickFullscreen","_changeIcon"],this),"onfullscreenchange"in e.window.document?this._fullscreenchange="fullscreenchange":"onwebkitfullscreenchange"in e.window.document&&(this._fullscreenchange="webkitfullscreenchange")}onAdd(t){return this._map=t,this._container||(this._container=this._map.getContainer()),this._controlContainer=o("div","mapboxgl-ctrl mapboxgl-ctrl-group"),this._checkFullscreenSupport()?this._setupUI():(this._controlContainer.style.display="none",e.warnOnce("This device does not support fullscreen mode.")),this._controlContainer}onRemove(){this._controlContainer.remove(),this._map=null,e.window.document.removeEventListener(this._fullscreenchange,this._changeIcon)}_checkFullscreenSupport(){return!(!e.window.document.fullscreenEnabled&&!e.window.document.webkitFullscreenEnabled)}_setupUI(){const t=this._fullscreenButton=o("button","mapboxgl-ctrl-fullscreen",this._controlContainer);o("span","mapboxgl-ctrl-icon",t).setAttribute("aria-hidden","true"),t.type="button",this._updateTitle(),this._fullscreenButton.addEventListener("click",this._onClickFullscreen),e.window.document.addEventListener(this._fullscreenchange,this._changeIcon)}_updateTitle(){const e=this._getTitle();this._fullscreenButton.setAttribute("aria-label",e),this._fullscreenButton.firstElementChild&&this._fullscreenButton.firstElementChild.setAttribute("title",e)}_getTitle(){return this._map._getUIString(this._isFullscreen()?"FullscreenControl.Exit":"FullscreenControl.Enter")}_isFullscreen(){return this._fullscreen}_changeIcon(){(e.window.document.fullscreenElement||e.window.document.webkitFullscreenElement)===this._container!==this._fullscreen&&(this._fullscreen=!this._fullscreen,this._fullscreenButton.classList.toggle("mapboxgl-ctrl-shrink"),this._fullscreenButton.classList.toggle("mapboxgl-ctrl-fullscreen"),this._updateTitle())}_onClickFullscreen(){this._isFullscreen()?e.window.document.exitFullscreen?e.window.document.exitFullscreen():e.window.document.webkitCancelFullScreen&&e.window.document.webkitCancelFullScreen():this._container.requestFullscreen?this._container.requestFullscreen():this._container.webkitRequestFullscreen&&this._container.webkitRequestFullscreen()}},Popup:class extends e.Evented{constructor(t){super(),this.options=e.extend(Object.create(no),t),e.bindAll(["_update","_onClose","remove","_onMouseEvent"],this),this._classList=new Set(t&&t.className?t.className.trim().split(/\s+/):[])}addTo(t){return this._map&&this.remove(),this._map=t,this.options.closeOnClick&&t.on("preclick",this._onClose),this.options.closeOnMove&&t.on("move",this._onClose),t.on("remove",this.remove),this._update(),this._focusFirstElement(),this._trackPointer?(t.on("mousemove",this._onMouseEvent),t.on("mouseup",this._onMouseEvent),t._canvasContainer.classList.add("mapboxgl-track-pointer")):t.on("move",this._update),this.fire(new e.Event("open")),this}isOpen(){return!!this._map}remove(){this._content&&this._content.remove(),this._container&&(this._container.remove(),this._container=void 0);const t=this._map;return t&&(t.off("move",this._update),t.off("move",this._onClose),t.off("preclick",this._onClose),t.off("click",this._onClose),t.off("remove",this.remove),t.off("mousemove",this._onMouseEvent),t.off("mouseup",this._onMouseEvent),t.off("drag",this._onMouseEvent),this._map=void 0),this.fire(new e.Event("close")),this}getLngLat(){return this._lngLat}setLngLat(t){this._lngLat=e.LngLat.convert(t),this._pos=null,this._trackPointer=!1,this._update();const i=this._map;return i&&(i.on("move",this._update),i.off("mousemove",this._onMouseEvent),i._canvasContainer.classList.remove("mapboxgl-track-pointer")),this}trackPointer(){this._trackPointer=!0,this._pos=null,this._update();const e=this._map;return e&&(e.off("move",this._update),e.on("mousemove",this._onMouseEvent),e.on("drag",this._onMouseEvent),e._canvasContainer.classList.add("mapboxgl-track-pointer")),this}getElement(){return this._container}setText(t){return this.setDOMContent(e.window.document.createTextNode(t))}setHTML(t){const i=e.window.document.createDocumentFragment(),r=e.window.document.createElement("body");let n;for(r.innerHTML=t;n=r.firstChild,n;)i.appendChild(n);return this.setDOMContent(i)}getMaxWidth(){return this._container&&this._container.style.maxWidth}setMaxWidth(e){return this.options.maxWidth=e,this._update(),this}setDOMContent(e){let t=this._content;if(t)for(;t.hasChildNodes();)t.firstChild&&t.removeChild(t.firstChild);else t=this._content=o("div","mapboxgl-popup-content",this._container||void 0);if(t.appendChild(e),this.options.closeButton){const e=this._closeButton=o("button","mapboxgl-popup-close-button",t);e.type="button",e.setAttribute("aria-label","Close popup"),e.setAttribute("aria-hidden","true"),e.innerHTML="×",e.addEventListener("click",this._onClose)}return this._update(),this._focusFirstElement(),this}addClassName(e){return this._classList.add(e),this._updateClassList(),this}removeClassName(e){return this._classList.delete(e),this._updateClassList(),this}setOffset(e){return this.options.offset=e,this._update(),this}toggleClassName(e){let t;return this._classList.delete(e)?t=!1:(this._classList.add(e),t=!0),this._updateClassList(),t}_onMouseEvent(e){this._update(e.point)}_getAnchor(e){if(this.options.anchor)return this.options.anchor;const t=this._map,i=this._container,r=this._pos;if(!t||!i||!r)return"bottom";const n=i.offsetWidth,o=i.offsetHeight,s=r.xt.transform.width-n/2;if(r.y+et.transform.height-o){if(s)return"bottom-left";if(a)return"bottom-right"}return s?"left":a?"right":"bottom"}_updateClassList(){const e=this._container;if(!e)return;const t=[...this._classList];t.push("mapboxgl-popup"),this._anchor&&t.push("mapboxgl-popup-anchor-"+this._anchor),this._trackPointer&&t.push("mapboxgl-popup-track-pointer"),e.className=t.join(" ")}_update(e){const t=this._map,i=this._content;if(!t||!this._lngLat&&!this._trackPointer||!i)return;let r=this._container;if(r||(r=this._container=o("div","mapboxgl-popup",t.getContainer()),this._tip=o("div","mapboxgl-popup-tip",r),r.appendChild(i)),this.options.maxWidth&&r.style.maxWidth!==this.options.maxWidth&&(r.style.maxWidth=this.options.maxWidth),t.transform.renderWorldCopies&&!this._trackPointer&&(this._lngLat=jn(this._lngLat,this._pos,t.transform)),!this._trackPointer||e){const i=this._pos=this._trackPointer&&e?e:t.project(this._lngLat),r=so(this.options.offset),n=this._anchor=this._getAnchor(r.y),o=so(this.options.offset,n),s=i.add(o).round();t._requestDomTask(()=>{this._container&&n&&(this._container.style.transform=`${Gn[n]} translate(${s.x}px,${s.y}px)`)})}this._updateClassList()}_focusFirstElement(){if(!this.options.focusAfterOpen||!this._container)return;const e=this._container.querySelector(oo);e&&e.focus()}_onClose(){this.remove()}_setOpacity(e){this._content&&(this._content.style.opacity=e),this._tip&&(this._tip.style.opacity=e)}},Marker:Zn,Style:Wt,LngLat:e.LngLat,LngLatBounds:e.LngLatBounds,Point:e.pointGeometry,MercatorCoordinate:e.MercatorCoordinate,FreeCameraOptions:kr,Evented:e.Evented,config:e.config,prewarm:function(){Ue().acquire(Re)},clearPrewarmedResources:function(){const e=Oe;e&&(e.isPreloaded()&&1===e.numActive()?(e.release(Re),Oe=null):console.warn("Could not clear WebWorkers since there are active Map instances that still reference it. The pre-warmed WebWorker pool can only be cleared when all map instances have been removed with map.remove()"))},get accessToken(){return e.config.ACCESS_TOKEN},set accessToken(t){e.config.ACCESS_TOKEN=t},get baseApiUrl(){return e.config.API_URL},set baseApiUrl(t){e.config.API_URL=t},get workerCount(){return Fe.workerCount},set workerCount(e){Fe.workerCount=e},get maxParallelImageRequests(){return e.config.MAX_PARALLEL_IMAGE_REQUESTS},set maxParallelImageRequests(t){e.config.MAX_PARALLEL_IMAGE_REQUESTS=t},clearStorage(t){e.clearTileCache(t)},workerUrl:"",workerClass:null,setNow:e.exported.setNow,restoreNow:e.exported.restoreNow};return ao})),i}()}}]); \ No newline at end of file diff --git a/27-df9d495cc4e63fdeea88.js b/27-df9d495cc4e63fdeea88.js deleted file mode 100644 index f73de381..00000000 --- a/27-df9d495cc4e63fdeea88.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{bhPm:function(t,e,i){t.exports=function(){"use strict";var t,e,i;function r(r,n){if(t)if(e){var o="self.onerror = function() { console.error('An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling'); }; var sharedChunk = {}; ("+t+")(sharedChunk); ("+e+")(sharedChunk); self.onerror = null;",s={};t(s),i=n(s),"undefined"!=typeof window&&(i.workerUrl=window.URL.createObjectURL(new Blob([o],{type:"text/javascript"})))}else e=n;else t=n}return r(0,(function(t){var e="2.6.1",i=r;function r(t,e,i,r){this.cx=3*t,this.bx=3*(i-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by,this.p1x=t,this.p1y=r,this.p2x=i,this.p2y=r}r.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},r.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},r.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},r.prototype.solveCurveX=function(t,e){var i,r,n,o,s;for(void 0===e&&(e=1e-6),n=t,s=0;s<8;s++){if(o=this.sampleCurveX(n)-t,Math.abs(o)(r=1))return r;for(;io?i=n:r=n,n=.5*(r-i)+i}return n},r.prototype.solve=function(t,e){return this.sampleCurveY(this.solveCurveX(t,e))};var n=o;function o(t,e){this.x=t,this.y=e}o.prototype={clone:function(){return new o(this.x,this.y)},add:function(t){return this.clone()._add(t)},sub:function(t){return this.clone()._sub(t)},multByPoint:function(t){return this.clone()._multByPoint(t)},divByPoint:function(t){return this.clone()._divByPoint(t)},mult:function(t){return this.clone()._mult(t)},div:function(t){return this.clone()._div(t)},rotate:function(t){return this.clone()._rotate(t)},rotateAround:function(t,e){return this.clone()._rotateAround(t,e)},matMult:function(t){return this.clone()._matMult(t)},unit:function(){return this.clone()._unit()},perp:function(){return this.clone()._perp()},round:function(){return this.clone()._round()},mag:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},equals:function(t){return this.x===t.x&&this.y===t.y},dist:function(t){return Math.sqrt(this.distSqr(t))},distSqr:function(t){var e=t.x-this.x,i=t.y-this.y;return e*e+i*i},angle:function(){return Math.atan2(this.y,this.x)},angleTo:function(t){return Math.atan2(this.y-t.y,this.x-t.x)},angleWith:function(t){return this.angleWithSep(t.x,t.y)},angleWithSep:function(t,e){return Math.atan2(this.x*e-this.y*t,this.x*t+this.y*e)},_matMult:function(t){var e=t[2]*this.x+t[3]*this.y;return this.x=t[0]*this.x+t[1]*this.y,this.y=e,this},_add:function(t){return this.x+=t.x,this.y+=t.y,this},_sub:function(t){return this.x-=t.x,this.y-=t.y,this},_mult:function(t){return this.x*=t,this.y*=t,this},_div:function(t){return this.x/=t,this.y/=t,this},_multByPoint:function(t){return this.x*=t.x,this.y*=t.y,this},_divByPoint:function(t){return this.x/=t.x,this.y/=t.y,this},_unit:function(){return this._div(this.mag()),this},_perp:function(){var t=this.y;return this.y=this.x,this.x=-t,this},_rotate:function(t){var e=Math.cos(t),i=Math.sin(t),r=i*this.x+e*this.y;return this.x=e*this.x-i*this.y,this.y=r,this},_rotateAround:function(t,e){var i=Math.cos(t),r=Math.sin(t),n=e.y+r*(this.x-e.x)+i*(this.y-e.y);return this.x=e.x+i*(this.x-e.x)-r*(this.y-e.y),this.y=n,this},_round:function(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this}},o.convert=function(t){return t instanceof o?t:Array.isArray(t)?new o(t[0],t[1]):t};var s="undefined"!=typeof self?self:{};const a=Math.pow(2,53)-1,l=Math.PI/180,c=180/Math.PI;function h(t){return t*l}function u(t){return t*c}const d=[[0,0],[1,0],[1,1],[0,1]];function p(t){if(t<=0)return 0;if(t>=1)return 1;const e=t*t,i=e*t;return 4*(t<.5?i:3*(t-e)+i-.75)}function f(t,e,r,n){const o=new i(t,e,r,n);return function(t){return o.solve(t)}}const m=f(.25,.1,.25,1);function _(t,e,i){return Math.min(i,Math.max(e,t))}function g(t,e,i){const r=i-e,n=((t-e)%r+r)%r+e;return n===e?i:n}function y(t,e,i){if(!t.length)return i(null,[]);let r=t.length;const n=new Array(t.length);let o=null;t.forEach((t,s)=>{e(t,(t,e)=>{t&&(o=t),n[s]=e,0==--r&&i(o,n)})})}function x(t){const e=[];for(const i in t)e.push(t[i]);return e}function v(t,...e){for(const i of e)for(const e in i)t[e]=i[e];return t}let b=1;function w(){return b++}function T(){return function t(e){return e?(e^16*Math.random()>>e/4).toString(16):([1e7]+-[1e3]+-4e3+-8e3+-1e11).replace(/[018]/g,t)}()}function E(t){return t<=1?1:Math.pow(2,Math.ceil(Math.log(t)/Math.LN2))}function S(t){return!!t&&/^[0-9a-f]{8}-[0-9a-f]{4}-[4][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(t)}function A(t,e){t.forEach(t=>{e[t]&&(e[t]=e[t].bind(e))})}function I(t,e){return-1!==t.indexOf(e,t.length-e.length)}function M(t,e,i){const r={};for(const n in t)r[n]=e.call(i||this,t[n],n,t);return r}function C(t,e,i){const r={};for(const n in t)e.call(i||this,t[n],n,t)&&(r[n]=t[n]);return r}function z(t){return Array.isArray(t)?t.map(z):"object"==typeof t&&t?M(t,z):t}const k={};function P(t){k[t]||("undefined"!=typeof console&&console.warn(t),k[t]=!0)}function D(t,e,i){return(i.y-t.y)*(e.x-t.x)>(e.y-t.y)*(i.x-t.x)}function L(t){let e=0;for(let i,r,n=0,o=t.length,s=o-1;n@\,;\:\\"\/\[\]\?\=\{\}\x7F]+)(?:\=(?:([^\x00-\x20\(\)<>@\,;\:\\"\/\[\]\?\=\{\}\x7F]+)|(?:\"((?:[^"\\]|\\.)*)\")))?/g,(t,i,r,n)=>{const o=r||n;return e[i]=!o||o.toLowerCase(),""}),e["max-age"]){const t=parseInt(e["max-age"],10);isNaN(t)?delete e["max-age"]:e["max-age"]=t}return e}let F,O,U,V=null;function N(t){if(null==V){const e=t.navigator?t.navigator.userAgent:null;V=!!t.safari||!(!e||!(/\b(iPad|iPhone|iPod)\b/.test(e)||e.match("Safari")&&!e.match("Chrome")))}return V}function j(t){try{const e=s[t];return e.setItem("_mapbox_test_",1),e.removeItem("_mapbox_test_"),!0}catch(t){return!1}}const G={now:()=>void 0!==U?U:s.performance.now(),setNow(t){U=t},restoreNow(){U=void 0},frame(t){const e=s.requestAnimationFrame(t);return{cancel:()=>s.cancelAnimationFrame(e)}},getImageData(t,e=0){const i=s.document.createElement("canvas"),r=i.getContext("2d");if(!r)throw new Error("failed to create canvas 2d context");return i.width=t.width,i.height=t.height,r.drawImage(t,0,0,t.width,t.height),r.getImageData(-e,-e,t.width+2*e,t.height+2*e)},resolveURL:t=>(F||(F=s.document.createElement("a")),F.href=t,F.href),get devicePixelRatio(){return s.devicePixelRatio},get prefersReducedMotion(){return!!s.matchMedia&&(null==O&&(O=s.matchMedia("(prefers-reduced-motion: reduce)")),O.matches)}};let Z;const q={API_URL:"https://api.mapbox.com",get API_URL_REGEX(){if(null==Z){const t=/^((https?:)?\/\/)?([^\/]+\.)?mapbox\.c(n|om)(\/|\?|$)/i;try{Z=null!={}.API_URL_REGEX?new RegExp({}.API_URL_REGEX):t}catch(e){Z=t}}return Z},get EVENTS_URL(){return this.API_URL?0===this.API_URL.indexOf("https://api.mapbox.cn")?"https://events.mapbox.cn/events/v2":0===this.API_URL.indexOf("https://api.mapbox.com")?"https://events.mapbox.com/events/v2":null:null},SESSION_PATH:"/map-sessions/v1",FEEDBACK_URL:"https://apps.mapbox.com/feedback",TILE_URL_VERSION:"v4",RASTER_URL_PREFIX:"raster/v1",REQUIRE_ACCESS_TOKEN:!0,ACCESS_TOKEN:null,MAX_PARALLEL_IMAGE_REQUESTS:16},$={supported:!1,testSupport:function(t){!H&&W&&(K?Y(t):X=t)}};let X,W,H=!1,K=!1;function Y(t){const e=t.createTexture();t.bindTexture(t.TEXTURE_2D,e);try{if(t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,W),t.isContextLost())return;$.supported=!0}catch(t){}t.deleteTexture(e),H=!0}s.document&&(W=s.document.createElement("img"),W.onload=function(){X&&Y(X),X=null,K=!0},W.onerror=function(){H=!0,X=null},W.src="data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=");const J="01",Q="NO_ACCESS_TOKEN";function tt(t){return 0===t.indexOf("mapbox:")}function et(t){return q.API_URL_REGEX.test(t)}const it=/^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/;function rt(t){const e=t.match(it);if(!e)throw new Error("Unable to parse URL object");return{protocol:e[1],authority:e[2],path:e[3]||"/",params:e[4]?e[4].split("&"):[]}}function nt(t){const e=t.params.length?"?"+t.params.join("&"):"";return`${t.protocol}://${t.authority}${t.path}${e}`}function ot(t){if(!t)return null;const e=t.split(".");if(!e||3!==e.length)return null;try{return JSON.parse(decodeURIComponent(s.atob(e[1]).split("").map(t=>"%"+("00"+t.charCodeAt(0).toString(16)).slice(-2)).join("")))}catch(t){return null}}class st{constructor(t){this.type=t,this.anonId=null,this.eventData={},this.queue=[],this.pendingRequest=null}getStorageKey(t){const e=ot(q.ACCESS_TOKEN);let i="";return i=e&&e.u?s.btoa(encodeURIComponent(e.u).replace(/%([0-9A-F]{2})/g,(t,e)=>String.fromCharCode(Number("0x"+e)))):q.ACCESS_TOKEN||"",t?`mapbox.eventData.${t}:${i}`:"mapbox.eventData:"+i}fetchEventData(){const t=j("localStorage"),e=this.getStorageKey(),i=this.getStorageKey("uuid");if(t)try{const t=s.localStorage.getItem(e);t&&(this.eventData=JSON.parse(t));const r=s.localStorage.getItem(i);r&&(this.anonId=r)}catch(t){P("Unable to read from LocalStorage")}}saveEventData(){const t=j("localStorage"),e=this.getStorageKey(),i=this.getStorageKey("uuid");if(t)try{s.localStorage.setItem(i,this.anonId),Object.keys(this.eventData).length>=1&&s.localStorage.setItem(e,JSON.stringify(this.eventData))}catch(t){P("Unable to write to LocalStorage")}}processRequests(t){}postEvent(t,i,r,n){if(!q.EVENTS_URL)return;const o=rt(q.EVENTS_URL);o.params.push("access_token="+(n||q.ACCESS_TOKEN||""));const s={event:this.type,created:new Date(t).toISOString(),sdkIdentifier:"mapbox-gl-js",sdkVersion:e,skuId:J,userId:this.anonId},a=i?v(s,i):s,l={url:nt(o),headers:{"Content-Type":"text/plain"},body:JSON.stringify([a])};this.pendingRequest=It(l,t=>{this.pendingRequest=null,r(t),this.saveEventData(),this.processRequests(n)})}queueRequest(t,e){this.queue.push(t),this.processRequests(e)}}const at=new class extends st{constructor(t){super("appUserTurnstile"),this._customAccessToken=t}postTurnstileEvent(t,e){q.EVENTS_URL&&q.ACCESS_TOKEN&&Array.isArray(t)&&t.some(t=>tt(t)||et(t))&&this.queueRequest(Date.now(),e)}processRequests(t){if(this.pendingRequest||0===this.queue.length)return;this.anonId&&this.eventData.lastSuccess&&this.eventData.tokenU||this.fetchEventData();const e=ot(q.ACCESS_TOKEN),i=e?e.u:q.ACCESS_TOKEN;let r=i!==this.eventData.tokenU;S(this.anonId)||(this.anonId=T(),r=!0);const n=this.queue.shift();if(this.eventData.lastSuccess){const t=new Date(this.eventData.lastSuccess),e=new Date(n),i=(n-this.eventData.lastSuccess)/864e5;r=r||i>=1||i<-1||t.getDate()!==e.getDate()}else r=!0;if(!r)return this.processRequests();this.postEvent(n,{"enabled.telemetry":!1},t=>{t||(this.eventData.lastSuccess=n,this.eventData.tokenU=i)},t)}},lt=at.postTurnstileEvent.bind(at),ct=new class extends st{constructor(){super("map.load"),this.success={},this.skuToken=""}postMapLoadEvent(t,e,i,r){this.skuToken=e,this.errorCb=r,q.EVENTS_URL&&(i||q.ACCESS_TOKEN?this.queueRequest({id:t,timestamp:Date.now()},i):this.errorCb(new Error(Q)))}processRequests(t){if(this.pendingRequest||0===this.queue.length)return;const{id:e,timestamp:i}=this.queue.shift();e&&this.success[e]||(this.anonId||this.fetchEventData(),S(this.anonId)||(this.anonId=T()),this.postEvent(i,{skuToken:this.skuToken},t=>{t?this.errorCb(t):e&&(this.success[e]=!0)},t))}},ht=ct.postMapLoadEvent.bind(ct),ut=new class extends st{constructor(){super("map.auth"),this.success={},this.skuToken=""}getSession(t,e,i,r){if(!q.API_URL||!q.SESSION_PATH)return;const n=rt(q.API_URL+q.SESSION_PATH);n.params.push("sku="+(e||"")),n.params.push("access_token="+(r||q.ACCESS_TOKEN||""));const o={url:nt(n),headers:{"Content-Type":"text/plain"}};this.pendingRequest=Mt(o,t=>{this.pendingRequest=null,i(t),this.saveEventData(),this.processRequests(r)})}getSessionAPI(t,e,i,r){this.skuToken=e,this.errorCb=r,q.SESSION_PATH&&q.API_URL&&(i||q.ACCESS_TOKEN?this.queueRequest({id:t,timestamp:Date.now()},i):this.errorCb(new Error(Q)))}processRequests(t){if(this.pendingRequest||0===this.queue.length)return;const{id:e,timestamp:i}=this.queue.shift();e&&this.success[e]||this.getSession(i,this.skuToken,t=>{t?this.errorCb(t):e&&(this.success[e]=!0)},t)}},dt=ut.getSessionAPI.bind(ut),pt=new Set,ft="mapbox-tiles";let mt,_t,gt=500,yt=50;function xt(){s.caches&&!mt&&(mt=s.caches.open(ft))}function vt(t){const e=t.indexOf("?");return e<0?t:t.slice(0,e)}let bt=1/0;const wt={Unknown:"Unknown",Style:"Style",Source:"Source",Tile:"Tile",Glyphs:"Glyphs",SpriteImage:"SpriteImage",SpriteJSON:"SpriteJSON",Image:"Image"};"function"==typeof Object.freeze&&Object.freeze(wt);class Tt extends Error{constructor(t,e,i){401===e&&et(i)&&(t+=": you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes"),super(t),this.status=e,this.url=i}toString(){return`${this.name}: ${this.message} (${this.status}): ${this.url}`}}const Et=B()?()=>self.worker&&self.worker.referrer:()=>("blob:"===s.location.protocol?s.parent:s).location.href,St=function(t,e){if(!(/^file:/.test(i=t.url)||/^file:/.test(Et())&&!/^\w+:/.test(i))){if(s.fetch&&s.Request&&s.AbortController&&s.Request.prototype.hasOwnProperty("signal"))return function(t,e){const i=new s.AbortController,r=new s.Request(t.url,{method:t.method||"GET",body:t.body,credentials:t.credentials,headers:t.headers,referrer:Et(),signal:i.signal});let n=!1,o=!1;const a=(l=r.url).indexOf("sku=")>0&&et(l);var l;"json"===t.type&&r.headers.set("Accept","application/json");const c=(i,n,l)=>{if(o)return;if(i&&"SecurityError"!==i.message&&P(i),n&&l)return h(n);const c=Date.now();s.fetch(r).then(i=>{if(i.ok){const t=a?i.clone():null;return h(i,t,c)}return e(new Tt(i.statusText,i.status,t.url))}).catch(t=>{20!==t.code&&e(new Error(t.message))})},h=(i,a,l)=>{("arrayBuffer"===t.type?i.arrayBuffer():"json"===t.type?i.json():i.text()).then(t=>{o||(a&&l&&function(t,e,i){if(xt(),!mt)return;const r={status:e.status,statusText:e.statusText,headers:new s.Headers};e.headers.forEach((t,e)=>r.headers.set(e,t));const n=R(e.headers.get("Cache-Control")||"");n["no-store"]||(n["max-age"]&&r.headers.set("Expires",new Date(i+1e3*n["max-age"]).toUTCString()),new Date(r.headers.get("Expires")).getTime()-i<42e4||function(t,e){if(void 0===_t)try{new Response(new ReadableStream),_t=!0}catch(t){_t=!1}_t?e(t.body):t.blob().then(e)}(e,e=>{const i=new s.Response(e,r);xt(),mt&&mt.then(e=>e.put(vt(t.url),i)).catch(t=>P(t.message))}))}(r,a,l),n=!0,e(null,t,i.headers.get("Cache-Control"),i.headers.get("Expires")))}).catch(t=>{o||e(new Error(t.message))})};return a?function(t,e){if(xt(),!mt)return e(null);const i=vt(t.url);mt.then(t=>{t.match(i).then(r=>{const n=function(t){if(!t)return!1;const e=new Date(t.headers.get("Expires")||0),i=R(t.headers.get("Cache-Control")||"");return e>Date.now()&&!i["no-cache"]}(r);t.delete(i),n&&t.put(i,r.clone()),e(null,r,n)}).catch(e)}).catch(e)}(r,c):c(null,null),{cancel:()=>{o=!0,n||i.abort()}}}(t,e);if(B()&&self.worker&&self.worker.actor)return self.worker.actor.send("getResource",t,e,void 0,!0)}var i;return function(t,e){const i=new s.XMLHttpRequest;i.open(t.method||"GET",t.url,!0),"arrayBuffer"===t.type&&(i.responseType="arraybuffer");for(const r in t.headers)i.setRequestHeader(r,t.headers[r]);return"json"===t.type&&(i.responseType="text",i.setRequestHeader("Accept","application/json")),i.withCredentials="include"===t.credentials,i.onerror=()=>{e(new Error(i.statusText))},i.onload=()=>{if((i.status>=200&&i.status<300||0===i.status)&&null!==i.response){let r=i.response;if("json"===t.type)try{r=JSON.parse(i.response)}catch(t){return e(t)}e(null,r,i.getResponseHeader("Cache-Control"),i.getResponseHeader("Expires"))}else e(new Tt(i.statusText,i.status,t.url))},i.send(t.body),{cancel:()=>i.abort()}}(t,e)},At=function(t,e){return St(v(t,{type:"arrayBuffer"}),e)},It=function(t,e){return St(v(t,{method:"POST"}),e)},Mt=function(t,e){return St(v(t,{method:"GET"}),e)};function Ct(t){const e=s.document.createElement("a");return e.href=t,e.protocol===s.document.location.protocol&&e.host===s.document.location.host}const zt="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=";let kt,Pt;kt=[],Pt=0;const Dt=function(t,e){if($.supported&&(t.headers||(t.headers={}),t.headers.accept="image/webp,*/*"),Pt>=q.MAX_PARALLEL_IMAGE_REQUESTS){const i={requestParameters:t,callback:e,cancelled:!1,cancel(){this.cancelled=!0}};return kt.push(i),i}Pt++;let i=!1;const r=()=>{if(!i)for(i=!0,Pt--;kt.length&&Pt{r(),t?e(t):i&&(s.createImageBitmap?function(t,e){const i=new s.Blob([new Uint8Array(t)],{type:"image/png"});s.createImageBitmap(i).then(t=>{e(null,t)}).catch(t=>{e(new Error(`Could not load image because of ${t.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`))})}(i,(t,i)=>e(t,i,n,o)):function(t,e){const i=new s.Image,r=s.URL;i.onload=()=>{e(null,i),r.revokeObjectURL(i.src),i.onload=null,s.requestAnimationFrame(()=>{i.src=zt})},i.onerror=()=>e(new Error("Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported."));const n=new s.Blob([new Uint8Array(t)],{type:"image/png"});i.src=t.byteLength?r.createObjectURL(n):zt}(i,(t,i)=>e(t,i,n,o)))});return{cancel:()=>{n.cancel(),r()}}};function Lt(t,e,i){i[t]&&-1!==i[t].indexOf(e)||(i[t]=i[t]||[],i[t].push(e))}function Bt(t,e,i){if(i&&i[t]){const r=i[t].indexOf(e);-1!==r&&i[t].splice(r,1)}}class Rt{constructor(t,e={}){v(this,e),this.type=t}}class Ft extends Rt{constructor(t,e={}){super("error",v({error:t},e))}}class Ot{on(t,e){return this._listeners=this._listeners||{},Lt(t,e,this._listeners),this}off(t,e){return Bt(t,e,this._listeners),Bt(t,e,this._oneTimeListeners),this}once(t,e){return e?(this._oneTimeListeners=this._oneTimeListeners||{},Lt(t,e,this._oneTimeListeners),this):new Promise(e=>this.once(t,e))}fire(t,e){"string"==typeof t&&(t=new Rt(t,e||{}));const i=t.type;if(this.listens(i)){t.target=this;const e=this._listeners&&this._listeners[i]?this._listeners[i].slice():[];for(const i of e)i.call(this,t);const r=this._oneTimeListeners&&this._oneTimeListeners[i]?this._oneTimeListeners[i].slice():[];for(const o of r)Bt(i,o,this._oneTimeListeners),o.call(this,t);const n=this._eventedParent;n&&(v(t,"function"==typeof this._eventedParentData?this._eventedParentData():this._eventedParentData),n.fire(t))}else t instanceof Ft&&console.error(t.error);return this}listens(t){return!!(this._listeners&&this._listeners[t]&&this._listeners[t].length>0||this._oneTimeListeners&&this._oneTimeListeners[t]&&this._oneTimeListeners[t].length>0||this._eventedParent&&this._eventedParent.listens(t))}setEventedParent(t,e){return this._eventedParent=t,this._eventedParentData=e,this}}var Ut=JSON.parse('{"$version":8,"$root":{"version":{"required":true,"type":"enum","values":[8]},"name":{"type":"string"},"metadata":{"type":"*"},"center":{"type":"array","value":"number"},"zoom":{"type":"number"},"bearing":{"type":"number","default":0,"period":360,"units":"degrees"},"pitch":{"type":"number","default":0,"units":"degrees"},"light":{"type":"light"},"terrain":{"type":"terrain"},"fog":{"type":"fog"},"sources":{"required":true,"type":"sources"},"sprite":{"type":"string"},"glyphs":{"type":"string"},"transition":{"type":"transition"},"projection":{"type":"projection"},"layers":{"required":true,"type":"array","value":"layer"}},"sources":{"*":{"type":"source"}},"source":["source_vector","source_raster","source_raster_dem","source_geojson","source_video","source_image"],"source_vector":{"type":{"required":true,"type":"enum","values":{"vector":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"scheme":{"type":"enum","values":{"xyz":{},"tms":{}},"default":"xyz"},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"attribution":{"type":"string"},"promoteId":{"type":"promoteId"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_raster":{"type":{"required":true,"type":"enum","values":{"raster":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"tileSize":{"type":"number","default":512,"units":"pixels"},"scheme":{"type":"enum","values":{"xyz":{},"tms":{}},"default":"xyz"},"attribution":{"type":"string"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_raster_dem":{"type":{"required":true,"type":"enum","values":{"raster-dem":{}}},"url":{"type":"string"},"tiles":{"type":"array","value":"string"},"bounds":{"type":"array","value":"number","length":4,"default":[-180,-85.051129,180,85.051129]},"minzoom":{"type":"number","default":0},"maxzoom":{"type":"number","default":22},"tileSize":{"type":"number","default":512,"units":"pixels"},"attribution":{"type":"string"},"encoding":{"type":"enum","values":{"terrarium":{},"mapbox":{}},"default":"mapbox"},"volatile":{"type":"boolean","default":false},"*":{"type":"*"}},"source_geojson":{"type":{"required":true,"type":"enum","values":{"geojson":{}}},"data":{"type":"*"},"maxzoom":{"type":"number","default":18},"attribution":{"type":"string"},"buffer":{"type":"number","default":128,"maximum":512,"minimum":0},"filter":{"type":"*"},"tolerance":{"type":"number","default":0.375},"cluster":{"type":"boolean","default":false},"clusterRadius":{"type":"number","default":50,"minimum":0},"clusterMaxZoom":{"type":"number"},"clusterMinPoints":{"type":"number"},"clusterProperties":{"type":"*"},"lineMetrics":{"type":"boolean","default":false},"generateId":{"type":"boolean","default":false},"promoteId":{"type":"promoteId"}},"source_video":{"type":{"required":true,"type":"enum","values":{"video":{}}},"urls":{"required":true,"type":"array","value":"string"},"coordinates":{"required":true,"type":"array","length":4,"value":{"type":"array","length":2,"value":"number"}}},"source_image":{"type":{"required":true,"type":"enum","values":{"image":{}}},"url":{"required":true,"type":"string"},"coordinates":{"required":true,"type":"array","length":4,"value":{"type":"array","length":2,"value":"number"}}},"layer":{"id":{"type":"string","required":true},"type":{"type":"enum","values":{"fill":{},"line":{},"symbol":{},"circle":{},"heatmap":{},"fill-extrusion":{},"raster":{},"hillshade":{},"background":{},"sky":{}},"required":true},"metadata":{"type":"*"},"source":{"type":"string"},"source-layer":{"type":"string"},"minzoom":{"type":"number","minimum":0,"maximum":24},"maxzoom":{"type":"number","minimum":0,"maximum":24},"filter":{"type":"filter"},"layout":{"type":"layout"},"paint":{"type":"paint"}},"layout":["layout_fill","layout_line","layout_circle","layout_heatmap","layout_fill-extrusion","layout_symbol","layout_raster","layout_hillshade","layout_background","layout_sky"],"layout_background":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_sky":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_fill":{"fill-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_circle":{"circle-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_heatmap":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_fill-extrusion":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_line":{"line-cap":{"type":"enum","values":{"butt":{},"round":{},"square":{}},"default":"butt","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"line-join":{"type":"enum","values":{"bevel":{},"round":{},"miter":{}},"default":"miter","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"line-miter-limit":{"type":"number","default":2,"requires":[{"line-join":"miter"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-round-limit":{"type":"number","default":1.05,"requires":[{"line-join":"round"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_symbol":{"symbol-placement":{"type":"enum","values":{"point":{},"line":{},"line-center":{}},"default":"point","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-spacing":{"type":"number","default":250,"minimum":1,"units":"pixels","requires":[{"symbol-placement":"line"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-avoid-edges":{"type":"boolean","default":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"symbol-sort-key":{"type":"number","expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"symbol-z-order":{"type":"enum","values":{"auto":{},"viewport-y":{},"source":{}},"default":"auto","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-allow-overlap":{"type":"boolean","default":false,"requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-ignore-placement":{"type":"boolean","default":false,"requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-optional":{"type":"boolean","default":false,"requires":["icon-image","text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-rotation-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-size":{"type":"number","default":1,"minimum":0,"units":"factor of the original icon size","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-text-fit":{"type":"enum","values":{"none":{},"width":{},"height":{},"both":{}},"default":"none","requires":["icon-image","text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-text-fit-padding":{"type":"array","value":"number","length":4,"default":[0,0,0,0],"units":"pixels","requires":["icon-image","text-field",{"icon-text-fit":["both","width","height"]}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-image":{"type":"resolvedImage","tokens":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-rotate":{"type":"number","default":0,"period":360,"units":"degrees","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-padding":{"type":"number","default":2,"minimum":0,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-keep-upright":{"type":"boolean","default":false,"requires":["icon-image",{"icon-rotation-alignment":"map"},{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"icon-offset":{"type":"array","value":"number","length":2,"default":[0,0],"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-anchor":{"type":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"default":"center","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"icon-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-rotation-alignment":{"type":"enum","values":{"map":{},"viewport":{},"auto":{}},"default":"auto","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-field":{"type":"formatted","default":"","tokens":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-font":{"type":"array","value":"string","default":["Open Sans Regular","Arial Unicode MS Regular"],"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-size":{"type":"number","default":16,"minimum":0,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-max-width":{"type":"number","default":10,"minimum":0,"units":"ems","requires":["text-field",{"symbol-placement":["point"]}],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-line-height":{"type":"number","default":1.2,"units":"ems","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-letter-spacing":{"type":"number","default":0,"units":"ems","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-justify":{"type":"enum","values":{"auto":{},"left":{},"center":{},"right":{}},"default":"center","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-radial-offset":{"type":"number","units":"ems","default":0,"requires":["text-field"],"property-type":"data-driven","expression":{"interpolated":true,"parameters":["zoom","feature"]}},"text-variable-anchor":{"type":"array","value":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"requires":["text-field",{"symbol-placement":["point"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-anchor":{"type":"enum","values":{"center":{},"left":{},"right":{},"top":{},"bottom":{},"top-left":{},"top-right":{},"bottom-left":{},"bottom-right":{}},"default":"center","requires":["text-field",{"!":"text-variable-anchor"}],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-max-angle":{"type":"number","default":45,"units":"degrees","requires":["text-field",{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-writing-mode":{"type":"array","value":"enum","values":{"horizontal":{},"vertical":{}},"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-rotate":{"type":"number","default":0,"period":360,"units":"degrees","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-padding":{"type":"number","default":2,"minimum":0,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-keep-upright":{"type":"boolean","default":true,"requires":["text-field",{"text-rotation-alignment":"map"},{"symbol-placement":["line","line-center"]}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-transform":{"type":"enum","values":{"none":{},"uppercase":{},"lowercase":{}},"default":"none","requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-offset":{"type":"array","value":"number","units":"ems","length":2,"default":[0,0],"requires":["text-field",{"!":"text-radial-offset"}],"expression":{"interpolated":true,"parameters":["zoom","feature"]},"property-type":"data-driven"},"text-allow-overlap":{"type":"boolean","default":false,"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-ignore-placement":{"type":"boolean","default":false,"requires":["text-field"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-optional":{"type":"boolean","default":false,"requires":["text-field","icon-image"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_raster":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"layout_hillshade":{"visibility":{"type":"enum","values":{"visible":{},"none":{}},"default":"visible","property-type":"constant"}},"filter":{"type":"array","value":"*"},"filter_symbol":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature","pitch","distance-from-center"]}},"filter_fill":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_line":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_circle":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_fill-extrusion":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_heatmap":{"type":"boolean","default":false,"transition":false,"property-type":"data-driven","expression":{"interpolated":false,"parameters":["zoom","feature"]}},"filter_operator":{"type":"enum","values":{"==":{},"!=":{},">":{},">=":{},"<":{},"<=":{},"in":{},"!in":{},"all":{},"any":{},"none":{},"has":{},"!has":{},"within":{}}},"geometry_type":{"type":"enum","values":{"Point":{},"LineString":{},"Polygon":{}}},"function":{"expression":{"type":"expression"},"stops":{"type":"array","value":"function_stop"},"base":{"type":"number","default":1,"minimum":0},"property":{"type":"string","default":"$zoom"},"type":{"type":"enum","values":{"identity":{},"exponential":{},"interval":{},"categorical":{}},"default":"exponential"},"colorSpace":{"type":"enum","values":{"rgb":{},"lab":{},"hcl":{}},"default":"rgb"},"default":{"type":"*","required":false}},"function_stop":{"type":"array","minimum":0,"maximum":24,"value":["number","color"],"length":2},"expression":{"type":"array","value":"*","minimum":1},"fog":{"range":{"type":"array","default":[0.5,10],"minimum":-20,"maximum":20,"length":2,"value":"number","property-type":"data-constant","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]}},"color":{"type":"color","property-type":"data-constant","default":"#ffffff","expression":{"interpolated":true,"parameters":["zoom"]},"transition":true},"horizon-blend":{"type":"number","property-type":"data-constant","default":0.1,"minimum":0,"maximum":1,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"light":{"anchor":{"type":"enum","default":"viewport","values":{"map":{},"viewport":{}},"property-type":"data-constant","transition":false,"expression":{"interpolated":false,"parameters":["zoom"]}},"position":{"type":"array","default":[1.15,210,30],"length":3,"value":"number","property-type":"data-constant","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]}},"color":{"type":"color","property-type":"data-constant","default":"#ffffff","expression":{"interpolated":true,"parameters":["zoom"]},"transition":true},"intensity":{"type":"number","property-type":"data-constant","default":0.5,"minimum":0,"maximum":1,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"projection":{"name":{"type":"enum","values":{"albers":{},"equalEarth":{},"equirectangular":{},"lambertConformalConic":{},"mercator":{},"naturalEarth":{},"winkelTripel":{}},"default":"mercator","required":true},"center":{"type":"array","length":2,"value":"number","property-type":"data-constant","transition":false,"requires":[{"name":["albers","lambertConformalConic"]}]},"parallels":{"type":"array","length":2,"value":"number","property-type":"data-constant","transition":false,"requires":[{"name":["albers","lambertConformalConic"]}]}},"terrain":{"source":{"type":"string","required":true},"exaggeration":{"type":"number","property-type":"data-constant","default":1,"minimum":0,"maximum":1000,"expression":{"interpolated":true,"parameters":["zoom"]},"transition":true}},"paint":["paint_fill","paint_line","paint_circle","paint_heatmap","paint_fill-extrusion","paint_symbol","paint_raster","paint_hillshade","paint_background","paint_sky"],"paint_fill":{"fill-antialias":{"type":"boolean","default":true,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"fill-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-outline-color":{"type":"color","transition":true,"requires":[{"!":"fill-pattern"},{"fill-antialias":true}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["fill-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"}},"paint_fill-extrusion":{"fill-extrusion-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"fill-extrusion-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["fill-extrusion-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"fill-extrusion-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"fill-extrusion-height":{"type":"number","default":0,"minimum":0,"units":"meters","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-base":{"type":"number","default":0,"minimum":0,"units":"meters","transition":true,"requires":["fill-extrusion-height"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"fill-extrusion-vertical-gradient":{"type":"boolean","default":true,"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_line":{"line-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"line-pattern"}],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"line-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["line-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"line-width":{"type":"number","default":1,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-gap-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-offset":{"type":"number","default":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"line-dasharray":{"type":"array","value":"number","minimum":0,"transition":true,"units":"line widths","requires":[{"!":"line-pattern"}],"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"line-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom","feature"]},"property-type":"cross-faded-data-driven"},"line-gradient":{"type":"color","transition":false,"requires":[{"!":"line-pattern"},{"source":"geojson","has":{"lineMetrics":true}}],"expression":{"interpolated":true,"parameters":["line-progress"]},"property-type":"color-ramp"}},"paint_circle":{"circle-radius":{"type":"number","default":5,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-blur":{"type":"number","default":0,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"circle-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["circle-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-pitch-scale":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-pitch-alignment":{"type":"enum","values":{"map":{},"viewport":{}},"default":"viewport","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"circle-stroke-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-stroke-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"circle-stroke-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"}},"paint_heatmap":{"heatmap-radius":{"type":"number","default":30,"minimum":1,"transition":true,"units":"pixels","expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"heatmap-weight":{"type":"number","default":1,"minimum":0,"transition":false,"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"heatmap-intensity":{"type":"number","default":1,"minimum":0,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"heatmap-color":{"type":"color","default":["interpolate",["linear"],["heatmap-density"],0,"rgba(0, 0, 255, 0)",0.1,"royalblue",0.3,"cyan",0.5,"lime",0.7,"yellow",1,"red"],"transition":false,"expression":{"interpolated":true,"parameters":["heatmap-density"]},"property-type":"color-ramp"},"heatmap-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_symbol":{"icon-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-color":{"type":"color","default":"#000000","transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-color":{"type":"color","default":"rgba(0, 0, 0, 0)","transition":true,"requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-halo-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"icon-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","requires":["icon-image"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"icon-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["icon-image","icon-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"text-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-color":{"type":"color","default":"#000000","transition":true,"overridable":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-color":{"type":"color","default":"rgba(0, 0, 0, 0)","transition":true,"requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-width":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-halo-blur":{"type":"number","default":0,"minimum":0,"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom","feature","feature-state"]},"property-type":"data-driven"},"text-translate":{"type":"array","value":"number","length":2,"default":[0,0],"transition":true,"units":"pixels","requires":["text-field"],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"text-translate-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"map","requires":["text-field","text-translate"],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_raster":{"raster-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-hue-rotate":{"type":"number","default":0,"period":360,"transition":true,"units":"degrees","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-brightness-min":{"type":"number","default":0,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-brightness-max":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-saturation":{"type":"number","default":0,"minimum":-1,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-contrast":{"type":"number","default":0,"minimum":-1,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"raster-resampling":{"type":"enum","values":{"linear":{},"nearest":{}},"default":"linear","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"raster-fade-duration":{"type":"number","default":300,"minimum":0,"transition":false,"units":"milliseconds","expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_hillshade":{"hillshade-illumination-direction":{"type":"number","default":335,"minimum":0,"maximum":359,"transition":false,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-illumination-anchor":{"type":"enum","values":{"map":{},"viewport":{}},"default":"viewport","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-exaggeration":{"type":"number","default":0.5,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-shadow-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-highlight-color":{"type":"color","default":"#FFFFFF","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"hillshade-accent-color":{"type":"color","default":"#000000","transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_background":{"background-color":{"type":"color","default":"#000000","transition":true,"requires":[{"!":"background-pattern"}],"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"},"background-pattern":{"type":"resolvedImage","transition":true,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"cross-faded"},"background-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"paint_sky":{"sky-type":{"type":"enum","values":{"gradient":{},"atmosphere":{}},"default":"atmosphere","expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-atmosphere-sun":{"type":"array","value":"number","length":2,"units":"degrees","minimum":[0,0],"maximum":[360,180],"transition":false,"requires":[{"sky-type":"atmosphere"}],"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-atmosphere-sun-intensity":{"type":"number","requires":[{"sky-type":"atmosphere"}],"default":10,"minimum":0,"maximum":100,"transition":false,"property-type":"data-constant"},"sky-gradient-center":{"type":"array","requires":[{"sky-type":"gradient"}],"value":"number","default":[0,0],"length":2,"units":"degrees","minimum":[0,0],"maximum":[360,180],"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-gradient-radius":{"type":"number","requires":[{"sky-type":"gradient"}],"default":90,"minimum":0,"maximum":180,"transition":false,"expression":{"interpolated":false,"parameters":["zoom"]},"property-type":"data-constant"},"sky-gradient":{"type":"color","default":["interpolate",["linear"],["sky-radial-progress"],0.8,"#87ceeb",1,"white"],"transition":false,"requires":[{"sky-type":"gradient"}],"expression":{"interpolated":true,"parameters":["sky-radial-progress"]},"property-type":"color-ramp"},"sky-atmosphere-halo-color":{"type":"color","default":"white","transition":false,"requires":[{"sky-type":"atmosphere"}],"property-type":"data-constant"},"sky-atmosphere-color":{"type":"color","default":"white","transition":false,"requires":[{"sky-type":"atmosphere"}],"property-type":"data-constant"},"sky-opacity":{"type":"number","default":1,"minimum":0,"maximum":1,"transition":true,"expression":{"interpolated":true,"parameters":["zoom"]},"property-type":"data-constant"}},"transition":{"duration":{"type":"number","default":300,"minimum":0,"units":"milliseconds"},"delay":{"type":"number","default":0,"minimum":0,"units":"milliseconds"}},"property-type":{"data-driven":{"type":"property-type"},"cross-faded":{"type":"property-type"},"cross-faded-data-driven":{"type":"property-type"},"color-ramp":{"type":"property-type"},"data-constant":{"type":"property-type"},"constant":{"type":"property-type"}},"promoteId":{"*":{"type":"string"}}}');class Vt{constructor(t,e,i,r){this.message=(t?t+": ":"")+i,r&&(this.identifier=r),null!=e&&e.__line__&&(this.line=e.__line__)}}function Nt(t){const e=t.value;return e?[new Vt(t.key,e,"constants have been deprecated as of v8")]:[]}function jt(t,...e){for(const i of e)for(const e in i)t[e]=i[e];return t}function Gt(t){return t instanceof Number||t instanceof String||t instanceof Boolean?t.valueOf():t}function Zt(t){if(Array.isArray(t))return t.map(Zt);if(t instanceof Object&&!(t instanceof Number||t instanceof String||t instanceof Boolean)){const e={};for(const i in t)e[i]=Zt(t[i]);return e}return Gt(t)}class qt extends Error{constructor(t,e){super(e),this.message=e,this.key=t}}class $t{constructor(t,e=[]){this.parent=t,this.bindings={};for(const[i,r]of e)this.bindings[i]=r}concat(t){return new $t(this,t)}get(t){if(this.bindings[t])return this.bindings[t];if(this.parent)return this.parent.get(t);throw new Error(t+" not found in scope.")}has(t){return!!this.bindings[t]||!!this.parent&&this.parent.has(t)}}const Xt={kind:"null"},Wt={kind:"number"},Ht={kind:"string"},Kt={kind:"boolean"},Yt={kind:"color"},Jt={kind:"object"},Qt={kind:"value"},te={kind:"collator"},ee={kind:"formatted"},ie={kind:"resolvedImage"};function re(t,e){return{kind:"array",itemType:t,N:e}}function ne(t){if("array"===t.kind){const e=ne(t.itemType);return"number"==typeof t.N?`array<${e}, ${t.N}>`:"value"===t.itemType.kind?"array":`array<${e}>`}return t.kind}const oe=[Xt,Wt,Ht,Kt,Yt,ee,Jt,re(Qt),ie];function se(t,e){if("error"===e.kind)return null;if("array"===t.kind){if("array"===e.kind&&(0===e.N&&"value"===e.itemType.kind||!se(t.itemType,e.itemType))&&("number"!=typeof t.N||t.N===e.N))return null}else{if(t.kind===e.kind)return null;if("value"===t.kind)for(const t of oe)if(!se(t,e))return null}return`Expected ${ne(t)} but found ${ne(e)} instead.`}function ae(t,e){return e.some(e=>e.kind===t.kind)}function le(t,e){return e.some(e=>"null"===e?null===t:"array"===e?Array.isArray(t):"object"===e?t&&!Array.isArray(t)&&"object"==typeof t:e===typeof t)}function ce(t){var e={exports:{}};return t(e,e.exports),e.exports}var he=ce((function(t,e){var i={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],rebeccapurple:[102,51,153,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function r(t){return(t=Math.round(t))<0?0:t>255?255:t}function n(t){return r("%"===t[t.length-1]?parseFloat(t)/100*255:parseInt(t))}function o(t){return(e="%"===t[t.length-1]?parseFloat(t)/100:parseFloat(t))<0?0:e>1?1:e;var e}function s(t,e,i){return i<0?i+=1:i>1&&(i-=1),6*i<1?t+(e-t)*i*6:2*i<1?e:3*i<2?t+(e-t)*(2/3-i)*6:t}try{e.parseCSSColor=function(t){var e,a=t.replace(/ /g,"").toLowerCase();if(a in i)return i[a].slice();if("#"===a[0])return 4===a.length?(e=parseInt(a.substr(1),16))>=0&&e<=4095?[(3840&e)>>4|(3840&e)>>8,240&e|(240&e)>>4,15&e|(15&e)<<4,1]:null:7===a.length&&(e=parseInt(a.substr(1),16))>=0&&e<=16777215?[(16711680&e)>>16,(65280&e)>>8,255&e,1]:null;var l=a.indexOf("("),c=a.indexOf(")");if(-1!==l&&c+1===a.length){var h=a.substr(0,l),u=a.substr(l+1,c-(l+1)).split(","),d=1;switch(h){case"rgba":if(4!==u.length)return null;d=o(u.pop());case"rgb":return 3!==u.length?null:[n(u[0]),n(u[1]),n(u[2]),d];case"hsla":if(4!==u.length)return null;d=o(u.pop());case"hsl":if(3!==u.length)return null;var p=(parseFloat(u[0])%360+360)%360/360,f=o(u[1]),m=o(u[2]),_=m<=.5?m*(f+1):m+f-m*f,g=2*m-_;return[r(255*s(g,_,p+1/3)),r(255*s(g,_,p)),r(255*s(g,_,p-1/3)),d];default:return null}}return null}}catch(t){}}));class ue{constructor(t,e,i,r=1){this.r=t,this.g=e,this.b=i,this.a=r}static parse(t){if(!t)return;if(t instanceof ue)return t;if("string"!=typeof t)return;const e=he.parseCSSColor(t);return e?new ue(e[0]/255*e[3],e[1]/255*e[3],e[2]/255*e[3],e[3]):void 0}toString(){const[t,e,i,r]=this.toArray();return`rgba(${Math.round(t)},${Math.round(e)},${Math.round(i)},${r})`}toArray(){const{r:t,g:e,b:i,a:r}=this;return 0===r?[0,0,0,0]:[255*t/r,255*e/r,255*i/r,r]}}ue.black=new ue(0,0,0,1),ue.white=new ue(1,1,1,1),ue.transparent=new ue(0,0,0,0),ue.red=new ue(1,0,0,1),ue.blue=new ue(0,0,1,1);class de{constructor(t,e,i){this.sensitivity=t?e?"variant":"case":e?"accent":"base",this.locale=i,this.collator=new Intl.Collator(this.locale?this.locale:[],{sensitivity:this.sensitivity,usage:"search"})}compare(t,e){return this.collator.compare(t,e)}resolvedLocale(){return new Intl.Collator(this.locale?this.locale:[]).resolvedOptions().locale}}class pe{constructor(t,e,i,r,n){this.text=t,this.image=e,this.scale=i,this.fontStack=r,this.textColor=n}}class fe{constructor(t){this.sections=t}static fromString(t){return new fe([new pe(t,null,null,null,null)])}isEmpty(){return 0===this.sections.length||!this.sections.some(t=>0!==t.text.length||t.image&&0!==t.image.name.length)}static factory(t){return t instanceof fe?t:fe.fromString(t)}toString(){return 0===this.sections.length?"":this.sections.map(t=>t.text).join("")}serialize(){const t=["format"];for(const e of this.sections){if(e.image){t.push(["image",e.image.name]);continue}t.push(e.text);const i={};e.fontStack&&(i["text-font"]=["literal",e.fontStack.split(",")]),e.scale&&(i["font-scale"]=e.scale),e.textColor&&(i["text-color"]=["rgba"].concat(e.textColor.toArray())),t.push(i)}return t}}class me{constructor(t){this.name=t.name,this.available=t.available}toString(){return this.name}static fromString(t){return t?new me({name:t,available:!1}):null}serialize(){return["image",this.name]}}function _e(t,e,i,r){return"number"==typeof t&&t>=0&&t<=255&&"number"==typeof e&&e>=0&&e<=255&&"number"==typeof i&&i>=0&&i<=255?void 0===r||"number"==typeof r&&r>=0&&r<=1?null:`Invalid rgba value [${[t,e,i,r].join(", ")}]: 'a' must be between 0 and 1.`:`Invalid rgba value [${("number"==typeof r?[t,e,i,r]:[t,e,i]).join(", ")}]: 'r', 'g', and 'b' must be between 0 and 255.`}function ge(t){if(null===t)return!0;if("string"==typeof t)return!0;if("boolean"==typeof t)return!0;if("number"==typeof t)return!0;if(t instanceof ue)return!0;if(t instanceof de)return!0;if(t instanceof fe)return!0;if(t instanceof me)return!0;if(Array.isArray(t)){for(const e of t)if(!ge(e))return!1;return!0}if("object"==typeof t){for(const e in t)if(!ge(t[e]))return!1;return!0}return!1}function ye(t){if(null===t)return Xt;if("string"==typeof t)return Ht;if("boolean"==typeof t)return Kt;if("number"==typeof t)return Wt;if(t instanceof ue)return Yt;if(t instanceof de)return te;if(t instanceof fe)return ee;if(t instanceof me)return ie;if(Array.isArray(t)){const e=t.length;let i;for(const r of t){const t=ye(r);if(i){if(i===t)continue;i=Qt;break}i=t}return re(i||Qt,e)}return Jt}function xe(t){const e=typeof t;return null===t?"":"string"===e||"number"===e||"boolean"===e?String(t):t instanceof ue||t instanceof fe||t instanceof me?t.toString():JSON.stringify(t)}class ve{constructor(t,e){this.type=t,this.value=e}static parse(t,e){if(2!==t.length)return e.error(`'literal' expression requires exactly one argument, but found ${t.length-1} instead.`);if(!ge(t[1]))return e.error("invalid value");const i=t[1];let r=ye(i);const n=e.expectedType;return"array"!==r.kind||0!==r.N||!n||"array"!==n.kind||"number"==typeof n.N&&0!==n.N||(r=n),new ve(r,i)}evaluate(){return this.value}eachChild(){}outputDefined(){return!0}serialize(){return"array"===this.type.kind||"object"===this.type.kind?["literal",this.value]:this.value instanceof ue?["rgba"].concat(this.value.toArray()):this.value instanceof fe?this.value.serialize():this.value}}class be{constructor(t){this.name="ExpressionEvaluationError",this.message=t}toJSON(){return this.message}}const we={string:Ht,number:Wt,boolean:Kt,object:Jt};class Te{constructor(t,e){this.type=t,this.args=e}static parse(t,e){if(t.length<2)return e.error("Expected at least one argument.");let i,r=1;const n=t[0];if("array"===n){let n,o;if(t.length>2){const i=t[1];if("string"!=typeof i||!(i in we)||"object"===i)return e.error('The item type argument of "array" must be one of string, number, boolean',1);n=we[i],r++}else n=Qt;if(t.length>3){if(null!==t[2]&&("number"!=typeof t[2]||t[2]<0||t[2]!==Math.floor(t[2])))return e.error('The length argument to "array" must be a positive integer literal',2);o=t[2],r++}i=re(n,o)}else i=we[n];const o=[];for(;rt.outputDefined())}serialize(){const t=this.type,e=[t.kind];if("array"===t.kind){const i=t.itemType;if("string"===i.kind||"number"===i.kind||"boolean"===i.kind){e.push(i.kind);const r=t.N;("number"==typeof r||this.args.length>1)&&e.push(r)}}return e.concat(this.args.map(t=>t.serialize()))}}class Ee{constructor(t){this.type=ee,this.sections=t}static parse(t,e){if(t.length<2)return e.error("Expected at least one argument.");const i=t[1];if(!Array.isArray(i)&&"object"==typeof i)return e.error("First argument must be an image or text section.");const r=[];let n=!1;for(let o=1;o<=t.length-1;++o){const i=t[o];if(n&&"object"==typeof i&&!Array.isArray(i)){n=!1;let t=null;if(i["font-scale"]&&(t=e.parse(i["font-scale"],1,Wt),!t))return null;let o=null;if(i["text-font"]&&(o=e.parse(i["text-font"],1,re(Ht)),!o))return null;let s=null;if(i["text-color"]&&(s=e.parse(i["text-color"],1,Yt),!s))return null;const a=r[r.length-1];a.scale=t,a.font=o,a.textColor=s}else{const i=e.parse(t[o],1,Qt);if(!i)return null;const s=i.type.kind;if("string"!==s&&"value"!==s&&"null"!==s&&"resolvedImage"!==s)return e.error("Formatted text type must be 'string', 'value', 'image' or 'null'.");n=!0,r.push({content:i,scale:null,font:null,textColor:null})}}return new Ee(r)}evaluate(t){return new fe(this.sections.map(e=>{const i=e.content.evaluate(t);return ye(i)===ie?new pe("",i,null,null,null):new pe(xe(i),null,e.scale?e.scale.evaluate(t):null,e.font?e.font.evaluate(t).join(","):null,e.textColor?e.textColor.evaluate(t):null)}))}eachChild(t){for(const e of this.sections)t(e.content),e.scale&&t(e.scale),e.font&&t(e.font),e.textColor&&t(e.textColor)}outputDefined(){return!1}serialize(){const t=["format"];for(const e of this.sections){t.push(e.content.serialize());const i={};e.scale&&(i["font-scale"]=e.scale.serialize()),e.font&&(i["text-font"]=e.font.serialize()),e.textColor&&(i["text-color"]=e.textColor.serialize()),t.push(i)}return t}}class Se{constructor(t){this.type=ie,this.input=t}static parse(t,e){if(2!==t.length)return e.error("Expected two arguments.");const i=e.parse(t[1],1,Ht);return i?new Se(i):e.error("No image name provided.")}evaluate(t){const e=this.input.evaluate(t),i=me.fromString(e);return i&&t.availableImages&&(i.available=t.availableImages.indexOf(e)>-1),i}eachChild(t){t(this.input)}outputDefined(){return!1}serialize(){return["image",this.input.serialize()]}}const Ae={"to-boolean":Kt,"to-color":Yt,"to-number":Wt,"to-string":Ht};class Ie{constructor(t,e){this.type=t,this.args=e}static parse(t,e){if(t.length<2)return e.error("Expected at least one argument.");const i=t[0];if(("to-boolean"===i||"to-string"===i)&&2!==t.length)return e.error("Expected one argument.");const r=Ae[i],n=[];for(let o=1;o4?`Invalid rbga value ${JSON.stringify(e)}: expected an array containing either three or four numeric values.`:_e(e[0],e[1],e[2],e[3]),!i))return new ue(e[0]/255,e[1]/255,e[2]/255,e[3])}throw new be(i||`Could not parse color from value '${"string"==typeof e?e:String(JSON.stringify(e))}'`)}if("number"===this.type.kind){let e=null;for(const i of this.args){if(e=i.evaluate(t),null===e)return 0;const r=Number(e);if(!isNaN(r))return r}throw new be(`Could not convert ${JSON.stringify(e)} to number.`)}return"formatted"===this.type.kind?fe.fromString(xe(this.args[0].evaluate(t))):"resolvedImage"===this.type.kind?me.fromString(xe(this.args[0].evaluate(t))):xe(this.args[0].evaluate(t))}eachChild(t){this.args.forEach(t)}outputDefined(){return this.args.every(t=>t.outputDefined())}serialize(){if("formatted"===this.type.kind)return new Ee([{content:this.args[0],scale:null,font:null,textColor:null}]).serialize();if("resolvedImage"===this.type.kind)return new Se(this.args[0]).serialize();const t=["to-"+this.type.kind];return this.eachChild(e=>{t.push(e.serialize())}),t}}const Me=["Unknown","Point","LineString","Polygon"];class Ce{constructor(){this.globals=null,this.feature=null,this.featureState=null,this.formattedSection=null,this._parseColorCache={},this.availableImages=null,this.canonical=null,this.featureTileCoord=null,this.featureDistanceData=null}id(){return this.feature&&"id"in this.feature?this.feature.id:null}geometryType(){return this.feature?"number"==typeof this.feature.type?Me[this.feature.type]:this.feature.type:null}geometry(){return this.feature&&"geometry"in this.feature?this.feature.geometry:null}canonicalID(){return this.canonical}properties(){return this.feature&&this.feature.properties||{}}distanceFromCenter(){if(this.featureTileCoord&&this.featureDistanceData){const t=this.featureDistanceData.center,e=this.featureDistanceData.scale,{x:i,y:r}=this.featureTileCoord;return this.featureDistanceData.bearing[0]*(i*e-t[0])+this.featureDistanceData.bearing[1]*(r*e-t[1])}return 0}parseColor(t){let e=this._parseColorCache[t];return e||(e=this._parseColorCache[t]=ue.parse(t)),e}}class ze{constructor(t,e,i,r){this.name=t,this.type=e,this._evaluate=i,this.args=r}evaluate(t){return this._evaluate(t,this.args)}eachChild(t){this.args.forEach(t)}outputDefined(){return!1}serialize(){return[this.name].concat(this.args.map(t=>t.serialize()))}static parse(t,e){const i=t[0],r=ze.definitions[i];if(!r)return e.error(`Unknown expression "${i}". If you wanted a literal array, use ["literal", [...]].`,0);const n=Array.isArray(r)?r[0]:r.type,o=Array.isArray(r)?[[r[1],r[2]]]:r.overloads,s=o.filter(([e])=>!Array.isArray(e)||e.length===t.length-1);let a=null;for(const[l,c]of s){a=new Qe(e.registry,e.path,null,e.scope);const r=[];let o=!1;for(let e=1;e{return e=t,Array.isArray(e)?`(${e.map(ne).join(", ")})`:`(${ne(e.type)}...)`;var e}).join(" | "),r=[];for(let n=1;n=e[2]||t[1]<=e[1]||t[3]>=e[3])}function Be(t,e){const i=(180+t[0])/360,r=(180-180/Math.PI*Math.log(Math.tan(Math.PI/4+t[1]*Math.PI/360)))/360,n=Math.pow(2,e.z);return[Math.round(i*n*Pe),Math.round(r*n*Pe)]}function Re(t,e,i){const r=t[0]-e[0],n=t[1]-e[1],o=t[0]-i[0],s=t[1]-i[1];return r*s-o*n==0&&r*o<=0&&n*s<=0}function Fe(t,e){let i=!1;for(let s=0,a=e.length;s(r=t)[1]!=(o=a[e+1])[1]>r[1]&&r[0]<(o[0]-n[0])*(r[1]-n[1])/(o[1]-n[1])+n[0]&&(i=!i)}}var r,n,o;return i}function Oe(t,e){for(let i=0;i0&&a<0||s<0&&a>0}function Ve(t,e,i){for(const c of i)for(let i=0;ii[2]){const e=.5*r;let n=t[0]-i[0]>e?-r:i[0]-t[0]>e?r:0;0===n&&(n=t[0]-i[2]>e?-r:i[2]-t[0]>e?r:0),t[0]+=n}De(e,t)}function $e(t,e,i,r){const n=Math.pow(2,r.z)*Pe,o=[r.x*Pe,r.y*Pe],s=[];for(const a of t)for(const t of a){const r=[t.x+o[0],t.y+o[1]];qe(r,e,i,n),s.push(r)}return s}function Xe(t,e,i,r){const n=Math.pow(2,r.z)*Pe,o=[r.x*Pe,r.y*Pe],s=[];for(const l of t){const t=[];for(const i of l){const r=[i.x+o[0],i.y+o[1]];De(e,r),t.push(r)}s.push(t)}if(e[2]-e[0]<=n/2){(a=e)[0]=a[1]=1/0,a[2]=a[3]=-1/0;for(const t of s)for(const r of t)qe(r,e,i,n)}var a;return s}class We{constructor(t,e){this.type=Kt,this.geojson=t,this.geometries=e}static parse(t,e){if(2!==t.length)return e.error(`'within' expression requires exactly one argument, but found ${t.length-1} instead.`);if(ge(t[1])){const e=t[1];if("FeatureCollection"===e.type)for(let t=0;t{e&&!He(t)&&(e=!1)}),e}function Ke(t){if(t instanceof ze&&"feature-state"===t.name)return!1;let e=!0;return t.eachChild(t=>{e&&!Ke(t)&&(e=!1)}),e}function Ye(t,e){if(t instanceof ze&&e.indexOf(t.name)>=0)return!1;let i=!0;return t.eachChild(t=>{i&&!Ye(t,e)&&(i=!1)}),i}class Je{constructor(t,e){this.type=e.type,this.name=t,this.boundExpression=e}static parse(t,e){if(2!==t.length||"string"!=typeof t[1])return e.error("'var' expression requires exactly one string literal argument.");const i=t[1];return e.scope.has(i)?new Je(i,e.scope.get(i)):e.error(`Unknown variable "${i}". Make sure "${i}" has been bound in an enclosing "let" expression before using it.`,1)}evaluate(t){return this.boundExpression.evaluate(t)}eachChild(){}outputDefined(){return!1}serialize(){return["var",this.name]}}class Qe{constructor(t,e=[],i,r=new $t,n=[]){this.registry=t,this.path=e,this.key=e.map(t=>`[${t}]`).join(""),this.scope=r,this.errors=n,this.expectedType=i}parse(t,e,i,r,n={}){return e?this.concat(e,i,r)._parse(t,n):this._parse(t,n)}_parse(t,e){function i(t,e,i){return"assert"===i?new Te(e,[t]):"coerce"===i?new Ie(e,[t]):t}if(null!==t&&"string"!=typeof t&&"boolean"!=typeof t&&"number"!=typeof t||(t=["literal",t]),Array.isArray(t)){if(0===t.length)return this.error('Expected an array with at least one element. If you wanted a literal array, use ["literal", []].');const r=t[0];if("string"!=typeof r)return this.error(`Expression name must be a string, but found ${typeof r} instead. If you wanted a literal array, use ["literal", [...]].`,0),null;const n=this.registry[r];if(n){let r=n.parse(t,this);if(!r)return null;if(this.expectedType){const t=this.expectedType,n=r.type;if("string"!==t.kind&&"number"!==t.kind&&"boolean"!==t.kind&&"object"!==t.kind&&"array"!==t.kind||"value"!==n.kind)if("color"!==t.kind&&"formatted"!==t.kind&&"resolvedImage"!==t.kind||"value"!==n.kind&&"string"!==n.kind){if(this.checkSubtype(t,n))return null}else r=i(r,t,e.typeAnnotation||"coerce");else r=i(r,t,e.typeAnnotation||"assert")}if(!(r instanceof ve)&&"resolvedImage"!==r.type.kind&&function t(e){if(e instanceof Je)return t(e.boundExpression);if(e instanceof ze&&"error"===e.name)return!1;if(e instanceof ke)return!1;if(e instanceof We)return!1;const i=e instanceof Ie||e instanceof Te;let r=!0;return e.eachChild(e=>{r=i?r&&t(e):r&&e instanceof ve}),!!r&&He(e)&&Ye(e,["zoom","heatmap-density","line-progress","sky-radial-progress","accumulated","is-supported-script","pitch","distance-from-center"])}(r)){const e=new Ce;try{r=new ve(r.type,r.evaluate(e))}catch(t){return this.error(t.message),null}}return r}return this.error(`Unknown expression "${r}". If you wanted a literal array, use ["literal", [...]].`,0)}return this.error(void 0===t?"'undefined' value invalid. Use null instead.":"object"==typeof t?'Bare objects invalid. Use ["literal", {...}] instead.':`Expected an array, but found ${typeof t} instead.`)}concat(t,e,i){const r="number"==typeof t?this.path.concat(t):this.path,n=i?this.scope.concat(i):this.scope;return new Qe(this.registry,r,e||null,n,this.errors)}error(t,...e){const i=`${this.key}${e.map(t=>`[${t}]`).join("")}`;this.errors.push(new qt(i,t))}checkSubtype(t,e){const i=se(t,e);return i&&this.error(i),i}}function ti(t,e){const i=t.length-1;let r,n,o=0,s=i,a=0;for(;o<=s;)if(a=Math.floor((o+s)/2),r=t[a],n=t[a+1],r<=e){if(a===i||ee))throw new be("Input is not a number.");s=a-1}return 0}class ei{constructor(t,e,i){this.type=t,this.input=e,this.labels=[],this.outputs=[];for(const[r,n]of i)this.labels.push(r),this.outputs.push(n)}static parse(t,e){if(t.length-1<4)return e.error(`Expected at least 4 arguments, but found only ${t.length-1}.`);if((t.length-1)%2!=0)return e.error("Expected an even number of arguments.");const i=e.parse(t[1],1,Wt);if(!i)return null;const r=[];let n=null;e.expectedType&&"value"!==e.expectedType.kind&&(n=e.expectedType);for(let o=1;o=i)return e.error('Input/output pairs for "step" expressions must be arranged with input values in strictly ascending order.',a);const c=e.parse(s,l,n);if(!c)return null;n=n||c.type,r.push([i,c])}return new ei(n,i,r)}evaluate(t){const e=this.labels,i=this.outputs;if(1===e.length)return i[0].evaluate(t);const r=this.input.evaluate(t);if(r<=e[0])return i[0].evaluate(t);const n=e.length;return r>=e[n-1]?i[n-1].evaluate(t):i[ti(e,r)].evaluate(t)}eachChild(t){t(this.input);for(const e of this.outputs)t(e)}outputDefined(){return this.outputs.every(t=>t.outputDefined())}serialize(){const t=["step",this.input.serialize()];for(let e=0;e0&&t.push(this.labels[e]),t.push(this.outputs[e].serialize());return t}}function ii(t,e,i){return t*(1-i)+e*i}var ri=Object.freeze({__proto__:null,number:ii,color:function(t,e,i){return new ue(ii(t.r,e.r,i),ii(t.g,e.g,i),ii(t.b,e.b,i),ii(t.a,e.a,i))},array:function(t,e,i){return t.map((t,r)=>ii(t,e[r],i))}});const ni=6/29*3*(6/29),oi=Math.PI/180,si=180/Math.PI;function ai(t){return t>.008856451679035631?Math.pow(t,1/3):t/ni+4/29}function li(t){return t>6/29?t*t*t:ni*(t-4/29)}function ci(t){return 255*(t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function hi(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function ui(t){const e=hi(t.r),i=hi(t.g),r=hi(t.b),n=ai((.4124564*e+.3575761*i+.1804375*r)/.95047),o=ai((.2126729*e+.7151522*i+.072175*r)/1);return{l:116*o-16,a:500*(n-o),b:200*(o-ai((.0193339*e+.119192*i+.9503041*r)/1.08883)),alpha:t.a}}function di(t){let e=(t.l+16)/116,i=isNaN(t.a)?e:e+t.a/500,r=isNaN(t.b)?e:e-t.b/200;return e=1*li(e),i=.95047*li(i),r=1.08883*li(r),new ue(ci(3.2404542*i-1.5371385*e-.4985314*r),ci(-.969266*i+1.8760108*e+.041556*r),ci(.0556434*i-.2040259*e+1.0572252*r),t.alpha)}function pi(t,e,i){const r=e-t;return t+i*(r>180||r<-180?r-360*Math.round(r/360):r)}const fi={forward:ui,reverse:di,interpolate:function(t,e,i){return{l:ii(t.l,e.l,i),a:ii(t.a,e.a,i),b:ii(t.b,e.b,i),alpha:ii(t.alpha,e.alpha,i)}}},mi={forward:function(t){const{l:e,a:i,b:r}=ui(t),n=Math.atan2(r,i)*si;return{h:n<0?n+360:n,c:Math.sqrt(i*i+r*r),l:e,alpha:t.a}},reverse:function(t){const e=t.h*oi,i=t.c;return di({l:t.l,a:Math.cos(e)*i,b:Math.sin(e)*i,alpha:t.alpha})},interpolate:function(t,e,i){return{h:pi(t.h,e.h,i),c:ii(t.c,e.c,i),l:ii(t.l,e.l,i),alpha:ii(t.alpha,e.alpha,i)}}};var _i=Object.freeze({__proto__:null,lab:fi,hcl:mi});class gi{constructor(t,e,i,r,n){this.type=t,this.operator=e,this.interpolation=i,this.input=r,this.labels=[],this.outputs=[];for(const[o,s]of n)this.labels.push(o),this.outputs.push(s)}static interpolationFactor(t,e,r,n){let o=0;if("exponential"===t.name)o=yi(e,t.base,r,n);else if("linear"===t.name)o=yi(e,1,r,n);else if("cubic-bezier"===t.name){const s=t.controlPoints;o=new i(s[0],s[1],s[2],s[3]).solve(yi(e,1,r,n))}return o}static parse(t,e){let[i,r,n,...o]=t;if(!Array.isArray(r)||0===r.length)return e.error("Expected an interpolation type expression.",1);if("linear"===r[0])r={name:"linear"};else if("exponential"===r[0]){const t=r[1];if("number"!=typeof t)return e.error("Exponential interpolation requires a numeric base.",1,1);r={name:"exponential",base:t}}else{if("cubic-bezier"!==r[0])return e.error("Unknown interpolation type "+String(r[0]),1,0);{const t=r.slice(1);if(4!==t.length||t.some(t=>"number"!=typeof t||t<0||t>1))return e.error("Cubic bezier interpolation requires four numeric arguments with values between 0 and 1.",1);r={name:"cubic-bezier",controlPoints:t}}}if(t.length-1<4)return e.error(`Expected at least 4 arguments, but found only ${t.length-1}.`);if((t.length-1)%2!=0)return e.error("Expected an even number of arguments.");if(n=e.parse(n,2,Wt),!n)return null;const s=[];let a=null;"interpolate-hcl"===i||"interpolate-lab"===i?a=Yt:e.expectedType&&"value"!==e.expectedType.kind&&(a=e.expectedType);for(let l=0;l=t)return e.error('Input/output pairs for "interpolate" expressions must be arranged with input values in strictly ascending order.',r);const c=e.parse(i,n,a);if(!c)return null;a=a||c.type,s.push([t,c])}return"number"===a.kind||"color"===a.kind||"array"===a.kind&&"number"===a.itemType.kind&&"number"==typeof a.N?new gi(a,i,r,n,s):e.error(`Type ${ne(a)} is not interpolatable.`)}evaluate(t){const e=this.labels,i=this.outputs;if(1===e.length)return i[0].evaluate(t);const r=this.input.evaluate(t);if(r<=e[0])return i[0].evaluate(t);const n=e.length;if(r>=e[n-1])return i[n-1].evaluate(t);const o=ti(e,r),s=gi.interpolationFactor(this.interpolation,r,e[o],e[o+1]),a=i[o].evaluate(t),l=i[o+1].evaluate(t);return"interpolate"===this.operator?ri[this.type.kind.toLowerCase()](a,l,s):"interpolate-hcl"===this.operator?mi.reverse(mi.interpolate(mi.forward(a),mi.forward(l),s)):fi.reverse(fi.interpolate(fi.forward(a),fi.forward(l),s))}eachChild(t){t(this.input);for(const e of this.outputs)t(e)}outputDefined(){return this.outputs.every(t=>t.outputDefined())}serialize(){let t;t="linear"===this.interpolation.name?["linear"]:"exponential"===this.interpolation.name?1===this.interpolation.base?["linear"]:["exponential",this.interpolation.base]:["cubic-bezier"].concat(this.interpolation.controlPoints);const e=[this.operator,t,this.input.serialize()];for(let i=0;ise(r,t.type));return new xi(o?Qt:i,n)}evaluate(t){let e,i=null,r=0;for(const n of this.args)if(r++,i=n.evaluate(t),i&&i instanceof me&&!i.available&&(e||(e=i.name),i=null,r===this.args.length&&(i=e)),null!==i)break;return i}eachChild(t){this.args.forEach(t)}outputDefined(){return this.args.every(t=>t.outputDefined())}serialize(){const t=["coalesce"];return this.eachChild(e=>{t.push(e.serialize())}),t}}class vi{constructor(t,e){this.type=e.type,this.bindings=[].concat(t),this.result=e}evaluate(t){return this.result.evaluate(t)}eachChild(t){for(const e of this.bindings)t(e[1]);t(this.result)}static parse(t,e){if(t.length<4)return e.error(`Expected at least 3 arguments, but found ${t.length-1} instead.`);const i=[];for(let n=1;n=i.length)throw new be(`Array index out of bounds: ${e} > ${i.length-1}.`);if(e!==Math.floor(e))throw new be(`Array index must be an integer, but found ${e} instead.`);return i[e]}eachChild(t){t(this.index),t(this.input)}outputDefined(){return!1}serialize(){return["at",this.index.serialize(),this.input.serialize()]}}class wi{constructor(t,e){this.type=Kt,this.needle=t,this.haystack=e}static parse(t,e){if(3!==t.length)return e.error(`Expected 2 arguments, but found ${t.length-1} instead.`);const i=e.parse(t[1],1,Qt),r=e.parse(t[2],2,Qt);return i&&r?ae(i.type,[Kt,Ht,Wt,Xt,Qt])?new wi(i,r):e.error(`Expected first argument to be of type boolean, string, number or null, but found ${ne(i.type)} instead`):null}evaluate(t){const e=this.needle.evaluate(t),i=this.haystack.evaluate(t);if(!i)return!1;if(!le(e,["boolean","string","number","null"]))throw new be(`Expected first argument to be of type boolean, string, number or null, but found ${ne(ye(e))} instead.`);if(!le(i,["string","array"]))throw new be(`Expected second argument to be of type array or string, but found ${ne(ye(i))} instead.`);return i.indexOf(e)>=0}eachChild(t){t(this.needle),t(this.haystack)}outputDefined(){return!0}serialize(){return["in",this.needle.serialize(),this.haystack.serialize()]}}class Ti{constructor(t,e,i){this.type=Wt,this.needle=t,this.haystack=e,this.fromIndex=i}static parse(t,e){if(t.length<=2||t.length>=5)return e.error(`Expected 3 or 4 arguments, but found ${t.length-1} instead.`);const i=e.parse(t[1],1,Qt),r=e.parse(t[2],2,Qt);if(!i||!r)return null;if(!ae(i.type,[Kt,Ht,Wt,Xt,Qt]))return e.error(`Expected first argument to be of type boolean, string, number or null, but found ${ne(i.type)} instead`);if(4===t.length){const n=e.parse(t[3],3,Wt);return n?new Ti(i,r,n):null}return new Ti(i,r)}evaluate(t){const e=this.needle.evaluate(t),i=this.haystack.evaluate(t);if(!le(e,["boolean","string","number","null"]))throw new be(`Expected first argument to be of type boolean, string, number or null, but found ${ne(ye(e))} instead.`);if(!le(i,["string","array"]))throw new be(`Expected second argument to be of type array or string, but found ${ne(ye(i))} instead.`);if(this.fromIndex){const r=this.fromIndex.evaluate(t);return i.indexOf(e,r)}return i.indexOf(e)}eachChild(t){t(this.needle),t(this.haystack),this.fromIndex&&t(this.fromIndex)}outputDefined(){return!1}serialize(){if(null!=this.fromIndex&&void 0!==this.fromIndex){const t=this.fromIndex.serialize();return["index-of",this.needle.serialize(),this.haystack.serialize(),t]}return["index-of",this.needle.serialize(),this.haystack.serialize()]}}class Ei{constructor(t,e,i,r,n,o){this.inputType=t,this.type=e,this.input=i,this.cases=r,this.outputs=n,this.otherwise=o}static parse(t,e){if(t.length<5)return e.error(`Expected at least 4 arguments, but found only ${t.length-1}.`);if(t.length%2!=1)return e.error("Expected an even number of arguments.");let i,r;e.expectedType&&"value"!==e.expectedType.kind&&(r=e.expectedType);const n={},o=[];for(let l=2;lNumber.MAX_SAFE_INTEGER)return c.error(`Branch labels must be integers no larger than ${Number.MAX_SAFE_INTEGER}.`);if("number"==typeof t&&Math.floor(t)!==t)return c.error("Numeric branch labels must be integer values.");if(i){if(c.checkSubtype(i,ye(t)))return null}else i=ye(t);if(void 0!==n[String(t)])return c.error("Branch labels must be unique.");n[String(t)]=o.length}const h=e.parse(a,l,r);if(!h)return null;r=r||h.type,o.push(h)}const s=e.parse(t[1],1,Qt);if(!s)return null;const a=e.parse(t[t.length-1],t.length-1,r);return a?"value"!==s.type.kind&&e.concat(1).checkSubtype(i,s.type)?null:new Ei(i,r,s,n,o,a):null}evaluate(t){const e=this.input.evaluate(t);return(ye(e)===this.inputType&&this.outputs[this.cases[e]]||this.otherwise).evaluate(t)}eachChild(t){t(this.input),this.outputs.forEach(t),t(this.otherwise)}outputDefined(){return this.outputs.every(t=>t.outputDefined())&&this.otherwise.outputDefined()}serialize(){const t=["match",this.input.serialize()],e=Object.keys(this.cases).sort(),i=[],r={};for(const o of e){const t=r[this.cases[o]];void 0===t?(r[this.cases[o]]=i.length,i.push([this.cases[o],[o]])):i[t][1].push(o)}const n=t=>"number"===this.inputType.kind?Number(t):t;for(const[o,s]of i)t.push(1===s.length?n(s[0]):s.map(n)),t.push(this.outputs[o].serialize());return t.push(this.otherwise.serialize()),t}}class Si{constructor(t,e,i){this.type=t,this.branches=e,this.otherwise=i}static parse(t,e){if(t.length<4)return e.error(`Expected at least 3 arguments, but found only ${t.length-1}.`);if(t.length%2!=0)return e.error("Expected an odd number of arguments.");let i;e.expectedType&&"value"!==e.expectedType.kind&&(i=e.expectedType);const r=[];for(let o=1;oe.outputDefined())&&this.otherwise.outputDefined()}serialize(){const t=["case"];return this.eachChild(e=>{t.push(e.serialize())}),t}}class Ai{constructor(t,e,i,r){this.type=t,this.input=e,this.beginIndex=i,this.endIndex=r}static parse(t,e){if(t.length<=2||t.length>=5)return e.error(`Expected 3 or 4 arguments, but found ${t.length-1} instead.`);const i=e.parse(t[1],1,Qt),r=e.parse(t[2],2,Wt);if(!i||!r)return null;if(!ae(i.type,[re(Qt),Ht,Qt]))return e.error(`Expected first argument to be of type array or string, but found ${ne(i.type)} instead`);if(4===t.length){const n=e.parse(t[3],3,Wt);return n?new Ai(i.type,i,r,n):null}return new Ai(i.type,i,r)}evaluate(t){const e=this.input.evaluate(t),i=this.beginIndex.evaluate(t);if(!le(e,["string","array"]))throw new be(`Expected first argument to be of type array or string, but found ${ne(ye(e))} instead.`);if(this.endIndex){const r=this.endIndex.evaluate(t);return e.slice(i,r)}return e.slice(i)}eachChild(t){t(this.input),t(this.beginIndex),this.endIndex&&t(this.endIndex)}outputDefined(){return!1}serialize(){if(null!=this.endIndex&&void 0!==this.endIndex){const t=this.endIndex.serialize();return["slice",this.input.serialize(),this.beginIndex.serialize(),t]}return["slice",this.input.serialize(),this.beginIndex.serialize()]}}function Ii(t,e){return"=="===t||"!="===t?"boolean"===e.kind||"string"===e.kind||"number"===e.kind||"null"===e.kind||"value"===e.kind:"string"===e.kind||"number"===e.kind||"value"===e.kind}function Mi(t,e,i,r){return 0===r.compare(e,i)}function Ci(t,e,i){const r="=="!==t&&"!="!==t;return class n{constructor(t,e,i){this.type=Kt,this.lhs=t,this.rhs=e,this.collator=i,this.hasUntypedArgument="value"===t.type.kind||"value"===e.type.kind}static parse(t,e){if(3!==t.length&&4!==t.length)return e.error("Expected two or three arguments.");const i=t[0];let o=e.parse(t[1],1,Qt);if(!o)return null;if(!Ii(i,o.type))return e.concat(1).error(`"${i}" comparisons are not supported for type '${ne(o.type)}'.`);let s=e.parse(t[2],2,Qt);if(!s)return null;if(!Ii(i,s.type))return e.concat(2).error(`"${i}" comparisons are not supported for type '${ne(s.type)}'.`);if(o.type.kind!==s.type.kind&&"value"!==o.type.kind&&"value"!==s.type.kind)return e.error(`Cannot compare types '${ne(o.type)}' and '${ne(s.type)}'.`);r&&("value"===o.type.kind&&"value"!==s.type.kind?o=new Te(s.type,[o]):"value"!==o.type.kind&&"value"===s.type.kind&&(s=new Te(o.type,[s])));let a=null;if(4===t.length){if("string"!==o.type.kind&&"string"!==s.type.kind&&"value"!==o.type.kind&&"value"!==s.type.kind)return e.error("Cannot use collator to compare non-string types.");if(a=e.parse(t[3],3,te),!a)return null}return new n(o,s,a)}evaluate(n){const o=this.lhs.evaluate(n),s=this.rhs.evaluate(n);if(r&&this.hasUntypedArgument){const e=ye(o),i=ye(s);if(e.kind!==i.kind||"string"!==e.kind&&"number"!==e.kind)throw new be(`Expected arguments for "${t}" to be (string, string) or (number, number), but found (${e.kind}, ${i.kind}) instead.`)}if(this.collator&&!r&&this.hasUntypedArgument){const t=ye(o),i=ye(s);if("string"!==t.kind||"string"!==i.kind)return e(n,o,s)}return this.collator?i(n,o,s,this.collator.evaluate(n)):e(n,o,s)}eachChild(t){t(this.lhs),t(this.rhs),this.collator&&t(this.collator)}outputDefined(){return!0}serialize(){const e=[t];return this.eachChild(t=>{e.push(t.serialize())}),e}}}const zi=Ci("==",(function(t,e,i){return e===i}),Mi),ki=Ci("!=",(function(t,e,i){return e!==i}),(function(t,e,i,r){return!Mi(0,e,i,r)})),Pi=Ci("<",(function(t,e,i){return e",(function(t,e,i){return e>i}),(function(t,e,i,r){return r.compare(e,i)>0})),Li=Ci("<=",(function(t,e,i){return e<=i}),(function(t,e,i,r){return r.compare(e,i)<=0})),Bi=Ci(">=",(function(t,e,i){return e>=i}),(function(t,e,i,r){return r.compare(e,i)>=0}));class Ri{constructor(t,e,i,r,n){this.type=Ht,this.number=t,this.locale=e,this.currency=i,this.minFractionDigits=r,this.maxFractionDigits=n}static parse(t,e){if(3!==t.length)return e.error("Expected two arguments.");const i=e.parse(t[1],1,Wt);if(!i)return null;const r=t[2];if("object"!=typeof r||Array.isArray(r))return e.error("NumberFormat options argument must be an object.");let n=null;if(r.locale&&(n=e.parse(r.locale,1,Ht),!n))return null;let o=null;if(r.currency&&(o=e.parse(r.currency,1,Ht),!o))return null;let s=null;if(r["min-fraction-digits"]&&(s=e.parse(r["min-fraction-digits"],1,Wt),!s))return null;let a=null;return r["max-fraction-digits"]&&(a=e.parse(r["max-fraction-digits"],1,Wt),!a)?null:new Ri(i,n,o,s,a)}evaluate(t){return new Intl.NumberFormat(this.locale?this.locale.evaluate(t):[],{style:this.currency?"currency":"decimal",currency:this.currency?this.currency.evaluate(t):void 0,minimumFractionDigits:this.minFractionDigits?this.minFractionDigits.evaluate(t):void 0,maximumFractionDigits:this.maxFractionDigits?this.maxFractionDigits.evaluate(t):void 0}).format(this.number.evaluate(t))}eachChild(t){t(this.number),this.locale&&t(this.locale),this.currency&&t(this.currency),this.minFractionDigits&&t(this.minFractionDigits),this.maxFractionDigits&&t(this.maxFractionDigits)}outputDefined(){return!1}serialize(){const t={};return this.locale&&(t.locale=this.locale.serialize()),this.currency&&(t.currency=this.currency.serialize()),this.minFractionDigits&&(t["min-fraction-digits"]=this.minFractionDigits.serialize()),this.maxFractionDigits&&(t["max-fraction-digits"]=this.maxFractionDigits.serialize()),["number-format",this.number.serialize(),t]}}class Fi{constructor(t){this.type=Wt,this.input=t}static parse(t,e){if(2!==t.length)return e.error(`Expected 1 argument, but found ${t.length-1} instead.`);const i=e.parse(t[1],1);return i?"array"!==i.type.kind&&"string"!==i.type.kind&&"value"!==i.type.kind?e.error(`Expected argument of type string or array, but found ${ne(i.type)} instead.`):new Fi(i):null}evaluate(t){const e=this.input.evaluate(t);if("string"==typeof e)return e.length;if(Array.isArray(e))return e.length;throw new be(`Expected value to be of type string or array, but found ${ne(ye(e))} instead.`)}eachChild(t){t(this.input)}outputDefined(){return!1}serialize(){const t=["length"];return this.eachChild(e=>{t.push(e.serialize())}),t}}const Oi={"==":zi,"!=":ki,">":Di,"<":Pi,">=":Bi,"<=":Li,array:Te,at:bi,boolean:Te,case:Si,coalesce:xi,collator:ke,format:Ee,image:Se,in:wi,"index-of":Ti,interpolate:gi,"interpolate-hcl":gi,"interpolate-lab":gi,length:Fi,let:vi,literal:ve,match:Ei,number:Te,"number-format":Ri,object:Te,slice:Ai,step:ei,string:Te,"to-boolean":Ie,"to-color":Ie,"to-number":Ie,"to-string":Ie,var:Je,within:We};function Ui(t,[e,i,r,n]){e=e.evaluate(t),i=i.evaluate(t),r=r.evaluate(t);const o=n?n.evaluate(t):1,s=_e(e,i,r,o);if(s)throw new be(s);return new ue(e/255*o,i/255*o,r/255*o,o)}function Vi(t,e){return t in e}function Ni(t,e){const i=e[t];return void 0===i?null:i}function ji(t){return{type:t}}function Gi(t){return{result:"success",value:t}}function Zi(t){return{result:"error",value:t}}function qi(t){return"data-driven"===t["property-type"]||"cross-faded-data-driven"===t["property-type"]}function $i(t){return!!t.expression&&t.expression.parameters.indexOf("zoom")>-1}function Xi(t){return!!t.expression&&t.expression.interpolated}function Wi(t){return t instanceof Number?"number":t instanceof String?"string":t instanceof Boolean?"boolean":Array.isArray(t)?"array":null===t?"null":typeof t}function Hi(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Ki(t){return t}function Yi(t,e,i){return void 0!==t?t:void 0!==e?e:void 0!==i?i:void 0}function Ji(t,e,i,r,n){return Yi(typeof i===n?r[i]:void 0,t.default,e.default)}function Qi(t,e,i){if("number"!==Wi(i))return Yi(t.default,e.default);const r=t.stops.length;if(1===r)return t.stops[0][1];if(i<=t.stops[0][0])return t.stops[0][1];if(i>=t.stops[r-1][0])return t.stops[r-1][1];const n=ti(t.stops.map(t=>t[0]),i);return t.stops[n][1]}function tr(t,e,i){const r=void 0!==t.base?t.base:1;if("number"!==Wi(i))return Yi(t.default,e.default);const n=t.stops.length;if(1===n)return t.stops[0][1];if(i<=t.stops[0][0])return t.stops[0][1];if(i>=t.stops[n-1][0])return t.stops[n-1][1];const o=ti(t.stops.map(t=>t[0]),i),s=function(t,e,i,r){const n=r-i,o=t-i;return 0===n?0:1===e?o/n:(Math.pow(e,o)-1)/(Math.pow(e,n)-1)}(i,r,t.stops[o][0],t.stops[o+1][0]),a=t.stops[o][1],l=t.stops[o+1][1];let c=ri[e.type]||Ki;if(t.colorSpace&&"rgb"!==t.colorSpace){const e=_i[t.colorSpace];c=(t,i)=>e.reverse(e.interpolate(e.forward(t),e.forward(i),s))}return"function"==typeof a.evaluate?{evaluate(...t){const e=a.evaluate.apply(void 0,t),i=l.evaluate.apply(void 0,t);if(void 0!==e&&void 0!==i)return c(e,i,s)}}:c(a,l,s)}function er(t,e,i){return"color"===e.type?i=ue.parse(i):"formatted"===e.type?i=fe.fromString(i.toString()):"resolvedImage"===e.type?i=me.fromString(i.toString()):Wi(i)===e.type||"enum"===e.type&&e.values[i]||(i=void 0),Yi(i,t.default,e.default)}ze.register(Oi,{error:[{kind:"error"},[Ht],(t,[e])=>{throw new be(e.evaluate(t))}],typeof:[Ht,[Qt],(t,[e])=>ne(ye(e.evaluate(t)))],"to-rgba":[re(Wt,4),[Yt],(t,[e])=>e.evaluate(t).toArray()],rgb:[Yt,[Wt,Wt,Wt],Ui],rgba:[Yt,[Wt,Wt,Wt,Wt],Ui],has:{type:Kt,overloads:[[[Ht],(t,[e])=>Vi(e.evaluate(t),t.properties())],[[Ht,Jt],(t,[e,i])=>Vi(e.evaluate(t),i.evaluate(t))]]},get:{type:Qt,overloads:[[[Ht],(t,[e])=>Ni(e.evaluate(t),t.properties())],[[Ht,Jt],(t,[e,i])=>Ni(e.evaluate(t),i.evaluate(t))]]},"feature-state":[Qt,[Ht],(t,[e])=>Ni(e.evaluate(t),t.featureState||{})],properties:[Jt,[],t=>t.properties()],"geometry-type":[Ht,[],t=>t.geometryType()],id:[Qt,[],t=>t.id()],zoom:[Wt,[],t=>t.globals.zoom],pitch:[Wt,[],t=>t.globals.pitch||0],"distance-from-center":[Wt,[],t=>t.distanceFromCenter()],"heatmap-density":[Wt,[],t=>t.globals.heatmapDensity||0],"line-progress":[Wt,[],t=>t.globals.lineProgress||0],"sky-radial-progress":[Wt,[],t=>t.globals.skyRadialProgress||0],accumulated:[Qt,[],t=>void 0===t.globals.accumulated?null:t.globals.accumulated],"+":[Wt,ji(Wt),(t,e)=>{let i=0;for(const r of e)i+=r.evaluate(t);return i}],"*":[Wt,ji(Wt),(t,e)=>{let i=1;for(const r of e)i*=r.evaluate(t);return i}],"-":{type:Wt,overloads:[[[Wt,Wt],(t,[e,i])=>e.evaluate(t)-i.evaluate(t)],[[Wt],(t,[e])=>-e.evaluate(t)]]},"/":[Wt,[Wt,Wt],(t,[e,i])=>e.evaluate(t)/i.evaluate(t)],"%":[Wt,[Wt,Wt],(t,[e,i])=>e.evaluate(t)%i.evaluate(t)],ln2:[Wt,[],()=>Math.LN2],pi:[Wt,[],()=>Math.PI],e:[Wt,[],()=>Math.E],"^":[Wt,[Wt,Wt],(t,[e,i])=>Math.pow(e.evaluate(t),i.evaluate(t))],sqrt:[Wt,[Wt],(t,[e])=>Math.sqrt(e.evaluate(t))],log10:[Wt,[Wt],(t,[e])=>Math.log(e.evaluate(t))/Math.LN10],ln:[Wt,[Wt],(t,[e])=>Math.log(e.evaluate(t))],log2:[Wt,[Wt],(t,[e])=>Math.log(e.evaluate(t))/Math.LN2],sin:[Wt,[Wt],(t,[e])=>Math.sin(e.evaluate(t))],cos:[Wt,[Wt],(t,[e])=>Math.cos(e.evaluate(t))],tan:[Wt,[Wt],(t,[e])=>Math.tan(e.evaluate(t))],asin:[Wt,[Wt],(t,[e])=>Math.asin(e.evaluate(t))],acos:[Wt,[Wt],(t,[e])=>Math.acos(e.evaluate(t))],atan:[Wt,[Wt],(t,[e])=>Math.atan(e.evaluate(t))],min:[Wt,ji(Wt),(t,e)=>Math.min(...e.map(e=>e.evaluate(t)))],max:[Wt,ji(Wt),(t,e)=>Math.max(...e.map(e=>e.evaluate(t)))],abs:[Wt,[Wt],(t,[e])=>Math.abs(e.evaluate(t))],round:[Wt,[Wt],(t,[e])=>{const i=e.evaluate(t);return i<0?-Math.round(-i):Math.round(i)}],floor:[Wt,[Wt],(t,[e])=>Math.floor(e.evaluate(t))],ceil:[Wt,[Wt],(t,[e])=>Math.ceil(e.evaluate(t))],"filter-==":[Kt,[Ht,Qt],(t,[e,i])=>t.properties()[e.value]===i.value],"filter-id-==":[Kt,[Qt],(t,[e])=>t.id()===e.value],"filter-type-==":[Kt,[Ht],(t,[e])=>t.geometryType()===e.value],"filter-<":[Kt,[Ht,Qt],(t,[e,i])=>{const r=t.properties()[e.value],n=i.value;return typeof r==typeof n&&r{const i=t.id(),r=e.value;return typeof i==typeof r&&i":[Kt,[Ht,Qt],(t,[e,i])=>{const r=t.properties()[e.value],n=i.value;return typeof r==typeof n&&r>n}],"filter-id->":[Kt,[Qt],(t,[e])=>{const i=t.id(),r=e.value;return typeof i==typeof r&&i>r}],"filter-<=":[Kt,[Ht,Qt],(t,[e,i])=>{const r=t.properties()[e.value],n=i.value;return typeof r==typeof n&&r<=n}],"filter-id-<=":[Kt,[Qt],(t,[e])=>{const i=t.id(),r=e.value;return typeof i==typeof r&&i<=r}],"filter->=":[Kt,[Ht,Qt],(t,[e,i])=>{const r=t.properties()[e.value],n=i.value;return typeof r==typeof n&&r>=n}],"filter-id->=":[Kt,[Qt],(t,[e])=>{const i=t.id(),r=e.value;return typeof i==typeof r&&i>=r}],"filter-has":[Kt,[Qt],(t,[e])=>e.value in t.properties()],"filter-has-id":[Kt,[],t=>null!==t.id()&&void 0!==t.id()],"filter-type-in":[Kt,[re(Ht)],(t,[e])=>e.value.indexOf(t.geometryType())>=0],"filter-id-in":[Kt,[re(Qt)],(t,[e])=>e.value.indexOf(t.id())>=0],"filter-in-small":[Kt,[Ht,re(Qt)],(t,[e,i])=>i.value.indexOf(t.properties()[e.value])>=0],"filter-in-large":[Kt,[Ht,re(Qt)],(t,[e,i])=>function(t,e,i,r){for(;i<=r;){const n=i+r>>1;if(e[n]===t)return!0;e[n]>t?r=n-1:i=n+1}return!1}(t.properties()[e.value],i.value,0,i.value.length-1)],all:{type:Kt,overloads:[[[Kt,Kt],(t,[e,i])=>e.evaluate(t)&&i.evaluate(t)],[ji(Kt),(t,e)=>{for(const i of e)if(!i.evaluate(t))return!1;return!0}]]},any:{type:Kt,overloads:[[[Kt,Kt],(t,[e,i])=>e.evaluate(t)||i.evaluate(t)],[ji(Kt),(t,e)=>{for(const i of e)if(i.evaluate(t))return!0;return!1}]]},"!":[Kt,[Kt],(t,[e])=>!e.evaluate(t)],"is-supported-script":[Kt,[Ht],(t,[e])=>{const i=t.globals&&t.globals.isSupportedScript;return!i||i(e.evaluate(t))}],upcase:[Ht,[Ht],(t,[e])=>e.evaluate(t).toUpperCase()],downcase:[Ht,[Ht],(t,[e])=>e.evaluate(t).toLowerCase()],concat:[Ht,ji(Qt),(t,e)=>e.map(e=>xe(e.evaluate(t))).join("")],"resolved-locale":[Ht,[te],(t,[e])=>e.evaluate(t).resolvedLocale()]});class ir{constructor(t,e){this.expression=t,this._warningHistory={},this._evaluator=new Ce,this._defaultValue=e?function(t){return"color"===t.type&&Hi(t.default)?new ue(0,0,0,0):"color"===t.type?ue.parse(t.default)||null:void 0===t.default?null:t.default}(e):null,this._enumValues=e&&"enum"===e.type?e.values:null}evaluateWithoutErrorHandling(t,e,i,r,n,o,s,a){return this._evaluator.globals=t,this._evaluator.feature=e,this._evaluator.featureState=i,this._evaluator.canonical=r,this._evaluator.availableImages=n||null,this._evaluator.formattedSection=o,this._evaluator.featureTileCoord=s||null,this._evaluator.featureDistanceData=a||null,this.expression.evaluate(this._evaluator)}evaluate(t,e,i,r,n,o,s,a){this._evaluator.globals=t,this._evaluator.feature=e||null,this._evaluator.featureState=i||null,this._evaluator.canonical=r,this._evaluator.availableImages=n||null,this._evaluator.formattedSection=o||null,this._evaluator.featureTileCoord=s||null,this._evaluator.featureDistanceData=a||null;try{const t=this.expression.evaluate(this._evaluator);if(null==t||"number"==typeof t&&t!=t)return this._defaultValue;if(this._enumValues&&!(t in this._enumValues))throw new be(`Expected value to be one of ${Object.keys(this._enumValues).map(t=>JSON.stringify(t)).join(", ")}, but found ${JSON.stringify(t)} instead.`);return t}catch(t){return this._warningHistory[t.message]||(this._warningHistory[t.message]=!0,"undefined"!=typeof console&&console.warn(t.message)),this._defaultValue}}}function rr(t){return Array.isArray(t)&&t.length>0&&"string"==typeof t[0]&&t[0]in Oi}function nr(t,e){const i=new Qe(Oi,[],e?function(t){const e={color:Yt,string:Ht,number:Wt,enum:Ht,boolean:Kt,formatted:ee,resolvedImage:ie};return"array"===t.type?re(e[t.value]||Qt,t.length):e[t.type]}(e):void 0),r=i.parse(t,void 0,void 0,void 0,e&&"string"===e.type?{typeAnnotation:"coerce"}:void 0);return r?Gi(new ir(r,e)):Zi(i.errors)}class or{constructor(t,e){this.kind=t,this._styleExpression=e,this.isStateDependent="constant"!==t&&!Ke(e.expression)}evaluateWithoutErrorHandling(t,e,i,r,n,o){return this._styleExpression.evaluateWithoutErrorHandling(t,e,i,r,n,o)}evaluate(t,e,i,r,n,o){return this._styleExpression.evaluate(t,e,i,r,n,o)}}class sr{constructor(t,e,i,r){this.kind=t,this.zoomStops=i,this._styleExpression=e,this.isStateDependent="camera"!==t&&!Ke(e.expression),this.interpolationType=r}evaluateWithoutErrorHandling(t,e,i,r,n,o){return this._styleExpression.evaluateWithoutErrorHandling(t,e,i,r,n,o)}evaluate(t,e,i,r,n,o){return this._styleExpression.evaluate(t,e,i,r,n,o)}interpolationFactor(t,e,i){return this.interpolationType?gi.interpolationFactor(this.interpolationType,t,e,i):0}}function ar(t,e){if("error"===(t=nr(t,e)).result)return t;const i=t.value.expression,r=He(i);if(!r&&!qi(e))return Zi([new qt("","data expressions not supported")]);const n=Ye(i,["zoom","pitch","distance-from-center"]);if(!n&&!$i(e))return Zi([new qt("","zoom expressions not supported")]);const o=function t(e){let i=null;if(e instanceof vi)i=t(e.result);else if(e instanceof xi){for(const r of e.args)if(i=t(r),i)break}else(e instanceof ei||e instanceof gi)&&e.input instanceof ze&&"zoom"===e.input.name&&(i=e);return i instanceof qt||e.eachChild(e=>{const r=t(e);r instanceof qt?i=r:!i&&r?i=new qt("",'"zoom" expression may only be used as input to a top-level "step" or "interpolate" expression.'):i&&r&&i!==r&&(i=new qt("",'Only one zoom-based "step" or "interpolate" subexpression may be used in an expression.'))}),i}(i);return o||n?o instanceof qt?Zi([o]):o instanceof gi&&!Xi(e)?Zi([new qt("",'"interpolate" expressions cannot be used with this property')]):Gi(o?new sr(r?"camera":"composite",t.value,o.labels,o instanceof gi?o.interpolation:void 0):new or(r?"constant":"source",t.value)):Zi([new qt("",'"zoom" expression may only be used as input to a top-level "step" or "interpolate" expression.')])}class lr{constructor(t,e){this._parameters=t,this._specification=e,jt(this,function t(e,i){const r="color"===i.type,n=e.stops&&"object"==typeof e.stops[0][0],o=n||!(n||void 0!==e.property),s=e.type||(Xi(i)?"exponential":"interval");if(r&&((e=jt({},e)).stops&&(e.stops=e.stops.map(t=>[t[0],ue.parse(t[1])])),e.default=ue.parse(e.default?e.default:i.default)),e.colorSpace&&"rgb"!==e.colorSpace&&!_i[e.colorSpace])throw new Error("Unknown color space: "+e.colorSpace);let a,l,c;if("exponential"===s)a=tr;else if("interval"===s)a=Qi;else if("categorical"===s){a=Ji,l=Object.create(null);for(const t of e.stops)l[t[0]]=t[1];c=typeof e.stops[0][0]}else{if("identity"!==s)throw new Error(`Unknown function type "${s}"`);a=er}if(n){const r={},n=[];for(let t=0;tt[0]),evaluate:({zoom:t},r)=>tr({stops:o,base:e.base},i,t).evaluate(t,r)}}if(o){const t="exponential"===s?{name:"exponential",base:void 0!==e.base?e.base:1}:null;return{kind:"camera",interpolationType:t,interpolationFactor:gi.interpolationFactor.bind(void 0,t),zoomStops:e.stops.map(t=>t[0]),evaluate:({zoom:t})=>a(e,i,t,l,c)}}return{kind:"source",evaluate(t,r){const n=r&&r.properties?r.properties[e.property]:void 0;return void 0===n?Yi(e.default,i.default):a(e,i,n,l,c)}}}(this._parameters,this._specification))}static deserialize(t){return new lr(t._parameters,t._specification)}static serialize(t){return{_parameters:t._parameters,_specification:t._specification}}}function cr(t){const e=t.key,i=t.value,r=t.valueSpec||{},n=t.objectElementValidators||{},o=t.style,s=t.styleSpec;let a=[];const l=Wi(i);if("object"!==l)return[new Vt(e,i,`object expected, ${l} found`)];for(const c in i){const t=c.split(".")[0],l=r[t]||r["*"];let h;if(n[t])h=n[t];else if(r[t])h=Or;else if(n["*"])h=n["*"];else{if(!r["*"]){a.push(new Vt(e,i[c],`unknown property "${c}"`));continue}h=Or}a=a.concat(h({key:(e?e+".":e)+c,value:i[c],valueSpec:l,style:o,styleSpec:s,object:i,objectKey:c},i))}for(const c in r)n[c]||r[c].required&&void 0===r[c].default&&void 0===i[c]&&a.push(new Vt(e,i,`missing required property "${c}"`));return a}function hr(t){const e=t.value,i=t.valueSpec,r=t.style,n=t.styleSpec,o=t.key,s=t.arrayElementValidator||Or;if("array"!==Wi(e))return[new Vt(o,e,`array expected, ${Wi(e)} found`)];if(i.length&&e.length!==i.length)return[new Vt(o,e,`array length ${i.length} expected, length ${e.length} found`)];if(i["min-length"]&&e.lengthn)return[new Vt(e,i,`${i} is greater than the maximum value ${n}`)]}return[]}function dr(t){const e=t.valueSpec,i=Gt(t.value.type);let r,n,o,s={};const a="categorical"!==i&&void 0===t.value.property,l=!a,c="array"===Wi(t.value.stops)&&"array"===Wi(t.value.stops[0])&&"object"===Wi(t.value.stops[0][0]),h=cr({key:t.key,value:t.value,valueSpec:t.styleSpec.function,style:t.style,styleSpec:t.styleSpec,objectElementValidators:{stops:function(t){if("identity"===i)return[new Vt(t.key,t.value,'identity function may not have a "stops" property')];let e=[];const r=t.value;return e=e.concat(hr({key:t.key,value:r,valueSpec:t.valueSpec,style:t.style,styleSpec:t.styleSpec,arrayElementValidator:u})),"array"===Wi(r)&&0===r.length&&e.push(new Vt(t.key,r,"array must have at least one stop")),e},default:function(t){return Or({key:t.key,value:t.value,valueSpec:e,style:t.style,styleSpec:t.styleSpec})}}});return"identity"===i&&a&&h.push(new Vt(t.key,t.value,'missing required property "property"')),"identity"===i||t.value.stops||h.push(new Vt(t.key,t.value,'missing required property "stops"')),"exponential"===i&&t.valueSpec.expression&&!Xi(t.valueSpec)&&h.push(new Vt(t.key,t.value,"exponential functions not supported")),t.styleSpec.$version>=8&&(l&&!qi(t.valueSpec)?h.push(new Vt(t.key,t.value,"property functions not supported")):a&&!$i(t.valueSpec)&&h.push(new Vt(t.key,t.value,"zoom functions not supported"))),"categorical"!==i&&!c||void 0!==t.value.property||h.push(new Vt(t.key,t.value,'"property" property is required')),h;function u(t){let i=[];const r=t.value,a=t.key;if("array"!==Wi(r))return[new Vt(a,r,`array expected, ${Wi(r)} found`)];if(2!==r.length)return[new Vt(a,r,`array length 2 expected, length ${r.length} found`)];if(c){if("object"!==Wi(r[0]))return[new Vt(a,r,`object expected, ${Wi(r[0])} found`)];if(void 0===r[0].zoom)return[new Vt(a,r,"object stop key must have zoom")];if(void 0===r[0].value)return[new Vt(a,r,"object stop key must have value")];if(o&&o>Gt(r[0].zoom))return[new Vt(a,r[0].zoom,"stop zoom values must appear in ascending order")];Gt(r[0].zoom)!==o&&(o=Gt(r[0].zoom),n=void 0,s={}),i=i.concat(cr({key:a+"[0]",value:r[0],valueSpec:{zoom:{}},style:t.style,styleSpec:t.styleSpec,objectElementValidators:{zoom:ur,value:d}}))}else i=i.concat(d({key:a+"[0]",value:r[0],valueSpec:{},style:t.style,styleSpec:t.styleSpec},r));return rr(Zt(r[1]))?i.concat([new Vt(a+"[1]",r[1],"expressions are not allowed in function stops.")]):i.concat(Or({key:a+"[1]",value:r[1],valueSpec:e,style:t.style,styleSpec:t.styleSpec}))}function d(t,o){const a=Wi(t.value),l=Gt(t.value),c=null!==t.value?t.value:o;if(r){if(a!==r)return[new Vt(t.key,c,`${a} stop domain type must match previous stop domain type ${r}`)]}else r=a;if("number"!==a&&"string"!==a&&"boolean"!==a)return[new Vt(t.key,c,"stop domain value must be a number, string, or boolean")];if("number"!==a&&"categorical"!==i){let r=`number expected, ${a} found`;return qi(e)&&void 0===i&&(r+='\nIf you intended to use a categorical function, specify `"type": "categorical"`.'),[new Vt(t.key,c,r)]}return"categorical"!==i||"number"!==a||isFinite(l)&&Math.floor(l)===l?"categorical"!==i&&"number"===a&&void 0!==n&&lnew Vt(`${t.key}${e.key}`,t.value,e.message));const i=e.value.expression||e.value._styleExpression.expression;if("property"===t.expressionContext&&"text-font"===t.propertyKey&&!i.outputDefined())return[new Vt(t.key,t.value,`Invalid data expression for "${t.propertyKey}". Output values must be contained as literals within the expression.`)];if("property"===t.expressionContext&&"layout"===t.propertyType&&!Ke(i))return[new Vt(t.key,t.value,'"feature-state" data expressions are not supported with layout properties.')];if("filter"===t.expressionContext)return function t(e,i){const r=new Set(["zoom","feature-state","pitch","distance-from-center"]);for(const o of i.valueSpec.expression.parameters)r.delete(o);if(0===r.size)return[];const n=[];return e instanceof ze&&r.has(e.name)?[new Vt(i.key,i.value,`["${e.name}"] expression is not supported in a filter for a ${i.object.type} layer with id: ${i.object.id}`)]:(e.eachChild(e=>{n.push(...t(e,i))}),n)}(i,t);if(t.expressionContext&&0===t.expressionContext.indexOf("cluster")){if(!Ye(i,["zoom","feature-state"]))return[new Vt(t.key,t.value,'"zoom" and "feature-state" expressions are not supported with cluster properties.')];if("cluster-initial"===t.expressionContext&&!He(i))return[new Vt(t.key,t.value,"Feature data expressions are not supported with initial expression part of cluster properties.")]}return[]}function fr(t){const e=t.key,i=t.value,r=t.valueSpec,n=[];return Array.isArray(r.values)?-1===r.values.indexOf(Gt(i))&&n.push(new Vt(e,i,`expected one of [${r.values.join(", ")}], ${JSON.stringify(i)} found`)):-1===Object.keys(r.values).indexOf(Gt(i))&&n.push(new Vt(e,i,`expected one of [${Object.keys(r.values).join(", ")}], ${JSON.stringify(i)} found`)),n}function mr(t){if(!0===t||!1===t)return!0;if(!Array.isArray(t)||0===t.length)return!1;switch(t[0]){case"has":return t.length>=2&&"$id"!==t[1]&&"$type"!==t[1];case"in":return t.length>=3&&("string"!=typeof t[1]||Array.isArray(t[2]));case"!in":case"!has":case"none":return!1;case"==":case"!=":case">":case">=":case"<":case"<=":return 3!==t.length||Array.isArray(t[1])||Array.isArray(t[2]);case"any":case"all":for(const e of t.slice(1))if(!mr(e)&&"boolean"!=typeof e)return!1;return!0;default:return!0}}function _r(t,e="fill"){if(null==t)return{filter:()=>!0,needGeometry:!1,needFeature:!1};mr(t)||(t=br(t));const i=t;let r=!0;try{r=function(t){if(!gr(t))return t;let e=Zt(t);return function t(e){let i=!1;const r=[];if("case"===e[0]){for(let t=1;tt(e))}(e),e}(i)}catch(t){console.warn(`Failed to extract static filter. Filter will continue working, but at higher memory usage and slower framerate.\nThis is most likely a bug, please report this via https://github.com/mapbox/mapbox-gl-js/issues/new?assignees=&labels=&template=Bug_report.md\nand paste the contents of this message in the report.\nThank you!\nFilter Expression:\n${JSON.stringify(i,null,2)}\n `)}const n=Ut["filter_"+e],o=nr(r,n);let s=null;if("error"===o.result)throw new Error(o.value.map(t=>`${t.key}: ${t.message}`).join(", "));s=(t,e,i)=>o.value.evaluate(t,e,{},i);let a=null,l=null;if(r!==i){const t=nr(i,n);if("error"===t.result)throw new Error(t.value.map(t=>`${t.key}: ${t.message}`).join(", "));a=(e,i,r,n,o)=>t.value.evaluate(e,i,{},r,void 0,void 0,n,o),l=!He(t.value.expression)}return s=s,{filter:s,dynamicFilter:a||void 0,needGeometry:vr(r),needFeature:!!l}}function gr(t){if(!Array.isArray(t))return!1;if("pitch"===(e=t[0])||"distance-from-center"===e)return!0;var e;for(let i=1;i",">=","<","<=","to-boolean"]);function xr(t,e){return te?1:0}function vr(t){if(!Array.isArray(t))return!1;if("within"===t[0])return!0;for(let e=1;e"===e||"<="===e||">="===e?wr(t[1],t[2],e):"any"===e?(i=t.slice(1),["any"].concat(i.map(br))):"all"===e?["all"].concat(t.slice(1).map(br)):"none"===e?["all"].concat(t.slice(1).map(br).map(Sr)):"in"===e?Tr(t[1],t.slice(2)):"!in"===e?Sr(Tr(t[1],t.slice(2))):"has"===e?Er(t[1]):"!has"===e?Sr(Er(t[1])):"within"!==e||t;var i}function wr(t,e,i){switch(t){case"$type":return["filter-type-"+i,e];case"$id":return["filter-id-"+i,e];default:return["filter-"+i,t,e]}}function Tr(t,e){if(0===e.length)return!1;switch(t){case"$type":return["filter-type-in",["literal",e]];case"$id":return["filter-id-in",["literal",e]];default:return e.length>200&&!e.some(t=>typeof t!=typeof e[0])?["filter-in-large",t,["literal",e.sort(xr)]]:["filter-in-small",t,["literal",e]]}}function Er(t){switch(t){case"$type":return!0;case"$id":return["filter-has-id"];default:return["filter-has",t]}}function Sr(t){return["!",t]}function Ar(t){if(mr(Zt(t.value))){const e=Zt(t.layerType);return pr(jt({},t,{expressionContext:"filter",valueSpec:t.styleSpec["filter_"+(e||"fill")]}))}return function t(e){const i=e.value,r=e.key;if("array"!==Wi(i))return[new Vt(r,i,`array expected, ${Wi(i)} found`)];const n=e.styleSpec;let o,s=[];if(i.length<1)return[new Vt(r,i,"filter array must have at least 1 element")];switch(s=s.concat(fr({key:r+"[0]",value:i[0],valueSpec:n.filter_operator,style:e.style,styleSpec:e.styleSpec})),Gt(i[0])){case"<":case"<=":case">":case">=":i.length>=2&&"$type"===Gt(i[1])&&s.push(new Vt(r,i,`"$type" cannot be use with operator "${i[0]}"`));case"==":case"!=":3!==i.length&&s.push(new Vt(r,i,`filter array for operator "${i[0]}" must have 3 elements`));case"in":case"!in":i.length>=2&&(o=Wi(i[1]),"string"!==o&&s.push(new Vt(r+"[1]",i[1],`string expected, ${o} found`)));for(let t=2;t{t in i&&e.push(new Vt(r,i[t],`"${t}" is prohibited for ref layers`))}),n.layers.forEach(e=>{Gt(e.id)===a&&(t=e)}),t?t.ref?e.push(new Vt(r,i.ref,"ref cannot reference another ref layer")):s=Gt(t.type):e.push(new Vt(r,i.ref,`ref layer "${a}" not found`))}else if("background"!==s&&"sky"!==s)if(i.source){const t=n.sources&&n.sources[i.source],o=t&&Gt(t.type);t?"vector"===o&&"raster"===s?e.push(new Vt(r,i.source,`layer "${i.id}" requires a raster source`)):"raster"===o&&"raster"!==s?e.push(new Vt(r,i.source,`layer "${i.id}" requires a vector source`)):"vector"!==o||i["source-layer"]?"raster-dem"===o&&"hillshade"!==s?e.push(new Vt(r,i.source,"raster-dem source can only be used with layer type 'hillshade'.")):"line"!==s||!i.paint||!i.paint["line-gradient"]||"geojson"===o&&t.lineMetrics||e.push(new Vt(r,i,`layer "${i.id}" specifies a line-gradient, which requires a GeoJSON source with \`lineMetrics\` enabled.`)):e.push(new Vt(r,i,`layer "${i.id}" must specify a "source-layer"`)):e.push(new Vt(r,i.source,`source "${i.source}" not found`))}else e.push(new Vt(r,i,'missing required property "source"'));return e=e.concat(cr({key:r,value:i,valueSpec:o.layer,style:t.style,styleSpec:t.styleSpec,objectElementValidators:{"*":()=>[],type:()=>Or({key:r+".type",value:i.type,valueSpec:o.layer.type,style:t.style,styleSpec:t.styleSpec,object:i,objectKey:"type"}),filter:t=>Ar(jt({layerType:s},t)),layout:t=>cr({layer:i,key:t.key,value:t.value,style:t.style,styleSpec:t.styleSpec,objectElementValidators:{"*":t=>Cr(jt({layerType:s},t))}}),paint:t=>cr({layer:i,key:t.key,value:t.value,style:t.style,styleSpec:t.styleSpec,objectElementValidators:{"*":t=>Mr(jt({layerType:s},t))}})}})),e}function kr(t){const e=t.value,i=t.key,r=Wi(e);return"string"!==r?[new Vt(i,e,`string expected, ${r} found`)]:[]}const Pr={promoteId:function({key:t,value:e}){if("string"===Wi(e))return kr({key:t,value:e});{const i=[];for(const r in e)i.push(...kr({key:`${t}.${r}`,value:e[r]}));return i}}};function Dr(t){const e=t.value,i=t.key,r=t.styleSpec,n=t.style;if(!e.type)return[new Vt(i,e,'"type" is required')];const o=Gt(e.type);let s;switch(o){case"vector":case"raster":case"raster-dem":return s=cr({key:i,value:e,valueSpec:r["source_"+o.replace("-","_")],style:t.style,styleSpec:r,objectElementValidators:Pr}),s;case"geojson":if(s=cr({key:i,value:e,valueSpec:r.source_geojson,style:n,styleSpec:r,objectElementValidators:Pr}),e.cluster)for(const t in e.clusterProperties){const[r,n]=e.clusterProperties[t],o="string"==typeof r?[r,["accumulated"],["get",t]]:r;s.push(...pr({key:`${i}.${t}.map`,value:n,expressionContext:"cluster-map"})),s.push(...pr({key:`${i}.${t}.reduce`,value:o,expressionContext:"cluster-reduce"}))}return s;case"video":return cr({key:i,value:e,valueSpec:r.source_video,style:n,styleSpec:r});case"image":return cr({key:i,value:e,valueSpec:r.source_image,style:n,styleSpec:r});case"canvas":return[new Vt(i,null,"Please use runtime APIs to add canvas sources, rather than including them in stylesheets.","source.canvas")];default:return fr({key:i+".type",value:e.type,valueSpec:{values:["vector","raster","raster-dem","geojson","video","image"]},style:n,styleSpec:r})}}function Lr(t){const e=t.value,i=t.styleSpec,r=i.light,n=t.style;let o=[];const s=Wi(e);if(void 0===e)return o;if("object"!==s)return o=o.concat([new Vt("light",e,`object expected, ${s} found`)]),o;for(const a in e){const t=a.match(/^(.*)-transition$/);o=o.concat(t&&r[t[1]]&&r[t[1]].transition?Or({key:a,value:e[a],valueSpec:i.transition,style:n,styleSpec:i}):r[a]?Or({key:a,value:e[a],valueSpec:r[a],style:n,styleSpec:i}):[new Vt(a,e[a],`unknown property "${a}"`)])}return o}function Br(t){const e=t.value,i=t.key,r=t.style,n=t.styleSpec,o=n.terrain;let s=[];const a=Wi(e);if(void 0===e)return s;if("object"!==a)return s=s.concat([new Vt("terrain",e,`object expected, ${a} found`)]),s;for(const l in e){const t=l.match(/^(.*)-transition$/);s=s.concat(t&&o[t[1]]&&o[t[1]].transition?Or({key:l,value:e[l],valueSpec:n.transition,style:r,styleSpec:n}):o[l]?Or({key:l,value:e[l],valueSpec:o[l],style:r,styleSpec:n}):[new Vt(l,e[l],`unknown property "${l}"`)])}if(e.source){const t=r.sources&&r.sources[e.source],n=t&&Gt(t.type);t?"raster-dem"!==n&&s.push(new Vt(i,e.source,`terrain cannot be used with a source of type ${n}, it only be used with a "raster-dem" source type`)):s.push(new Vt(i,e.source,`source "${e.source}" not found`))}else s.push(new Vt(i,e,'terrain is missing required property "source"'));return s}function Rr(t){const e=t.value,i=t.style,r=t.styleSpec,n=r.fog;let o=[];const s=Wi(e);if(void 0===e)return o;if("object"!==s)return o=o.concat([new Vt("fog",e,`object expected, ${s} found`)]),o;for(const a in e){const t=a.match(/^(.*)-transition$/);o=o.concat(t&&n[t[1]]&&n[t[1]].transition?Or({key:a,value:e[a],valueSpec:r.transition,style:i,styleSpec:r}):n[a]?Or({key:a,value:e[a],valueSpec:n[a],style:i,styleSpec:r}):[new Vt(a,e[a],`unknown property "${a}"`)])}return o}const Fr={"*":()=>[],array:hr,boolean:function(t){const e=t.value,i=t.key,r=Wi(e);return"boolean"!==r?[new Vt(i,e,`boolean expected, ${r} found`)]:[]},number:ur,color:function(t){const e=t.key,i=t.value,r=Wi(i);return"string"!==r?[new Vt(e,i,`color expected, ${r} found`)]:null===he.parseCSSColor(i)?[new Vt(e,i,`color expected, "${i}" found`)]:[]},constants:Nt,enum:fr,filter:Ar,function:dr,layer:zr,object:cr,source:Dr,light:Lr,terrain:Br,fog:Rr,string:kr,formatted:function(t){return 0===kr(t).length?[]:pr(t)},resolvedImage:function(t){return 0===kr(t).length?[]:pr(t)},projection:function(t){const e=t.value,i=t.styleSpec,r=i.projection,n=t.style;let o=[];const s=Wi(e);if("object"===s)for(const a in e)o=o.concat(Or({key:a,value:e[a],valueSpec:r[a],style:n,styleSpec:i}));else"string"!==s&&(o=o.concat([new Vt("projection",e,`object or string expected, ${s} found`)]));return o}};function Or(t){const e=t.value,i=t.valueSpec,r=t.styleSpec;return i.expression&&Hi(Gt(e))?dr(t):i.expression&&rr(Zt(e))?pr(t):i.type&&Fr[i.type]?Fr[i.type](t):cr(jt({},t,{valueSpec:i.type?r[i.type]:i}))}function Ur(t){const e=t.value,i=t.key,r=kr(t);return r.length||(-1===e.indexOf("{fontstack}")&&r.push(new Vt(i,e,'"glyphs" url must include a "{fontstack}" token')),-1===e.indexOf("{range}")&&r.push(new Vt(i,e,'"glyphs" url must include a "{range}" token'))),r}function Vr(t,e=Ut){let i=[];return i=i.concat(Or({key:"",value:t,valueSpec:e.$root,styleSpec:e,style:t,objectElementValidators:{glyphs:Ur,"*":()=>[]}})),t.constants&&(i=i.concat(Nt({key:"constants",value:t.constants,style:t,styleSpec:e}))),Nr(i)}function Nr(t){return[].concat(t).sort((t,e)=>t.line-e.line)}function jr(t){return function(...e){return Nr(t.apply(this,e))}}Vr.source=jr(Dr),Vr.light=jr(Lr),Vr.terrain=jr(Br),Vr.fog=jr(Rr),Vr.layer=jr(zr),Vr.filter=jr(Ar),Vr.paintProperty=jr(Mr),Vr.layoutProperty=jr(Cr);const Gr=Vr,Zr=Gr.light,qr=Gr.fog,$r=Gr.paintProperty,Xr=Gr.layoutProperty;function Wr(t,e){let i=!1;if(e&&e.length)for(const r of e)t.fire(new Ft(new Error(r.message))),i=!0;return i}var Hr=Kr;function Kr(t,e,i){var r=this.cells=[];if(t instanceof ArrayBuffer){this.arrayBuffer=t;var n=new Int32Array(this.arrayBuffer);t=n[0],this.d=(e=n[1])+2*(i=n[2]);for(var o=0;o=h[p+0]&&r>=h[p+1])?(s[d]=!0,o.push(c[d])):s[d]=!1}}},Kr.prototype._forEachCell=function(t,e,i,r,n,o,s,a){for(var l=this._convertToCellCoord(t),c=this._convertToCellCoord(e),h=this._convertToCellCoord(i),u=this._convertToCellCoord(r),d=l;d<=h;d++)for(var p=c;p<=u;p++){var f=this.d*p+d;if((!a||a(this._convertFromCellCoord(d),this._convertFromCellCoord(p),this._convertFromCellCoord(d+1),this._convertFromCellCoord(p+1)))&&n.call(this,t,e,i,r,f,o,s,a))return}},Kr.prototype._convertFromCellCoord=function(t){return(t-this.padding)/this.scale},Kr.prototype._convertToCellCoord=function(t){return Math.max(0,Math.min(this.d-1,Math.floor(t*this.scale)+this.padding))},Kr.prototype.toArrayBuffer=function(){if(this.arrayBuffer)return this.arrayBuffer;for(var t=this.cells,e=3+this.cells.length+1+1,i=0,r=0;r=0)continue;const o=t[i];n[i]=Qr[r].shallow.indexOf(i)>=0?o:nn(o,e)}t instanceof Error&&(n.message=t.message)}if(n.$name)throw new Error("$name property is reserved for worker serialization logic.");return"Object"!==r&&(n.$name=r),n}throw new Error("can't serialize object of type "+typeof t)}function on(t){if(null==t||"boolean"==typeof t||"number"==typeof t||"string"==typeof t||t instanceof Boolean||t instanceof Number||t instanceof String||t instanceof Date||t instanceof RegExp||en(t)||rn(t)||ArrayBuffer.isView(t)||t instanceof Yr)return t;if(Array.isArray(t))return t.map(on);if("object"==typeof t){const e=t.$name||"Object",{klass:i}=Qr[e];if(!i)throw new Error("can't deserialize unregistered class "+e);if(i.deserialize)return i.deserialize(t);const r=Object.create(i.prototype);for(const n of Object.keys(t)){if("$name"===n)continue;const i=t[n];r[n]=Qr[e].shallow.indexOf(n)>=0?i:on(i)}return r}throw new Error("can't deserialize object of type "+typeof t)}class sn{constructor(){this.first=!0}update(t,e){const i=Math.floor(t);return this.first?(this.first=!1,this.lastIntegerZoom=i,this.lastIntegerZoomTime=0,this.lastZoom=t,this.lastFloorZoom=i,!0):(this.lastFloorZoom>i?(this.lastIntegerZoom=i+1,this.lastIntegerZoomTime=e):this.lastFloorZoomt>=1536&&t<=1791,ln=t=>t>=1872&&t<=1919,cn=t=>t>=2208&&t<=2303,hn=t=>t>=11904&&t<=12031,un=t=>t>=12032&&t<=12255,dn=t=>t>=12272&&t<=12287,pn=t=>t>=12288&&t<=12351,fn=t=>t>=12352&&t<=12447,mn=t=>t>=12448&&t<=12543,_n=t=>t>=12544&&t<=12591,gn=t=>t>=12704&&t<=12735,yn=t=>t>=12736&&t<=12783,xn=t=>t>=12784&&t<=12799,vn=t=>t>=12800&&t<=13055,bn=t=>t>=13056&&t<=13311,wn=t=>t>=13312&&t<=19903,Tn=t=>t>=19968&&t<=40959,En=t=>t>=40960&&t<=42127,Sn=t=>t>=42128&&t<=42191,An=t=>t>=44032&&t<=55215,In=t=>t>=63744&&t<=64255,Mn=t=>t>=64336&&t<=65023,Cn=t=>t>=65040&&t<=65055,zn=t=>t>=65072&&t<=65103,kn=t=>t>=65104&&t<=65135,Pn=t=>t>=65136&&t<=65279,Dn=t=>t>=65280&&t<=65519;function Ln(t){for(const e of t)if(Fn(e.charCodeAt(0)))return!0;return!1}function Bn(t){for(const e of t)if(!Rn(e.charCodeAt(0)))return!1;return!0}function Rn(t){return!(an(t)||ln(t)||cn(t)||Mn(t)||Pn(t))}function Fn(t){return!(746!==t&&747!==t&&(t<4352||!(gn(t)||_n(t)||zn(t)&&!(t>=65097&&t<=65103)||In(t)||bn(t)||hn(t)||yn(t)||!(!pn(t)||t>=12296&&t<=12305||t>=12308&&t<=12319||12336===t)||wn(t)||Tn(t)||vn(t)||(t=>t>=12592&&t<=12687)(t)||(t=>t>=43360&&t<=43391)(t)||(t=>t>=55216&&t<=55295)(t)||(t=>t>=4352&&t<=4607)(t)||An(t)||fn(t)||dn(t)||(t=>t>=12688&&t<=12703)(t)||un(t)||xn(t)||mn(t)&&12540!==t||!(!Dn(t)||65288===t||65289===t||65293===t||t>=65306&&t<=65310||65339===t||65341===t||65343===t||t>=65371&&t<=65503||65507===t||t>=65512&&t<=65519)||!(!kn(t)||t>=65112&&t<=65118||t>=65123&&t<=65126)||(t=>t>=5120&&t<=5759)(t)||(t=>t>=6320&&t<=6399)(t)||Cn(t)||(t=>t>=19904&&t<=19967)(t)||En(t)||Sn(t))))}function On(t){return!(Fn(t)||function(t){return!!((t=>t>=128&&t<=255)(t)&&(167===t||169===t||174===t||177===t||188===t||189===t||190===t||215===t||247===t)||(t=>t>=8192&&t<=8303)(t)&&(8214===t||8224===t||8225===t||8240===t||8241===t||8251===t||8252===t||8258===t||8263===t||8264===t||8265===t||8273===t)||(t=>t>=8448&&t<=8527)(t)||(t=>t>=8528&&t<=8591)(t)||(t=>t>=8960&&t<=9215)(t)&&(t>=8960&&t<=8967||t>=8972&&t<=8991||t>=8996&&t<=9e3||9003===t||t>=9085&&t<=9114||t>=9150&&t<=9165||9167===t||t>=9169&&t<=9179||t>=9186&&t<=9215)||(t=>t>=9216&&t<=9279)(t)&&9251!==t||(t=>t>=9280&&t<=9311)(t)||(t=>t>=9312&&t<=9471)(t)||(t=>t>=9632&&t<=9727)(t)||(t=>t>=9728&&t<=9983)(t)&&!(t>=9754&&t<=9759)||(t=>t>=11008&&t<=11263)(t)&&(t>=11026&&t<=11055||t>=11088&&t<=11097||t>=11192&&t<=11243)||pn(t)||mn(t)||(t=>t>=57344&&t<=63743)(t)||zn(t)||kn(t)||Dn(t)||8734===t||8756===t||8757===t||t>=9984&&t<=10087||t>=10102&&t<=10131||65532===t||65533===t)}(t))}function Un(t){return t>=1424&&t<=2303||Mn(t)||Pn(t)}function Vn(t,e){return!(!e&&Un(t)||t>=2304&&t<=3583||t>=3840&&t<=4255||(t=>t>=6016&&t<=6143)(t))}function Nn(t){for(const e of t)if(Un(e.charCodeAt(0)))return!0;return!1}const jn="deferred",Gn="loading",Zn="loaded";let qn=null,$n="unavailable",Xn=null;const Wn=function(t){t&&"string"==typeof t&&t.indexOf("NetworkError")>-1&&($n="error"),qn&&qn(t)};function Hn(){Kn.fire(new Rt("pluginStateChange",{pluginStatus:$n,pluginURL:Xn}))}const Kn=new Ot,Yn=function(){return $n},Jn=function(){if($n!==jn||!Xn)throw new Error("rtl-text-plugin cannot be downloaded unless a pluginURL is specified");$n=Gn,Hn(),Xn&&At({url:Xn},t=>{t?Wn(t):($n=Zn,Hn())})},Qn={applyArabicShaping:null,processBidirectionalText:null,processStyledBidirectionalText:null,isLoaded:()=>$n===Zn||null!=Qn.applyArabicShaping,isLoading:()=>$n===Gn,setState(t){$n=t.pluginStatus,Xn=t.pluginURL},isParsed:()=>null!=Qn.applyArabicShaping&&null!=Qn.processBidirectionalText&&null!=Qn.processStyledBidirectionalText,getPluginURL:()=>Xn};class to{constructor(t,e){this.zoom=t,e?(this.now=e.now,this.fadeDuration=e.fadeDuration,this.zoomHistory=e.zoomHistory,this.transition=e.transition,this.pitch=e.pitch):(this.now=0,this.fadeDuration=0,this.zoomHistory=new sn,this.transition={},this.pitch=0)}isSupportedScript(t){return function(t,e){for(const i of t)if(!Vn(i.charCodeAt(0),e))return!1;return!0}(t,Qn.isLoaded())}crossFadingFactor(){return 0===this.fadeDuration?1:Math.min((this.now-this.zoomHistory.lastIntegerZoomTime)/this.fadeDuration,1)}getCrossfadeParameters(){const t=this.zoom,e=t-Math.floor(t),i=this.crossFadingFactor();return t>this.zoomHistory.lastIntegerZoom?{fromScale:2,toScale:1,t:e+(1-e)*i}:{fromScale:.5,toScale:1,t:1-(1-i)*e}}}class eo{constructor(t,e){this.property=t,this.value=e,this.expression=function(t,e){if(Hi(t))return new lr(t,e);if(rr(t)){const i=ar(t,e);if("error"===i.result)throw new Error(i.value.map(t=>`${t.key}: ${t.message}`).join(", "));return i.value}{let i=t;return"string"==typeof t&&"color"===e.type&&(i=ue.parse(t)),{kind:"constant",evaluate:()=>i}}}(void 0===e?t.specification.default:e,t.specification)}isDataDriven(){return"source"===this.expression.kind||"composite"===this.expression.kind}possiblyEvaluate(t,e,i){return this.property.possiblyEvaluate(this,t,e,i)}}class io{constructor(t){this.property=t,this.value=new eo(t,void 0)}transitioned(t,e){return new no(this.property,this.value,e,v({},t.transition,this.transition),t.now)}untransitioned(){return new no(this.property,this.value,null,{},0)}}class ro{constructor(t){this._properties=t,this._values=Object.create(t.defaultTransitionablePropertyValues)}getValue(t){return z(this._values[t].value.value)}setValue(t,e){this._values.hasOwnProperty(t)||(this._values[t]=new io(this._values[t].property)),this._values[t].value=new eo(this._values[t].property,null===e?void 0:z(e))}getTransition(t){return z(this._values[t].transition)}setTransition(t,e){this._values.hasOwnProperty(t)||(this._values[t]=new io(this._values[t].property)),this._values[t].transition=z(e)||void 0}serialize(){const t={};for(const e of Object.keys(this._values)){const i=this.getValue(e);void 0!==i&&(t[e]=i);const r=this.getTransition(e);void 0!==r&&(t[e+"-transition"]=r)}return t}transitioned(t,e){const i=new oo(this._properties);for(const r of Object.keys(this._values))i._values[r]=this._values[r].transitioned(t,e._values[r]);return i}untransitioned(){const t=new oo(this._properties);for(const e of Object.keys(this._values))t._values[e]=this._values[e].untransitioned();return t}}class no{constructor(t,e,i,r,n){const o=r.delay||0,s=r.duration||0;n=n||0,this.property=t,this.value=e,this.begin=n+o,this.end=this.begin+s,t.specification.transition&&(r.delay||r.duration)&&(this.prior=i)}possiblyEvaluate(t,e,i){const r=t.now||0,n=this.value.possiblyEvaluate(t,e,i),o=this.prior;if(o){if(r>this.end)return this.prior=null,n;if(this.value.isDataDriven())return this.prior=null,n;if(rr.zoomHistory.lastIntegerZoom?{from:t,to:e,other:i}:{from:i,to:e,other:t}}interpolate(t){return t}}class po{constructor(t){this.specification=t}possiblyEvaluate(t,e,i,r){if(void 0!==t.value){if("constant"===t.expression.kind){const n=t.expression.evaluate(e,null,{},i,r);return this._calculate(n,n,n,e)}return this._calculate(t.expression.evaluate(new to(Math.floor(e.zoom-1),e)),t.expression.evaluate(new to(Math.floor(e.zoom),e)),t.expression.evaluate(new to(Math.floor(e.zoom+1),e)),e)}}_calculate(t,e,i,r){return r.zoom>r.zoomHistory.lastIntegerZoom?{from:t,to:e}:{from:i,to:e}}interpolate(t){return t}}class fo{constructor(t){this.specification=t}possiblyEvaluate(t,e,i,r){return!!t.expression.evaluate(e,null,{},i,r)}interpolate(){return!1}}class mo{constructor(t){this.properties=t,this.defaultPropertyValues={},this.defaultTransitionablePropertyValues={},this.defaultTransitioningPropertyValues={},this.defaultPossiblyEvaluatedValues={},this.overridableProperties=[];for(const e in t){const i=t[e];i.specification.overridable&&this.overridableProperties.push(e);const r=this.defaultPropertyValues[e]=new eo(i,void 0),n=this.defaultTransitionablePropertyValues[e]=new io(i);this.defaultTransitioningPropertyValues[e]=n.untransitioned(),this.defaultPossiblyEvaluatedValues[e]=r.possiblyEvaluate({})}}}function _o(t,e){return 256*(t=_(Math.floor(t),0,255))+_(Math.floor(e),0,255)}tn("DataDrivenProperty",ho),tn("DataConstantProperty",co),tn("CrossFadedDataDrivenProperty",uo),tn("CrossFadedProperty",po),tn("ColorRampProperty",fo);const go={Int8:Int8Array,Uint8:Uint8Array,Int16:Int16Array,Uint16:Uint16Array,Int32:Int32Array,Uint32:Uint32Array,Float32:Float32Array};class yo{constructor(t,e){this._structArray=t,this._pos1=e*this.size,this._pos2=this._pos1/2,this._pos4=this._pos1/4,this._pos8=this._pos1/8}}class xo{constructor(){this.isTransferred=!1,this.capacity=-1,this.resize(0)}static serialize(t,e){return t._trim(),e&&(t.isTransferred=!0,e.push(t.arrayBuffer)),{length:t.length,arrayBuffer:t.arrayBuffer}}static deserialize(t){const e=Object.create(this.prototype);return e.arrayBuffer=t.arrayBuffer,e.length=t.length,e.capacity=t.arrayBuffer.byteLength/e.bytesPerElement,e._refreshViews(),e}_trim(){this.length!==this.capacity&&(this.capacity=this.length,this.arrayBuffer=this.arrayBuffer.slice(0,this.length*this.bytesPerElement),this._refreshViews())}clear(){this.length=0}resize(t){this.reserve(t),this.length=t}reserve(t){if(t>this.capacity){this.capacity=Math.max(t,Math.floor(5*this.capacity),128),this.arrayBuffer=new ArrayBuffer(this.capacity*this.bytesPerElement);const e=this.uint8;this._refreshViews(),e&&this.uint8.set(e)}}_refreshViews(){throw new Error("_refreshViews() must be implemented by each concrete StructArray layout")}}function vo(t,e=1){let i=0,r=0;return{members:t.map(t=>{const n=go[t.type].BYTES_PER_ELEMENT,o=i=bo(i,Math.max(e,n)),s=t.components||1;return r=Math.max(r,n),i+=n*s,{name:t.name,type:t.type,components:s,offset:o}}),size:bo(i,Math.max(r,e)),alignment:e}}function bo(t,e){return Math.ceil(t/e)*e}class wo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(t,e){const i=this.length;return this.resize(i+1),this.emplace(i,t,e)}emplace(t,e,i){const r=2*t;return this.int16[r+0]=e,this.int16[r+1]=i,t}}wo.prototype.bytesPerElement=4,tn("StructArrayLayout2i4",wo);class To extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(t,e,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,t,e,i,r)}emplace(t,e,i,r,n){const o=4*t;return this.int16[o+0]=e,this.int16[o+1]=i,this.int16[o+2]=r,this.int16[o+3]=n,t}}To.prototype.bytesPerElement=8,tn("StructArrayLayout4i8",To);class Eo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,t,e,i,r,n,o,s)}emplace(t,e,i,r,n,o,s,a){const l=6*t,c=12*t,h=3*t;return this.int16[l+0]=e,this.int16[l+1]=i,this.uint8[c+4]=r,this.uint8[c+5]=n,this.uint8[c+6]=o,this.uint8[c+7]=s,this.float32[h+2]=a,t}}Eo.prototype.bytesPerElement=12,tn("StructArrayLayout2i4ub1f12",Eo);class So extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t,e,i){const r=this.length;return this.resize(r+1),this.emplace(r,t,e,i)}emplace(t,e,i,r){const n=3*t;return this.float32[n+0]=e,this.float32[n+1]=i,this.float32[n+2]=r,t}}So.prototype.bytesPerElement=12,tn("StructArrayLayout3f12",So);class Ao extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a,l,c){const h=this.length;return this.resize(h+1),this.emplace(h,t,e,i,r,n,o,s,a,l,c)}emplace(t,e,i,r,n,o,s,a,l,c,h){const u=10*t;return this.uint16[u+0]=e,this.uint16[u+1]=i,this.uint16[u+2]=r,this.uint16[u+3]=n,this.uint16[u+4]=o,this.uint16[u+5]=s,this.uint16[u+6]=a,this.uint16[u+7]=l,this.uint16[u+8]=c,this.uint16[u+9]=h,t}}Ao.prototype.bytesPerElement=20,tn("StructArrayLayout10ui20",Ao);class Io extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a){const l=this.length;return this.resize(l+1),this.emplace(l,t,e,i,r,n,o,s,a)}emplace(t,e,i,r,n,o,s,a,l){const c=8*t;return this.uint16[c+0]=e,this.uint16[c+1]=i,this.uint16[c+2]=r,this.uint16[c+3]=n,this.uint16[c+4]=o,this.uint16[c+5]=s,this.uint16[c+6]=a,this.uint16[c+7]=l,t}}Io.prototype.bytesPerElement=16,tn("StructArrayLayout8ui16",Io);class Mo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m){const _=this.length;return this.resize(_+1),this.emplace(_,t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m)}emplace(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_){const g=16*t;return this.int16[g+0]=e,this.int16[g+1]=i,this.int16[g+2]=r,this.int16[g+3]=n,this.uint16[g+4]=o,this.uint16[g+5]=s,this.uint16[g+6]=a,this.uint16[g+7]=l,this.int16[g+8]=c,this.int16[g+9]=h,this.int16[g+10]=u,this.int16[g+11]=d,this.int16[g+12]=p,this.int16[g+13]=f,this.int16[g+14]=m,this.int16[g+15]=_,t}}Mo.prototype.bytesPerElement=32,tn("StructArrayLayout4i4ui4i4i32",Mo);class Co extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(t){const e=this.length;return this.resize(e+1),this.emplace(e,t)}emplace(t,e){return this.uint32[1*t+0]=e,t}}Co.prototype.bytesPerElement=4,tn("StructArrayLayout1ul4",Co);class zo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a,l,c,h,u,d){const p=this.length;return this.resize(p+1),this.emplace(p,t,e,i,r,n,o,s,a,l,c,h,u,d)}emplace(t,e,i,r,n,o,s,a,l,c,h,u,d,p){const f=20*t,m=10*t;return this.int16[f+0]=e,this.int16[f+1]=i,this.int16[f+2]=r,this.int16[f+3]=n,this.int16[f+4]=o,this.float32[m+3]=s,this.float32[m+4]=a,this.float32[m+5]=l,this.float32[m+6]=c,this.int16[f+14]=h,this.uint32[m+8]=u,this.uint16[f+18]=d,this.uint16[f+19]=p,t}}zo.prototype.bytesPerElement=40,tn("StructArrayLayout5i4f1i1ul2ui40",zo);class ko extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s){const a=this.length;return this.resize(a+1),this.emplace(a,t,e,i,r,n,o,s)}emplace(t,e,i,r,n,o,s,a){const l=8*t;return this.int16[l+0]=e,this.int16[l+1]=i,this.int16[l+2]=r,this.int16[l+4]=n,this.int16[l+5]=o,this.int16[l+6]=s,this.int16[l+7]=a,t}}ko.prototype.bytesPerElement=16,tn("StructArrayLayout3i2i2i16",ko);class Po extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n){const o=this.length;return this.resize(o+1),this.emplace(o,t,e,i,r,n)}emplace(t,e,i,r,n,o){const s=4*t,a=8*t;return this.float32[s+0]=e,this.float32[s+1]=i,this.float32[s+2]=r,this.int16[a+6]=n,this.int16[a+7]=o,t}}Po.prototype.bytesPerElement=16,tn("StructArrayLayout2f1f2i16",Po);class Do extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t,e,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,t,e,i,r)}emplace(t,e,i,r,n){const o=12*t,s=3*t;return this.uint8[o+0]=e,this.uint8[o+1]=i,this.float32[s+1]=r,this.float32[s+2]=n,t}}Do.prototype.bytesPerElement=12,tn("StructArrayLayout2ub2f12",Do);class Lo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i){const r=this.length;return this.resize(r+1),this.emplace(r,t,e,i)}emplace(t,e,i,r){const n=3*t;return this.uint16[n+0]=e,this.uint16[n+1]=i,this.uint16[n+2]=r,t}}Lo.prototype.bytesPerElement=6,tn("StructArrayLayout3ui6",Lo);class Bo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v){const b=this.length;return this.resize(b+1),this.emplace(b,t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v)}emplace(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v,b){const w=30*t,T=15*t,E=60*t;return this.int16[w+0]=e,this.int16[w+1]=i,this.int16[w+2]=r,this.float32[T+2]=n,this.float32[T+3]=o,this.uint16[w+8]=s,this.uint16[w+9]=a,this.uint32[T+5]=l,this.uint32[T+6]=c,this.uint32[T+7]=h,this.uint16[w+16]=u,this.uint16[w+17]=d,this.uint16[w+18]=p,this.float32[T+10]=f,this.float32[T+11]=m,this.uint8[E+48]=_,this.uint8[E+49]=g,this.uint8[E+50]=y,this.uint32[T+13]=x,this.int16[w+28]=v,this.uint8[E+58]=b,t}}Bo.prototype.bytesPerElement=60,tn("StructArrayLayout3i2f2ui3ul3ui2f3ub1ul1i1ub60",Bo);class Ro extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer)}emplaceBack(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v,b,w,T,E,S,A,I,M,C){const z=this.length;return this.resize(z+1),this.emplace(z,t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v,b,w,T,E,S,A,I,M,C)}emplace(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v,b,w,T,E,S,A,I,M,C,z){const k=38*t,P=19*t;return this.int16[k+0]=e,this.int16[k+1]=i,this.int16[k+2]=r,this.float32[P+2]=n,this.float32[P+3]=o,this.int16[k+8]=s,this.int16[k+9]=a,this.int16[k+10]=l,this.int16[k+11]=c,this.int16[k+12]=h,this.int16[k+13]=u,this.uint16[k+14]=d,this.uint16[k+15]=p,this.uint16[k+16]=f,this.uint16[k+17]=m,this.uint16[k+18]=_,this.uint16[k+19]=g,this.uint16[k+20]=y,this.uint16[k+21]=x,this.uint16[k+22]=v,this.uint16[k+23]=b,this.uint16[k+24]=w,this.uint16[k+25]=T,this.uint16[k+26]=E,this.uint16[k+27]=S,this.uint16[k+28]=A,this.uint32[P+15]=I,this.float32[P+16]=M,this.float32[P+17]=C,this.float32[P+18]=z,t}}Ro.prototype.bytesPerElement=76,tn("StructArrayLayout3i2f6i15ui1ul3f76",Ro);class Fo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t){const e=this.length;return this.resize(e+1),this.emplace(e,t)}emplace(t,e){return this.float32[1*t+0]=e,t}}Fo.prototype.bytesPerElement=4,tn("StructArrayLayout1f4",Fo);class Oo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.int16=new Int16Array(this.arrayBuffer)}emplaceBack(t,e,i){const r=this.length;return this.resize(r+1),this.emplace(r,t,e,i)}emplace(t,e,i,r){const n=3*t;return this.int16[n+0]=e,this.int16[n+1]=i,this.int16[n+2]=r,t}}Oo.prototype.bytesPerElement=6,tn("StructArrayLayout3i6",Oo);class Uo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint32=new Uint32Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,t,e,i,r)}emplace(t,e,i,r,n){const o=6*t;return this.uint32[3*t+0]=e,this.uint16[o+2]=i,this.uint16[o+3]=r,this.uint16[o+4]=n,t}}Uo.prototype.bytesPerElement=12,tn("StructArrayLayout1ul3ui12",Uo);class Vo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t,e){const i=this.length;return this.resize(i+1),this.emplace(i,t,e)}emplace(t,e,i){const r=2*t;return this.uint16[r+0]=e,this.uint16[r+1]=i,t}}Vo.prototype.bytesPerElement=4,tn("StructArrayLayout2ui4",Vo);class No extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.uint16=new Uint16Array(this.arrayBuffer)}emplaceBack(t){const e=this.length;return this.resize(e+1),this.emplace(e,t)}emplace(t,e){return this.uint16[1*t+0]=e,t}}No.prototype.bytesPerElement=2,tn("StructArrayLayout1ui2",No);class jo extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t,e){const i=this.length;return this.resize(i+1),this.emplace(i,t,e)}emplace(t,e,i){const r=2*t;return this.float32[r+0]=e,this.float32[r+1]=i,t}}jo.prototype.bytesPerElement=8,tn("StructArrayLayout2f8",jo);class Go extends xo{_refreshViews(){this.uint8=new Uint8Array(this.arrayBuffer),this.float32=new Float32Array(this.arrayBuffer)}emplaceBack(t,e,i,r){const n=this.length;return this.resize(n+1),this.emplace(n,t,e,i,r)}emplace(t,e,i,r,n){const o=4*t;return this.float32[o+0]=e,this.float32[o+1]=i,this.float32[o+2]=r,this.float32[o+3]=n,t}}Go.prototype.bytesPerElement=16,tn("StructArrayLayout4f16",Go);class Zo extends yo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.int16[this._pos2+3]}get tileAnchorY(){return this._structArray.int16[this._pos2+4]}get x1(){return this._structArray.float32[this._pos4+3]}get y1(){return this._structArray.float32[this._pos4+4]}get x2(){return this._structArray.float32[this._pos4+5]}get y2(){return this._structArray.float32[this._pos4+6]}get padding(){return this._structArray.int16[this._pos2+14]}get featureIndex(){return this._structArray.uint32[this._pos4+8]}get sourceLayerIndex(){return this._structArray.uint16[this._pos2+18]}get bucketIndex(){return this._structArray.uint16[this._pos2+19]}}Zo.prototype.size=40;class qo extends zo{get(t){return new Zo(this,t)}}tn("CollisionBoxArray",qo);class $o extends yo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.float32[this._pos4+2]}get tileAnchorY(){return this._structArray.float32[this._pos4+3]}get glyphStartIndex(){return this._structArray.uint16[this._pos2+8]}get numGlyphs(){return this._structArray.uint16[this._pos2+9]}get vertexStartIndex(){return this._structArray.uint32[this._pos4+5]}get lineStartIndex(){return this._structArray.uint32[this._pos4+6]}get lineLength(){return this._structArray.uint32[this._pos4+7]}get segment(){return this._structArray.uint16[this._pos2+16]}get lowerSize(){return this._structArray.uint16[this._pos2+17]}get upperSize(){return this._structArray.uint16[this._pos2+18]}get lineOffsetX(){return this._structArray.float32[this._pos4+10]}get lineOffsetY(){return this._structArray.float32[this._pos4+11]}get writingMode(){return this._structArray.uint8[this._pos1+48]}get placedOrientation(){return this._structArray.uint8[this._pos1+49]}set placedOrientation(t){this._structArray.uint8[this._pos1+49]=t}get hidden(){return this._structArray.uint8[this._pos1+50]}set hidden(t){this._structArray.uint8[this._pos1+50]=t}get crossTileID(){return this._structArray.uint32[this._pos4+13]}set crossTileID(t){this._structArray.uint32[this._pos4+13]=t}get associatedIconIndex(){return this._structArray.int16[this._pos2+28]}get flipState(){return this._structArray.uint8[this._pos1+58]}set flipState(t){this._structArray.uint8[this._pos1+58]=t}}$o.prototype.size=60;class Xo extends Bo{get(t){return new $o(this,t)}}tn("PlacedSymbolArray",Xo);class Wo extends yo{get projectedAnchorX(){return this._structArray.int16[this._pos2+0]}get projectedAnchorY(){return this._structArray.int16[this._pos2+1]}get projectedAnchorZ(){return this._structArray.int16[this._pos2+2]}get tileAnchorX(){return this._structArray.float32[this._pos4+2]}get tileAnchorY(){return this._structArray.float32[this._pos4+3]}get rightJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+8]}get centerJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+9]}get leftJustifiedTextSymbolIndex(){return this._structArray.int16[this._pos2+10]}get verticalPlacedTextSymbolIndex(){return this._structArray.int16[this._pos2+11]}get placedIconSymbolIndex(){return this._structArray.int16[this._pos2+12]}get verticalPlacedIconSymbolIndex(){return this._structArray.int16[this._pos2+13]}get key(){return this._structArray.uint16[this._pos2+14]}get textBoxStartIndex(){return this._structArray.uint16[this._pos2+15]}get textBoxEndIndex(){return this._structArray.uint16[this._pos2+16]}get verticalTextBoxStartIndex(){return this._structArray.uint16[this._pos2+17]}get verticalTextBoxEndIndex(){return this._structArray.uint16[this._pos2+18]}get iconBoxStartIndex(){return this._structArray.uint16[this._pos2+19]}get iconBoxEndIndex(){return this._structArray.uint16[this._pos2+20]}get verticalIconBoxStartIndex(){return this._structArray.uint16[this._pos2+21]}get verticalIconBoxEndIndex(){return this._structArray.uint16[this._pos2+22]}get featureIndex(){return this._structArray.uint16[this._pos2+23]}get numHorizontalGlyphVertices(){return this._structArray.uint16[this._pos2+24]}get numVerticalGlyphVertices(){return this._structArray.uint16[this._pos2+25]}get numIconVertices(){return this._structArray.uint16[this._pos2+26]}get numVerticalIconVertices(){return this._structArray.uint16[this._pos2+27]}get useRuntimeCollisionCircles(){return this._structArray.uint16[this._pos2+28]}get crossTileID(){return this._structArray.uint32[this._pos4+15]}set crossTileID(t){this._structArray.uint32[this._pos4+15]=t}get textOffset0(){return this._structArray.float32[this._pos4+16]}get textOffset1(){return this._structArray.float32[this._pos4+17]}get collisionCircleDiameter(){return this._structArray.float32[this._pos4+18]}}Wo.prototype.size=76;class Ho extends Ro{get(t){return new Wo(this,t)}}tn("SymbolInstanceArray",Ho);class Ko extends Fo{getoffsetX(t){return this.float32[1*t+0]}}tn("GlyphOffsetArray",Ko);class Yo extends Oo{getx(t){return this.int16[3*t+0]}gety(t){return this.int16[3*t+1]}gettileUnitDistanceFromAnchor(t){return this.int16[3*t+2]}}tn("SymbolLineVertexArray",Yo);class Jo extends yo{get featureIndex(){return this._structArray.uint32[this._pos4+0]}get sourceLayerIndex(){return this._structArray.uint16[this._pos2+2]}get bucketIndex(){return this._structArray.uint16[this._pos2+3]}get layoutVertexArrayOffset(){return this._structArray.uint16[this._pos2+4]}}Jo.prototype.size=12;class Qo extends Uo{get(t){return new Jo(this,t)}}tn("FeatureIndexArray",Qo);class ts extends yo{get a_centroid_pos0(){return this._structArray.uint16[this._pos2+0]}get a_centroid_pos1(){return this._structArray.uint16[this._pos2+1]}}ts.prototype.size=4;class es extends Vo{get(t){return new ts(this,t)}}tn("FillExtrusionCentroidArray",es);const is=vo([{name:"a_pattern_to",components:4,type:"Uint16"},{name:"a_pattern_from",components:4,type:"Uint16"},{name:"a_pixel_ratio_to",components:1,type:"Uint16"},{name:"a_pixel_ratio_from",components:1,type:"Uint16"}]),rs=vo([{name:"a_dash_to",components:4,type:"Uint16"},{name:"a_dash_from",components:4,type:"Uint16"}]);var ns=ce((function(t){t.exports=function(t,e){var i,r,n,o,s,a,l,c;for(r=t.length-(i=3&t.length),n=e,s=3432918353,a=461845907,c=0;c>>16)*s&65535)<<16)&4294967295)<<15|l>>>17))*a+(((l>>>16)*a&65535)<<16)&4294967295)<<13|n>>>19))+((5*(n>>>16)&65535)<<16)&4294967295))+((58964+(o>>>16)&65535)<<16);switch(l=0,i){case 3:l^=(255&t.charCodeAt(c+2))<<16;case 2:l^=(255&t.charCodeAt(c+1))<<8;case 1:n^=l=(65535&(l=(l=(65535&(l^=255&t.charCodeAt(c)))*s+(((l>>>16)*s&65535)<<16)&4294967295)<<15|l>>>17))*a+(((l>>>16)*a&65535)<<16)&4294967295}return n^=t.length,n=2246822507*(65535&(n^=n>>>16))+((2246822507*(n>>>16)&65535)<<16)&4294967295,n=3266489909*(65535&(n^=n>>>13))+((3266489909*(n>>>16)&65535)<<16)&4294967295,(n^=n>>>16)>>>0}})),os=ce((function(t){t.exports=function(t,e){for(var i,r=t.length,n=e^r,o=0;r>=4;)i=1540483477*(65535&(i=255&t.charCodeAt(o)|(255&t.charCodeAt(++o))<<8|(255&t.charCodeAt(++o))<<16|(255&t.charCodeAt(++o))<<24))+((1540483477*(i>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(i=1540483477*(65535&(i^=i>>>24))+((1540483477*(i>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&t.charCodeAt(o+2))<<16;case 2:n^=(255&t.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&t.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),(n^=n>>>15)>>>0}})),ss=ns,as=os;ss.murmur3=ns,ss.murmur2=as;class ls{constructor(){this.ids=[],this.positions=[],this.indexed=!1}add(t,e,i,r){this.ids.push(cs(t)),this.positions.push(e,i,r)}getPositions(t){const e=cs(t);let i=0,r=this.ids.length-1;for(;i>1;this.ids[t]>=e?r=t:i=t+1}const n=[];for(;this.ids[i]===e;)n.push({index:this.positions[3*i],start:this.positions[3*i+1],end:this.positions[3*i+2]}),i++;return n}static serialize(t,e){const i=new Float64Array(t.ids),r=new Uint32Array(t.positions);return function t(e,i,r,n){for(;r>1];let s=r-1,a=n+1;for(;;){do{s++}while(e[s]o);if(s>=a)break;hs(e,s,a),hs(i,3*s,3*a),hs(i,3*s+1,3*a+1),hs(i,3*s+2,3*a+2)}a-r"u_"+t),this.type=i}setUniform(t,e,i){t.set(i.constantOr(this.value))}getBinding(t,e,i){return"color"===this.type?new fs(t,e):new ds(t,e)}}class vs{constructor(t,e){this.uniformNames=e.map(t=>"u_"+t),this.patternFrom=null,this.patternTo=null,this.pixelRatioFrom=1,this.pixelRatioTo=1}setConstantPatternPositions(t,e){this.pixelRatioFrom=e.pixelRatio,this.pixelRatioTo=t.pixelRatio,this.patternFrom=e.tl.concat(e.br),this.patternTo=t.tl.concat(t.br)}setUniform(t,e,i,r){const n="u_pattern_to"===r||"u_dash_to"===r?this.patternTo:"u_pattern_from"===r||"u_dash_from"===r?this.patternFrom:"u_pixel_ratio_to"===r?this.pixelRatioTo:"u_pixel_ratio_from"===r?this.pixelRatioFrom:null;n&&t.set(n)}getBinding(t,e,i){return"u_pattern_from"===i||"u_pattern_to"===i||"u_dash_from"===i||"u_dash_to"===i?new ps(t,e):new ds(t,e)}}class bs{constructor(t,e,i,r){this.expression=t,this.type=i,this.maxValue=0,this.paintVertexAttributes=e.map(t=>({name:"a_"+t,type:"Float32",components:"color"===i?2:1,offset:0})),this.paintVertexArray=new r}populatePaintArray(t,e,i,r,n,o){const s=this.paintVertexArray.length,a=this.expression.evaluate(new to(0),e,{},n,r,o);this.paintVertexArray.resize(t),this._setPaintValue(s,t,a)}updatePaintArray(t,e,i,r,n){const o=this.expression.evaluate({zoom:0},i,r,void 0,n);this._setPaintValue(t,e,o)}_setPaintValue(t,e,i){if("color"===this.type){const r=ys(i);for(let i=t;i`u_${t}_t`),this.type=i,this.useIntegerZoom=r,this.zoom=n,this.maxValue=0,this.paintVertexAttributes=e.map(t=>({name:"a_"+t,type:"Float32",components:"color"===i?4:2,offset:0})),this.paintVertexArray=new o}populatePaintArray(t,e,i,r,n,o){const s=this.expression.evaluate(new to(this.zoom),e,{},n,r,o),a=this.expression.evaluate(new to(this.zoom+1),e,{},n,r,o),l=this.paintVertexArray.length;this.paintVertexArray.resize(t),this._setPaintValue(l,t,s,a)}updatePaintArray(t,e,i,r,n){const o=this.expression.evaluate({zoom:this.zoom},i,r,void 0,n),s=this.expression.evaluate({zoom:this.zoom+1},i,r,void 0,n);this._setPaintValue(t,e,o,s)}_setPaintValue(t,e,i,r){if("color"===this.type){const n=ys(i),o=ys(r);for(let i=t;i!0)){this.binders={},this._buffers=[];const r=[];for(const n in t.paint._values){if(!i(n))continue;const o=t.paint.get(n);if(!(o instanceof ao&&qi(o.property.specification)))continue;const s=Is(n,t.type),a=o.value,l=o.property.specification.type,c=o.property.useIntegerZoom,h=o.property.specification["property-type"],u="cross-faded"===h||"cross-faded-data-driven"===h,d="line-dasharray"===String(n)&&"constant"!==t.layout.get("line-cap").value.kind;if("constant"!==a.kind||d)if("source"===a.kind||d||u){const i=zs(n,l,"source");this.binders[n]=u?new Ts(a,s,l,c,e,i,t.id):new bs(a,s,l,i),r.push("/a_"+n)}else{const t=zs(n,l,"composite");this.binders[n]=new ws(a,s,l,c,e,t),r.push("/z_"+n)}else this.binders[n]=u?new vs(a.value,s):new xs(a.value,s,l),r.push("/u_"+n)}this.cacheKey=r.sort().join("")}getMaxValue(t){const e=this.binders[t];return e instanceof bs||e instanceof ws?e.maxValue:0}populatePaintArrays(t,e,i,r,n,o){for(const s in this.binders){const a=this.binders[s];(a instanceof bs||a instanceof ws||a instanceof Ts)&&a.populatePaintArray(t,e,i,r,n,o)}}setConstantPatternPositions(t,e){for(const i in this.binders){const r=this.binders[i];r instanceof vs&&r.setConstantPatternPositions(t,e)}}updatePaintArrays(t,e,i,r,n,o){let s=!1;for(const a in t){const l=e.getPositions(a);for(const e of l){const l=i.feature(e.index);for(const i in this.binders){const c=this.binders[i];if((c instanceof bs||c instanceof ws||c instanceof Ts)&&!0===c.expression.isStateDependent){const h=r.paint.get(i);c.expression=h.value,c.updatePaintArray(e.start,e.end,l,t[a],n,o),s=!0}}}}return s}defines(){const t=[];for(const e in this.binders){const i=this.binders[e];(i instanceof xs||i instanceof vs)&&t.push(...i.uniformNames.map(t=>"#define HAS_UNIFORM_"+t))}return t}getBinderAttributes(){const t=[];for(const e in this.binders){const i=this.binders[e];if(i instanceof bs||i instanceof ws||i instanceof Ts)for(let e=0;e!0)){this.programConfigurations={};for(const r of t)this.programConfigurations[r.id]=new Es(r,e,i);this.needsUpload=!1,this._featureMap=new ls,this._bufferOffset=0}populatePaintArrays(t,e,i,r,n,o,s){for(const a in this.programConfigurations)this.programConfigurations[a].populatePaintArrays(t,e,r,n,o,s);void 0!==e.id&&this._featureMap.add(e.id,i,this._bufferOffset,t),this._bufferOffset=t,this.needsUpload=!0}updatePaintArrays(t,e,i,r,n){for(const o of i)this.needsUpload=this.programConfigurations[o.id].updatePaintArrays(t,this._featureMap,e,o,r,n)||this.needsUpload}get(t){return this.programConfigurations[t]}upload(t){if(this.needsUpload){for(const e in this.programConfigurations)this.programConfigurations[e].upload(t);this.needsUpload=!1}}destroy(){for(const t in this.programConfigurations)this.programConfigurations[t].destroy()}}const As={"text-opacity":["opacity"],"icon-opacity":["opacity"],"text-color":["fill_color"],"icon-color":["fill_color"],"text-halo-color":["halo_color"],"icon-halo-color":["halo_color"],"text-halo-blur":["halo_blur"],"icon-halo-blur":["halo_blur"],"text-halo-width":["halo_width"],"icon-halo-width":["halo_width"],"line-gap-width":["gapwidth"],"line-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"fill-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"fill-extrusion-pattern":["pattern_to","pattern_from","pixel_ratio_to","pixel_ratio_from"],"line-dasharray":["dash_to","dash_from"]};function Is(t,e){return As[t]||[t.replace(e+"-","").replace(/-/g,"_")]}const Ms={"line-pattern":{source:Ao,composite:Ao},"fill-pattern":{source:Ao,composite:Ao},"fill-extrusion-pattern":{source:Ao,composite:Ao},"line-dasharray":{source:Io,composite:Io}},Cs={color:{source:jo,composite:Go},number:{source:Fo,composite:jo}};function zs(t,e,i){const r=Ms[t];return r&&r[i]||Cs[e][i]}tn("ConstantBinder",xs),tn("CrossFadedConstantBinder",vs),tn("SourceExpressionBinder",bs),tn("CrossFadedCompositeBinder",Ts),tn("CompositeExpressionBinder",ws),tn("ProgramConfiguration",Es,{omit:["_buffers"]}),tn("ProgramConfigurationSet",Ss);const ks="-transition";class Ps extends Ot{constructor(t,e){if(super(),this.id=t.id,this.type=t.type,this._featureFilter={filter:()=>!0,needGeometry:!1,needFeature:!1},this._filterCompiled=!1,"custom"!==t.type&&(this.metadata=(t=t).metadata,this.minzoom=t.minzoom,this.maxzoom=t.maxzoom,"background"!==t.type&&"sky"!==t.type&&(this.source=t.source,this.sourceLayer=t["source-layer"],this.filter=t.filter),e.layout&&(this._unevaluatedLayout=new so(e.layout)),e.paint)){this._transitionablePaint=new ro(e.paint);for(const e in t.paint)this.setPaintProperty(e,t.paint[e],{validate:!1});for(const e in t.layout)this.setLayoutProperty(e,t.layout[e],{validate:!1});this._transitioningPaint=this._transitionablePaint.untransitioned(),this.paint=new lo(e.paint)}}getCrossfadeParameters(){return this._crossfadeParameters}getLayoutProperty(t){return"visibility"===t?this.visibility:this._unevaluatedLayout.getValue(t)}setLayoutProperty(t,e,i={}){null!=e&&this._validate(Xr,`layers.${this.id}.layout.${t}`,t,e,i)||("visibility"!==t?this._unevaluatedLayout.setValue(t,e):this.visibility=e)}getPaintProperty(t){return I(t,ks)?this._transitionablePaint.getTransition(t.slice(0,-ks.length)):this._transitionablePaint.getValue(t)}setPaintProperty(t,e,i={}){if(null!=e&&this._validate($r,`layers.${this.id}.paint.${t}`,t,e,i))return!1;if(I(t,ks))return this._transitionablePaint.setTransition(t.slice(0,-ks.length),e||void 0),!1;{const i=this._transitionablePaint._values[t],r="cross-faded-data-driven"===i.property.specification["property-type"],n=i.value.isDataDriven(),o=i.value;this._transitionablePaint.setValue(t,e),this._handleSpecialPaintPropertyUpdate(t);const s=this._transitionablePaint._values[t].value;return s.isDataDriven()||n||r||this._handleOverridablePaintPropertyUpdate(t,o,s)}}_handleSpecialPaintPropertyUpdate(t){}getProgramIds(){return null}getProgramConfiguration(t){return null}_handleOverridablePaintPropertyUpdate(t,e,i){return!1}isHidden(t){return!!(this.minzoom&&t=this.maxzoom)||"none"===this.visibility}updateTransitions(t){this._transitioningPaint=this._transitionablePaint.transitioned(t,this._transitioningPaint)}hasTransition(){return this._transitioningPaint.hasTransition()}recalculate(t,e){t.getCrossfadeParameters&&(this._crossfadeParameters=t.getCrossfadeParameters()),this._unevaluatedLayout&&(this.layout=this._unevaluatedLayout.possiblyEvaluate(t,void 0,e)),this.paint=this._transitioningPaint.possiblyEvaluate(t,void 0,e)}serialize(){const t={id:this.id,type:this.type,source:this.source,"source-layer":this.sourceLayer,metadata:this.metadata,minzoom:this.minzoom,maxzoom:this.maxzoom,filter:this.filter,layout:this._unevaluatedLayout&&this._unevaluatedLayout.serialize(),paint:this._transitionablePaint&&this._transitionablePaint.serialize()};return this.visibility&&(t.layout=t.layout||{},t.layout.visibility=this.visibility),C(t,(t,e)=>!(void 0===t||"layout"===e&&!Object.keys(t).length||"paint"===e&&!Object.keys(t).length))}_validate(t,e,i,r,n={}){return(!n||!1!==n.validate)&&Wr(this,t.call(Gr,{key:e,layerType:this.type,objectKey:i,value:r,styleSpec:Ut,style:{glyphs:!0,sprite:!0}}))}is3D(){return!1}isSky(){return!1}isTileClipped(){return!1}hasOffscreenPass(){return!1}resize(){}isStateDependent(){for(const t in this.paint._values){const e=this.paint.get(t);if(e instanceof ao&&qi(e.property.specification)&&("source"===e.value.kind||"composite"===e.value.kind)&&e.value.isStateDependent)return!0}return!1}compileFilter(){this._filterCompiled||(this._featureFilter=_r(this.filter),this._filterCompiled=!0)}invalidateCompiledFilter(){this._filterCompiled=!1}dynamicFilter(){return this._featureFilter.dynamicFilter}dynamicFilterNeedsFeature(){return this._featureFilter.needFeature}}const Ds=vo([{name:"a_pos",components:2,type:"Int16"}],4),{members:Ls}=Ds;class Bs{constructor(t=[]){this.segments=t}prepareSegment(t,e,i,r){let n=this.segments[this.segments.length-1];return t>Bs.MAX_VERTEX_ARRAY_LENGTH&&P(`Max vertices per segment is ${Bs.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${t}`),(!n||n.vertexLength+t>Bs.MAX_VERTEX_ARRAY_LENGTH||n.sortKey!==r)&&(n={vertexOffset:e.length,primitiveOffset:i.length,vertexLength:0,primitiveLength:0},void 0!==r&&(n.sortKey=r),this.segments.push(n)),n}get(){return this.segments}destroy(){for(const t of this.segments)for(const e in t.vaos)t.vaos[e].destroy()}static simpleSegment(t,e,i,r){return new Bs([{vertexOffset:t,primitiveOffset:e,vertexLength:i,primitiveLength:r,vaos:{},sortKey:0}])}}Bs.MAX_VERTEX_ARRAY_LENGTH=Math.pow(2,16)-1,tn("SegmentVector",Bs);var Rs=8192;class Fs{constructor(t,e){t&&(e?this.setSouthWest(t).setNorthEast(e):4===t.length?this.setSouthWest([t[0],t[1]]).setNorthEast([t[2],t[3]]):this.setSouthWest(t[0]).setNorthEast(t[1]))}setNorthEast(t){return this._ne=t instanceof Us?new Us(t.lng,t.lat):Us.convert(t),this}setSouthWest(t){return this._sw=t instanceof Us?new Us(t.lng,t.lat):Us.convert(t),this}extend(t){const e=this._sw,i=this._ne;let r,n;if(t instanceof Us)r=t,n=t;else{if(!(t instanceof Fs))return Array.isArray(t)?4===t.length||t.every(Array.isArray)?this.extend(Fs.convert(t)):this.extend(Us.convert(t)):this;if(r=t._sw,n=t._ne,!r||!n)return this}return e||i?(e.lng=Math.min(r.lng,e.lng),e.lat=Math.min(r.lat,e.lat),i.lng=Math.max(n.lng,i.lng),i.lat=Math.max(n.lat,i.lat)):(this._sw=new Us(r.lng,r.lat),this._ne=new Us(n.lng,n.lat)),this}getCenter(){return new Us((this._sw.lng+this._ne.lng)/2,(this._sw.lat+this._ne.lat)/2)}getSouthWest(){return this._sw}getNorthEast(){return this._ne}getNorthWest(){return new Us(this.getWest(),this.getNorth())}getSouthEast(){return new Us(this.getEast(),this.getSouth())}getWest(){return this._sw.lng}getSouth(){return this._sw.lat}getEast(){return this._ne.lng}getNorth(){return this._ne.lat}toArray(){return[this._sw.toArray(),this._ne.toArray()]}toString(){return`LngLatBounds(${this._sw.toString()}, ${this._ne.toString()})`}isEmpty(){return!(this._sw&&this._ne)}contains(t){const{lng:e,lat:i}=Us.convert(t);let r=this._sw.lng<=e&&e<=this._ne.lng;return this._sw.lng>this._ne.lng&&(r=this._sw.lng>=e&&e>=this._ne.lng),this._sw.lat<=i&&i<=this._ne.lat&&r}static convert(t){return!t||t instanceof Fs?t:new Fs(t)}}const Os=6371008.8;class Us{constructor(t,e){if(isNaN(t)||isNaN(e))throw new Error(`Invalid LngLat object: (${t}, ${e})`);if(this.lng=+t,this.lat=+e,this.lat>90||this.lat<-90)throw new Error("Invalid LngLat latitude value: must be between -90 and 90")}wrap(){return new Us(g(this.lng,-180,180),this.lat)}toArray(){return[this.lng,this.lat]}toString(){return`LngLat(${this.lng}, ${this.lat})`}distanceTo(t){const e=Math.PI/180,i=this.lat*e,r=t.lat*e,n=Math.sin(i)*Math.sin(r)+Math.cos(i)*Math.cos(r)*Math.cos((t.lng-this.lng)*e);return Os*Math.acos(Math.min(n,1))}toBounds(t=0){const e=360*t/40075017,i=e/Math.cos(Math.PI/180*this.lat);return new Fs(new Us(this.lng-i,this.lat-e),new Us(this.lng+i,this.lat+e))}static convert(t){if(t instanceof Us)return t;if(Array.isArray(t)&&(2===t.length||3===t.length))return new Us(Number(t[0]),Number(t[1]));if(!Array.isArray(t)&&"object"==typeof t&&null!==t)return new Us(Number("lng"in t?t.lng:t.lon),Number(t.lat));throw new Error("`LngLatLike` argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]")}}const Vs=2*Math.PI*Os;function Ns(t){return Vs*Math.cos(t*Math.PI/180)}function js(t){return(180+t)/360}function Gs(t){return(180-180/Math.PI*Math.log(Math.tan(Math.PI/4+t*Math.PI/360)))/360}function Zs(t,e){return t/Ns(e)}function qs(t){return 360*t-180}function $s(t){return 360/Math.PI*Math.atan(Math.exp((180-360*t)*Math.PI/180))-90}function Xs(t,e){return t*Ns($s(e))}const Ws=85.051129;class Hs{constructor(t,e,i=0){this.x=+t,this.y=+e,this.z=+i}static fromLngLat(t,e=0){const i=Us.convert(t);return new Hs(js(i.lng),Gs(i.lat),Zs(e,i.lat))}toLngLat(){return new Us(qs(this.x),$s(this.y))}toAltitude(){return Xs(this.z,this.y)}meterInMercatorCoordinateUnits(){return 1/Vs*(t=$s(this.y),1/Math.cos(t*Math.PI/180));var t}}function Ks(t,e,i,r,o,s,a,l,c){const h=(e+r)/2,u=(i+o)/2,d=new n(h,u);l(d),function(t,e,i,r,n,o){const s=i-n,a=r-o;return Math.abs((r-e)*s-(i-t)*a)/Math.hypot(s,a)}(d.x,d.y,s.x,s.y,a.x,a.y)>=c?(Ks(t,e,i,h,u,s,d,l,c),Ks(t,h,u,r,o,d,a,l,c)):t.push(a)}function Ys(t,e,i){const r=[];let n,o,s;for(const a of t){const{x:t,y:l}=a;e(a),s?Ks(r,n,o,t,l,s,a,e,i):r.push(a),n=t,o=l,s=a}return r}const Js=Math.pow(2,14)-1,Qs=-Js-1;function ta(t,e){const i=Math.round(t.x*e),r=Math.round(t.y*e);return t.x=_(i,Qs,Js),t.y=_(r,Qs,Js),(it.x+1||rt.y+1)&&P("Geometry exceeds allowed extent, reduce your vector tile buffer size"),t}function ea(t,e,i){const r=t.loadGeometry(),n=t.extent,o=Rs/n;if(e&&i&&"mercator"!==i.projection.name){const o=1<{const i=qs((e.x+t.x/n)/o),r=$s((e.y+t.y/n)/o),h=c.project(i,r);t.x=(h.x*s-a)*n,t.y=(h.y*s-l)*n};for(let e=0;e=n||i.y<0||i.y>=n||(h(i),t.push(i));r[e]=t}}for(const s of r)for(const t of s)ta(t,o);return r}function ia(t,e){return{type:t.type,id:t.id,properties:t.properties,geometry:e?ea(t):[]}}function ra(t,e,i,r,n){t.emplaceBack(2*e+(r+1)/2,2*i+(n+1)/2)}class na{constructor(t){this.zoom=t.zoom,this.overscaling=t.overscaling,this.layers=t.layers,this.layerIds=this.layers.map(t=>t.id),this.index=t.index,this.hasPattern=!1,this.layoutVertexArray=new wo,this.indexArray=new Lo,this.segments=new Bs,this.programConfigurations=new Ss(t.layers,t.zoom),this.stateDependentLayerIds=this.layers.filter(t=>t.isStateDependent()).map(t=>t.id)}populate(t,e,i,r){const n=this.layers[0],o=[];let s=null;"circle"===n.type&&(s=n.layout.get("circle-sort-key"));for(const{feature:a,id:l,index:c,sourceLayerIndex:h}of t){const t=this.layers[0]._featureFilter.needGeometry,e=ia(a,t);if(!this.layers[0]._featureFilter.filter(new to(this.zoom),e,i))continue;const n=s?s.evaluate(e,{},i):void 0,u={id:l,properties:a.properties,type:a.type,sourceLayerIndex:h,index:c,geometry:t?e.geometry:ea(a,i,r),patterns:{},sortKey:n};o.push(u)}s&&o.sort((t,e)=>t.sortKey-e.sortKey);for(const a of o){const{geometry:r,index:n,sourceLayerIndex:o}=a,s=t[n].feature;this.addFeature(a,r,n,e.availableImages,i),e.featureIndex.insert(s,r,n,o,this.index)}}update(t,e,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(t,e,this.stateDependentLayers,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(t){this.uploaded||(this.layoutVertexBuffer=t.createVertexBuffer(this.layoutVertexArray,Ls),this.indexBuffer=t.createIndexBuffer(this.indexArray)),this.programConfigurations.upload(t),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.programConfigurations.destroy(),this.segments.destroy())}addFeature(t,e,i,r,n){for(const o of e)for(const e of o){const i=e.x,r=e.y;if(i<0||i>=Rs||r<0||r>=Rs)continue;const n=this.segments.prepareSegment(4,this.layoutVertexArray,this.indexArray,t.sortKey),o=n.vertexLength;ra(this.layoutVertexArray,i,r,-1,-1),ra(this.layoutVertexArray,i,r,1,-1),ra(this.layoutVertexArray,i,r,1,1),ra(this.layoutVertexArray,i,r,-1,1),this.indexArray.emplaceBack(o,o+1,o+2),this.indexArray.emplaceBack(o,o+3,o+2),n.vertexLength+=4,n.primitiveLength+=2}this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length,t,i,{},r,n)}}function oa(t,e){for(let i=0;i1){if(ca(t,e))return!0;for(let r=0;r1?i:i.sub(e)._mult(n)._add(e))}function pa(t,e){let i,r,n,o=!1;for(let s=0;se.y!=n.y>e.y&&e.x<(n.x-r.x)*(e.y-r.y)/(n.y-r.y)+r.x&&(o=!o)}return o}function fa(t,e){let i=!1;for(let r=0,n=t.length-1;re.y!=s.y>e.y&&e.x<(s.x-o.x)*(e.y-o.y)/(s.y-o.y)+o.x&&(i=!i)}return i}function ma(t,e,i,r,o){for(const n of t)if(e<=n.x&&i<=n.y&&r>=n.x&&o>=n.y)return!0;const s=[new n(e,i),new n(e,o),new n(r,o),new n(r,i)];if(t.length>2)for(const n of s)if(fa(t,n))return!0;for(let n=0;nn.x&&e.x>n.x||t.yn.y&&e.y>n.y)return!1;const o=D(t,e,i[0]);return o!==D(t,e,i[1])||o!==D(t,e,i[2])||o!==D(t,e,i[3])}function ga(t,e,i){const r=e.paint.get(t).value;return"constant"===r.kind?r.value:i.programConfigurations.get(e.id).getMaxValue(t)}function ya(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])}function xa(t,e,i,r,o){if(!e[0]&&!e[1])return t;const s=n.convert(e)._mult(o);"viewport"===i&&s._rotate(-r);const a=[];for(let n=0;n0&&(o=1/Math.sqrt(o)),t[0]=e[0]*o,t[1]=e[1]*o,t[2]=e[2]*o,t}function Ba(t,e,i){var r=i[0],n=i[1],o=i[2],s=e[0],a=e[1],l=e[2],c=n*l-o*a,h=o*s-r*l,u=r*a-n*s,d=n*u-o*h,p=o*c-r*u,f=r*h-n*c,m=2*i[3];return h*=m,u*=m,p*=2,f*=2,t[0]=s+(c*=m)+(d*=2),t[1]=a+h+p,t[2]=l+u+f,t}var Ra,Fa=ka,Oa=Pa,Ua=Ca;function Va(t,e,i){var r=e[0],n=e[1],o=e[2],s=e[3];return t[0]=i[0]*r+i[4]*n+i[8]*o+i[12]*s,t[1]=i[1]*r+i[5]*n+i[9]*o+i[13]*s,t[2]=i[2]*r+i[6]*n+i[10]*o+i[14]*s,t[3]=i[3]*r+i[7]*n+i[11]*o+i[15]*s,t}function Na(){var t=new Ta(4);return Ta!=Float32Array&&(t[0]=0,t[1]=0,t[2]=0),t[3]=1,t}function ja(t){return t[0]=0,t[1]=0,t[2]=0,t[3]=1,t}function Ga(t,e,i){i*=.5;var r=e[0],n=e[1],o=e[2],s=e[3],a=Math.sin(i),l=Math.cos(i);return t[0]=r*l+s*a,t[1]=n*l+o*a,t[2]=o*l-n*a,t[3]=s*l-r*a,t}function Za(t,e){return t[0]===e[0]&&t[1]===e[1]}function qa(t,e,i,r,n,o,s,a,l){if(o&&t.queryGeometry.isAboveHorizon)return!1;o&&(l*=t.pixelToTileUnitsFactor);for(const c of e)for(const e of c){const c=e.add(a),h=n&&i.elevation?i.elevation.exaggeration()*n.getElevationAt(c.x,c.y,!0):0,u=o?c:$a(c,h,r),d=o?t.tilespaceRays.map(t=>Ha(t,h)):t.queryGeometry.screenGeometry,p=Va([],[e.x,e.y,h,1],r);if(!s&&o?l*=p[3]/i.cameraToCenterDistance:s&&!o&&(l*=i.cameraToCenterDistance/p[3]),sa(d,u,l))return!0}return!1}function $a(t,e,i){const r=Va([],[t.x,t.y,e,1],i);return new n(r[0]/r[3],r[1]/r[3])}Ma(),Ra=new Ta(4),Ta!=Float32Array&&(Ra[0]=0,Ra[1]=0,Ra[2]=0,Ra[3]=0),Ma(),za(1,0,0),za(0,1,0),Na(),Na(),Ea(),function(){var t;t=new Ta(2),Ta!=Float32Array&&(t[0]=0,t[1]=0)}();const Xa=za(0,0,0),Wa=za(0,0,1);function Ha(t,e){const i=Ma();return Xa[2]=e,t.intersectsPlane(Xa,Wa,i),new n(i[0],i[1])}class Ka extends na{}function Ya(t,{width:e,height:i},r,n){if(n){if(n instanceof Uint8ClampedArray)n=new Uint8Array(n.buffer);else if(n.length!==e*i*r)throw new RangeError("mismatched image size")}else n=new Uint8Array(e*i*r);return t.width=e,t.height=i,t.data=n,t}function Ja(t,{width:e,height:i},r){if(e===t.width&&i===t.height)return;const n=Ya({},{width:e,height:i},r);Qa(t,n,{x:0,y:0},{x:0,y:0},{width:Math.min(t.width,e),height:Math.min(t.height,i)},r),t.width=e,t.height=i,t.data=n.data}function Qa(t,e,i,r,n,o){if(0===n.width||0===n.height)return e;if(n.width>t.width||n.height>t.height||i.x>t.width-n.width||i.y>t.height-n.height)throw new RangeError("out of range source coordinates for image copy");if(n.width>e.width||n.height>e.height||r.x>e.width-n.width||r.y>e.height-n.height)throw new RangeError("out of range destination coordinates for image copy");const s=t.data,a=e.data;for(let l=0;l{e[t.evaluationKey]=o;const s=t.expression.evaluate(e);n.data[i+r+0]=Math.floor(255*s.r/s.a),n.data[i+r+1]=Math.floor(255*s.g/s.a),n.data[i+r+2]=Math.floor(255*s.b/s.a),n.data[i+r+3]=Math.floor(255*s.a)};if(t.clips)for(let s=0,a=0;s80*i){r=o=t[0],n=s=t[1];for(var f=i;fo&&(o=a),l>s&&(s=l);c=0!==(c=Math.max(o-r,s-n))?1/c:0}return dl(d,p,i,r,n,c),p}function hl(t,e,i,r,n){var o,s;if(n===Ll(t,e,i,r)>0)for(o=e;o=e;o-=r)s=kl(o,t[o],t[o+1],s);return s&&Sl(s,s.next)&&(Pl(s),s=s.next),s}function ul(t,e){if(!t)return t;e||(e=t);var i,r=t;do{if(i=!1,r.steiner||!Sl(r,r.next)&&0!==El(r.prev,r,r.next))r=r.next;else{if(Pl(r),(r=e=r.prev)===r.next)break;i=!0}}while(i||r!==e);return e}function dl(t,e,i,r,n,o,s){if(t){!s&&o&&function(t,e,i,r){var n=t;do{null===n.z&&(n.z=vl(n.x,n.y,e,i,r)),n.prevZ=n.prev,n.nextZ=n.next,n=n.next}while(n!==t);n.prevZ.nextZ=null,n.prevZ=null,function(t){var e,i,r,n,o,s,a,l,c=1;do{for(i=t,t=null,o=null,s=0;i;){for(s++,r=i,a=0,e=0;e0||l>0&&r;)0!==a&&(0===l||!r||i.z<=r.z)?(n=i,i=i.nextZ,a--):(n=r,r=r.nextZ,l--),o?o.nextZ=n:t=n,n.prevZ=o,o=n;i=r}o.nextZ=null,c*=2}while(s>1)}(n)}(t,r,n,o);for(var a,l,c=t;t.prev!==t.next;)if(a=t.prev,l=t.next,o?fl(t,r,n,o):pl(t))e.push(a.i/i),e.push(t.i/i),e.push(l.i/i),Pl(t),t=l.next,c=l.next;else if((t=l)===c){s?1===s?dl(t=ml(ul(t),e,i),e,i,r,n,o,2):2===s&&_l(t,e,i,r,n,o):dl(ul(t),e,i,r,n,o,1);break}}}function pl(t){var e=t.prev,i=t,r=t.next;if(El(e,i,r)>=0)return!1;for(var n=t.next.next;n!==t.prev;){if(wl(e.x,e.y,i.x,i.y,r.x,r.y,n.x,n.y)&&El(n.prev,n,n.next)>=0)return!1;n=n.next}return!0}function fl(t,e,i,r){var n=t.prev,o=t,s=t.next;if(El(n,o,s)>=0)return!1;for(var a=n.x>o.x?n.x>s.x?n.x:s.x:o.x>s.x?o.x:s.x,l=n.y>o.y?n.y>s.y?n.y:s.y:o.y>s.y?o.y:s.y,c=vl(n.x=c&&d&&d.z<=h;){if(u!==t.prev&&u!==t.next&&wl(n.x,n.y,o.x,o.y,s.x,s.y,u.x,u.y)&&El(u.prev,u,u.next)>=0)return!1;if(u=u.prevZ,d!==t.prev&&d!==t.next&&wl(n.x,n.y,o.x,o.y,s.x,s.y,d.x,d.y)&&El(d.prev,d,d.next)>=0)return!1;d=d.nextZ}for(;u&&u.z>=c;){if(u!==t.prev&&u!==t.next&&wl(n.x,n.y,o.x,o.y,s.x,s.y,u.x,u.y)&&El(u.prev,u,u.next)>=0)return!1;u=u.prevZ}for(;d&&d.z<=h;){if(d!==t.prev&&d!==t.next&&wl(n.x,n.y,o.x,o.y,s.x,s.y,d.x,d.y)&&El(d.prev,d,d.next)>=0)return!1;d=d.nextZ}return!0}function ml(t,e,i){var r=t;do{var n=r.prev,o=r.next.next;!Sl(n,o)&&Al(n,r,r.next,o)&&Cl(n,o)&&Cl(o,n)&&(e.push(n.i/i),e.push(r.i/i),e.push(o.i/i),Pl(r),Pl(r.next),r=t=o),r=r.next}while(r!==t);return ul(r)}function _l(t,e,i,r,n,o){var s=t;do{for(var a=s.next.next;a!==s.prev;){if(s.i!==a.i&&Tl(s,a)){var l=zl(s,a);return s=ul(s,s.next),l=ul(l,l.next),dl(s,e,i,r,n,o),void dl(l,e,i,r,n,o)}a=a.next}s=s.next}while(s!==t)}function gl(t,e){return t.x-e.x}function yl(t,e){var i=function(t,e){var i,r=e,n=t.x,o=t.y,s=-1/0;do{if(o<=r.y&&o>=r.next.y&&r.next.y!==r.y){var a=r.x+(o-r.y)*(r.next.x-r.x)/(r.next.y-r.y);if(a<=n&&a>s){if(s=a,a===n){if(o===r.y)return r;if(o===r.next.y)return r.next}i=r.x=r.x&&r.x>=h&&n!==r.x&&wl(oi.x||r.x===i.x&&xl(i,r)))&&(i=r,d=l)),r=r.next}while(r!==c);return i}(t,e);if(!i)return e;var r=zl(i,t),n=ul(i,i.next);return ul(r,r.next),e===i?n:e}function xl(t,e){return El(t.prev,t,e.prev)<0&&El(e.next,t,t.next)<0}function vl(t,e,i,r,n){return(t=1431655765&((t=858993459&((t=252645135&((t=16711935&((t=32767*(t-i)*n)|t<<8))|t<<4))|t<<2))|t<<1))|(e=1431655765&((e=858993459&((e=252645135&((e=16711935&((e=32767*(e-r)*n)|e<<8))|e<<4))|e<<2))|e<<1))<<1}function bl(t){var e=t,i=t;do{(e.x=0&&(t-s)*(r-a)-(i-s)*(e-a)>=0&&(i-s)*(o-a)-(n-s)*(r-a)>=0}function Tl(t,e){return t.next.i!==e.i&&t.prev.i!==e.i&&!function(t,e){var i=t;do{if(i.i!==t.i&&i.next.i!==t.i&&i.i!==e.i&&i.next.i!==e.i&&Al(i,i.next,t,e))return!0;i=i.next}while(i!==t);return!1}(t,e)&&(Cl(t,e)&&Cl(e,t)&&function(t,e){var i=t,r=!1,n=(t.x+e.x)/2,o=(t.y+e.y)/2;do{i.y>o!=i.next.y>o&&i.next.y!==i.y&&n<(i.next.x-i.x)*(o-i.y)/(i.next.y-i.y)+i.x&&(r=!r),i=i.next}while(i!==t);return r}(t,e)&&(El(t.prev,t,e.prev)||El(t,e.prev,e))||Sl(t,e)&&El(t.prev,t,t.next)>0&&El(e.prev,e,e.next)>0)}function El(t,e,i){return(e.y-t.y)*(i.x-e.x)-(e.x-t.x)*(i.y-e.y)}function Sl(t,e){return t.x===e.x&&t.y===e.y}function Al(t,e,i,r){var n=Ml(El(t,e,i)),o=Ml(El(t,e,r)),s=Ml(El(i,r,t)),a=Ml(El(i,r,e));return n!==o&&s!==a||!(0!==n||!Il(t,i,e))||!(0!==o||!Il(t,r,e))||!(0!==s||!Il(i,t,r))||!(0!==a||!Il(i,e,r))}function Il(t,e,i){return e.x<=Math.max(t.x,i.x)&&e.x>=Math.min(t.x,i.x)&&e.y<=Math.max(t.y,i.y)&&e.y>=Math.min(t.y,i.y)}function Ml(t){return t>0?1:t<0?-1:0}function Cl(t,e){return El(t.prev,t,t.next)<0?El(t,e,t.next)>=0&&El(t,t.prev,e)>=0:El(t,e,t.prev)<0||El(t,t.next,e)<0}function zl(t,e){var i=new Dl(t.i,t.x,t.y),r=new Dl(e.i,e.x,e.y),n=t.next,o=e.prev;return t.next=e,e.prev=t,i.next=n,n.prev=i,r.next=i,i.prev=r,o.next=r,r.prev=o,r}function kl(t,e,i,r){var n=new Dl(t,e,i);return r?(n.next=r.next,n.prev=r,r.next.prev=n,r.next=n):(n.prev=n,n.next=n),n}function Pl(t){t.next.prev=t.prev,t.prev.next=t.next,t.prevZ&&(t.prevZ.nextZ=t.nextZ),t.nextZ&&(t.nextZ.prevZ=t.prevZ)}function Dl(t,e,i){this.i=t,this.x=e,this.y=i,this.prev=null,this.next=null,this.z=null,this.prevZ=null,this.nextZ=null,this.steiner=!1}function Ll(t,e,i,r){for(var n=0,o=e,s=i-r;or;){if(n-r>600){var s=n-r+1,a=i-r+1,l=Math.log(s),c=.5*Math.exp(2*l/3),h=.5*Math.sqrt(l*c*(s-c)/s)*(a-s/2<0?-1:1);t(e,i,Math.max(r,Math.floor(i-a*c/s+h)),Math.min(n,Math.floor(i+(s-a)*c/s+h)),o)}var u=e[i],d=r,p=n;for(Rl(e,r,i),o(e[n],u)>0&&Rl(e,r,n);d0;)p--}0===o(e[r],u)?Rl(e,r,p):Rl(e,++p,n),p<=i&&(r=p+1),i<=p&&(n=p-1)}}(t,e,i||0,r||t.length-1,n||Fl)}function Rl(t,e,i){var r=t[e];t[e]=t[i],t[i]=r}function Fl(t,e){return te?1:0}function Ol(t,e){const i=t.length;if(i<=1)return[t];const r=[];let n,o;for(let s=0;s1)for(let s=0;s0&&i.holes.push(r+=t[n-1].length)}return i},al.default=ll;class jl{constructor(t){this.zoom=t.zoom,this.overscaling=t.overscaling,this.layers=t.layers,this.layerIds=this.layers.map(t=>t.id),this.index=t.index,this.hasPattern=!1,this.patternFeatures=[],this.layoutVertexArray=new wo,this.indexArray=new Lo,this.indexArray2=new Vo,this.programConfigurations=new Ss(t.layers,t.zoom),this.segments=new Bs,this.segments2=new Bs,this.stateDependentLayerIds=this.layers.filter(t=>t.isStateDependent()).map(t=>t.id)}populate(t,e,i,r){this.hasPattern=Vl("fill",this.layers,e);const n=this.layers[0].layout.get("fill-sort-key"),o=[];for(const{feature:s,id:a,index:l,sourceLayerIndex:c}of t){const t=this.layers[0]._featureFilter.needGeometry,h=ia(s,t);if(!this.layers[0]._featureFilter.filter(new to(this.zoom),h,i))continue;const u=n?n.evaluate(h,{},i,e.availableImages):void 0,d={id:a,properties:s.properties,type:s.type,sourceLayerIndex:c,index:l,geometry:t?h.geometry:ea(s,i,r),patterns:{},sortKey:u};o.push(d)}n&&o.sort((t,e)=>t.sortKey-e.sortKey);for(const s of o){const{geometry:r,index:n,sourceLayerIndex:o}=s;if(this.hasPattern){const t=Nl("fill",this.layers,s,this.zoom,e);this.patternFeatures.push(t)}else this.addFeature(s,r,n,i,{},e.availableImages);e.featureIndex.insert(t[n].feature,r,n,o,this.index)}}update(t,e,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(t,e,this.stateDependentLayers,i,r)}addFeatures(t,e,i,r){for(const n of this.patternFeatures)this.addFeature(n,n.geometry,n.index,e,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(t){this.uploaded||(this.layoutVertexBuffer=t.createVertexBuffer(this.layoutVertexArray,sl),this.indexBuffer=t.createIndexBuffer(this.indexArray),this.indexBuffer2=t.createIndexBuffer(this.indexArray2)),this.programConfigurations.upload(t),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.indexBuffer2.destroy(),this.programConfigurations.destroy(),this.segments.destroy(),this.segments2.destroy())}addFeature(t,e,i,r,n,o=[]){for(const s of Ol(e,500)){let t=0;for(const a of s)t+=a.length;const e=this.segments.prepareSegment(t,this.layoutVertexArray,this.indexArray),i=e.vertexLength,r=[],n=[];for(const a of s){if(0===a.length)continue;a!==s[0]&&n.push(r.length/2);const t=this.segments2.prepareSegment(a.length,this.layoutVertexArray,this.indexArray2),e=t.vertexLength;this.layoutVertexArray.emplaceBack(a[0].x,a[0].y),this.indexArray2.emplaceBack(e+a.length-1,e),r.push(a[0].x),r.push(a[0].y);for(let i=1;i>3}if(o--,1===r||2===r)s+=t.readSVarint(),a+=t.readSVarint(),1===r&&(e&&l.push(e),e=[]),e.push(new n(s,a));else{if(7!==r)throw new Error("unknown command "+r);e&&e.push(e[0].clone())}}return e&&l.push(e),l},Hl.prototype.bbox=function(){var t=this._pbf;t.pos=this._geometry;for(var e=t.readVarint()+t.pos,i=1,r=0,n=0,o=0,s=1/0,a=-1/0,l=1/0,c=-1/0;t.pos>3}if(r--,1===i||2===i)(n+=t.readSVarint())a&&(a=n),(o+=t.readSVarint())c&&(c=o);else if(7!==i)throw new Error("unknown command "+i)}return[s,l,a,c]},Hl.prototype.toGeoJSON=function(t,e,i){var r,n,o=this.extent*Math.pow(2,i),s=this.extent*t,a=this.extent*e,l=this.loadGeometry(),c=Hl.types[this.type];function h(t){for(var e=0;e>3;e=1===r?t.readString():2===r?t.readFloat():3===r?t.readDouble():4===r?t.readVarint64():5===r?t.readVarint():6===r?t.readSVarint():7===r?t.readBoolean():null}return e}(i))}function ec(t,e,i){if(3===t){var r=new Jl(i,i.readVarint()+i.pos);r.length&&(e[r.name]=r)}}Ql.prototype.feature=function(t){if(t<0||t>=this._features.length)throw new Error("feature index out of bounds");this._pbf.pos=this._features[t];var e=this._pbf.readVarint()+this._pbf.pos;return new Wl(this._pbf,e,this.extent,this._keys,this._values)};var ic={VectorTile:function(t,e){this.layers=t.readFields(ec,{},e)},VectorTileFeature:Wl,VectorTileLayer:Jl};const rc=ic.VectorTileFeature.types,nc=Math.pow(2,13);function oc(t,e,i,r,n,o,s,a){t.emplaceBack((e<<1)+s,(i<<1)+o,(Math.floor(r*nc)<<1)+n,Math.round(a))}class sc{constructor(){this.acc=new n(0,0),this.polyCount=[]}startRing(t){this.currentPolyCount={edges:0,top:0},this.polyCount.push(this.currentPolyCount),this.min||(this.min=new n(t.x,t.y),this.max=new n(t.x,t.y))}append(t,e){this.currentPolyCount.edges++,this.acc._add(t);let i=!!this.borders;const r=this.min,n=this.max;t.xn.x&&(n.x=t.x,i=!0),t.yn.y&&(n.y=t.y,i=!0),((0===t.x||t.x===Rs)&&t.x===e.x)!=((0===t.y||t.y===Rs)&&t.y===e.y)&&this.processBorderOverlap(t,e),i&&this.checkBorderIntersection(t,e)}checkBorderIntersection(t,e){e.x<0!=t.x<0&&this.addBorderIntersection(0,ii(e.y,t.y,(0-e.x)/(t.x-e.x))),e.x>Rs!=t.x>Rs&&this.addBorderIntersection(1,ii(e.y,t.y,(Rs-e.x)/(t.x-e.x))),e.y<0!=t.y<0&&this.addBorderIntersection(2,ii(e.x,t.x,(0-e.y)/(t.y-e.y))),e.y>Rs!=t.y>Rs&&this.addBorderIntersection(3,ii(e.x,t.x,(Rs-e.y)/(t.y-e.y)))}addBorderIntersection(t,e){this.borders||(this.borders=[[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE],[Number.MAX_VALUE,-Number.MAX_VALUE]]);const i=this.borders[t];ei[1]&&(i[1]=e)}processBorderOverlap(t,e){if(t.x===e.x){if(t.y===e.y)return;const i=0===t.x?0:1;this.addBorderIntersection(i,e.y),this.addBorderIntersection(i,t.y)}else{const i=0===t.y?2:3;this.addBorderIntersection(i,e.x),this.addBorderIntersection(i,t.x)}}centroid(){const t=this.polyCount.reduce((t,e)=>t+e.edges,0);return 0!==t?this.acc.div(t)._round():new n(0,0)}span(){return new n(this.max.x-this.min.x,this.max.y-this.min.y)}intersectsCount(){return this.borders.reduce((t,e)=>t+ +(e[0]!==Number.MAX_VALUE),0)}}class ac{constructor(t){this.zoom=t.zoom,this.overscaling=t.overscaling,this.layers=t.layers,this.layerIds=this.layers.map(t=>t.id),this.index=t.index,this.hasPattern=!1,this.layoutVertexArray=new To,this.centroidVertexArray=new es,this.indexArray=new Lo,this.programConfigurations=new Ss(t.layers,t.zoom),this.segments=new Bs,this.stateDependentLayerIds=this.layers.filter(t=>t.isStateDependent()).map(t=>t.id),this.enableTerrain=t.enableTerrain}populate(t,e,i,r){this.features=[],this.hasPattern=Vl("fill-extrusion",this.layers,e),this.featuresOnBorder=[],this.borders=[[],[],[],[]],this.borderDone=[!1,!1,!1,!1],this.tileToMeter=function(t){const e=Math.exp(Math.PI*(1-t.y/(1<t.x<=0)||a.every(t=>t.x>=Rs)||a.every(t=>t.y<=0)||a.every(t=>t.y>=Rs))continue;for(let t=0;t=1){const o=r[t-1];if(!lc(e,o)){s&&s.append(e,o),i.vertexLength+4>Bs.MAX_VERTEX_ARRAY_LENGTH&&(i=this.segments.prepareSegment(4,this.layoutVertexArray,this.indexArray));const t=e.sub(o)._perp(),r=t.x/(Math.abs(t.x)+Math.abs(t.y)),a=t.y>0?1:0,l=o.dist(e);n+l>32768&&(n=0),oc(this.layoutVertexArray,e.x,e.y,r,a,0,0,n),oc(this.layoutVertexArray,e.x,e.y,r,a,0,1,n),n+=l,oc(this.layoutVertexArray,o.x,o.y,r,a,0,0,n),oc(this.layoutVertexArray,o.x,o.y,r,a,0,1,n);const c=i.vertexLength;this.indexArray.emplaceBack(c,c+2,c+1),this.indexArray.emplaceBack(c+1,c+2,c+3),i.vertexLength+=4,i.primitiveLength+=2}}}}if(i.vertexLength+e>Bs.MAX_VERTEX_ARRAY_LENGTH&&(i=this.segments.prepareSegment(e,this.layoutVertexArray,this.indexArray)),"Polygon"!==rc[t.type])continue;const r=[],n=[],o=i.vertexLength;for(let t=0;t0){if(s.borders){s.vertexArrayOffset=this.centroidVertexArray.length;const t=s.borders,e=this.featuresOnBorder.push(s)-1;for(let i=0;i<4;i++)t[i][0]!==Number.MAX_VALUE&&this.borders[i].push(e)}this.encodeCentroid(s.borders?void 0:s.centroid(),s)}this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length,t,i,n,o,r)}sortBorders(){for(let t=0;t<4;t++)this.borders[t].sort((e,i)=>this.featuresOnBorder[e].borders[t][0]-this.featuresOnBorder[i].borders[t][0])}encodeCentroid(t,e,i=!0){let r,n;if(t)if(0!==t.y){const i=e.span()._mult(this.tileToMeter);r=(Math.max(t.x,1)<<3)+Math.min(7,Math.round(i.x/10)),n=(Math.max(t.y,1)<<3)+Math.min(7,Math.round(i.y/10))}else r=Math.ceil(7*(t.x+450)),n=0;else r=0,n=+i;let o=i?this.centroidVertexArray.length:e.vertexArrayOffset;for(const s of e.polyCount){i&&this.centroidVertexArray.resize(this.centroidVertexArray.length+4*s.edges+s.top);for(let t=0;t<2*s.edges;t++)this.centroidVertexArray.emplace(o++,0,n),this.centroidVertexArray.emplace(o++,r,n);for(let t=0;tRs)||t.y===e.y&&(t.y<0||t.y>Rs)}tn("FillExtrusionBucket",ac,{omit:["layers","features"]}),tn("PartMetadata",sc);var cc={paint:new mo({"fill-extrusion-opacity":new co(Ut["paint_fill-extrusion"]["fill-extrusion-opacity"]),"fill-extrusion-color":new ho(Ut["paint_fill-extrusion"]["fill-extrusion-color"]),"fill-extrusion-translate":new co(Ut["paint_fill-extrusion"]["fill-extrusion-translate"]),"fill-extrusion-translate-anchor":new co(Ut["paint_fill-extrusion"]["fill-extrusion-translate-anchor"]),"fill-extrusion-pattern":new uo(Ut["paint_fill-extrusion"]["fill-extrusion-pattern"]),"fill-extrusion-height":new ho(Ut["paint_fill-extrusion"]["fill-extrusion-height"]),"fill-extrusion-base":new ho(Ut["paint_fill-extrusion"]["fill-extrusion-base"]),"fill-extrusion-vertical-gradient":new co(Ut["paint_fill-extrusion"]["fill-extrusion-vertical-gradient"])})};function hc(t,e){return t.x*e.x+t.y*e.y}function uc(t,e){if(1===t.length){let i=0;const r=e[i++];let n;for(;!n||r.equals(n);)if(n=e[i++],!n)return 1/0;for(;it.id),this.index=t.index,this.hasPattern=!1,this.patternFeatures=[],this.lineClipsArray=[],this.gradients={},this.layers.forEach(t=>{this.gradients[t.id]={}}),this.layoutVertexArray=new Eo,this.layoutVertexArray2=new So,this.indexArray=new Lo,this.programConfigurations=new Ss(t.layers,t.zoom),this.segments=new Bs,this.maxLineLength=0,this.stateDependentLayerIds=this.layers.filter(t=>t.isStateDependent()).map(t=>t.id)}populate(t,e,i,r){this.hasPattern=Vl("line",this.layers,e);const n=this.layers[0].layout.get("line-sort-key"),o=[];for(const{feature:c,id:h,index:u,sourceLayerIndex:d}of t){const t=this.layers[0]._featureFilter.needGeometry,e=ia(c,t);if(!this.layers[0]._featureFilter.filter(new to(this.zoom),e,i))continue;const s=n?n.evaluate(e,{},i):void 0,a={id:h,properties:c.properties,type:c.type,sourceLayerIndex:d,index:u,geometry:t?e.geometry:ea(c,i,r),patterns:{},sortKey:s};o.push(a)}n&&o.sort((t,e)=>t.sortKey-e.sortKey);const{lineAtlas:s,featureIndex:a}=e,l=this.addConstantDashes(s);for(const c of o){const{geometry:r,index:n,sourceLayerIndex:o}=c;if(l&&this.addFeatureDashes(c,s),this.hasPattern){const t=Nl("line",this.layers,c,this.zoom,e);this.patternFeatures.push(t)}else this.addFeature(c,r,n,i,s.positions,e.availableImages);a.insert(t[n].feature,r,n,o,this.index)}}addConstantDashes(t){let e=!1;for(const i of this.layers){const r=i.paint.get("line-dasharray").value,n=i.layout.get("line-cap").value;if("constant"!==r.kind||"constant"!==n.kind)e=!0;else{const e=n.value,i=r.value;if(!i)continue;t.addDash(i.from,e),t.addDash(i.to,e),i.other&&t.addDash(i.other,e)}}return e}addFeatureDashes(t,e){const i=this.zoom;for(const r of this.layers){const n=r.paint.get("line-dasharray").value,o=r.layout.get("line-cap").value;if("constant"===n.kind&&"constant"===o.kind)continue;let s,a,l,c,h,u;if("constant"===n.kind){const t=n.value;if(!t)continue;s=t.other||t.to,a=t.to,l=t.from}else s=n.evaluate({zoom:i-1},t),a=n.evaluate({zoom:i},t),l=n.evaluate({zoom:i+1},t);"constant"===o.kind?c=h=u=o.value:(c=o.evaluate({zoom:i-1},t),h=o.evaluate({zoom:i},t),u=o.evaluate({zoom:i+1},t)),e.addDash(s,c),e.addDash(a,h),e.addDash(l,u);const d=e.getKey(s,c),p=e.getKey(a,h),f=e.getKey(l,u);t.patterns[r.id]={min:d,mid:p,max:f}}}update(t,e,i,r){this.stateDependentLayers.length&&this.programConfigurations.updatePaintArrays(t,e,this.stateDependentLayers,i,r)}addFeatures(t,e,i,r){for(const n of this.patternFeatures)this.addFeature(n,n.geometry,n.index,e,i,r)}isEmpty(){return 0===this.layoutVertexArray.length}uploadPending(){return!this.uploaded||this.programConfigurations.needsUpload}upload(t){this.uploaded||(0!==this.layoutVertexArray2.length&&(this.layoutVertexBuffer2=t.createVertexBuffer(this.layoutVertexArray2,gc)),this.layoutVertexBuffer=t.createVertexBuffer(this.layoutVertexArray,mc),this.indexBuffer=t.createIndexBuffer(this.indexArray)),this.programConfigurations.upload(t),this.uploaded=!0}destroy(){this.layoutVertexBuffer&&(this.layoutVertexBuffer.destroy(),this.indexBuffer.destroy(),this.programConfigurations.destroy(),this.segments.destroy())}lineFeatureClips(t){if(t.properties&&t.properties.hasOwnProperty("mapbox_clip_start")&&t.properties.hasOwnProperty("mapbox_clip_end"))return{start:+t.properties.mapbox_clip_start,end:+t.properties.mapbox_clip_end}}addFeature(t,e,i,r,n,o){const s=this.layers[0].layout,a=s.get("line-join").evaluate(t,{}),l=s.get("line-cap").evaluate(t,{}),c=s.get("line-miter-limit"),h=s.get("line-round-limit");this.lineClips=this.lineFeatureClips(t);for(const u of e)this.addLine(u,t,a,l,c,h);this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length,t,i,n,o,r)}addLine(t,e,i,r,n,o){if(this.distance=0,this.scaledDistance=0,this.totalDistance=0,this.lineSoFar=0,this.lineClips){this.lineClipsArray.push(this.lineClips);for(let e=0;e=2&&t[a-1].equals(t[a-2]);)a--;let l=0;for(;l0;if(b&&_>l){const t=u.dist(d);if(t>2*c){const e=u.sub(u.sub(d)._mult(c/t)._round());this.updateDistance(d,e),this.addCurrentVertex(e,f,0,0,h),d=e}}const T=d&&p;let E=T?i:s?"butt":r;if(T&&"round"===E&&(xn&&(E="bevel"),"bevel"===E&&(x>2&&(E="flipbevel"),x100)e=m.mult(-1);else{const t=x*f.add(m).mag()/f.sub(m).mag();e._perp()._mult(t*(w?-1:1))}this.addCurrentVertex(u,e,0,0,h),this.addCurrentVertex(u,e.mult(-1),0,0,h)}else if("bevel"===E||"fakeround"===E){const t=-Math.sqrt(x*x-1),e=w?t:0,i=w?0:t;if(d&&this.addCurrentVertex(u,f,e,i,h),"fakeround"===E){const t=Math.round(180*v/Math.PI/20);for(let e=1;e2*c){const e=u.add(p.sub(u)._mult(c/t)._round());this.updateDistance(u,e),this.addCurrentVertex(e,m,0,0,h),u=e}}}}addCurrentVertex(t,e,i,r,n,o=!1){const s=e.y*r-e.x,a=-e.y-e.x*r;this.addHalfVertex(t,e.x+e.y*i,e.y-e.x*i,o,!1,i,n),this.addHalfVertex(t,s,a,o,!0,-r,n)}addHalfVertex({x:t,y:e},i,r,n,o,s,a){this.layoutVertexArray.emplaceBack((t<<1)+(n?1:0),(e<<1)+(o?1:0),Math.round(63*i)+128,Math.round(63*r)+128,1+(0===s?0:s<0?-1:1),0,this.lineSoFar),this.lineClips&&this.layoutVertexArray2.emplaceBack(this.scaledDistance,this.lineClipsArray.length,this.lineSoFar);const l=a.vertexLength++;this.e1>=0&&this.e2>=0&&(this.indexArray.emplaceBack(this.e1,this.e2,l),a.primitiveLength++),o?this.e2=l:this.e1=l}updateScaledDistance(){if(this.lineClips){const t=this.totalDistance/(this.lineClips.end-this.lineClips.start);this.scaledDistance=this.distance/this.totalDistance,this.lineSoFar=t*this.lineClips.start+this.distance}else this.lineSoFar=this.distance}updateDistance(t,e){this.distance+=t.dist(e),this.updateScaledDistance()}}tn("LineBucket",vc,{omit:["layers","patternFeatures"]});const bc=new mo({"line-cap":new ho(Ut.layout_line["line-cap"]),"line-join":new ho(Ut.layout_line["line-join"]),"line-miter-limit":new co(Ut.layout_line["line-miter-limit"]),"line-round-limit":new co(Ut.layout_line["line-round-limit"]),"line-sort-key":new ho(Ut.layout_line["line-sort-key"])});var wc={paint:new mo({"line-opacity":new ho(Ut.paint_line["line-opacity"]),"line-color":new ho(Ut.paint_line["line-color"]),"line-translate":new co(Ut.paint_line["line-translate"]),"line-translate-anchor":new co(Ut.paint_line["line-translate-anchor"]),"line-width":new ho(Ut.paint_line["line-width"]),"line-gap-width":new ho(Ut.paint_line["line-gap-width"]),"line-offset":new ho(Ut.paint_line["line-offset"]),"line-blur":new ho(Ut.paint_line["line-blur"]),"line-dasharray":new uo(Ut.paint_line["line-dasharray"]),"line-pattern":new uo(Ut.paint_line["line-pattern"]),"line-gradient":new fo(Ut.paint_line["line-gradient"])}),layout:bc};const Tc=new class extends ho{possiblyEvaluate(t,e){return e=new to(Math.floor(e.zoom),{now:e.now,fadeDuration:e.fadeDuration,zoomHistory:e.zoomHistory,transition:e.transition}),super.possiblyEvaluate(t,e)}evaluate(t,e,i,r){return e=v({},e,{zoom:Math.floor(e.zoom)}),super.evaluate(t,e,i,r)}}(wc.paint.properties["line-width"].specification);function Ec(t,e){return e>0?e+2*t:t}Tc.useIntegerZoom=!0;const Sc=vo([{name:"a_pos_offset",components:4,type:"Int16"},{name:"a_tex_size",components:4,type:"Uint16"},{name:"a_pixeloffset",components:4,type:"Int16"},{name:"a_z_tile_anchor",components:4,type:"Int16"}],4),Ac=vo([{name:"a_projected_pos",components:3,type:"Float32"}],4);vo([{name:"a_fade_opacity",components:1,type:"Uint32"}],4);const Ic=vo([{name:"a_placed",components:2,type:"Uint8"},{name:"a_shift",components:2,type:"Float32"}]),Mc=vo([{name:"a_size_scale",components:1,type:"Float32"},{name:"a_padding",components:2,type:"Float32"}]);vo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Int16",name:"tileAnchorX"},{type:"Int16",name:"tileAnchorY"},{type:"Float32",name:"x1"},{type:"Float32",name:"y1"},{type:"Float32",name:"x2"},{type:"Float32",name:"y2"},{type:"Int16",name:"padding"},{type:"Uint32",name:"featureIndex"},{type:"Uint16",name:"sourceLayerIndex"},{type:"Uint16",name:"bucketIndex"}]);const Cc=vo([{name:"a_pos",components:3,type:"Int16"},{name:"a_anchor_pos",components:2,type:"Int16"},{name:"a_extrude",components:2,type:"Int16"}],4),zc=vo([{name:"a_pos_2f",components:2,type:"Float32"},{name:"a_radius",components:1,type:"Float32"},{name:"a_flags",components:2,type:"Int16"}],4);vo([{name:"triangle",components:3,type:"Uint16"}]),vo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Float32",name:"tileAnchorX"},{type:"Float32",name:"tileAnchorY"},{type:"Uint16",name:"glyphStartIndex"},{type:"Uint16",name:"numGlyphs"},{type:"Uint32",name:"vertexStartIndex"},{type:"Uint32",name:"lineStartIndex"},{type:"Uint32",name:"lineLength"},{type:"Uint16",name:"segment"},{type:"Uint16",name:"lowerSize"},{type:"Uint16",name:"upperSize"},{type:"Float32",name:"lineOffsetX"},{type:"Float32",name:"lineOffsetY"},{type:"Uint8",name:"writingMode"},{type:"Uint8",name:"placedOrientation"},{type:"Uint8",name:"hidden"},{type:"Uint32",name:"crossTileID"},{type:"Int16",name:"associatedIconIndex"},{type:"Uint8",name:"flipState"}]),vo([{type:"Int16",name:"projectedAnchorX"},{type:"Int16",name:"projectedAnchorY"},{type:"Int16",name:"projectedAnchorZ"},{type:"Float32",name:"tileAnchorX"},{type:"Float32",name:"tileAnchorY"},{type:"Int16",name:"rightJustifiedTextSymbolIndex"},{type:"Int16",name:"centerJustifiedTextSymbolIndex"},{type:"Int16",name:"leftJustifiedTextSymbolIndex"},{type:"Int16",name:"verticalPlacedTextSymbolIndex"},{type:"Int16",name:"placedIconSymbolIndex"},{type:"Int16",name:"verticalPlacedIconSymbolIndex"},{type:"Uint16",name:"key"},{type:"Uint16",name:"textBoxStartIndex"},{type:"Uint16",name:"textBoxEndIndex"},{type:"Uint16",name:"verticalTextBoxStartIndex"},{type:"Uint16",name:"verticalTextBoxEndIndex"},{type:"Uint16",name:"iconBoxStartIndex"},{type:"Uint16",name:"iconBoxEndIndex"},{type:"Uint16",name:"verticalIconBoxStartIndex"},{type:"Uint16",name:"verticalIconBoxEndIndex"},{type:"Uint16",name:"featureIndex"},{type:"Uint16",name:"numHorizontalGlyphVertices"},{type:"Uint16",name:"numVerticalGlyphVertices"},{type:"Uint16",name:"numIconVertices"},{type:"Uint16",name:"numVerticalIconVertices"},{type:"Uint16",name:"useRuntimeCollisionCircles"},{type:"Uint32",name:"crossTileID"},{type:"Float32",components:2,name:"textOffset"},{type:"Float32",name:"collisionCircleDiameter"}]),vo([{type:"Float32",name:"offsetX"}]),vo([{type:"Int16",name:"x"},{type:"Int16",name:"y"},{type:"Int16",name:"tileUnitDistanceFromAnchor"}]);const kc=128;function Pc(t,e){const{expression:i}=e;if("constant"===i.kind)return{kind:"constant",layoutSize:i.evaluate(new to(t+1))};if("source"===i.kind)return{kind:"source"};{const{zoomStops:e,interpolationType:r}=i;let n=0;for(;n{t.text=function(t,e,i){const r=e.layout.get("text-transform").evaluate(i,{});return"uppercase"===r?t=t.toLocaleUpperCase():"lowercase"===r&&(t=t.toLocaleLowerCase()),Qn.applyArabicShaping&&(t=Qn.applyArabicShaping(t)),t}(t.text,e,i)}),t}const Fc={"!":"︕","#":"＃",$:"＄","%":"％","&":"＆","(":"︵",")":"︶","*":"＊","+":"＋",",":"︐","-":"︲",".":"・","/":"／",":":"︓",";":"︔","<":"︿","=":"＝",">":"﹀","?":"︖","@":"＠","[":"﹇","\\":"＼","]":"﹈","^":"＾",_:"︳","`":"｀","{":"︷","|":"―","}":"︸","~":"～","¢":"￠","£":"￡","¥":"￥","¦":"￤","¬":"￢","¯":"￣","–":"︲","—":"︱","‘":"﹃","’":"﹄","“":"﹁","”":"﹂","…":"︙","‧":"・","₩":"￦","、":"︑","。":"︒","〈":"︿","〉":"﹀","《":"︽","》":"︾","「":"﹁","」":"﹂","『":"﹃","』":"﹄","【":"︻","】":"︼","〔":"︹","〕":"︺","〖":"︗","〗":"︘","！":"︕","（":"︵","）":"︶","，":"︐","－":"︲","．":"・","：":"︓","；":"︔","＜":"︿","＞":"﹀","？":"︖","［":"﹇","］":"﹈","＿":"︳","｛":"︷","｜":"―","｝":"︸","｟":"︵","｠":"︶","｡":"︒","｢":"﹁","｣":"﹂"};function Oc(t){return"︶"===t||"﹈"===t||"︸"===t||"﹄"===t||"﹂"===t||"︾"===t||"︼"===t||"︺"===t||"︘"===t||"﹀"===t||"︐"===t||"︓"===t||"︔"===t||"｀"===t||"￣"===t||"︑"===t||"︒"===t}function Uc(t){return"︵"===t||"﹇"===t||"︷"===t||"﹃"===t||"﹁"===t||"︽"===t||"︻"===t||"︹"===t||"︗"===t||"︿"===t}var Vc=function(t,e,i,r,n){var o,s,a=8*n-r-1,l=(1<>1,h=-7,u=i?n-1:0,d=i?-1:1,p=t[e+u];for(u+=d,o=p&(1<<-h)-1,p>>=-h,h+=a;h>0;o=256*o+t[e+u],u+=d,h-=8);for(s=o&(1<<-h)-1,o>>=-h,h+=r;h>0;s=256*s+t[e+u],u+=d,h-=8);if(0===o)o=1-c;else{if(o===l)return s?NaN:1/0*(p?-1:1);s+=Math.pow(2,r),o-=c}return(p?-1:1)*s*Math.pow(2,o-r)},Nc=function(t,e,i,r,n,o){var s,a,l,c=8*o-n-1,h=(1<>1,d=23===n?Math.pow(2,-24)-Math.pow(2,-77):0,p=r?0:o-1,f=r?1:-1,m=e<0||0===e&&1/e<0?1:0;for(e=Math.abs(e),isNaN(e)||e===1/0?(a=isNaN(e)?1:0,s=h):(s=Math.floor(Math.log(e)/Math.LN2),e*(l=Math.pow(2,-s))<1&&(s--,l*=2),(e+=s+u>=1?d/l:d*Math.pow(2,1-u))*l>=2&&(s++,l/=2),s+u>=h?(a=0,s=h):s+u>=1?(a=(e*l-1)*Math.pow(2,n),s+=u):(a=e*Math.pow(2,u-1)*Math.pow(2,n),s=0));n>=8;t[i+p]=255&a,p+=f,a/=256,n-=8);for(s=s<0;t[i+p]=255&s,p+=f,s/=256,c-=8);t[i+p-f]|=128*m},jc=Gc;function Gc(t){this.buf=ArrayBuffer.isView&&ArrayBuffer.isView(t)?t:new Uint8Array(t||0),this.pos=0,this.type=0,this.length=this.buf.length}Gc.Varint=0,Gc.Fixed64=1,Gc.Bytes=2,Gc.Fixed32=5;var Zc=4294967296,qc=1/Zc,$c="undefined"==typeof TextDecoder?null:new TextDecoder("utf8");function Xc(t){return t.type===Gc.Bytes?t.readVarint()+t.pos:t.pos+1}function Wc(t,e,i){return i?4294967296*e+(t>>>0):4294967296*(e>>>0)+(t>>>0)}function Hc(t,e,i){var r=e<=16383?1:e<=2097151?2:e<=268435455?3:Math.floor(Math.log(e)/(7*Math.LN2));i.realloc(r);for(var n=i.pos-1;n>=t;n--)i.buf[n+r]=i.buf[n]}function Kc(t,e){for(var i=0;i>>8,t[i+2]=e>>>16,t[i+3]=e>>>24}function ah(t,e){return(t[e]|t[e+1]<<8|t[e+2]<<16)+(t[e+3]<<24)}function lh(t,e,i){e.glyphs=[],1===t&&i.readMessage(ch,e)}function ch(t,e,i){if(3===t){const{id:t,bitmap:r,width:n,height:o,left:s,top:a,advance:l}=i.readMessage(hh,{});e.glyphs.push({id:t,bitmap:new tl({width:n+6,height:o+6},r),metrics:{width:n,height:o,left:s,top:a,advance:l}})}else 4===t?e.ascender=i.readSVarint():5===t&&(e.descender=i.readSVarint())}function hh(t,e,i){1===t?e.id=i.readVarint():2===t?e.bitmap=i.readBytes():3===t?e.width=i.readVarint():4===t?e.height=i.readVarint():5===t?e.left=i.readSVarint():6===t?e.top=i.readSVarint():7===t&&(e.advance=i.readVarint())}function uh(t){let e=0,i=0;for(const s of t)e+=s.w*s.h,i=Math.max(i,s.w);t.sort((t,e)=>e.h-t.h);const r=[{x:0,y:0,w:Math.max(Math.ceil(Math.sqrt(e/.95)),i),h:1/0}];let n=0,o=0;for(const s of t)for(let t=r.length-1;t>=0;t--){const e=r[t];if(!(s.w>e.w||s.h>e.h)){if(s.x=e.x,s.y=e.y,o=Math.max(o,s.y+s.h),n=Math.max(n,s.x+s.w),s.w===e.w&&s.h===e.h){const e=r.pop();t>3,o=this.pos;this.type=7&r,t(n,e,this),this.pos===o&&this.skip(r)}return e},readMessage:function(t,e){return this.readFields(t,e,this.readVarint()+this.pos)},readFixed32:function(){var t=oh(this.buf,this.pos);return this.pos+=4,t},readSFixed32:function(){var t=ah(this.buf,this.pos);return this.pos+=4,t},readFixed64:function(){var t=oh(this.buf,this.pos)+oh(this.buf,this.pos+4)*Zc;return this.pos+=8,t},readSFixed64:function(){var t=oh(this.buf,this.pos)+ah(this.buf,this.pos+4)*Zc;return this.pos+=8,t},readFloat:function(){var t=Vc(this.buf,this.pos,!0,23,4);return this.pos+=4,t},readDouble:function(){var t=Vc(this.buf,this.pos,!0,52,8);return this.pos+=8,t},readVarint:function(t){var e,i,r=this.buf;return e=127&(i=r[this.pos++]),i<128?e:(e|=(127&(i=r[this.pos++]))<<7,i<128?e:(e|=(127&(i=r[this.pos++]))<<14,i<128?e:(e|=(127&(i=r[this.pos++]))<<21,i<128?e:function(t,e,i){var r,n,o=i.buf;if(r=(112&(n=o[i.pos++]))>>4,n<128)return Wc(t,r,e);if(r|=(127&(n=o[i.pos++]))<<3,n<128)return Wc(t,r,e);if(r|=(127&(n=o[i.pos++]))<<10,n<128)return Wc(t,r,e);if(r|=(127&(n=o[i.pos++]))<<17,n<128)return Wc(t,r,e);if(r|=(127&(n=o[i.pos++]))<<24,n<128)return Wc(t,r,e);if(r|=(1&(n=o[i.pos++]))<<31,n<128)return Wc(t,r,e);throw new Error("Expected varint not more than 10 bytes")}(e|=(15&(i=r[this.pos]))<<28,t,this))))},readVarint64:function(){return this.readVarint(!0)},readSVarint:function(){var t=this.readVarint();return t%2==1?(t+1)/-2:t/2},readBoolean:function(){return Boolean(this.readVarint())},readString:function(){var t=this.readVarint()+this.pos,e=this.pos;return this.pos=t,t-e>=12&&$c?function(t,e,i){return $c.decode(t.subarray(e,i))}(this.buf,e,t):function(t,e,i){for(var r="",n=e;n239?4:l>223?3:l>191?2:1;if(n+h>i)break;1===h?l<128&&(c=l):2===h?128==(192&(o=t[n+1]))&&(c=(31&l)<<6|63&o)<=127&&(c=null):3===h?(s=t[n+2],128==(192&(o=t[n+1]))&&128==(192&s)&&((c=(15&l)<<12|(63&o)<<6|63&s)<=2047||c>=55296&&c<=57343)&&(c=null)):4===h&&(s=t[n+2],a=t[n+3],128==(192&(o=t[n+1]))&&128==(192&s)&&128==(192&a)&&((c=(15&l)<<18|(63&o)<<12|(63&s)<<6|63&a)<=65535||c>=1114112)&&(c=null)),null===c?(c=65533,h=1):c>65535&&(c-=65536,r+=String.fromCharCode(c>>>10&1023|55296),c=56320|1023&c),r+=String.fromCharCode(c),n+=h}return r}(this.buf,e,t)},readBytes:function(){var t=this.readVarint()+this.pos,e=this.buf.subarray(this.pos,t);return this.pos=t,e},readPackedVarint:function(t,e){if(this.type!==Gc.Bytes)return t.push(this.readVarint(e));var i=Xc(this);for(t=t||[];this.pos127;);else if(e===Gc.Bytes)this.pos=this.readVarint()+this.pos;else if(e===Gc.Fixed32)this.pos+=4;else{if(e!==Gc.Fixed64)throw new Error("Unimplemented type: "+e);this.pos+=8}},writeTag:function(t,e){this.writeVarint(t<<3|e)},realloc:function(t){for(var e=this.length||16;e268435455||t<0?function(t,e){var i,r;if(t>=0?(i=t%4294967296|0,r=t/4294967296|0):(r=~(-t/4294967296),4294967295^(i=~(-t%4294967296))?i=i+1|0:(i=0,r=r+1|0)),t>=0x10000000000000000||t<-0x10000000000000000)throw new Error("Given varint doesn't fit into 10 bytes");e.realloc(10),function(t,e,i){i.buf[i.pos++]=127&t|128,t>>>=7,i.buf[i.pos++]=127&t|128,t>>>=7,i.buf[i.pos++]=127&t|128,t>>>=7,i.buf[i.pos++]=127&t|128,i.buf[i.pos]=127&(t>>>=7)}(i,0,e),function(t,e){var i=(7&t)<<4;e.buf[e.pos++]|=i|((t>>>=3)?128:0),t&&(e.buf[e.pos++]=127&t|((t>>>=7)?128:0),t&&(e.buf[e.pos++]=127&t|((t>>>=7)?128:0),t&&(e.buf[e.pos++]=127&t|((t>>>=7)?128:0),t&&(e.buf[e.pos++]=127&t|((t>>>=7)?128:0),t&&(e.buf[e.pos++]=127&t)))))}(r,e)}(t,this):(this.realloc(4),this.buf[this.pos++]=127&t|(t>127?128:0),t<=127||(this.buf[this.pos++]=127&(t>>>=7)|(t>127?128:0),t<=127||(this.buf[this.pos++]=127&(t>>>=7)|(t>127?128:0),t<=127||(this.buf[this.pos++]=t>>>7&127))))},writeSVarint:function(t){this.writeVarint(t<0?2*-t-1:2*t)},writeBoolean:function(t){this.writeVarint(Boolean(t))},writeString:function(t){t=String(t),this.realloc(4*t.length),this.pos++;var e=this.pos;this.pos=function(t,e,i){for(var r,n,o=0;o55295&&r<57344){if(!n){r>56319||o+1===e.length?(t[i++]=239,t[i++]=191,t[i++]=189):n=r;continue}if(r<56320){t[i++]=239,t[i++]=191,t[i++]=189,n=r;continue}r=n-55296<<10|r-56320|65536,n=null}else n&&(t[i++]=239,t[i++]=191,t[i++]=189,n=null);r<128?t[i++]=r:(r<2048?t[i++]=r>>6|192:(r<65536?t[i++]=r>>12|224:(t[i++]=r>>18|240,t[i++]=r>>12&63|128),t[i++]=r>>6&63|128),t[i++]=63&r|128)}return i}(this.buf,t,this.pos);var i=this.pos-e;i>=128&&Hc(e,i,this),this.pos=e-1,this.writeVarint(i),this.pos+=i},writeFloat:function(t){this.realloc(4),Nc(this.buf,t,this.pos,!0,23,4),this.pos+=4},writeDouble:function(t){this.realloc(8),Nc(this.buf,t,this.pos,!0,52,8),this.pos+=8},writeBytes:function(t){var e=t.length;this.writeVarint(e),this.realloc(e);for(var i=0;i=128&&Hc(i,r,this),this.pos=i-1,this.writeVarint(r),this.pos+=r},writeMessage:function(t,e,i){this.writeTag(t,Gc.Bytes),this.writeRawMessage(e,i)},writePackedVarint:function(t,e){e.length&&this.writeMessage(t,Kc,e)},writePackedSVarint:function(t,e){e.length&&this.writeMessage(t,Yc,e)},writePackedBoolean:function(t,e){e.length&&this.writeMessage(t,th,e)},writePackedFloat:function(t,e){e.length&&this.writeMessage(t,Jc,e)},writePackedDouble:function(t,e){e.length&&this.writeMessage(t,Qc,e)},writePackedFixed32:function(t,e){e.length&&this.writeMessage(t,eh,e)},writePackedSFixed32:function(t,e){e.length&&this.writeMessage(t,ih,e)},writePackedFixed64:function(t,e){e.length&&this.writeMessage(t,rh,e)},writePackedSFixed64:function(t,e){e.length&&this.writeMessage(t,nh,e)},writeBytesField:function(t,e){this.writeTag(t,Gc.Bytes),this.writeBytes(e)},writeFixed32Field:function(t,e){this.writeTag(t,Gc.Fixed32),this.writeFixed32(e)},writeSFixed32Field:function(t,e){this.writeTag(t,Gc.Fixed32),this.writeSFixed32(e)},writeFixed64Field:function(t,e){this.writeTag(t,Gc.Fixed64),this.writeFixed64(e)},writeSFixed64Field:function(t,e){this.writeTag(t,Gc.Fixed64),this.writeSFixed64(e)},writeVarintField:function(t,e){this.writeTag(t,Gc.Varint),this.writeVarint(e)},writeSVarintField:function(t,e){this.writeTag(t,Gc.Varint),this.writeSVarint(e)},writeStringField:function(t,e){this.writeTag(t,Gc.Bytes),this.writeString(e)},writeFloatField:function(t,e){this.writeTag(t,Gc.Fixed32),this.writeFloat(e)},writeDoubleField:function(t,e){this.writeTag(t,Gc.Fixed64),this.writeDouble(e)},writeBooleanField:function(t,e){this.writeVarintField(t,Boolean(e))}};class dh{constructor(t,{pixelRatio:e,version:i,stretchX:r,stretchY:n,content:o}){this.paddedRect=t,this.pixelRatio=e,this.stretchX=r,this.stretchY=n,this.content=o,this.version=i}get tl(){return[this.paddedRect.x+1,this.paddedRect.y+1]}get br(){return[this.paddedRect.x+this.paddedRect.w-1,this.paddedRect.y+this.paddedRect.h-1]}get displaySize(){return[(this.paddedRect.w-2)/this.pixelRatio,(this.paddedRect.h-2)/this.pixelRatio]}}class ph{constructor(t,e){const i={},r={};this.haveRenderCallbacks=[];const n=[];this.addImages(t,i,n),this.addImages(e,r,n);const{w:o,h:s}=uh(n),a=new el({width:o||1,height:s||1});for(const l in t){const e=t[l],r=i[l].paddedRect;el.copy(e.data,a,{x:0,y:0},{x:r.x+1,y:r.y+1},e.data)}for(const l in e){const t=e[l],i=r[l].paddedRect,n=i.x+1,o=i.y+1,s=t.data.width,c=t.data.height;el.copy(t.data,a,{x:0,y:0},{x:n,y:o},t.data),el.copy(t.data,a,{x:0,y:c-1},{x:n,y:o-1},{width:s,height:1}),el.copy(t.data,a,{x:0,y:0},{x:n,y:o+c},{width:s,height:1}),el.copy(t.data,a,{x:s-1,y:0},{x:n-1,y:o},{width:1,height:c}),el.copy(t.data,a,{x:0,y:0},{x:n+s,y:o},{width:1,height:c})}this.image=a,this.iconPositions=i,this.patternPositions=r}addImages(t,e,i){for(const r in t){const n=t[r],o={x:0,y:0,w:n.data.width+2,h:n.data.height+2};i.push(o),e[r]=new dh(o,n),n.hasRenderCallback&&this.haveRenderCallbacks.push(r)}}patchUpdatedImages(t,e){t.dispatchRenderCallbacks(this.haveRenderCallbacks);for(const i in t.updatedImages)this.patchUpdatedImage(this.iconPositions[i],t.getImage(i),e),this.patchUpdatedImage(this.patternPositions[i],t.getImage(i),e)}patchUpdatedImage(t,e,i){if(!t||!e)return;if(t.version===e.version)return;t.version=e.version;const[r,n]=t.tl;i.update(e.data,void 0,{x:r,y:n})}}tn("ImagePosition",dh),tn("ImageAtlas",ph);const fh={horizontal:1,vertical:2,horizontalOnly:3};class mh{constructor(){this.scale=1,this.fontStack="",this.imageName=null}static forText(t,e){const i=new mh;return i.scale=t||1,i.fontStack=e,i}static forImage(t){const e=new mh;return e.imageName=t,e}}class _h{constructor(){this.text="",this.sectionIndex=[],this.sections=[],this.imageSectionID=null}static fromFeature(t,e){const i=new _h;for(let r=0;r=0&&i>=t&&yh[this.text.charCodeAt(i)];i--)e--;this.text=this.text.substring(t,e),this.sectionIndex=this.sectionIndex.slice(t,e)}substring(t,e){const i=new _h;return i.text=this.text.substring(t,e),i.sectionIndex=this.sectionIndex.slice(t,e),i.sections=this.sections,i}toString(){return this.text}getMaxScale(){return this.sectionIndex.reduce((t,e)=>Math.max(t,this.sections[e].scale),0)}addTextSection(t,e){this.text+=t.text,this.sections.push(mh.forText(t.scale,t.fontStack||e));const i=this.sections.length-1;for(let r=0;r=63743?null:++this.imageSectionID:(this.imageSectionID=57344,this.imageSectionID)}}function gh(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m){const _=_h.fromFeature(t,n);let g;u===fh.vertical&&_.verticalizePunctuation(d);const{processBidirectionalText:y,processStyledBidirectionalText:x}=Qn;if(y&&1===_.sections.length){g=[];const t=y(_.toString(),Eh(_,c,o,e,r,p,f));for(const e of t){const t=new _h;t.text=e,t.sections=_.sections;for(let i=0;i0&&o>v&&(v=o)}else{const t=i[s.fontStack];if(!t)continue;t[f]&&(E=t[f]);const r=e[s.fontStack];if(!r)continue;const o=r.glyphs[f];if(!o)continue;if(g=o.metrics,A=8203!==f?24:0,_){const t=void 0!==r.ascender?Math.abs(r.ascender):0,e=void 0!==r.descender?Math.abs(r.descender):0,i=(t+e)*m;b=0;let h=0;for(let d=0;d-i/2;){if(s--,s<0)return!1;a-=t[s].dist(o),o=t[s]}a+=t[s].dist(t[s+1]),s++;const l=[];let c=0;for(;ar;)c-=l.shift().angleDelta;if(c>n)return!1;s++,a+=e.dist(i)}return!0}function kh(t){let e=0;for(let i=0;ic){const o=(c-l)/n,u=ii(i.x,r.x,o),d=ii(i.y,r.y,o),p=new Ch(u,d,0,r.angleTo(i),h);return!s||zh(t,p,a,s,e)?p:void 0}l+=n}}function Bh(t,e,i,r,n,o,s,a,l){const c=Ph(r,o,s),h=Dh(r,n),u=h*s,d=0===t[0].x||t[0].x===l||0===t[0].y||t[0].y===l;return e-u=0&&g=0&&y=0&&p+h<=u){const t=new Ch(g,y,0,l,m);t._round(),n&&!zh(e,t,s,n,o)||f.push(t)}}d+=a}return l||f.length||a||(f=t(e,d/2,r,n,o,s,a,!0,c)),f}(t,d?e/2*a%e:(h/2+2*o)*s*a%e,e,c,i,u,d,!1,l)}function Rh(t,e,i,r,o){const s=[];for(let a=0;a=r&&h.x>=r||(a.x>=r?a=new n(r,a.y+(r-a.x)/(h.x-a.x)*(h.y-a.y))._round():h.x>=r&&(h=new n(r,a.y+(r-a.x)/(h.x-a.x)*(h.y-a.y))._round()),a.y>=o&&h.y>=o||(a.y>=o?a=new n(a.x+(o-a.y)/(h.y-a.y)*(h.x-a.x),o)._round():h.y>=o&&(h=new n(a.x+(o-a.y)/(h.y-a.y)*(h.x-a.x),o)._round()),c&&a.equals(c[c.length-1])||(c=[a],s.push(c)),c.push(h)))))}}return s}tn("Anchor",Ch);const Fh=1e20;function Oh(t,e,i,r,n,o,s,a,l){for(let c=e;c-1);l++,o[l]=a,s[l]=c,s[l+1]=Fh}for(let a=0,l=0;a{let r=this.entries[t];r||(r=this.entries[t]={glyphs:{},requests:{},ranges:{},ascender:void 0,descender:void 0});let n=r.glyphs[e];if(void 0!==n)return void i(null,{stack:t,id:e,glyph:n});if(n=this._tinySDF(r,t,e),n)return r.glyphs[e]=n,void i(null,{stack:t,id:e,glyph:n});const o=Math.floor(e/256);if(256*o>65535)return void i(new Error("glyphs > 65535 not supported"));if(r.ranges[o])return void i(null,{stack:t,id:e,glyph:n});let s=r.requests[o];s||(s=r.requests[o]=[],Nh.loadGlyphRange(t,o,this.url,this.requestManager,(t,e)=>{if(e){r.ascender=e.ascender,r.descender=e.descender;for(const t in e.glyphs)this._doesCharSupportLocalGlyph(+t)||(r.glyphs[+t]=e.glyphs[+t]);r.ranges[o]=!0}for(const i of s)i(t,e);delete r.requests[o]})),s.push((r,n)=>{r?i(r):n&&i(null,{stack:t,id:e,glyph:n.glyphs[e]||null})})},(t,i)=>{if(t)e(t);else if(i){const t={};for(const{stack:e,id:r,glyph:n}of i)void 0===t[e]&&(t[e]={}),void 0===t[e].glyphs&&(t[e].glyphs={}),t[e].glyphs[r]=n&&{id:n.id,bitmap:n.bitmap.clone(),metrics:n.metrics},t[e].ascender=this.entries[e].ascender,t[e].descender=this.entries[e].descender;e(null,t)}})}_doesCharSupportLocalGlyph(t){return this.localGlyphMode!==Vh.none&&(this.localGlyphMode===Vh.all?!!this.localFontFamily:!!this.localFontFamily&&(Tn(t)||An(t)||fn(t)||mn(t))||pn(t))}_tinySDF(t,e,i){const r=this.localFontFamily;if(!r||!this._doesCharSupportLocalGlyph(i))return;let n=t.tinySDF;if(!n){let i="400";/bold/i.test(e)?i="900":/medium/i.test(e)?i="500":/light/i.test(e)&&(i="200"),n=t.tinySDF=new Nh.TinySDF({fontFamily:r,fontWeight:i,fontSize:48,buffer:6,radius:16}),n.fontWeight=i}if(this.localGlyphs[n.fontWeight][i])return this.localGlyphs[n.fontWeight][i];const o=String.fromCharCode(i),{data:s,width:a,height:l,glyphWidth:c,glyphHeight:h,glyphLeft:u,glyphTop:d,glyphAdvance:p}=n.draw(o);return this.localGlyphs[n.fontWeight][i]={id:i,bitmap:new tl({width:a,height:l},s),metrics:{width:c/2,height:h/2,left:u/2,top:d/2-27,advance:p/2,localGlyph:!0}}}}function jh(t,e,i,r){const o=[],s=t.image,a=s.pixelRatio,l=s.paddedRect.w-2,c=s.paddedRect.h-2,h=t.right-t.left,u=t.bottom-t.top,d=s.stretchX||[[0,l]],p=s.stretchY||[[0,c]],f=(t,e)=>t+e[1]-e[0],m=d.reduce(f,0),_=p.reduce(f,0),g=l-m,y=c-_;let x=0,v=m,b=0,w=_,T=0,E=g,S=0,A=y;if(s.content&&r){const t=s.content;x=Gh(d,0,t[0]),b=Gh(p,0,t[1]),v=Gh(d,t[0],t[2]),w=Gh(p,t[1],t[3]),T=t[0]-x,S=t[1]-b,E=t[2]-t[0]-v,A=t[3]-t[1]-w}const I=(r,o,l,c)=>{const d=qh(r.stretch-x,v,h,t.left),p=$h(r.fixed-T,E,r.stretch,m),f=qh(o.stretch-b,w,u,t.top),g=$h(o.fixed-S,A,o.stretch,_),y=qh(l.stretch-x,v,h,t.left),I=$h(l.fixed-T,E,l.stretch,m),M=qh(c.stretch-b,w,u,t.top),C=$h(c.fixed-S,A,c.stretch,_),z=new n(d,f),k=new n(y,f),P=new n(y,M),D=new n(d,M),L=new n(p/a,g/a),B=new n(I/a,C/a),R=e*Math.PI/180;if(R){const t=Math.sin(R),e=Math.cos(R),i=[e,-t,t,e];z._matMult(i),k._matMult(i),D._matMult(i),P._matMult(i)}const F=r.stretch+r.fixed,O=o.stretch+o.fixed;return{tl:z,tr:k,bl:D,br:P,tex:{x:s.paddedRect.x+1+F,y:s.paddedRect.y+1+O,w:l.stretch+l.fixed-F,h:c.stretch+c.fixed-O},writingMode:void 0,glyphOffset:[0,0],sectionIndex:0,pixelOffsetTL:L,pixelOffsetBR:B,minFontScaleX:E/a/h,minFontScaleY:A/a/u,isSDF:i}};if(r&&(s.stretchX||s.stretchY)){const t=Zh(d,g,m),e=Zh(p,y,_);for(let i=0;i{if(t)n(t);else if(e){const t={},i=function(t){return new jc(t).readFields(lh,{})}(e);for(const e of i.glyphs)t[e.id]=e;n(null,{glyphs:t,ascender:i.ascender,descender:i.descender})}})},Nh.TinySDF=class{constructor({fontSize:t=24,buffer:e=3,radius:i=8,cutoff:r=.25,fontFamily:n="sans-serif",fontWeight:o="normal",fontStyle:s="normal"}){this.buffer=e,this.cutoff=r,this.radius=i;const a=this.size=t+4*e,l=this._createCanvas(a),c=this.ctx=l.getContext("2d",{willReadFrequently:!0});c.font=`${s} ${o} ${t}px ${n}`,c.textBaseline="alphabetic",c.textAlign="left",c.fillStyle="black",this.gridOuter=new Float64Array(a*a),this.gridInner=new Float64Array(a*a),this.f=new Float64Array(a),this.z=new Float64Array(a+1),this.v=new Uint16Array(a)}_createCanvas(t){const e=document.createElement("canvas");return e.width=e.height=t,e}draw(t){const{width:e,actualBoundingBoxAscent:i,actualBoundingBoxDescent:r,actualBoundingBoxLeft:n,actualBoundingBoxRight:o}=this.ctx.measureText(t),s=Math.floor(i),a=Math.min(this.size-this.buffer,Math.ceil(o-n)),l=Math.min(this.size-this.buffer,Math.ceil(i)+Math.ceil(r)),c=a+2*this.buffer,h=l+2*this.buffer,u=c*h,d=new Uint8ClampedArray(u),p={data:d,width:c,height:h,glyphWidth:a,glyphHeight:l,glyphTop:s,glyphLeft:0,glyphAdvance:e};if(0===a||0===l)return p;const{ctx:f,buffer:m,gridInner:_,gridOuter:g}=this;f.clearRect(m,m,a,l),f.fillText(t,m,m+s+1);const y=f.getImageData(m,m,a,l);g.fill(Fh,0,u),_.fill(0,0,u);for(let x=0;x0?t*t:0,_[i]=t<0?t*t:0}}Oh(g,0,0,c,h,c,this.f,this.v,this.z),Oh(_,m,m,a,l,c,this.f,this.v,this.z);for(let x=0;x0)for(let i=(this.length>>1)-1;i>=0;i--)this._down(i)}push(t){this.data.push(t),this.length++,this._up(this.length-1)}pop(){if(0===this.length)return;const t=this.data[0],e=this.data.pop();return this.length--,this.length>0&&(this.data[0]=e,this._down(0)),t}peek(){return this.data[0]}_up(t){const{data:e,compare:i}=this,r=e[t];for(;t>0;){const n=t-1>>1,o=e[n];if(i(r,o)>=0)break;e[t]=o,t=n}e[t]=r}_down(t){const{data:e,compare:i}=this,r=this.length>>1,n=e[t];for(;t=0)break;e[t]=o,t=r}e[t]=n}}function Hh(t,e){return te?1:0}function Kh(t,e=1,i=!1){let r=1/0,o=1/0,s=-1/0,a=-1/0;const l=t[0];for(let n=0;ns)&&(s=t.x),(!n||t.y>a)&&(a=t.y)}const c=Math.min(s-r,a-o);let h=c/2;const u=new Wh([],Yh);if(0===c)return new n(r,o);for(let n=r;nd.d||!d.d)&&(d=r,i&&console.log("found best %d after %d probes",Math.round(1e4*r.d)/1e4,p)),r.max-d.d<=e||(h=r.h/2,u.push(new Jh(r.p.x-h,r.p.y-h,h,t)),u.push(new Jh(r.p.x+h,r.p.y-h,h,t)),u.push(new Jh(r.p.x-h,r.p.y+h,h,t)),u.push(new Jh(r.p.x+h,r.p.y+h,h,t)),p+=4)}return i&&(console.log("num probes: "+p),console.log("best distance: "+d.d)),d.p}function Yh(t,e){return e.max-t.max}function Jh(t,e,i,r){this.p=new n(t,e),this.h=i,this.d=function(t,e){let i=!1,r=1/0;for(let n=0;nt.y!=a.y>t.y&&t.x<(a.x-n.x)*(t.y-n.y)/(a.y-n.y)+n.x&&(i=!i),r=Math.min(r,da(t,n,a))}}return(i?1:-1)*Math.sqrt(r)}(this.p,r),this.max=this.d+this.h*Math.SQRT2}const Qh=Number.POSITIVE_INFINITY,tu=Math.sqrt(2);function eu(t,e){return e[1]!==Qh?function(t,e,i){let r=0,n=0;switch(e=Math.abs(e),i=Math.abs(i),t){case"top-right":case"top-left":case"top":n=i-7;break;case"bottom-right":case"bottom-left":case"bottom":n=7-i}switch(t){case"top-right":case"bottom-right":case"right":r=-e;break;case"top-left":case"bottom-left":case"left":r=e}return[r,n]}(t,e[0],e[1]):function(t,e){let i=0,r=0;e<0&&(e=0);const n=e/tu;switch(t){case"top-right":case"top-left":r=n-7;break;case"bottom-right":case"bottom-left":r=7-n;break;case"bottom":r=7-e;break;case"top":r=e-7}switch(t){case"top-right":case"bottom-right":i=-n;break;case"top-left":case"bottom-left":i=n;break;case"left":i=e;break;case"right":i=-e}return[i,r]}(t,e[0])}function iu(t,e,i,r,n,o,s,a,l){t.createArrays(),t.tilePixelRatio=Rs/(512*t.overscaling),t.compareText={},t.iconsNeedLinear=!1;const c=t.layers[0].layout,h=t.layers[0]._unevaluatedLayout._values,u={};if("composite"===t.textSizeData.kind){const{minZoom:e,maxZoom:i}=t.textSizeData;u.compositeTextSizes=[h["text-size"].possiblyEvaluate(new to(e),a),h["text-size"].possiblyEvaluate(new to(i),a)]}if("composite"===t.iconSizeData.kind){const{minZoom:e,maxZoom:i}=t.iconSizeData;u.compositeIconSizes=[h["icon-size"].possiblyEvaluate(new to(e),a),h["icon-size"].possiblyEvaluate(new to(i),a)]}u.layoutTextSize=h["text-size"].possiblyEvaluate(new to(l+1),a),u.layoutIconSize=h["icon-size"].possiblyEvaluate(new to(l+1),a),u.textMaxSize=h["text-size"].possiblyEvaluate(new to(18),a);const d="map"===c.get("text-rotation-alignment")&&"point"!==c.get("symbol-placement"),p=c.get("text-size");for(const f of t.features){const o=c.get("text-font").evaluate(f,{},a).join(","),l=p.evaluate(f,{},a),h=u.layoutTextSize.evaluate(f,{},a),m=(u.layoutIconSize.evaluate(f,{},a),{horizontal:{},vertical:void 0}),_=f.text;let g,y=[0,0];if(_){const r=_.toString(),s=24*c.get("text-letter-spacing").evaluate(f,{},a),u=24*c.get("text-line-height").evaluate(f,{},a),p=Bn(r)?s:0,g=c.get("text-anchor").evaluate(f,{},a),x=c.get("text-variable-anchor");if(!x){const t=c.get("text-radial-offset").evaluate(f,{},a);y=t?eu(g,[24*t,Qh]):c.get("text-offset").evaluate(f,{},a).map(t=>24*t)}let v=d?"center":c.get("text-justify").evaluate(f,{},a);const b=c.get("symbol-placement"),w="point"===b,T="point"===b?24*c.get("text-max-width").evaluate(f,{},a):0,E=s=>{t.allowVerticalPlacement&&Ln(r)&&(m.vertical=gh(_,e,i,n,o,T,u,g,s,p,y,fh.vertical,!0,b,h,l))};if(!d&&x){const t="auto"===v?x.map(t=>ru(t)):[v];let r=!1;for(let s=0;s=0||!Ln(r)){const t=gh(_,e,i,n,o,T,u,g,v,p,y,fh.horizontal,!1,b,h,l);t&&(m.horizontal[v]=t)}E("point"===b?"left":v)}}let x=!1;if(f.icon&&f.icon.name){const e=r[f.icon.name];e&&(g=Ih(n[f.icon.name],c.get("icon-offset").evaluate(f,{},a),c.get("icon-anchor").evaluate(f,{},a)),x=e.sdf,void 0===t.sdfIcons?t.sdfIcons=e.sdf:t.sdfIcons!==e.sdf&&P("Style sheet warning: Cannot mix SDF and non-SDF icons in one buffer"),(e.pixelRatio!==t.pixelRatio||0!==c.get("icon-rotate").constantOr(1))&&(t.iconsNeedLinear=!0))}const v=au(m.horizontal)||m.vertical;t.iconsInText||(t.iconsInText=!!v&&v.iconsInText),(v||g)&&nu(t,f,m,g,r,u,h,0,y,x,s,a)}o&&t.generateCollisionDebugBuffers(l,t.collisionBoxArray)}function ru(t){switch(t){case"right":case"top-right":case"bottom-right":return"right";case"left":case"top-left":case"bottom-left":return"left"}return"center"}function nu(t,e,i,r,n,o,s,a,l,c,u,d){let p=o.textMaxSize.evaluate(e,{},d);void 0===p&&(p=s);const f=t.layers[0].layout,m=f.get("icon-offset").evaluate(e,{},d),_=au(i.horizontal)||i.vertical,g=s/24,y=t.tilePixelRatio*p/24,x=t.tilePixelRatio*f.get("symbol-spacing"),v=f.get("text-padding")*t.tilePixelRatio,b=f.get("icon-padding")*t.tilePixelRatio,w=h(f.get("text-max-angle")),T="map"===f.get("text-rotation-alignment")&&"point"!==f.get("symbol-placement"),E="map"===f.get("icon-rotation-alignment")&&"point"!==f.get("symbol-placement"),S=f.get("symbol-placement"),A=x/2,I=f.get("icon-text-fit");let M;r&&"none"!==I&&(t.allowVerticalPlacement&&i.vertical&&(M=Mh(r,i.vertical,I,f.get("icon-text-fit-padding"),m,g)),_&&(r=Mh(r,_,I,f.get("icon-text-fit-padding"),m,g)));const C=(s,a)=>{a.x<0||a.x>=Rs||a.y<0||a.y>=Rs||function(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g,y,x,v,b,w,T,E){const S=t.addToLineVertexArray(e,r);let A,I,M,C,z,k,D,L=0,B=0,R=0,F=0,O=-1,U=-1;const V={};let N=ss(""),j=0,G=0;if(void 0===l._unevaluatedLayout.getValue("text-radial-offset")?[j,G]=l.layout.get("text-offset").evaluate(v,{},E).map(t=>24*t):(j=24*l.layout.get("text-radial-offset").evaluate(v,{},E),G=Qh),t.allowVerticalPlacement&&n.vertical){const t=n.vertical;if(f)k=cu(t),a&&(D=cu(a));else{const r=l.layout.get("text-rotate").evaluate(v,{},E)+90;M=lu(c,i,e,h,u,d,t,p,r,m),a&&(C=lu(c,i,e,h,u,d,a,g,r))}}if(o){const r=l.layout.get("icon-rotate").evaluate(v,{},E),n="none"!==l.layout.get("icon-text-fit"),s=jh(o,r,w,n),p=a?jh(a,r,w,n):void 0;I=lu(c,i,e,h,u,d,o,g,r),L=4*s.length;const f=t.iconSizeData;let m=null;"source"===f.kind?(m=[kc*l.layout.get("icon-size").evaluate(v,{},E)],m[0]>ou&&P(t.layerIds[0]+': Value for "icon-size" is >= 255. Reduce your "icon-size".')):"composite"===f.kind&&(m=[kc*b.compositeIconSizes[0].evaluate(v,{},E),kc*b.compositeIconSizes[1].evaluate(v,{},E)],(m[0]>ou||m[1]>ou)&&P(t.layerIds[0]+': Value for "icon-size" is >= 255. Reduce your "icon-size".')),t.addSymbols(t.icon,s,m,x,y,v,!1,i,e,S.lineStartIndex,S.lineLength,-1,T,E),O=t.icon.placedSymbolArray.length-1,p&&(B=4*p.length,t.addSymbols(t.icon,p,m,x,y,v,fh.vertical,i,e,S.lineStartIndex,S.lineLength,-1,T,E),U=t.icon.placedSymbolArray.length-1)}for(const P in n.horizontal){const r=n.horizontal[P];A||(N=ss(r.text),f?z=cu(r):A=lu(c,i,e,h,u,d,r,p,l.layout.get("text-rotate").evaluate(v,{},E),m));const o=1===r.positionedLines.length;if(R+=su(t,i,e,r,s,l,f,v,m,S,n.vertical?fh.horizontal:fh.horizontalOnly,o?Object.keys(n.horizontal):[P],V,O,b,T,E),o)break}n.vertical&&(F+=su(t,i,e,n.vertical,s,l,f,v,m,S,fh.vertical,["vertical"],V,U,b,T,E));let Z=-1;const q=(t,e)=>t?Math.max(t,e):e;Z=q(z,Z),Z=q(k,Z),Z=q(D,Z);const $=Z>-1?1:0;t.glyphOffsetArray.length>=yu.MAX_GLYPHS&&P("Too many glyphs being rendered in a tile. See https://github.com/mapbox/mapbox-gl-js/issues/2907"),void 0!==v.sortKey&&t.addToSortKeyRanges(t.symbolInstances.length,v.sortKey),t.symbolInstances.emplaceBack(i.x,i.y,i.z,e.x,e.y,V.right>=0?V.right:-1,V.center>=0?V.center:-1,V.left>=0?V.left:-1,V.vertical>=0?V.vertical:-1,O,U,N,void 0!==A?A:t.collisionBoxArray.length,void 0!==A?A+1:t.collisionBoxArray.length,void 0!==M?M:t.collisionBoxArray.length,void 0!==M?M+1:t.collisionBoxArray.length,void 0!==I?I:t.collisionBoxArray.length,void 0!==I?I+1:t.collisionBoxArray.length,C||t.collisionBoxArray.length,C?C+1:t.collisionBoxArray.length,h,R,F,L,B,$,0,j,G,Z)}(t,a,a,s,i,r,n,M,t.layers[0],t.collisionBoxArray,e.index,e.sourceLayerIndex,t.index,v,T,l,0,b,E,m,e,o,c,u,d)};if("line"===S)for(const h of Rh(e.geometry,0,0,Rs,Rs)){const e=Bh(h,x,w,i.vertical||_,r,24,y,t.overscaling,Rs);for(const i of e){const e=_;e&&hu(t,e.text,A,i)||C(h,i)}}else if("line-center"===S){for(const h of e.geometry)if(h.length>1){const t=Lh(h,w,i.vertical||_,r,24,y);t&&C(h,t)}}else if("Polygon"===e.type)for(const h of Ol(e.geometry,0)){const t=Kh(h,16);C(h[0],new Ch(t.x,t.y,0,0,void 0))}else if("LineString"===e.type)for(const h of e.geometry)C(h,new Ch(h[0].x,h[0].y,0,0,void 0));else if("Point"===e.type)for(const h of e.geometry)for(const t of h)C([t],new Ch(t.x,t.y,0,0,void 0))}const ou=32640;function su(t,e,i,r,o,s,a,l,c,h,u,d,p,f,m,_,g){const y=function(t,e,i,r,o,s,a,l){const c=[];if(0===e.positionedLines.length)return c;const h=r.layout.get("text-rotate").evaluate(s,{})*Math.PI/180,u=function(t){const e=t[0],i=t[1],r=e*i;return r>0?[e,-i]:r<0?[-e,i]:0===e?[i,e]:[i,-e]}(i);let d=Math.abs(e.top-e.bottom);for(const n of e.positionedLines)d-=n.lineOffset;const p=e.positionedLines.length,f=d/p;let m=e.top-i[1];for(let _=0;_ou&&P(t.layerIds[0]+': Value for "text-size" is >= 255. Reduce your "text-size".')):"composite"===x.kind&&(v=[kc*m.compositeTextSizes[0].evaluate(l,{},g),kc*m.compositeTextSizes[1].evaluate(l,{},g)],(v[0]>ou||v[1]>ou)&&P(t.layerIds[0]+': Value for "text-size" is >= 255. Reduce your "text-size".')),t.addSymbols(t.text,y,v,c,a,l,u,e,i,h.lineStartIndex,h.lineLength,f,_,g);for(const n of d)p[n]=t.text.placedSymbolArray.length-1;return 4*y.length}function au(t){for(const e in t)return t[e];return null}function lu(t,e,i,r,o,s,a,l,c,u){let d=a.top,p=a.bottom,f=a.left,m=a.right;const _=a.collisionPadding;if(_&&(f-=_[0],d-=_[1],m+=_[2],p+=_[3]),c){const t=new n(f,d),e=new n(m,d),i=new n(f,p),r=new n(m,p),o=h(c);let s=new n(0,0);u&&(s=new n(u[0],u[1])),t._rotateAround(o,s),e._rotateAround(o,s),i._rotateAround(o,s),r._rotateAround(o,s),f=Math.min(t.x,e.x,i.x,r.x),m=Math.max(t.x,e.x,i.x,r.x),d=Math.min(t.y,e.y,i.y,r.y),p=Math.max(t.y,e.y,i.y,r.y)}return t.emplaceBack(e.x,e.y,e.z,i.x,i.y,f,d,m,p,l,r,o,s),t.length-1}function cu(t){t.collisionPadding&&(t.top-=t.collisionPadding[1],t.bottom+=t.collisionPadding[3]);const e=t.bottom-t.top;return e>0?Math.max(10,e):null}function hu(t,e,i,r){const n=t.compareText;if(e in n){const t=n[e];for(let e=t.length-1;e>=0;e--)if(r.dist(t[e])t.id),this.index=t.index,this.pixelRatio=t.pixelRatio,this.sourceLayerIndex=t.sourceLayerIndex,this.hasPattern=!1,this.hasRTLText=!1,this.sortKeyRanges=[],this.collisionCircleArray=[],this.placementInvProjMatrix=Sa([]),this.placementViewportMatrix=Sa([]);const e=this.layers[0]._unevaluatedLayout._values;this.textSizeData=Pc(this.zoom,e["text-size"]),this.iconSizeData=Pc(this.zoom,e["icon-size"]);const i=this.layers[0].layout,r=i.get("symbol-sort-key"),n=i.get("symbol-z-order");this.canOverlap=i.get("text-allow-overlap")||i.get("icon-allow-overlap")||i.get("text-ignore-placement")||i.get("icon-ignore-placement"),this.sortFeaturesByKey="viewport-y"!==n&&void 0!==r.constantOr(1),this.sortFeaturesByY=("viewport-y"===n||"auto"===n&&!this.sortFeaturesByKey)&&this.canOverlap,this.writingModes=i.get("text-writing-mode").map(t=>fh[t]),this.stateDependentLayerIds=this.layers.filter(t=>t.isStateDependent()).map(t=>t.id),this.sourceID=t.sourceID}createArrays(){this.text=new _u(new Ss(this.layers,this.zoom,t=>/^text/.test(t))),this.icon=new _u(new Ss(this.layers,this.zoom,t=>/^icon/.test(t))),this.glyphOffsetArray=new Ko,this.lineVertexArray=new Yo,this.symbolInstances=new Ho}calculateGlyphDependencies(t,e,i,r,n){for(let o=0;o0)&&("constant"!==s.value.kind||s.value.value.length>0),h="constant"!==l.value.kind||!!l.value.value||Object.keys(l.parameters).length>0,u=o.get("symbol-sort-key");if(this.features=[],!c&&!h)return;const d=e.iconDependencies,p=e.glyphDependencies,f=e.availableImages,m=new to(this.zoom);for(const{feature:_,id:g,index:y,sourceLayerIndex:x}of t){const t=n._featureFilter.needGeometry,e=ia(_,t);if(!n._featureFilter.filter(m,e,i))continue;let a,l;if(t||(e.geometry=ea(_,i,r)),c){const t=n.getValueAndResolveTokens("text-field",e,i,f),r=fe.factory(t);mu(r)&&(this.hasRTLText=!0),(!this.hasRTLText||"unavailable"===Yn()||this.hasRTLText&&Qn.isParsed())&&(a=Rc(r,n,e))}if(h){const t=n.getValueAndResolveTokens("icon-image",e,i,f);l=t instanceof me?t:me.fromString(t)}if(!a&&!l)continue;const v=this.sortFeaturesByKey?u.evaluate(e,{},i):void 0;if(this.features.push({id:g,text:a,icon:l,index:y,sourceLayerIndex:x,geometry:e.geometry,properties:_.properties,type:uu[_.type],sortKey:v}),l&&(d[l.name]=!0),a){const t=s.evaluate(e,{},i).join(","),r="map"===o.get("text-rotation-alignment")&&"point"!==o.get("symbol-placement");this.allowVerticalPlacement=this.writingModes&&this.writingModes.indexOf(fh.vertical)>=0;for(const e of a.sections)if(e.image)d[e.image.name]=!0;else{const i=Ln(a.toString()),n=e.fontStack||t,o=p[n]=p[n]||{};this.calculateGlyphDependencies(e.text,o,r,this.allowVerticalPlacement,i)}}}"line"===o.get("symbol-placement")&&(this.features=function(t){const e={},i={},r=[];let n=0;function o(e){r.push(t[e]),n++}function s(t,e,n){const o=i[t];return delete i[t],i[e]=o,r[o].geometry[0].pop(),r[o].geometry[0]=r[o].geometry[0].concat(n[0]),o}function a(t,i,n){const o=e[i];return delete e[i],e[t]=o,r[o].geometry[0].shift(),r[o].geometry[0]=n[0].concat(r[o].geometry[0]),o}function l(t,e,i){const r=i?e[0][e[0].length-1]:e[0][0];return`${t}:${r.x}:${r.y}`}for(let c=0;ct.geometry)}(this.features)),this.sortFeaturesByKey&&this.features.sort((t,e)=>t.sortKey-e.sortKey)}update(t,e,i,r){this.stateDependentLayers.length&&(this.text.programConfigurations.updatePaintArrays(t,e,this.layers,i,r),this.icon.programConfigurations.updatePaintArrays(t,e,this.layers,i,r))}isEmpty(){return 0===this.symbolInstances.length&&!this.hasRTLText}uploadPending(){return!this.uploaded||this.text.programConfigurations.needsUpload||this.icon.programConfigurations.needsUpload}upload(t){!this.uploaded&&this.hasDebugData()&&(this.textCollisionBox.upload(t),this.iconCollisionBox.upload(t)),this.text.upload(t,this.sortFeaturesByY,!this.uploaded,this.text.programConfigurations.needsUpload),this.icon.upload(t,this.sortFeaturesByY,!this.uploaded,this.icon.programConfigurations.needsUpload),this.uploaded=!0}destroyDebugData(){this.textCollisionBox.destroy(),this.iconCollisionBox.destroy()}destroy(){this.text.destroy(),this.icon.destroy(),this.hasDebugData()&&this.destroyDebugData()}addToLineVertexArray(t,e){const i=this.lineVertexArray.length;if(void 0!==t.segment){let i=t.dist(e[t.segment+1]),r=t.dist(e[t.segment]);const n={};for(let o=t.segment+1;o=0;o--)n[o]={x:e[o].x,y:e[o].y,tileUnitDistanceFromAnchor:r},o>0&&(r+=e[o-1].dist(e[o]));for(let t=0;t=0?e.rightJustifiedTextSymbolIndex:e.centerJustifiedTextSymbolIndex>=0?e.centerJustifiedTextSymbolIndex:e.leftJustifiedTextSymbolIndex>=0?e.leftJustifiedTextSymbolIndex:e.verticalPlacedTextSymbolIndex>=0?e.verticalPlacedTextSymbolIndex:r),o=Dc(this.textSizeData,t,n)/24;return this.tilePixelRatio*o}getSymbolInstanceIconSize(t,e,i){const r=this.icon.placedSymbolArray.get(i),n=Dc(this.iconSizeData,t,r);return this.tilePixelRatio*n}_commitDebugCollisionVertexUpdate(t,e,i){t.emplaceBack(e,-i,-i),t.emplaceBack(e,i,-i),t.emplaceBack(e,i,i),t.emplaceBack(e,-i,i)}_updateTextDebugCollisionBoxes(t,e,i,r,n,o){for(let s=r;s0}hasIconData(){return this.icon.segments.get().length>0}hasDebugData(){return this.textCollisionBox&&this.iconCollisionBox}hasTextCollisionBoxData(){return this.hasDebugData()&&this.textCollisionBox.segments.get().length>0}hasIconCollisionBoxData(){return this.hasDebugData()&&this.iconCollisionBox.segments.get().length>0}addIndicesForPlacedSymbol(t,e){const i=t.placedSymbolArray.get(e),r=i.vertexStartIndex+4*i.numGlyphs;for(let n=i.vertexStartIndex;nr[t]-r[e]||n[e]-n[t]),o}addToSortKeyRanges(t,e){const i=this.sortKeyRanges[this.sortKeyRanges.length-1];i&&i.sortKey===e?i.symbolInstanceEnd=t+1:this.sortKeyRanges.push({sortKey:e,symbolInstanceStart:t,symbolInstanceEnd:t+1})}sortFeatures(t){if(this.sortFeaturesByY&&this.sortedAngle!==t&&!(this.text.segments.get().length>1||this.icon.segments.get().length>1)){this.symbolInstanceIndexes=this.getSortedSymbolIndexes(t),this.sortedAngle=t,this.text.indexArray.clear(),this.icon.indexArray.clear(),this.featureSortOrder=[];for(const t of this.symbolInstanceIndexes){const e=this.symbolInstances.get(t);this.featureSortOrder.push(e.featureIndex),[e.rightJustifiedTextSymbolIndex,e.centerJustifiedTextSymbolIndex,e.leftJustifiedTextSymbolIndex].forEach((t,e,i)=>{t>=0&&i.indexOf(t)===e&&this.addIndicesForPlacedSymbol(this.text,t)}),e.verticalPlacedTextSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.text,e.verticalPlacedTextSymbolIndex),e.placedIconSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.icon,e.placedIconSymbolIndex),e.verticalPlacedIconSymbolIndex>=0&&this.addIndicesForPlacedSymbol(this.icon,e.verticalPlacedIconSymbolIndex)}this.text.indexBuffer&&this.text.indexBuffer.updateData(this.text.indexArray),this.icon.indexBuffer&&this.icon.indexBuffer.updateData(this.icon.indexArray)}}}tn("SymbolBucket",yu,{omit:["layers","collisionBoxArray","features","compareText"]}),yu.MAX_GLYPHS=65535,yu.addDynamicAttributes=fu;const xu=new mo({"symbol-placement":new co(Ut.layout_symbol["symbol-placement"]),"symbol-spacing":new co(Ut.layout_symbol["symbol-spacing"]),"symbol-avoid-edges":new co(Ut.layout_symbol["symbol-avoid-edges"]),"symbol-sort-key":new ho(Ut.layout_symbol["symbol-sort-key"]),"symbol-z-order":new co(Ut.layout_symbol["symbol-z-order"]),"icon-allow-overlap":new co(Ut.layout_symbol["icon-allow-overlap"]),"icon-ignore-placement":new co(Ut.layout_symbol["icon-ignore-placement"]),"icon-optional":new co(Ut.layout_symbol["icon-optional"]),"icon-rotation-alignment":new co(Ut.layout_symbol["icon-rotation-alignment"]),"icon-size":new ho(Ut.layout_symbol["icon-size"]),"icon-text-fit":new co(Ut.layout_symbol["icon-text-fit"]),"icon-text-fit-padding":new co(Ut.layout_symbol["icon-text-fit-padding"]),"icon-image":new ho(Ut.layout_symbol["icon-image"]),"icon-rotate":new ho(Ut.layout_symbol["icon-rotate"]),"icon-padding":new co(Ut.layout_symbol["icon-padding"]),"icon-keep-upright":new co(Ut.layout_symbol["icon-keep-upright"]),"icon-offset":new ho(Ut.layout_symbol["icon-offset"]),"icon-anchor":new ho(Ut.layout_symbol["icon-anchor"]),"icon-pitch-alignment":new co(Ut.layout_symbol["icon-pitch-alignment"]),"text-pitch-alignment":new co(Ut.layout_symbol["text-pitch-alignment"]),"text-rotation-alignment":new co(Ut.layout_symbol["text-rotation-alignment"]),"text-field":new ho(Ut.layout_symbol["text-field"]),"text-font":new ho(Ut.layout_symbol["text-font"]),"text-size":new ho(Ut.layout_symbol["text-size"]),"text-max-width":new ho(Ut.layout_symbol["text-max-width"]),"text-line-height":new ho(Ut.layout_symbol["text-line-height"]),"text-letter-spacing":new ho(Ut.layout_symbol["text-letter-spacing"]),"text-justify":new ho(Ut.layout_symbol["text-justify"]),"text-radial-offset":new ho(Ut.layout_symbol["text-radial-offset"]),"text-variable-anchor":new co(Ut.layout_symbol["text-variable-anchor"]),"text-anchor":new ho(Ut.layout_symbol["text-anchor"]),"text-max-angle":new co(Ut.layout_symbol["text-max-angle"]),"text-writing-mode":new co(Ut.layout_symbol["text-writing-mode"]),"text-rotate":new ho(Ut.layout_symbol["text-rotate"]),"text-padding":new co(Ut.layout_symbol["text-padding"]),"text-keep-upright":new co(Ut.layout_symbol["text-keep-upright"]),"text-transform":new ho(Ut.layout_symbol["text-transform"]),"text-offset":new ho(Ut.layout_symbol["text-offset"]),"text-allow-overlap":new co(Ut.layout_symbol["text-allow-overlap"]),"text-ignore-placement":new co(Ut.layout_symbol["text-ignore-placement"]),"text-optional":new co(Ut.layout_symbol["text-optional"])});var vu={paint:new mo({"icon-opacity":new ho(Ut.paint_symbol["icon-opacity"]),"icon-color":new ho(Ut.paint_symbol["icon-color"]),"icon-halo-color":new ho(Ut.paint_symbol["icon-halo-color"]),"icon-halo-width":new ho(Ut.paint_symbol["icon-halo-width"]),"icon-halo-blur":new ho(Ut.paint_symbol["icon-halo-blur"]),"icon-translate":new co(Ut.paint_symbol["icon-translate"]),"icon-translate-anchor":new co(Ut.paint_symbol["icon-translate-anchor"]),"text-opacity":new ho(Ut.paint_symbol["text-opacity"]),"text-color":new ho(Ut.paint_symbol["text-color"],{runtimeType:Yt,getOverride:t=>t.textColor,hasOverride:t=>!!t.textColor}),"text-halo-color":new ho(Ut.paint_symbol["text-halo-color"]),"text-halo-width":new ho(Ut.paint_symbol["text-halo-width"]),"text-halo-blur":new ho(Ut.paint_symbol["text-halo-blur"]),"text-translate":new co(Ut.paint_symbol["text-translate"]),"text-translate-anchor":new co(Ut.paint_symbol["text-translate-anchor"])}),layout:xu};class bu{constructor(t){this.type=t.property.overrides?t.property.overrides.runtimeType:Xt,this.defaultValue=t}evaluate(t){if(t.formattedSection){const e=this.defaultValue.property.overrides;if(e&&e.hasOverride(t.formattedSection))return e.getOverride(t.formattedSection)}return t.feature&&t.featureState?this.defaultValue.evaluate(t.feature,t.featureState):this.defaultValue.property.specification.default}eachChild(t){this.defaultValue.isConstant()||t(this.defaultValue.value._styleExpression.expression)}outputDefined(){return!1}serialize(){return null}}tn("FormatSectionOverride",bu,{omit:["defaultValue"]});class wu extends Ps{constructor(t){super(t,vu)}recalculate(t,e){super.recalculate(t,e),"auto"===this.layout.get("icon-rotation-alignment")&&(this.layout._values["icon-rotation-alignment"]="point"!==this.layout.get("symbol-placement")?"map":"viewport"),"auto"===this.layout.get("text-rotation-alignment")&&(this.layout._values["text-rotation-alignment"]="point"!==this.layout.get("symbol-placement")?"map":"viewport"),"auto"===this.layout.get("text-pitch-alignment")&&(this.layout._values["text-pitch-alignment"]=this.layout.get("text-rotation-alignment")),"auto"===this.layout.get("icon-pitch-alignment")&&(this.layout._values["icon-pitch-alignment"]=this.layout.get("icon-rotation-alignment"));const i=this.layout.get("text-writing-mode");if(i){const t=[];for(const e of i)t.indexOf(e)<0&&t.push(e);this.layout._values["text-writing-mode"]=t}else this.layout._values["text-writing-mode"]="point"===this.layout.get("symbol-placement")?["horizontal"]:["horizontal","vertical"];this._setPaintOverrides()}getValueAndResolveTokens(t,e,i,r){const n=this.layout.get(t).evaluate(e,{},i,r),o=this._unevaluatedLayout._values[t];return o.isDataDriven()||rr(o.value)||!n?n:function(t,e){return e.replace(/{([^{}]+)}/g,(e,i)=>i in t?String(t[i]):"")}(e.properties,n)}createBucket(t){return new yu(t)}queryRadius(){return 0}queryIntersectsFeature(){return!1}_setPaintOverrides(){for(const t of vu.paint.overridableProperties){if(!wu.hasPaintOverride(this.layout,t))continue;const e=this.paint.get(t),i=new bu(e),r=new ir(i,e.property.specification);let n=null;n="constant"===e.value.kind||"source"===e.value.kind?new or("source",r):new sr("composite",r,e.value.zoomStops,e.value._interpolationType),this.paint._values[t]=new ao(e.property,n,e.parameters)}}_handleOverridablePaintPropertyUpdate(t,e,i){return!(!this.layout||e.isDataDriven()||i.isDataDriven())&&wu.hasPaintOverride(this.layout,t)}static hasPaintOverride(t,e){const i=t.get("text-field"),r=vu.paint.properties[e];let n=!1;const o=t=>{for(const e of t)if(r.overrides&&r.overrides.hasOverride(e))return void(n=!0)};if("constant"===i.value.kind&&i.value.value instanceof fe)o(i.value.value.sections);else if("source"===i.value.kind){const t=e=>{n||(e instanceof ve&&ye(e.value)===ee?o(e.value.sections):e instanceof Ee?o(e.sections):e.eachChild(t))},e=i.value;e._styleExpression&&t(e._styleExpression.expression)}return n}getProgramConfiguration(t){return new Es(this,t)}}var Tu={paint:new mo({"background-color":new co(Ut.paint_background["background-color"]),"background-pattern":new po(Ut.paint_background["background-pattern"]),"background-opacity":new co(Ut.paint_background["background-opacity"])})},Eu={paint:new mo({"raster-opacity":new co(Ut.paint_raster["raster-opacity"]),"raster-hue-rotate":new co(Ut.paint_raster["raster-hue-rotate"]),"raster-brightness-min":new co(Ut.paint_raster["raster-brightness-min"]),"raster-brightness-max":new co(Ut.paint_raster["raster-brightness-max"]),"raster-saturation":new co(Ut.paint_raster["raster-saturation"]),"raster-contrast":new co(Ut.paint_raster["raster-contrast"]),"raster-resampling":new co(Ut.paint_raster["raster-resampling"]),"raster-fade-duration":new co(Ut.paint_raster["raster-fade-duration"])})};class Su extends Ps{constructor(t){super(t,{}),this.implementation=t}is3D(){return"3d"===this.implementation.renderingMode}hasOffscreenPass(){return void 0!==this.implementation.prerender}recalculate(){}updateTransitions(){}hasTransition(){}serialize(){}onAdd(t){this.implementation.onAdd&&this.implementation.onAdd(t,t.painter.context.gl)}onRemove(t){this.implementation.onRemove&&this.implementation.onRemove(t,t.painter.context.gl)}}var Au={paint:new mo({"sky-type":new co(Ut.paint_sky["sky-type"]),"sky-atmosphere-sun":new co(Ut.paint_sky["sky-atmosphere-sun"]),"sky-atmosphere-sun-intensity":new co(Ut.paint_sky["sky-atmosphere-sun-intensity"]),"sky-gradient-center":new co(Ut.paint_sky["sky-gradient-center"]),"sky-gradient-radius":new co(Ut.paint_sky["sky-gradient-radius"]),"sky-gradient":new fo(Ut.paint_sky["sky-gradient"]),"sky-atmosphere-halo-color":new co(Ut.paint_sky["sky-atmosphere-halo-color"]),"sky-atmosphere-color":new co(Ut.paint_sky["sky-atmosphere-color"]),"sky-opacity":new co(Ut.paint_sky["sky-opacity"])})};function Iu(t,e,i){const r=za(0,0,1),n=ja(Na());return function(t,e,i){i*=.5;var r=e[0],n=e[1],o=e[2],s=e[3],a=Math.sin(i),l=Math.cos(i);t[0]=r*l-o*a,t[1]=n*l+s*a,t[2]=o*l+r*a,t[3]=s*l-n*a}(n,n,i?-h(t)+Math.PI:h(t)),Ga(n,n,-h(e)),Ba(r,r,n),La(r,r)}const Mu={circle:class extends Ps{constructor(t){super(t,wa)}createBucket(t){return new na(t)}queryRadius(t){const e=t;return ga("circle-radius",this,e)+ga("circle-stroke-width",this,e)+ya(this.paint.get("circle-translate"))}queryIntersectsFeature(t,e,i,r,n,o,s,a){const l=va(this.paint.get("circle-translate"),this.paint.get("circle-translate-anchor"),o.angle,t.pixelToTileUnitsFactor),c=this.paint.get("circle-radius").evaluate(e,i)+this.paint.get("circle-stroke-width").evaluate(e,i);return qa(t,r,o,s,a,"map"===this.paint.get("circle-pitch-alignment"),"map"===this.paint.get("circle-pitch-scale"),l,c)}getProgramIds(){return["circle"]}getProgramConfiguration(t){return new Es(this,t)}},heatmap:class extends Ps{createBucket(t){return new Ka(t)}constructor(t){super(t,il),this._updateColorRamp()}_handleSpecialPaintPropertyUpdate(t){"heatmap-color"===t&&this._updateColorRamp()}_updateColorRamp(){this.colorRamp=rl({expression:this._transitionablePaint._values["heatmap-color"].value.expression,evaluationKey:"heatmapDensity",image:this.colorRamp}),this.colorRampTexture=null}resize(){this.heatmapFbo&&(this.heatmapFbo.destroy(),this.heatmapFbo=null)}queryRadius(t){return ga("heatmap-radius",this,t)}queryIntersectsFeature(t,e,i,r,o,s,a,l){const c=this.paint.get("heatmap-radius").evaluate(e,i);return qa(t,r,s,a,l,!0,!0,new n(0,0),c)}hasOffscreenPass(){return 0!==this.paint.get("heatmap-opacity")&&"none"!==this.visibility}getProgramIds(){return["heatmap","heatmapTexture"]}getProgramConfiguration(t){return new Es(this,t)}},hillshade:class extends Ps{constructor(t){super(t,nl)}hasOffscreenPass(){return 0!==this.paint.get("hillshade-exaggeration")&&"none"!==this.visibility}getProgramIds(){return["hillshade","hillshadePrepare"]}getProgramConfiguration(t){return new Es(this,t)}},fill:class extends Ps{constructor(t){super(t,Zl)}getProgramIds(){const t=this.paint.get("fill-pattern"),e=t&&t.constantOr(1),i=[e?"fillPattern":"fill"];return this.paint.get("fill-antialias")&&i.push(e&&!this.getPaintProperty("fill-outline-color")?"fillOutlinePattern":"fillOutline"),i}getProgramConfiguration(t){return new Es(this,t)}recalculate(t,e){super.recalculate(t,e);const i=this.paint._values["fill-outline-color"];"constant"===i.value.kind&&void 0===i.value.value&&(this.paint._values["fill-outline-color"]=this.paint._values["fill-color"])}createBucket(t){return new jl(t)}queryRadius(){return ya(this.paint.get("fill-translate"))}queryIntersectsFeature(t,e,i,r,n,o){return!t.queryGeometry.isAboveHorizon&&aa(xa(t.tilespaceGeometry,this.paint.get("fill-translate"),this.paint.get("fill-translate-anchor"),o.angle,t.pixelToTileUnitsFactor),r)}isTileClipped(){return!0}},"fill-extrusion":class extends Ps{constructor(t){super(t,cc)}createBucket(t){return new ac(t)}queryRadius(){return ya(this.paint.get("fill-extrusion-translate"))}is3D(){return!0}getProgramIds(){return[this.paint.get("fill-extrusion-pattern").constantOr(1)?"fillExtrusionPattern":"fillExtrusion"]}getProgramConfiguration(t){return new Es(this,t)}queryIntersectsFeature(t,e,i,r,o,s,a,l,c){const h=va(this.paint.get("fill-extrusion-translate"),this.paint.get("fill-extrusion-translate-anchor"),s.angle,t.pixelToTileUnitsFactor),u=this.paint.get("fill-extrusion-height").evaluate(e,i),d=this.paint.get("fill-extrusion-base").evaluate(e,i),p=[0,0],f=l&&s.elevation,m=s.elevation?s.elevation.exaggeration():1;if(f){const e=t.tile.getBucket(this).centroidVertexArray,i=c+1;if(i=3)for(let e=0;e1&&(s=t[++o]);const l=Math.abs(a-s.left),c=Math.abs(a-s.right),h=Math.min(l,c);let u;const d=n/i*(r+1);if(s.isDash){const t=r-Math.abs(d);u=Math.sqrt(h*h+t*t)}else u=r-Math.sqrt(h*h+d*d);this.image.data[e+a]=Math.max(0,Math.min(255,u+128))}}}addRegularDash(t,e){for(let a=t.length-1;a>=0;--a){const e=t[a],i=t[a+1];e.zeroLength?t.splice(a,1):i&&i.isDash===e.isDash&&(i.left=e.left,t.splice(a,1))}const i=t[0],r=t[t.length-1];i.isDash===r.isDash&&(i.left=r.left-this.width,r.right=i.right+this.width);const n=this.width*this.nextRow;let o=0,s=t[o];for(let a=0;a1&&(s=t[++o]);const i=Math.abs(a-s.left),r=Math.abs(a-s.right),l=Math.min(i,r);this.image.data[n+a]=Math.max(0,Math.min(255,(s.isDash?l:-l)+e+128))}}addDash(t,e){const i=this.getKey(t,e);if(this.positions[i])return this.positions[i];const r="round"===e,n=r?7:0,o=2*n+1;if(this.nextRow+o>this.height)return P("LineAtlas out of space"),null;0===t.length&&t.push(1);let s=0;for(let c=0;c{this._triggered=!1,this._callback()})}trigger(){this._triggered||(this._triggered=!0,this._channel?this._channel.port1.postMessage(!0):setTimeout(()=>{this._triggered=!1,this._callback()},0))}remove(){delete this._channel,this._callback=()=>{}}}const Fu=s.performance;function Ou(t){const e=t?t.url.toString():void 0;return Fu.getEntriesByName(e)}class Uu{constructor(){this.tasks={},this.taskQueue=[],A(["process"],this),this.invoker=new Ru(this.process),this.nextId=0}add(t,e){const i=this.nextId++,r=function({type:t,isSymbolTile:e,zoom:i}){return i=i||0,"message"===t?0:"maybePrepare"!==t||e?"parseTile"!==t||e?"parseTile"===t&&e?300-i:"maybePrepare"===t&&e?400-i:500:200-i:100-i}(e);if(0===r){B();try{t()}finally{}return{cancel:()=>{}}}return this.tasks[i]={fn:t,metadata:e,priority:r,id:i},this.taskQueue.push(i),this.invoker.trigger(),{cancel:()=>{delete this.tasks[i]}}}process(){B();try{if(this.taskQueue=this.taskQueue.filter(t=>!!this.tasks[t]),!this.taskQueue.length)return;const t=this.pick();if(null===t)return;const e=this.tasks[t];if(delete this.tasks[t],this.taskQueue.length&&this.invoker.trigger(),!e)return;e.fn()}finally{}}pick(){let t=null,e=1/0;for(let r=0;rx&&(v(t,c,r,n,a,l),v(c,i,a,l,o,s))}v(u,d,r,o,n,o),v(d,p,n,o,n,s),v(p,f,n,s,r,s),v(f,u,r,s,r,o),m-=x,_-=x,g+=x,y+=x;const b=1/Math.max(g-m,y-_);return{scale:b,x:m*b,y:_*b,x2:g*b,y2:y*b,projection:e}}function Nu(t,e,i){var r=2*Math.PI*6378137/256/Math.pow(2,i);return[t*r-2*Math.PI*6378137/2,e*r-2*Math.PI*6378137/2]}class ju{constructor(t,e,i){this.z=t,this.x=e,this.y=i,this.key=qu(0,t,t,e,i)}equals(t){return this.z===t.z&&this.x===t.x&&this.y===t.y}url(t,e){const i=(n=this.y,o=this.z,s=Nu(256*(r=this.x),256*(n=Math.pow(2,o)-n-1),o),a=Nu(256*(r+1),256*(n+1),o),s[0]+","+s[1]+","+a[0]+","+a[1]);var r,n,o,s,a;const l=function(t,e,i){let r,n="";for(let o=t;o>0;o--)r=1<this.canonical.z?new Zu(t,this.wrap,this.canonical.z,this.canonical.x,this.canonical.y):new Zu(t,this.wrap,t,this.canonical.x>>e,this.canonical.y>>e)}calculateScaledKey(t,e=!0){if(this.overscaledZ===t&&e)return this.key;if(t>this.canonical.z)return qu(this.wrap*+e,t,this.canonical.z,this.canonical.x,this.canonical.y);{const i=this.canonical.z-t;return qu(this.wrap*+e,t,t,this.canonical.x>>i,this.canonical.y>>i)}}isChildOf(t){if(t.wrap!==this.wrap)return!1;const e=this.canonical.z-t.canonical.z;return 0===t.overscaledZ||t.overscaledZ>e&&t.canonical.y===this.canonical.y>>e}children(t){if(this.overscaledZ>=t)return[new Zu(this.overscaledZ+1,this.wrap,this.canonical.z,this.canonical.x,this.canonical.y)];const e=this.canonical.z+1,i=2*this.canonical.x,r=2*this.canonical.y;return[new Zu(e,this.wrap,e,i,r),new Zu(e,this.wrap,e,i+1,r),new Zu(e,this.wrap,e,i,r+1),new Zu(e,this.wrap,e,i+1,r+1)]}isLessThan(t){return this.wrapt.wrap)&&(this.overscaledZt.overscaledZ)&&(this.canonical.xt.canonical.x)&&this.canonical.y>=1)>1;){const a=e+r>>1,l=i+n>>1;1&t?(r=e,n=i,e=o,i=s):(e=r,i=n,r=o,n=s),o=a,s=l}const a=4*Xd;Hu[a+0]=e,Hu[a+1]=i,Hu[a+2]=r,Hu[a+3]=n}const Ku=new Uint16Array(2178),Yu=new Uint8Array(1089),Ju=new Uint16Array(1089);function Qu(t){return 0===t?-.03125:32===t?.03125:0}var td=vo([{name:"a_pos",type:"Int16",components:2},{name:"a_texture_pos",type:"Int16",components:2}]);const ed={type:2,extent:Rs,loadGeometry:()=>[[new n(0,0),new n(8193,0),new n(8193,8193),new n(0,8193),new n(0,0)]]};class id{constructor(t,e,i,r,n){this.tileID=t,this.uid=w(),this.uses=0,this.tileSize=e,this.tileZoom=i,this.buckets={},this.expirationTime=null,this.queryPadding=0,this.hasSymbolBuckets=!1,this.hasRTLText=!1,this.dependencies={},this.isRaster=n,this.expiredRequestCount=0,this.state="loading",r&&r.transform&&(this.projection=r.transform.projection)}registerFadeDuration(t){const e=t+this.timeAdded;ee.getLayer(t)).filter(Boolean);if(0!==t.length){r.layers=t,r.stateDependentLayerIds&&(r.stateDependentLayers=r.stateDependentLayerIds.map(e=>t.filter(t=>t.id===e)[0]));for(const e of t)i[e.id]=r}}return i}(t.buckets,e.style),this.hasSymbolBuckets=!1;for(const t in this.buckets){const e=this.buckets[t];if(e instanceof yu){if(this.hasSymbolBuckets=!0,!i)break;e.justReloaded=!0}}if(this.hasRTLText=!1,this.hasSymbolBuckets)for(const t in this.buckets){const e=this.buckets[t];if(e instanceof yu&&e.hasRTLText){this.hasRTLText=!0,Qn.isLoading()||Qn.isLoaded()||"deferred"!==Yn()||Jn();break}}this.queryPadding=0;for(const t in this.buckets){const i=this.buckets[t];this.queryPadding=Math.max(this.queryPadding,e.style.getLayer(t).queryRadius(i))}t.imageAtlas&&(this.imageAtlas=t.imageAtlas),t.glyphAtlasImage&&(this.glyphAtlasImage=t.glyphAtlasImage),t.lineAtlas&&(this.lineAtlas=t.lineAtlas)}else this.collisionBoxArray=new qo}unloadVectorData(){if(this.hasData()){for(const t in this.buckets)this.buckets[t].destroy();this.buckets={},this.imageAtlas&&(this.imageAtlas=null),this.lineAtlas&&(this.lineAtlas=null),this.imageAtlasTexture&&this.imageAtlasTexture.destroy(),this.glyphAtlasTexture&&this.glyphAtlasTexture.destroy(),this.lineAtlasTexture&&this.lineAtlasTexture.destroy(),this._tileBoundsBuffer&&(this._tileBoundsBuffer.destroy(),this._tileBoundsIndexBuffer.destroy(),this._tileBoundsSegments.destroy(),this._tileBoundsBuffer=null),this._tileDebugBuffer&&(this._tileDebugBuffer.destroy(),this._tileDebugIndexBuffer.destroy(),this._tileDebugSegments.destroy(),this._tileDebugBuffer=null),this.latestFeatureIndex=null,this.state="unloaded"}}getBucket(t){return this.buckets[t.id]}upload(t){for(const i in this.buckets){const e=this.buckets[i];e.uploadPending()&&e.upload(t)}const e=t.gl;this.imageAtlas&&!this.imageAtlas.uploaded&&(this.imageAtlasTexture=new Lu(t,this.imageAtlas.image,e.RGBA),this.imageAtlas.uploaded=!0),this.glyphAtlasImage&&(this.glyphAtlasTexture=new Lu(t,this.glyphAtlasImage,e.ALPHA),this.glyphAtlasImage=null),this.lineAtlas&&!this.lineAtlas.uploaded&&(this.lineAtlasTexture=new Lu(t,this.lineAtlas.image,e.ALPHA),this.lineAtlas.uploaded=!0)}prepare(t){this.imageAtlas&&this.imageAtlas.patchUpdatedImages(t,this.imageAtlasTexture)}queryRenderedFeatures(t,e,i,r,n,o,s,a){return this.latestFeatureIndex&&this.latestFeatureIndex.rawTileData?this.latestFeatureIndex.query({tileResult:r,pixelPosMatrix:s,transform:o,params:n,tileTransform:this.tileTransform},t,e,i):{}}querySourceFeatures(t,e){const i=this.latestFeatureIndex;if(!i||!i.rawTileData)return;const r=i.loadVTLayers(),n=e?e.sourceLayer:"",o=r._geojsonTileLayer||r[n];if(!o)return;const s=_r(e&&e.filter),{z:a,x:l,y:c}=this.tileID.canonical,h={z:a,x:l,y:c};for(let u=0;ut)i=!1;else if(e)if(this.expirationTime=0;c--){const t=4*c,e=Hu[t+0],i=Hu[t+1],r=Hu[t+2],n=Hu[t+3],o=e+r>>1,s=i+n>>1,a=o+s-i,l=s+e-o,h=33*i+e,u=33*n+r,d=33*s+o,p=Math.hypot((Ku[2*h+0]+Ku[2*u+0])/2-Ku[2*d+0],(Ku[2*h+1]+Ku[2*u+1])/2-Ku[2*d+1])>=16;if(Yu[d]=Yu[d]||(p?1:0),c<1022){const t=33*(i+l>>1)+(e+a>>1),o=33*(n+l>>1)+(r+a>>1);Yu[d]=Yu[d]||Yu[t]||Yu[o]}}const n=new To,o=new Lo;let s=0;function a(t,e){const i=33*e+t;return 0===Ju[i]&&(n.emplaceBack(Ku[2*i+0],Ku[2*i+1],t*Rs/32,e*Rs/32),Ju[i]=++s),Ju[i]-1}function l(t,e,i,r,n,s){const c=t+i>>1,h=e+r>>1;if(Math.abs(t-n)+Math.abs(e-s)>1&&Yu[33*h+c])l(n,s,t,e,c,h),l(i,r,n,s,c,h);else{const l=a(t,e),c=a(i,r),h=a(n,s);o.emplaceBack(l,c,h)}}return l(0,0,32,32,32,0),l(32,32,0,0,0,32),{vertices:n,indices:o}}(this.tileID.canonical,e);r=t.vertices,n=t.indices}else{r=new To,n=new Lo;for(const{x:e,y:n}of i)r.emplaceBack(e,n,0,0);const t=al(r.int16,void 0,4);for(let e=0;ee[s])return null}else{const a=1/r[s];let l=(t[s]-i[s])*a,c=(e[s]-i[s])*a;if(l>c){const t=l;l=c,c=t}if(l>n&&(n=l),co)return null}return n}function sd(t,e,i,r,n,o,s,a,l,c,h){const u=r-t,d=n-e,p=o-i,f=s-t,m=a-e,_=l-i,g=h[1]*_-h[2]*m,y=h[2]*f-h[0]*_,x=h[0]*m-h[1]*f,v=u*g+d*y+p*x;if(Math.abs(v)<1e-15)return null;const b=1/v,w=c[0]-t,T=c[1]-e,E=c[2]-i,S=(w*g+T*y+E*x)*b;if(S<0||S>1)return null;const A=T*p-E*d,I=E*u-w*p,M=w*d-T*u,C=(h[0]*A+h[1]*I+h[2]*M)*b;return C<0||S+C>1?null:(f*A+m*I+_*M)*b}function ad(t,e,i){return(t-e)/(i-e)}function ld(t,e,i,r,n,o,s,a,l){const c=1<{const o=r?1:0,s=(t+1)*i-o,a=e*i,l=(e+1)*i-o;n[0]=t*i,n[1]=a,n[2]=s,n[3]=l};let s=new nd(r);const a=[];for(let l=0;l=1;r/=2){const t=i[i.length-1];s=new nd(r);for(let e=0;e0;){const{idx:a,t:p,nodex:f,nodey:m,depth:_}=d.pop();if(this.leaves[a]){ld(f,m,_,t,e,i,r,h,u);const a=1<<_,l=(f+0)/a,c=(f+1)/a,d=(m+0)/a,g=(m+1)/a,y=ud(l,d,this.dem)*s,x=ud(c,d,this.dem)*s,v=ud(c,g,this.dem)*s,b=ud(l,g,this.dem)*s,w=sd(h[0],h[1],y,u[0],h[1],x,u[0],u[1],v,n,o),T=sd(u[0],u[1],v,h[0],u[1],b,h[0],h[1],y,n,o),E=Math.min(null!==w?w:Number.MAX_VALUE,null!==T?T:Number.MAX_VALUE);if(E!==Number.MAX_VALUE)return E;{const t=Da([],n,o,p);if(hd(y,x,b,v,ad(t[0],h[0],u[0]),ad(t[1],h[1],u[1]))>=t[2])return p}continue}let g=0;for(let d=0;d=l[c[i]]&&(c.splice(i,0,d),e=!0);e||(c[g]=d),g++}}for(let t=0;t=this.dim+1||e<-1||e>=this.dim+1)throw new RangeError("out of range source coordinates for DEM data");return(e+1)*this.stride+(t+1)}_unpackMapbox(t,e,i){return(256*t*256+256*e+i)/10-1e4}_unpackTerrarium(t,e,i){return 256*t+e+i/256-32768}static pack(t,e){const i=[0,0,0,0],r=pd.getUnpackVector(e);let n=Math.floor((t+r[3])/r[2]);return i[2]=n%256,n=Math.floor(n/256),i[1]=n%256,n=Math.floor(n/256),i[0]=n,i}getPixels(){return new el({width:this.stride,height:this.stride},new Uint8Array(this.data.buffer))}backfillBorder(t,e,i){if(this.dim!==t.dim)throw new Error("dem dimension mismatch");let r=e*this.dim,n=e*this.dim+this.dim,o=i*this.dim,s=i*this.dim+this.dim;switch(e){case-1:r=n-1;break;case 1:n=r+1}switch(i){case-1:o=s-1;break;case 1:s=o+1}const a=-e*this.dim,l=-i*this.dim;for(let c=o;c{this.remove(t,n)},i)),this.data[r].push(n),this.order.push(r),this.order.length>this.max){const t=this._getAndRemoveByKey(this.order[0]);t&&this.onRemove(t)}return this}has(t){return t.wrapped().key in this.data}getAndRemove(t){return this.has(t)?this._getAndRemoveByKey(t.wrapped().key):null}_getAndRemoveByKey(t){const e=this.data[t].shift();return e.timeout&&clearTimeout(e.timeout),0===this.data[t].length&&delete this.data[t],this.order.splice(this.order.indexOf(t),1),e.value}getByKey(t){const e=this.data[t];return e?e[0].value:null}get(t){return this.has(t)?this.data[t.wrapped().key][0].value:null}remove(t,e){if(!this.has(t))return this;const i=t.wrapped().key,r=void 0===e?0:this.data[i].indexOf(e),n=this.data[i][r];return this.data[i].splice(r,1),n.timeout&&clearTimeout(n.timeout),0===this.data[i].length&&delete this.data[i],this.onRemove(n.value),this.order.splice(this.order.indexOf(i),1),this}setMaxSize(t){for(this.max=t;this.order.length>this.max;){const t=this._getAndRemoveByKey(this.order[0]);t&&this.onRemove(t)}return this}filter(t){const e=[];for(const i in this.data)for(const r of this.data[i])t(r.value)||e.push(r);for(const i of e)this.remove(i.value.tileID,i)}}class md{constructor(t,e,i){this.func=t,this.mask=e,this.range=i}}md.ReadOnly=!1,md.ReadWrite=!0,md.disabled=new md(519,md.ReadOnly,[0,1]);class _d{constructor(t,e,i,r,n,o){this.test=t,this.ref=e,this.mask=i,this.fail=r,this.depthFail=n,this.pass=o}}_d.disabled=new _d({func:519,mask:0},0,0,7680,7680,7680);class gd{constructor(t,e,i){this.blendFunction=t,this.blendColor=e,this.mask=i}}gd.Replace=[1,0],gd.disabled=new gd(gd.Replace,ue.transparent,[!1,!1,!1,!1]),gd.unblended=new gd(gd.Replace,ue.transparent,[!0,!0,!0,!0]),gd.alphaBlended=new gd([1,771],ue.transparent,[!0,!0,!0,!0]);class yd{constructor(t,e,i){this.enable=t,this.mode=e,this.frontFace=i}}yd.disabled=new yd(!1,1029,2305),yd.backCCW=new yd(!0,1029,2305),yd.backCW=new yd(!0,1029,2304),yd.frontCW=new yd(!0,1028,2304),yd.frontCCW=new yd(!0,1028,2305);class xd extends Ot{constructor(t,e,i){super(),this.id=t,this._onlySymbols=i,e.on("data",t=>{"source"===t.dataType&&"metadata"===t.sourceDataType&&(this._sourceLoaded=!0),this._sourceLoaded&&!this._paused&&"source"===t.dataType&&"content"===t.sourceDataType&&(this.reload(),this.transform&&this.update(this.transform))}),e.on("error",()=>{this._sourceErrored=!0}),this._source=e,this._tiles={},this._cache=new fd(0,this._unloadTile.bind(this)),this._timers={},this._cacheTimers={},this._maxTileCacheSize=null,this._loadedParentTiles={},this._coveredTiles={},this._state=new rd}onAdd(t){this.map=t,this._maxTileCacheSize=t?t._maxTileCacheSize:null}loaded(){if(this._sourceErrored)return!0;if(!this._sourceLoaded)return!1;if(!this._source.loaded())return!1;for(const t in this._tiles){const e=this._tiles[t];if("loaded"!==e.state&&"errored"!==e.state)return!1}return!0}getSource(){return this._source}pause(){this._paused=!0}resume(){if(!this._paused)return;const t=this._shouldReloadOnResume;this._paused=!1,this._shouldReloadOnResume=!1,t&&this.reload(),this.transform&&this.update(this.transform)}_loadTile(t,e){return t.isSymbolTile=this._onlySymbols,this._source.loadTile(t,e)}_unloadTile(t){if(this._source.unloadTile)return this._source.unloadTile(t,()=>{})}_abortTile(t){if(this._source.abortTile)return this._source.abortTile(t,()=>{})}serialize(){return this._source.serialize()}prepare(t){this._source.prepare&&this._source.prepare(),this._state.coalesceChanges(this._tiles,this.map?this.map.painter:null);for(const e in this._tiles){const i=this._tiles[e];i.upload(t),i.prepare(this.map.style.imageManager)}}getIds(){return x(this._tiles).map(t=>t.tileID).sort(vd).map(t=>t.key)}getRenderableIds(t){const e=[];for(const i in this._tiles)this._isIdRenderable(+i,t)&&e.push(this._tiles[i]);return t?e.sort((t,e)=>{const i=t.tileID,r=e.tileID,o=new n(i.canonical.x,i.canonical.y)._rotate(this.transform.angle),s=new n(r.canonical.x,r.canonical.y)._rotate(this.transform.angle);return i.overscaledZ-r.overscaledZ||s.y-o.y||s.x-o.x}).map(t=>t.tileID.key):e.map(t=>t.tileID).sort(vd).map(t=>t.key)}hasRenderableParent(t){const e=this.findLoadedParent(t,0);return!!e&&this._isIdRenderable(e.tileID.key)}_isIdRenderable(t,e){return this._tiles[t]&&this._tiles[t].hasData()&&!this._coveredTiles[t]&&(e||!this._tiles[t].holdingForFade())}reload(){if(this._paused)this._shouldReloadOnResume=!0;else{this._cache.reset();for(const t in this._tiles)"errored"!==this._tiles[t].state&&this._reloadTile(+t,"reloading")}}_reloadTile(t,e){const i=this._tiles[t];i&&("loading"!==i.state&&(i.state=e),this._loadTile(i,this._tileLoaded.bind(this,i,t,e)))}_tileLoaded(t,e,i,r){if(r)return t.state="errored",void(404!==r.status?this._source.fire(new Ft(r,{tile:t})):this.update(this.transform));t.timeAdded=G.now(),"expired"===i&&(t.refreshedUponExpiration=!0),this._setTileReloadTimer(e,t),"raster-dem"===this.getSource().type&&t.dem&&this._backfillDEM(t),this._state.initializeTileState(t,this.map?this.map.painter:null),this._source.fire(new Rt("data",{dataType:"source",tile:t,coord:t.tileID,sourceCacheId:this.id}))}_backfillDEM(t){const e=this.getRenderableIds();for(let r=0;r1||(Math.abs(i)>1&&(1===Math.abs(i+n)?i+=n:1===Math.abs(i-n)&&(i-=n)),e.dem&&t.dem&&(t.dem.backfillBorder(e.dem,i,r),t.neighboringTiles&&t.neighboringTiles[o]&&(t.neighboringTiles[o].backfilled=!0)))}}getTile(t){return this.getTileByID(t.key)}getTileByID(t){return this._tiles[t]}_retainLoadedChildren(t,e,i,r){for(const n in this._tiles){let o=this._tiles[n];if(r[n]||!o.hasData()||o.tileID.overscaledZ<=e||o.tileID.overscaledZ>i)continue;let s=o.tileID;for(;o&&o.tileID.overscaledZ>e+1;){const t=o.tileID.scaledTo(o.tileID.overscaledZ-1);o=this._tiles[t.key],o&&o.hasData()&&(s=t)}let a=s;for(;a.overscaledZ>e;)if(a=a.scaledTo(a.overscaledZ-1),t[a.key]){r[s.key]=s;break}}}findLoadedParent(t,e){if(t.key in this._loadedParentTiles){const i=this._loadedParentTiles[t.key];return i&&i.tileID.overscaledZ>=e?i:null}for(let i=t.overscaledZ-1;i>=e;i--){const e=t.scaledTo(i),r=this._getLoadedTile(e);if(r)return r}}_getLoadedTile(t){const e=this._tiles[t.key];return e&&e.hasData()?e:this._cache.getByKey(this._source.reparseOverscaled?t.wrapped().key:t.canonical.key)}updateCacheSize(t,e){e=e||this._source.tileSize;const i=Math.ceil(t.width/e)+1,r=Math.ceil(t.height/e)+1,n=Math.floor(i*r*5),o="number"==typeof this._maxTileCacheSize?Math.min(this._maxTileCacheSize,n):n;this._cache.setMaxSize(o)}handleWrapJump(t){const e=Math.round((t-(void 0===this._prevLng?t:this._prevLng))/360);if(this._prevLng=t,e){const t={};for(const i in this._tiles){const r=this._tiles[i];r.tileID=r.tileID.unwrapTo(r.tileID.wrap+e),t[r.tileID.key]=r}this._tiles=t;for(const e in this._timers)clearTimeout(this._timers[e]),delete this._timers[e];for(const e in this._tiles)this._setTileReloadTimer(+e,this._tiles[e])}}update(t,e,i){if(this.transform=t,!this._sourceLoaded||this._paused||this.transform.freezeTileCoverage)return;if(this.usedForTerrain&&!i)return;let r;this.updateCacheSize(t,e),this.handleWrapJump(this.transform.center.lng),this._coveredTiles={},this.used||this.usedForTerrain?this._source.tileID?r=t.getVisibleUnwrappedCoordinates(this._source.tileID).map(t=>new Zu(t.canonical.z,t.wrap,t.canonical.z,t.canonical.x,t.canonical.y)):(r=t.coveringTiles({tileSize:e||this._source.tileSize,minzoom:this._source.minzoom,maxzoom:this._source.maxzoom,roundZoom:this._source.roundZoom&&!i,reparseOverscaled:this._source.reparseOverscaled,isTerrainDEM:this.usedForTerrain}),this._source.hasTile&&(r=r.filter(t=>this._source.hasTile(t)))):r=[];const n=this._updateRetainedTiles(r);if(bd(this._source.type)&&0!==r.length){const t={},e={},i=Object.keys(n);for(const r of i){const i=n[r],o=this._tiles[r];if(!o||o.fadeEndTime&&o.fadeEndTime<=G.now())continue;const s=this.findLoadedParent(i,Math.max(i.overscaledZ-xd.maxOverzooming,this._source.minzoom));s&&(this._addTile(s.tileID),t[s.tileID.key]=s.tileID),e[r]=i}const o=r[r.length-1].overscaledZ;for(const r in this._tiles){const t=this._tiles[r];if(n[r]||!t.hasData())continue;let i=t.tileID;for(;i.overscaledZ>o;){i=i.scaledTo(i.overscaledZ-1);const o=this._tiles[i.key];if(o&&o.hasData()&&e[i.key]){n[r]=t.tileID;break}}}for(const r in t)n[r]||(this._coveredTiles[r]=!0,n[r]=t[r])}for(const s in n)this._tiles[s].clearFadeHold();const o=function(t,e){const i=[];for(const r in t)r in e||i.push(r);return i}(this._tiles,n);for(const s of o){const t=this._tiles[s];t.hasSymbolBuckets&&!t.holdingForFade()?t.setHoldDuration(this.map._fadeDuration):t.hasSymbolBuckets&&!t.symbolFadeFinished()||this._removeTile(+s)}this._updateLoadedParentTileCache(),this._onlySymbols&&this._source.afterUpdate&&this._source.afterUpdate()}releaseSymbolFadeTiles(){for(const t in this._tiles)this._tiles[t].holdingForFade()&&this._removeTile(+t)}_updateRetainedTiles(t){const e={};if(0===t.length)return e;const i={},r=t.reduce((t,e)=>Math.min(t,e.overscaledZ),1/0),n=t[0].overscaledZ,o=Math.max(n-xd.maxOverzooming,this._source.minzoom),s=Math.max(n+xd.maxUnderzooming,this._source.minzoom),a={};for(const l of t){const t=this._addTile(l);e[l.key]=l,t.hasData()||r=this._source.maxzoom){const t=l.children(this._source.maxzoom)[0],i=this.getTile(t);if(i&&i.hasData()){e[t.key]=t;continue}}else{const t=l.children(this._source.maxzoom);if(e[t[0].key]&&e[t[1].key]&&e[t[2].key]&&e[t[3].key])continue}let r=t.wasRequested();for(let n=l.overscaledZ-1;n>=o;--n){const o=l.scaledTo(n);if(i[o.key])break;if(i[o.key]=!0,t=this.getTile(o),!t&&r&&(t=this._addTile(o)),t&&(e[o.key]=o,r=t.wasRequested(),t.hasData()))break}}return e}_updateLoadedParentTileCache(){this._loadedParentTiles={};for(const t in this._tiles){const e=[];let i,r=this._tiles[t].tileID;for(;r.overscaledZ>0;){if(r.key in this._loadedParentTiles){i=this._loadedParentTiles[r.key];break}e.push(r.key);const t=r.scaledTo(r.overscaledZ-1);if(i=this._getLoadedTile(t),i)break;r=t}for(const t of e)this._loadedParentTiles[t]=i}}_addTile(t){let e=this._tiles[t.key];if(e)return e;e=this._cache.getAndRemove(t),e&&(this._setTileReloadTimer(t.key,e),e.tileID=t,this._state.initializeTileState(e,this.map?this.map.painter:null),this._cacheTimers[t.key]&&(clearTimeout(this._cacheTimers[t.key]),delete this._cacheTimers[t.key],this._setTileReloadTimer(t.key,e)));const i=Boolean(e);if(!i){const i=this.map?this.map.painter:null;e=new id(t,this._source.tileSize*t.overscaleFactor(),this.transform.tileZoom,i,"raster"===this._source.type||"raster-dem"===this._source.type),this._loadTile(e,this._tileLoaded.bind(this,e,t.key,e.state))}return e?(e.uses++,this._tiles[t.key]=e,i||this._source.fire(new Rt("dataloading",{tile:e,coord:e.tileID,dataType:"source"})),e):null}_setTileReloadTimer(t,e){t in this._timers&&(clearTimeout(this._timers[t]),delete this._timers[t]);const i=e.getExpiryTimeout();i&&(this._timers[t]=setTimeout(()=>{this._reloadTile(t,"expired"),delete this._timers[t]},i))}_removeTile(t){const e=this._tiles[t];e&&(e.uses--,delete this._tiles[t],this._timers[t]&&(clearTimeout(this._timers[t]),delete this._timers[t]),e.uses>0||(e.hasData()&&"reloading"!==e.state?this._cache.add(e.tileID,e,e.getExpiryTimeout()):(e.aborted=!0,this._abortTile(e),this._unloadTile(e))))}clearTiles(){this._shouldReloadOnResume=!1,this._paused=!1;for(const t in this._tiles)this._removeTile(+t);this._source._clear&&this._source._clear(),this._cache.reset()}tilesIn(t,e,i){const r=[],n=this.transform;if(!n)return r;for(const o in this._tiles){const s=this._tiles[o];if(i&&s.clearQueryDebugViz(),s.holdingForFade())continue;const a=t.containsTile(s,n,e);a&&r.push(a)}return r}getVisibleCoordinates(t){const e=this.getRenderableIds(t).map(t=>this._tiles[t].tileID);for(const i of e)i.projMatrix=this.transform.calculateProjMatrix(i.toUnwrapped());return e}hasTransition(){if(this._source.hasTransition())return!0;if(bd(this._source.type))for(const t in this._tiles){const e=this._tiles[t];if(void 0!==e.fadeEndTime&&e.fadeEndTime>=G.now())return!0}return!1}setFeatureState(t,e,i){this._state.updateState(t=t||"_geojsonTileLayer",e,i)}removeFeatureState(t,e,i){this._state.removeFeatureState(t=t||"_geojsonTileLayer",e,i)}getFeatureState(t,e){return this._state.getState(t=t||"_geojsonTileLayer",e)}setDependencies(t,e,i){const r=this._tiles[t];r&&r.setDependencies(e,i)}reloadTilesForDependencies(t,e){for(const i in this._tiles)this._tiles[i].hasDependency(t,e)&&this._reloadTile(+i,"reloading");this._cache.filter(i=>!i.hasDependency(t,e))}}function vd(t,e){const i=Math.abs(2*t.wrap)-+(t.wrap<0),r=Math.abs(2*e.wrap)-+(e.wrap<0);return t.overscaledZ-e.overscaledZ||r-i||e.canonical.y-t.canonical.y||e.canonical.x-t.canonical.x}function bd(t){return"raster"===t||"image"===t||"video"===t}xd.maxOverzooming=10,xd.maxUnderzooming=3;class wd{constructor(t,e,i){this._demTile=t,this._dem=this._demTile.dem,this._scale=e,this._offset=i}static create(t,e,i){const r=i||t.findDEMTileFor(e);if(!r||!r.dem)return;const n=r.dem,o=r.tileID,s=1<=0&&i[3]>=0&&a.insert(s,i[0],i[1],i[2],i[3])}}loadVTLayers(){if(!this.vtLayers){this.vtLayers=new ic.VectorTile(new jc(this.rawTileData)).layers,this.sourceLayerCoder=new $u(this.vtLayers?Object.keys(this.vtLayers).sort():["_geojsonTileLayer"]),this.vtFeatures={};for(const t in this.vtLayers)this.vtFeatures[t]=[]}return this.vtLayers}query(t,e,i,r){this.loadVTLayers();const n=t.params||{},o=_r(n.filter),s=t.tileResult,a=t.transform,l=s.bufferedTilespaceBounds,c=this.grid.query(l.min.x,l.min.y,l.max.x,l.max.y,(t,e,i,r)=>ma(s.bufferedTilespaceGeometry,t,e,i,r));c.sort(Sd);let h=null;a.elevation&&c.length>0&&(h=wd.create(a.elevation,this.tileID));const u={};let d;for(let p=0;p(f||(f=ea(e,this.tileID.canonical,t.tileTransform)),i.queryIntersectsFeature(s,e,r,f,this.z,t.transform,t.pixelPosMatrix,h,n)))}return u}loadMatchingFeature(t,e,i,r,n,o,s,a,l){const{featureIndex:c,bucketIndex:h,sourceLayerIndex:u,layoutVertexArrayOffset:d}=e,p=this.bucketLayerIDs[h];if(r&&!function(t,e){for(let i=0;i=0)return!0;return!1}(r,p))return;const f=this.sourceLayerCoder.decode(u),m=this.vtLayers[f].feature(c);if(i.needGeometry){const t=ia(m,!0);if(!i.filter(new to(this.tileID.overscaledZ),t,this.tileID.canonical))return}else if(!i.filter(new to(this.tileID.overscaledZ),m))return;const _=this.getId(m,f);for(let g=0;g{const s=e instanceof lo?e.get(o):null;return s&&s.evaluate?s.evaluate(i,r,n):s})}function Sd(t,e){return e-t}tn("FeatureIndex",Td,{omit:["rawTileData","sourceLayerCoder"]});class Ad{constructor(t){const e={},i=[];for(const s in t){const r=t[s],n=e[s]={};for(const t in r.glyphs){const e=r.glyphs[+t];if(!e||0===e.bitmap.width||0===e.bitmap.height)continue;const o=e.metrics.localGlyph?2:1,s={x:0,y:0,w:e.bitmap.width+2*o,h:e.bitmap.height+2*o};i.push(s),n[t]=s}}const{w:r,h:n}=uh(i),o=new tl({width:r||1,height:n||1});for(const s in t){const i=t[s];for(const t in i.glyphs){const r=i.glyphs[+t];if(!r||0===r.bitmap.width||0===r.bitmap.height)continue;const n=e[s][t],a=r.metrics.localGlyph?2:1;tl.copy(r.bitmap,o,{x:0,y:0},{x:n.x+a,y:n.y+a},r.bitmap)}}this.image=o,this.positions=e}}tn("GlyphAtlas",Ad);class Id{constructor(t){this.tileID=new Zu(t.tileID.overscaledZ,t.tileID.wrap,t.tileID.canonical.z,t.tileID.canonical.x,t.tileID.canonical.y),this.tileZoom=t.tileZoom,this.uid=t.uid,this.zoom=t.zoom,this.canonical=t.tileID.canonical,this.pixelRatio=t.pixelRatio,this.tileSize=t.tileSize,this.source=t.source,this.overscaling=this.tileID.overscaleFactor(),this.showCollisionBoxes=t.showCollisionBoxes,this.collectResourceTiming=!!t.collectResourceTiming,this.returnDependencies=!!t.returnDependencies,this.promoteId=t.promoteId,this.enableTerrain=!!t.enableTerrain,this.isSymbolTile=t.isSymbolTile,t.projection&&(this.tileTransform=Vu(t.tileID.canonical,t.projection))}parse(t,e,i,r,n){this.status="parsing",this.data=t,this.collisionBoxArray=new qo;const o=new $u(Object.keys(t.layers).sort()),s=new Td(this.tileID,this.promoteId);s.bucketLayerIDs=[];const a={},l=new Bu(256,256),c={featureIndex:s,iconDependencies:{},patternDependencies:{},glyphDependencies:{},lineAtlas:l,availableImages:i},h=e.familiesBySource[this.source];for(const x in h){const e=t.layers[x];if(!e)continue;let r=!1,n=!1;for(const t of h[x])"symbol"===t[0].type?r=!0:n=!0;if(!0===this.isSymbolTile&&!r)continue;if(!1===this.isSymbolTile&&!n)continue;1===e.version&&P(`Vector tile source "${this.source}" layer "${x}" does not use vector tile spec v2 and therefore may have some rendering errors.`);const l=o.encode(x),u=[];for(let t=0;t=e.maxzoom||"none"!==e.visibility&&(Md(t,this.zoom,i),(a[e.id]=e.createBucket({index:s.bucketLayerIDs.length,layers:t,zoom:this.zoom,canonical:this.canonical,pixelRatio:this.pixelRatio,overscaling:this.overscaling,collisionBoxArray:this.collisionBoxArray,sourceLayerIndex:l,sourceID:this.source,enableTerrain:this.enableTerrain,availableImages:i})).populate(u,c,this.tileID.canonical,this.tileTransform),s.bucketLayerIDs.push(t.map(t=>t.id)))}}let u,d,p,f;l.trim();const m={type:"maybePrepare",isSymbolTile:this.isSymbolTile,zoom:this.zoom},_=M(c.glyphDependencies,t=>Object.keys(t).map(Number));Object.keys(_).length?r.send("getGlyphs",{uid:this.uid,stacks:_},(t,e)=>{u||(u=t,d=e,v.call(this))},void 0,!1,m):d={};const g=Object.keys(c.iconDependencies);g.length?r.send("getImages",{icons:g,source:this.source,tileID:this.tileID,type:"icons"},(t,e)=>{u||(u=t,p=e,v.call(this))},void 0,!1,m):p={};const y=Object.keys(c.patternDependencies);function v(){if(u)return n(u);if(d&&p&&f){const t=new Ad(d),e=new ph(p,f);for(const r in a){const n=a[r];n instanceof yu?(Md(n.layers,this.zoom,i),iu(n,d,t.positions,p,e.iconPositions,this.showCollisionBoxes,i,this.tileID.canonical,this.tileZoom)):n.hasPattern&&(n instanceof vc||n instanceof jl||n instanceof ac)&&(Md(n.layers,this.zoom,i),n.addFeatures(c,this.tileID.canonical,e.patternPositions,i))}this.status="done",n(null,{buckets:x(a).filter(t=>!t.isEmpty()),featureIndex:s,collisionBoxArray:this.collisionBoxArray,glyphAtlasImage:t.image,lineAtlas:l,imageAtlas:e,glyphMap:this.returnDependencies?d:null,iconMap:this.returnDependencies?p:null,glyphPositions:this.returnDependencies?t.positions:null})}}y.length?r.send("getImages",{icons:y,source:this.source,tileID:this.tileID,type:"patterns"},(t,e)=>{u||(u=t,f=e,v.call(this))},void 0,!1,m):f={},v.call(this)}}function Md(t,e,i){const r=new to(e);for(const n of t)n.recalculate(r,i)}class Cd{constructor(t){this.entries={},this.scheduler=t}request(t,e,i,r){const n=this.entries[t]=this.entries[t]||{callbacks:[]};if(n.result){const[t,i]=n.result;return this.scheduler?this.scheduler.add(()=>{r(t,i)},e):r(t,i),()=>{}}return n.callbacks.push(r),n.cancel||(n.cancel=i((i,r)=>{n.result=[i,r];for(const t of n.callbacks)this.scheduler?this.scheduler.add(()=>{t(i,r)},e):t(i,r);setTimeout(()=>delete this.entries[t],3e3)})),()=>{n.result||(n.callbacks=n.callbacks.filter(t=>t!==r),n.callbacks.length||(n.cancel(),delete this.entries[t]))}}}function zd(t,e,i){const r=JSON.stringify(t.request);return t.data&&(this.deduped.entries[r]={result:[null,t.data]}),this.deduped.request(r,{type:"parseTile",isSymbolTile:t.isSymbolTile,zoom:t.tileZoom},e=>{const r=At(t.request,(t,r,n,o)=>{t?e(t):r&&e(null,{vectorTile:i?void 0:new ic.VectorTile(new jc(r)),rawData:r,cacheControl:n,expires:o})});return()=>{r.cancel(),e()}},e)}var kd={name:"albers",range:[4,7],center:[-96,37.5],parallels:[29.5,45.5],conic:!0,initializeConstants(){if(this.constants&&Za(this.parallels,this.constants.parallels))return;const t=Math.sin(h(this.parallels[0])),e=(t+Math.sin(h(this.parallels[1])))/2,i=1+t*(2*e-t),r=Math.sqrt(i)/e;this.constants={n:e,c:i,r0:r,parallels:this.parallels}},project(t,e){this.initializeConstants();const i=h(t-this.center[0]),r=h(e),{n:n,c:o,r0:s}=this.constants,a=Math.sqrt(o-2*n*Math.sin(r))/n;return{x:a*Math.sin(i*n),y:a*Math.cos(i*n)-s}},unproject(t,e){this.initializeConstants();const{n:i,c:r,r0:n}=this.constants,o=n+e;let s=Math.atan2(t,Math.abs(o))*Math.sign(o);o*i<0&&(s-=Math.PI*Math.sign(t)*Math.sign(o));const a=h(this.center[0])*i;s=g(s,-Math.PI-a,Math.PI-a);const l=u(s/i)+this.center[0],c=Math.asin(_((r-(t*t+o*o)*i*i)/(2*i),-1,1)),d=_(u(c),-85.051129,Ws);return new Us(l,d)}};const Pd=1.340264,Dd=-.081106,Ld=893e-6,Bd=.003796,Rd=Math.sqrt(3)/2;var Fd={name:"equalEarth",center:[0,0],range:[3.5,7],project(t,e){e=e/180*Math.PI,t=t/180*Math.PI;const i=Math.asin(Rd*Math.sin(e)),r=i*i,n=r*r*r;return{x:.5*(t*Math.cos(i)/(Rd*(Pd+3*Dd*r+n*(7*Ld+9*Bd*r)))/Math.PI+.5),y:1-.5*(i*(Pd+Dd*r+n*(Ld+Bd*r))/Math.PI+1)}},unproject(t,e){t=(2*t-.5)*Math.PI;let i=e=(2*(1-e)-1)*Math.PI,r=i*i,n=r*r*r;for(let c,h,u,d=0;d<12&&(h=i*(Pd+Dd*r+n*(Ld+Bd*r))-e,u=Pd+3*Dd*r+n*(7*Ld+9*Bd*r),c=h/u,i=_(i-c,-Math.PI/3,Math.PI/3),r=i*i,n=r*r*r,!(Math.abs(c)<1e-12));++d);const o=Rd*t*(Pd+3*Dd*r+n*(7*Ld+9*Bd*r))/Math.cos(i),s=Math.asin(Math.sin(i)/Rd),a=_(180*o/Math.PI,-180,180),l=_(180*s/Math.PI,-85.051129,Ws);return new Us(a,l)}},Od={name:"equirectangular",wrap:!0,center:[0,0],range:[3.5,7],project:(t,e)=>({x:.5+t/360,y:.5-e/360}),unproject(t,e){const i=360*(t-.5),r=_(360*(.5-e),-85.051129,Ws);return new Us(i,r)}};const Ud=Math.PI/2;function Vd(t){return Math.tan((Ud+t)/2)}var Nd={name:"lambertConformalConic",range:[3.5,7],center:[0,30],parallels:[30,30],conic:!0,initializeConstants(){if(this.constants&&Za(this.parallels,this.constants.parallels))return;const t=h(this.parallels[0]),e=h(this.parallels[1]),i=Math.cos(t),r=t===e?Math.sin(t):Math.log(i/Math.cos(e))/Math.log(Vd(e)/Vd(t)),n=i*Math.pow(Vd(t),r)/r;this.constants={n:r,f:n,parallels:this.parallels}},project(t,e){this.initializeConstants(),e=h(e),t=h(t-this.center[0]);const i=1e-6,{n:r,f:n}=this.constants;n>0?e<-Ud+i&&(e=-Ud+i):e>Ud-i&&(e=Ud-i);const o=n/Math.pow(Vd(e),r),s=o*Math.sin(r*t),a=n-o*Math.cos(r*t);return{x:.5*(s/Math.PI+.5),y:1-.5*(a/Math.PI+.5)}},unproject(t,e){this.initializeConstants(),t=(2*t-.5)*Math.PI,e=(2*(1-e)-.5)*Math.PI;const{n:i,f:r}=this.constants,n=r-e,o=Math.sign(n),s=Math.sign(i)*Math.sqrt(t*t+n*n);let a=Math.atan2(t,Math.abs(n))*o;n*i<0&&(a-=Math.PI*Math.sign(t)*o);const l=_(u(a/i)+this.center[0],-180,180),c=_(u(2*Math.atan(Math.pow(r/s,1/i))-Ud),-85.051129,Ws);return new Us(l,c)}},jd={name:"mercator",wrap:!0,center:[0,0],project:(t,e)=>({x:js(t),y:Gs(e)}),unproject(t,e){const i=qs(t),r=$s(e);return new Us(i,r)}};const Gd=h(Ws);var Zd={name:"naturalEarth",center:[0,0],range:[3.5,7],project(t,e){const i=(e=h(e))*e,r=i*i;return{x:.5*((t=h(t))*(.8707-.131979*i+r*(r*(.003971*i-.001529*r)-.013791))/Math.PI+.5),y:1-.5*(e*(1.007226+i*(.015085+r*(.028874*i-.044475-.005916*r)))/Math.PI+1)}},unproject(t,e){t=(2*t-.5)*Math.PI;let i=e=(2*(1-e)-1)*Math.PI,r=25,n=0,o=i*i;do{o=i*i;const t=o*o;n=(i*(1.007226+o*(.015085+t*(.028874*o-.044475-.005916*t)))-e)/(1.007226+o*(.045255+t*(.259866*o-.311325-.005916*11*t))),i=_(i-n,-Gd,Gd)}while(Math.abs(n)>1e-6&&--r>0);o=i*i;const s=_(u(t/(.8707+o*(o*(o*o*o*(.003971-.001529*o)-.013791)-.131979))),-180,180),a=u(i);return new Us(s,a)}};const qd=h(Ws),$d={albers:kd,equalEarth:Fd,equirectangular:Od,lambertConformalConic:Nd,mercator:jd,naturalEarth:Zd,winkelTripel:{name:"winkelTripel",center:[0,0],range:[3.5,7],project(t,e){e=h(e),t=h(t);const i=Math.cos(e),r=2/Math.PI,n=Math.acos(i*Math.cos(t/2)),o=Math.sin(n)/n,s=.5*(t*r+2*i*Math.sin(t/2)/o)||0,a=.5*(e+Math.sin(e)/o)||0;return{x:.5*(s/Math.PI+.5),y:1-.5*(a/Math.PI+1)}},unproject(t,e){let i=t=(2*t-.5)*Math.PI,r=e=(2*(1-e)-1)*Math.PI,n=25;const o=1e-6;let s=0,a=0;do{const n=Math.cos(r),o=Math.sin(r),l=2*o*n,c=o*o,h=n*n,u=Math.cos(i/2),d=Math.sin(i/2),p=2*u*d,f=d*d,m=1-h*u*u,g=m?1/m:0,y=m?Math.acos(n*u)*Math.sqrt(1/m):0,x=.5*(2*y*n*d+2*i/Math.PI)-t,v=.5*(y*o+r)-e,b=.5*g*(h*f+y*n*u*c)+1/Math.PI,w=g*(p*l/4-y*o*d),T=.125*g*(l*d-y*o*h*p),E=.5*g*(c*u+y*f*n)+.5,S=w*T-E*b;s=(v*w-x*E)/S,a=(x*T-v*b)/S,i=_(i-s,-Math.PI,Math.PI),r=_(r-a,-qd,qd)}while((Math.abs(s)>o||Math.abs(a)>o)&&--n>0);return new Us(u(i),u(r))}}};t.ARRAY_TYPE=Ta,t.AUTH_ERR_MSG=Q,t.Actor=class{constructor(t,e,i){this.target=t,this.parent=e,this.mapId=i,this.callbacks={},this.cancelCallbacks={},A(["receive"],this),this.target.addEventListener("message",this.receive,!1),this.globalScope=B()?t:s,this.scheduler=new Uu}send(t,e,i,r,n=!1,o){const s=Math.round(1e18*Math.random()).toString(36).substring(0,10);i&&(i.metadata=o,this.callbacks[s]=i);const a=N(this.globalScope)?void 0:[];return this.target.postMessage({id:s,type:t,hasCallback:!!i,targetMapId:r,mustQueue:n,sourceMapId:this.mapId,data:nn(e,a)},a),{cancel:()=>{i&&delete this.callbacks[s],this.target.postMessage({id:s,type:"",targetMapId:r,sourceMapId:this.mapId})}}}receive(t){const e=t.data,i=e.id;if(i&&(!e.targetMapId||this.mapId===e.targetMapId))if(""===e.type){const t=this.cancelCallbacks[i];delete this.cancelCallbacks[i],t&&t.cancel()}else if(e.mustQueue||B()){const t=this.callbacks[i];this.cancelCallbacks[i]=this.scheduler.add(()=>this.processTask(i,e),t&&t.metadata||{type:"message"})}else this.processTask(i,e)}processTask(t,e){if(""===e.type){const i=this.callbacks[t];delete this.callbacks[t],i&&(e.error?i(on(e.error)):i(null,on(e.data)))}else{const i=N(this.globalScope)?void 0:[],r=e.hasCallback?(e,r)=>{delete this.cancelCallbacks[t],this.target.postMessage({id:t,type:"",sourceMapId:this.mapId,error:e?nn(e):null,data:nn(r,i)},i)}:t=>{},n=on(e.data);if(this.parent[e.type])this.parent[e.type](e.sourceMapId,n,r);else if(this.parent.getWorkerSource){const t=e.type.split(".");this.parent.getWorkerSource(e.sourceMapId,t[0],n.source)[t[1]](n,r)}else r(new Error("Could not find function "+e.type))}}remove(){this.scheduler.remove(),this.target.removeEventListener("message",this.receive,!1)}},t.CanonicalTileID=ju,t.Color=ue,t.ColorMode=gd,t.CullFaceMode=yd,t.DEMData=pd,t.DataConstantProperty=co,t.DedupedRequest=Cd,t.DepthMode=md,t.EXTENT=Rs,t.Elevation=class{getAtPointOrZero(t,e=0){return this.getAtPoint(t,e)||0}getAtPoint(t,e,i=!0){null==e&&(e=null);const r=this._source();if(!r)return e;if(t.y<0||t.y>1)return e;const n=r.getSource().maxzoom,o=1<{t[2]=this.exaggeration()*n.getElevationAt(t[0],t[1],i)}),!0)}getMinMaxForTile(t){const e=this.findDEMTileFor(t);if(!e||!e.dem)return null;const i=e.dem.tree,r=e.tileID,n=1<this._skuTokenExpiresAt}transformRequest(t,e){return this._transformRequestFn&&this._transformRequestFn(t,e)||{url:t}}normalizeStyleURL(t,e){if(!tt(t))return t;const i=rt(t);return i.path="/styles/v1"+i.path,this._makeAPIURL(i,this._customAccessToken||e)}normalizeGlyphsURL(t,e){if(!tt(t))return t;const i=rt(t);return i.path="/fonts/v1"+i.path,this._makeAPIURL(i,this._customAccessToken||e)}normalizeSourceURL(t,e){if(!tt(t))return t;const i=rt(t);return i.path=`/v4/${i.authority}.json`,i.params.push("secure"),this._makeAPIURL(i,this._customAccessToken||e)}normalizeSpriteURL(t,e,i,r){const n=rt(t);return tt(t)?(n.path=`/styles/v1${n.path}/sprite${e}${i}`,this._makeAPIURL(n,this._customAccessToken||r)):(n.path+=`${e}${i}`,nt(n))}normalizeTileURL(t,e,i){if(this._isSkuTokenExpired()&&this._createSkuToken(),t&&!tt(t))return t;const r=rt(t);r.path=r.path.replace(/(\.(png|jpg)\d*)(?=$)/,`${e||i&&"raster"!==r.authority&&512===i?"@2x":""}${$.supported?".webp":"$1"}`),"raster"===r.authority?r.path=`/${q.RASTER_URL_PREFIX}${r.path}`:(r.path=r.path.replace(/^.+\/v4\//,"/"),r.path=`/${q.TILE_URL_VERSION}${r.path}`);const n=this._customAccessToken||function(t){for(const e of t){const t=e.match(/^access_token=(.*)$/);if(t)return t[1]}return null}(r.params)||q.ACCESS_TOKEN;return q.REQUIRE_ACCESS_TOKEN&&n&&this._skuToken&&r.params.push("sku="+this._skuToken),this._makeAPIURL(r,n)}canonicalizeTileURL(t,e){const i=rt(t);if(!i.path.match(/^(\/v4\/|\/raster\/v1\/)/)||!i.path.match(/\.[\w]+$/))return t;let r="mapbox://";i.path.match(/^\/raster\/v1\//)?r+="raster/"+i.path.replace(`/${q.RASTER_URL_PREFIX}/`,""):r+="tiles/"+i.path.replace(`/${q.TILE_URL_VERSION}/`,"");let n=i.params;return e&&(n=n.filter(t=>!t.match(/^access_token=/))),n.length&&(r+="?"+n.join("&")),r}canonicalizeTileset(t,e){const i=!!e&&tt(e),r=[];for(const n of t.tiles||[])et(n)?r.push(this.canonicalizeTileURL(n,i)):r.push(n);return r}_makeAPIURL(t,e){const i="See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes",r=rt(q.API_URL);if(t.protocol=r.protocol,t.authority=r.authority,"http"===t.protocol){const e=t.params.indexOf("secure");e>=0&&t.params.splice(e,1)}if("/"!==r.path&&(t.path=`${r.path}${t.path}`),!q.REQUIRE_ACCESS_TOKEN)return nt(t);if(e=e||q.ACCESS_TOKEN,!this._silenceAuthErrors){if(!e)throw new Error("An API access token is required to use Mapbox GL. "+i);if("s"===e[0])throw new Error("Use a public access token (pk.*) with Mapbox GL, not a secret access token (sk.*). "+i)}return t.params=t.params.filter(t=>-1===t.indexOf("access_token")),t.params.push("access_token="+(e||"")),nt(t)}},t.ResourceType=wt,t.SegmentVector=Bs,t.SourceCache=xd,t.StencilMode=_d,t.StructArrayLayout1ui2=No,t.StructArrayLayout2f1f2i16=Po,t.StructArrayLayout2i4=wo,t.StructArrayLayout2ui4=Vo,t.StructArrayLayout3f12=So,t.StructArrayLayout3ui6=Lo,t.StructArrayLayout4i8=To,t.Texture=Lu,t.Tile=id,t.Transitionable=ro,t.Uniform1f=ds,t.Uniform1i=class extends us{constructor(t,e){super(t,e),this.current=0}set(t){this.current!==t&&(this.current=t,this.gl.uniform1i(this.location,t))}},t.Uniform2f=class extends us{constructor(t,e){super(t,e),this.current=[0,0]}set(t){t[0]===this.current[0]&&t[1]===this.current[1]||(this.current=t,this.gl.uniform2f(this.location,t[0],t[1]))}},t.Uniform3f=class extends us{constructor(t,e){super(t,e),this.current=[0,0,0]}set(t){t[0]===this.current[0]&&t[1]===this.current[1]&&t[2]===this.current[2]||(this.current=t,this.gl.uniform3f(this.location,t[0],t[1],t[2]))}},t.Uniform4f=ps,t.UniformColor=fs,t.UniformMatrix2f=class extends us{constructor(t,e){super(t,e),this.current=gs}set(t){for(let e=0;e<4;e++)if(t[e]!==this.current[e]){this.current=t,this.gl.uniformMatrix2fv(this.location,!1,t);break}}},t.UniformMatrix3f=class extends us{constructor(t,e){super(t,e),this.current=_s}set(t){for(let e=0;e<9;e++)if(t[e]!==this.current[e]){this.current=t,this.gl.uniformMatrix3fv(this.location,!1,t);break}}},t.UniformMatrix4f=class extends us{constructor(t,e){super(t,e),this.current=ms}set(t){if(t[12]!==this.current[12]||t[0]!==this.current[0])return this.current=t,void this.gl.uniformMatrix4fv(this.location,!1,t);for(let e=1;e<16;e++)if(t[e]!==this.current[e]){this.current=t,this.gl.uniformMatrix4fv(this.location,!1,t);break}}},t.UnwrappedTileID=Gu,t.ValidationError=Vt,t.VectorTileWorkerSource=class extends Ot{constructor(t,e,i,r,n){super(),this.actor=t,this.layerIndex=e,this.availableImages=i,this.loadVectorData=n||zd,this.loading={},this.loaded={},this.deduped=new Cd(t.scheduler),this.isSpriteLoaded=r,this.scheduler=t.scheduler}loadTile(t,e){const i=t.uid,r=t&&t.request,n=r&&r.collectResourceTiming,o=this.loading[i]=new Id(t);o.abort=this.loadVectorData(t,(s,a)=>{const l=!this.loading[i];if(delete this.loading[i],l||s||!a)return o.status="done",l||(this.loaded[i]=o),e(s);const c=a.rawData,h={};a.expires&&(h.expires=a.expires),a.cacheControl&&(h.cacheControl=a.cacheControl),o.vectorTile=a.vectorTile||new ic.VectorTile(new jc(c));const u=()=>{o.parse(o.vectorTile,this.layerIndex,this.availableImages,this.actor,(t,i)=>{if(t||!i)return e(t);const o={};if(n){const t=Ou(r);t.length>0&&(o.resourceTiming=JSON.parse(JSON.stringify(t)))}e(null,v({rawTileData:c.slice(0)},i,h,o))})};this.isSpriteLoaded?u():this.once("isSpriteLoaded",()=>{this.scheduler?this.scheduler.add(u,{type:"parseTile",isSymbolTile:t.isSymbolTile,zoom:t.tileZoom}):u()}),this.loaded=this.loaded||{},this.loaded[i]=o})}reloadTile(t,e){const i=this.loaded,r=t.uid,n=this;if(i&&i[r]){const o=i[r];o.showCollisionBoxes=t.showCollisionBoxes,o.enableTerrain=!!t.enableTerrain;const s=(t,i)=>{const r=o.reloadCallback;r&&(delete o.reloadCallback,o.parse(o.vectorTile,n.layerIndex,this.availableImages,n.actor,r)),e(t,i)};"parsing"===o.status?o.reloadCallback=s:"done"===o.status&&(o.vectorTile?o.parse(o.vectorTile,this.layerIndex,this.availableImages,this.actor,s):s())}}abortTile(t,e){const i=t.uid,r=this.loading[i];r&&(r.abort&&r.abort(),delete this.loading[i]),e()}removeTile(t,e){const i=this.loaded,r=t.uid;i&&i[r]&&delete i[r],e()}},t.WritingMode=fh,t.ZoomHistory=sn,t.add=function(t,e,i){return t[0]=e[0]+i[0],t[1]=e[1]+i[1],t[2]=e[2]+i[2],t},t.addDynamicAttributes=fu,t.altitudeFromMercatorZ=Xs,t.asyncAll=y,t.bezier=f,t.bindAll=A,t.boundsAttributes=td,t.bufferConvexPolygon=function(t,e){const i=[];for(let r=0;ryt&&(t.getActor().send("enforceCacheSizeLimit",gt),bt=0)},t.clamp=_,t.clearTileCache=function(t){const e=s.caches.delete(ft);t&&e.catch(t).then(()=>t())},t.clipLine=Rh,t.clone=function(t){var e=new Ta(3);return e[0]=t[0],e[1]=t[1],e[2]=t[2],e},t.clone$1=function(t){var e=new Ta(16);return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15],e},t.clone$2=z,t.collisionCircleLayout=zc,t.config=q,t.conjugate=function(t,e){return t[0]=-e[0],t[1]=-e[1],t[2]=-e[2],t[3]=e[3],t},t.copy=function(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t},t.create=Ma,t.create$1=function(){var t=new Ta(16);return Ta!=Float32Array&&(t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=0,t[12]=0,t[13]=0,t[14]=0),t[0]=1,t[5]=1,t[10]=1,t[15]=1,t},t.create$2=Ea,t.createExpression=nr,t.createLayout=vo,t.createStyleLayer=function(t){return"custom"===t.type?new Su(t):new Mu[t.type](t)},t.cross=function(t,e,i){var r=e[0],n=e[1],o=e[2],s=i[0],a=i[1],l=i[2];return t[0]=n*l-o*a,t[1]=o*s-r*l,t[2]=r*a-n*s,t},t.degToRad=h,t.div=function(t,e,i){return t[0]=e[0]/i[0],t[1]=e[1]/i[1],t[2]=e[2]/i[2],t},t.dot=function(t,e){return t[0]*e[0]+t[1]*e[1]+t[2]*e[2]},t.dot$1=function(t,e){return t[0]*e[0]+t[1]*e[1]+t[2]*e[2]+t[3]*e[3]},t.ease=m,t.easeCubicInOut=p,t.emitValidationErrors=Wr,t.endsWith=I,t.enforceCacheSizeLimit=function(t){xt(),mt&&mt.then(e=>{e.keys().then(i=>{for(let r=0;ro&&(r+=(t[n]-o)*(t[n]-o)),e[n]{}}},t.identity=Sa,t.identity$1=ja,t.invert=function(t,e){var i=e[0],r=e[1],n=e[2],o=e[3],s=e[4],a=e[5],l=e[6],c=e[7],h=e[8],u=e[9],d=e[10],p=e[11],f=e[12],m=e[13],_=e[14],g=e[15],y=i*a-r*s,x=i*l-n*s,v=i*c-o*s,b=r*l-n*a,w=r*c-o*a,T=n*c-o*l,E=h*m-u*f,S=h*_-d*f,A=h*g-p*f,I=u*_-d*m,M=u*g-p*m,C=d*g-p*_,z=y*C-x*M+v*I+b*A-w*S+T*E;return z?(t[0]=(a*C-l*M+c*I)*(z=1/z),t[1]=(n*M-r*C-o*I)*z,t[2]=(m*T-_*w+g*b)*z,t[3]=(d*w-u*T-p*b)*z,t[4]=(l*A-s*C-c*S)*z,t[5]=(i*C-n*A+o*S)*z,t[6]=(_*v-f*T-g*x)*z,t[7]=(h*T-d*v+p*x)*z,t[8]=(s*M-a*A+c*E)*z,t[9]=(r*A-i*M-o*E)*z,t[10]=(f*w-m*v+g*y)*z,t[11]=(u*v-h*w-p*y)*z,t[12]=(a*S-s*I-l*E)*z,t[13]=(i*I-r*S+n*E)*z,t[14]=(m*x-f*b-_*y)*z,t[15]=(h*b-u*x+d*y)*z,t):null},t.isMapAuthenticated=function(t){return pt.has(t)},t.isMapboxURL=tt,t.latFromMercatorY=$s,t.len=Ua,t.length=Ca,t.length$1=function(t){return Math.hypot(t[0],t[1],t[2],t[3])},t.loadVectorTile=zd,t.makeRequest=St,t.mercatorXfromLng=js,t.mercatorYfromLat=Gs,t.mercatorZfromAltitude=Zs,t.mul=function(t,e,i){return t[0]=e[0]*i[0],t[1]=e[1]*i[1],t[2]=e[2]*i[2],t[3]=e[3]*i[3],t},t.mul$1=Ia,t.mul$2=Oa,t.multiply=Aa,t.multiply$1=Pa,t.nextPowerOfTwo=E,t.normalize=La,t.normalize$1=function(t,e){var i=e[0],r=e[1],n=e[2],o=e[3],s=i*i+r*r+n*n+o*o;return s>0&&(s=1/Math.sqrt(s)),t[0]=i*s,t[1]=r*s,t[2]=n*s,t[3]=o*s,t},t.number=ii,t.ortho=function(t,e,i,r,n,o,s){var a=1/(e-i),l=1/(r-n),c=1/(o-s);return t[0]=-2*a,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=-2*l,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=2*c,t[11]=0,t[12]=(e+i)*a,t[13]=(n+r)*l,t[14]=(s+o)*c,t[15]=1,t},t.pbf=jc,t.perspective=function(t,e,i,r,n){var o,s=1/Math.tan(e/2);return t[0]=s/i,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=s,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=-1,t[12]=0,t[13]=0,t[15]=0,null!=n&&n!==1/0?(t[10]=(n+r)*(o=1/(r-n)),t[14]=2*n*r*o):(t[10]=-1,t[14]=-2*r),t},t.pick=function(t,e){const i={};for(let r=0;rthis._layers[t.id]),i=e[0];if("none"===i.visibility)continue;const r=i.source||"";let n=this.familiesBySource[r];n||(n=this.familiesBySource[r]={});const o=i.sourceLayer||"_geojsonTileLayer";let s=n[o];s||(s=n[o]=[]),s.push(e)}}}const{ImageBitmap:n}=t.window;class o{loadTile(e,i){const{uid:r,encoding:o,rawImageData:s,padding:a,buildQuadTree:l}=e,c=n&&s instanceof n?this.getImageData(s,a):s;i(null,new t.DEMData(r,c,o,a<1,l))}getImageData(e,i){this.offscreenCanvas&&this.offscreenCanvasContext||(this.offscreenCanvas=new OffscreenCanvas(e.width,e.height),this.offscreenCanvasContext=this.offscreenCanvas.getContext("2d")),this.offscreenCanvas.width=e.width,this.offscreenCanvas.height=e.height,this.offscreenCanvasContext.drawImage(e,0,0,e.width,e.height);const r=this.offscreenCanvasContext.getImageData(-i,-i,e.width+2*i,e.height+2*i);return this.offscreenCanvasContext.clearRect(0,0,this.offscreenCanvas.width,this.offscreenCanvas.height),new t.RGBAImage({width:r.width,height:r.height},r.data)}}var s=function t(e,i){var r,n=e&&e.type;if("FeatureCollection"===n)for(r=0;r=Math.abs(a)?i-l+a:a-l+i,i=l}i+r>=0!=!!e&&t.reverse()}const c=t.vectorTile.VectorTileFeature.prototype.toGeoJSON;class h{constructor(e){this._feature=e,this.extent=t.EXTENT,this.type=e.type,this.properties=e.tags,"id"in e&&!isNaN(e.id)&&(this.id=parseInt(e.id,10))}loadGeometry(){if(1===this._feature.type){const e=[];for(const i of this._feature.geometry)e.push([new t.pointGeometry(i[0],i[1])]);return e}{const e=[];for(const i of this._feature.geometry){const r=[];for(const e of i)r.push(new t.pointGeometry(e[0],e[1]));e.push(r)}return e}}toGeoJSON(t,e,i){return c.call(this,t,e,i)}}class u{constructor(e){this.layers={_geojsonTileLayer:this},this.name="_geojsonTileLayer",this.extent=t.EXTENT,this.length=e.length,this._features=e}feature(t){return new h(this._features[t])}}var d=t.vectorTile.VectorTileFeature,p=f;function f(t,e){this.options=e||{},this.features=t,this.length=t.length}function m(t,e){this.id="number"==typeof t.id?t.id:void 0,this.type=t.type,this.rawGeometry=1===t.type?[t.geometry]:t.geometry,this.properties=t.tags,this.extent=e||4096}f.prototype.feature=function(t){return new m(this.features[t],this.options.extent)},m.prototype.loadGeometry=function(){var e=this.rawGeometry;this.geometry=[];for(var i=0;i>31}function E(t,e){for(var i=t.loadGeometry(),r=t.type,n=0,o=0,s=i.length,a=0;a>1;(function t(e,i,r,n,o,s){for(;o>n;){if(o-n>600){const a=o-n+1,l=r-n+1,c=Math.log(a),h=.5*Math.exp(2*c/3),u=.5*Math.sqrt(c*h*(a-h)/a)*(l-a/2<0?-1:1);t(e,i,r,Math.max(n,Math.floor(r-l*h/a+u)),Math.min(o,Math.floor(r+(a-l)*h/a+u)),s)}const a=i[2*r+s];let l=n,c=o;for(I(e,i,n,r),i[2*o+s]>a&&I(e,i,n,o);la;)c--}i[2*n+s]===a?I(e,i,n,c):(c++,I(e,i,c,o)),c<=r&&(n=c+1),r<=c&&(o=c-1)}})(t,e,s,r,n,o%2),A(t,e,i,r,s-1,o+1),A(t,e,i,s+1,n,o+1)}function I(t,e,i,r){M(t,i,r),M(e,2*i,2*r),M(e,2*i+1,2*r+1)}function M(t,e,i){const r=t[e];t[e]=t[i],t[i]=r}function C(t,e,i,r){const n=t-i,o=e-r;return n*n+o*o}_.fromVectorTileJs=y,_.fromGeojsonVt=function(t,e){e=e||{};var i={};for(var r in t)i[r]=new p(t[r].features,e),i[r].name=r,i[r].version=e.version,i[r].extent=e.extent;return y({layers:i})},_.GeoJSONWrapper=g;const z=t=>t[0],k=t=>t[1];class P{constructor(t,e=z,i=k,r=64,n=Float64Array){this.nodeSize=r,this.points=t;const o=t.length<65536?Uint16Array:Uint32Array,s=this.ids=new o(t.length),a=this.coords=new n(2*t.length);for(let l=0;l=i&&c<=n&&h>=r&&h<=o&&l.push(t[s]);continue}const f=Math.floor((p+d)/2);c=e[2*f],h=e[2*f+1],c>=i&&c<=n&&h>=r&&h<=o&&l.push(t[f]);const m=(u+1)%2;(0===u?i<=c:r<=h)&&(a.push(p),a.push(f-1),a.push(m)),(0===u?n>=c:o>=h)&&(a.push(f+1),a.push(d),a.push(m))}return l}(this.ids,this.coords,t,e,i,r,this.nodeSize)}within(t,e,i){return function(t,e,i,r,n,o){const s=[0,t.length-1,0],a=[],l=n*n;for(;s.length;){const c=s.pop(),h=s.pop(),u=s.pop();if(h-u<=o){for(let n=u;n<=h;n++)C(e[2*n],e[2*n+1],i,r)<=l&&a.push(t[n]);continue}const d=Math.floor((u+h)/2),p=e[2*d],f=e[2*d+1];C(p,f,i,r)<=l&&a.push(t[d]);const m=(c+1)%2;(0===c?i-n<=p:r-n<=f)&&(s.push(u),s.push(d-1),s.push(m)),(0===c?i+n>=p:r+n>=f)&&(s.push(d+1),s.push(h),s.push(m))}return a}(this.ids,this.coords,t,e,i,this.nodeSize)}}const D={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:t=>t},L=Math.fround||(B=new Float32Array(1),t=>(B[0]=+t,B[0]));var B;class R{constructor(t){this.options=Z(Object.create(D),t),this.trees=new Array(this.options.maxZoom+1)}load(t){const{log:e,minZoom:i,maxZoom:r,nodeSize:n}=this.options;e&&console.time("total time");const o=`prepare ${t.length} points`;e&&console.time(o),this.points=t;let s=[];for(let a=0;a=i;a--){const t=+Date.now();s=this._cluster(s,a),this.trees[a]=new P(s,q,$,n,Float32Array),e&&console.log("z%d: %d clusters in %dms",a,s.length,+Date.now()-t)}return e&&console.timeEnd("total time"),this}getClusters(t,e){let i=((t[0]+180)%360+360)%360-180;const r=Math.max(-90,Math.min(90,t[1]));let n=180===t[2]?180:((t[2]+180)%360+360)%360-180;const o=Math.max(-90,Math.min(90,t[3]));if(t[2]-t[0]>=360)i=-180,n=180;else if(i>n){const t=this.getClusters([i,r,180,o],e),s=this.getClusters([-180,r,n,o],e);return t.concat(s)}const s=this.trees[this._limitZoom(e)],a=s.range(N(i),j(o),N(n),j(r)),l=[];for(const c of a){const t=s.points[c];l.push(t.numPoints?U(t):this.points[t.index])}return l}getChildren(t){const e=this._getOriginId(t),i=this._getOriginZoom(t),r="No cluster with the specified id.",n=this.trees[i];if(!n)throw new Error(r);const o=n.points[e];if(!o)throw new Error(r);const s=this.options.radius/(this.options.extent*Math.pow(2,i-1)),a=n.within(o.x,o.y,s),l=[];for(const c of a){const e=n.points[c];e.parentId===t&&l.push(e.numPoints?U(e):this.points[e.index])}if(0===l.length)throw new Error(r);return l}getLeaves(t,e,i){const r=[];return this._appendLeaves(r,t,e=e||10,i=i||0,0),r}getTile(t,e,i){const r=this.trees[this._limitZoom(t)],n=Math.pow(2,t),{extent:o,radius:s}=this.options,a=s/o,l=(i-a)/n,c=(i+1+a)/n,h={features:[]};return this._addTileFeatures(r.range((e-a)/n,l,(e+1+a)/n,c),r.points,e,i,n,h),0===e&&this._addTileFeatures(r.range(1-a/n,l,1,c),r.points,n,i,n,h),e===n-1&&this._addTileFeatures(r.range(0,l,a/n,c),r.points,-1,i,n,h),h.features.length?h:null}getClusterExpansionZoom(t){let e=this._getOriginZoom(t)-1;for(;e<=this.options.maxZoom;){const i=this.getChildren(t);if(e++,1!==i.length)break;t=i[0].properties.cluster_id}return e}_appendLeaves(t,e,i,r,n){const o=this.getChildren(e);for(const s of o){const e=s.properties;if(e&&e.cluster?n+e.point_count<=r?n+=e.point_count:n=this._appendLeaves(t,e.cluster_id,i,r,n):ne&&(u+=i.numPoints||1)}if(u>h&&u>=s){let t=r.x*h,s=r.y*h,a=o&&h>1?this._map(r,!0):null;const d=(l<<5)+(e+1)+this.points.length;for(const i of c){const l=n.points[i];if(l.zoom<=e)continue;l.zoom=e;const c=l.numPoints||1;t+=l.x*c,s+=l.y*c,l.parentId=d,o&&(a||(a=this._map(r,!0)),o(a,this._map(l)))}r.parentId=d,i.push(F(t/u,s/u,d,u,a))}else if(i.push(r),u>1)for(const t of c){const r=n.points[t];r.zoom<=e||(r.zoom=e,i.push(r))}}return i}_getOriginId(t){return t-this.points.length>>5}_getOriginZoom(t){return(t-this.points.length)%32}_map(t,e){if(t.numPoints)return e?Z({},t.properties):t.properties;const i=this.points[t.index].properties,r=this.options.map(i);return e&&r===i?Z({},r):r}}function F(t,e,i,r,n){return{x:L(t),y:L(e),zoom:1/0,id:i,parentId:-1,numPoints:r,properties:n}}function O(t,e){const[i,r]=t.geometry.coordinates;return{x:L(N(i)),y:L(j(r)),zoom:1/0,index:e,parentId:-1}}function U(t){return{type:"Feature",id:t.id,properties:V(t),geometry:{type:"Point",coordinates:[(e=t.x,360*(e-.5)),G(t.y)]}};var e}function V(t){const e=t.numPoints,i=e>=1e4?Math.round(e/1e3)+"k":e>=1e3?Math.round(e/100)/10+"k":e;return Z(Z({},t.properties),{cluster:!0,cluster_id:t.id,point_count:e,point_count_abbreviated:i})}function N(t){return t/360+.5}function j(t){const e=Math.sin(t*Math.PI/180),i=.5-.25*Math.log((1+e)/(1-e))/Math.PI;return i<0?0:i>1?1:i}function G(t){const e=(180-360*t)*Math.PI/180;return 360*Math.atan(Math.exp(e))/Math.PI-90}function Z(t,e){for(const i in e)t[i]=e[i];return t}function q(t){return t.x}function $(t){return t.y}function X(t,e,i,r,n,o){var s=n-i,a=o-r;if(0!==s||0!==a){var l=((t-i)*s+(e-r)*a)/(s*s+a*a);l>1?(i=n,r=o):l>0&&(i+=s*l,r+=a*l)}return(s=t-i)*s+(a=e-r)*a}function W(t,e,i,r){var n={id:void 0===t?null:t,type:e,geometry:i,tags:r,minX:1/0,minY:1/0,maxX:-1/0,maxY:-1/0};return function(t){var e=t.geometry,i=t.type;if("Point"===i||"MultiPoint"===i||"LineString"===i)H(t,e);else if("Polygon"===i||"MultiLineString"===i)for(var r=0;r0&&(s+=r?(n*c-l*o)/2:Math.sqrt(Math.pow(l-n,2)+Math.pow(c-o,2))),n=l,o=c}var h=e.length-3;e[2]=1,function t(e,i,r,n){for(var o,s=n,a=r-i>>1,l=r-i,c=e[i],h=e[i+1],u=e[r],d=e[r+1],p=i+3;ps)o=p,s=f;else if(f===s){var m=Math.abs(p-a);mn&&(o-i>3&&t(e,i,o,n),e[o+2]=s,r-o>3&&t(e,o,r,n))}(e,0,h,i),e[h+2]=1,e.size=Math.abs(s),e.start=0,e.end=e.size}function Q(t,e,i,r){for(var n=0;n1?1:i}function it(t,e,i,r,n,o,s,a){if(r/=e,o>=(i/=e)&&s=r)return null;for(var l=[],c=0;c=i&&f=r)){var m=[];if("Point"===d||"MultiPoint"===d)rt(u,m,i,r,n);else if("LineString"===d)nt(u,m,i,r,n,!1,a.lineMetrics);else if("MultiLineString"===d)st(u,m,i,r,n,!1);else if("Polygon"===d)st(u,m,i,r,n,!0);else if("MultiPolygon"===d)for(var _=0;_=i&&s<=r&&(e.push(t[o]),e.push(t[o+1]),e.push(t[o+2]))}}function nt(t,e,i,r,n,o,s){for(var a,l,c=ot(t),h=0===n?lt:ct,u=t.start,d=0;di&&(l=h(c,p,f,_,g,i),s&&(c.start=u+a*l)):y>r?x=i&&(l=h(c,p,f,_,g,i),v=!0),x>r&&y<=r&&(l=h(c,p,f,_,g,r),v=!0),!o&&v&&(s&&(c.end=u+a*l),e.push(c),c=ot(t)),s&&(u+=a)}var b=t.length-3;p=t[b],f=t[b+1],m=t[b+2],(y=0===n?p:f)>=i&&y<=r&&at(c,p,f,m),b=c.length-3,o&&b>=3&&(c[b]!==c[0]||c[b+1]!==c[1])&&at(c,c[0],c[1],c[2]),c.length&&e.push(c)}function ot(t){var e=[];return e.size=t.size,e.start=t.start,e.end=t.end,e}function st(t,e,i,r,n,o){for(var s=0;ss.maxX&&(s.maxX=h),u>s.maxY&&(s.maxY=u)}return s}function mt(t,e,i,r){var n=e.geometry,o=e.type,s=[];if("Point"===o||"MultiPoint"===o)for(var a=0;a0&&e.size<(n?s:r))i.numPoints+=e.length/3;else{for(var a=[],l=0;ls)&&(i.numSimplified++,a.push(e[l]),a.push(e[l+1])),i.numPoints++;n&&function(t,e){for(var i=0,r=0,n=t.length,o=n-2;r0===e)for(r=0,n=t.length;r24)throw new Error("maxZoom should be in the 0-24 range");if(e.promoteId&&e.generateId)throw new Error("promoteId and generateId cannot be used together.");var r=function(t,e){var i=[];if("FeatureCollection"===t.type)for(var r=0;r1&&console.time("creation"),d=this.tiles[u]=ft(t,e,i,r,l),this.tileCoords.push({z:e,x:i,y:r}),c)){c>1&&(console.log("tile z%d-%d-%d (features: %d, points: %d, simplified: %d)",e,i,r,d.numFeatures,d.numPoints,d.numSimplified),console.timeEnd("creation"));var p="z"+e;this.stats[p]=(this.stats[p]||0)+1,this.total++}if(d.source=t,n){if(e===l.maxZoom||e===n)continue;var f=1<1&&console.time("clipping");var m,_,g,y,x,v,b=.5*l.buffer/l.extent,w=.5-b,T=.5+b,E=1+b;m=_=g=y=null,x=it(t,h,i-b,i+T,0,d.minX,d.maxX,l),v=it(t,h,i+w,i+E,0,d.minX,d.maxX,l),t=null,x&&(m=it(x,h,r-b,r+T,1,d.minY,d.maxY,l),_=it(x,h,r+w,r+E,1,d.minY,d.maxY,l),x=null),v&&(g=it(v,h,r-b,r+T,1,d.minY,d.maxY,l),y=it(v,h,r+w,r+E,1,d.minY,d.maxY,l),v=null),c>1&&console.timeEnd("clipping"),a.push(m||[],e+1,2*i,2*r),a.push(_||[],e+1,2*i,2*r+1),a.push(g||[],e+1,2*i+1,2*r),a.push(y||[],e+1,2*i+1,2*r+1)}}},gt.prototype.getTile=function(t,e,i){var r=this.options,n=r.extent,o=r.debug;if(t<0||t>24)return null;var s=1<1&&console.log("drilling down to z%d-%d-%d",t,e,i);for(var l,c=t,h=e,u=i;!l&&c>0;)c--,h=Math.floor(h/2),u=Math.floor(u/2),l=this.tiles[yt(c,h,u)];return l&&l.source?(o>1&&console.log("found parent tile z%d-%d-%d",c,h,u),o>1&&console.time("drilling down"),this.splitTile(l.source,c,h,u,t,e,i),o>1&&console.timeEnd("drilling down"),this.tiles[a]?dt(this.tiles[a],n):null):null};class vt extends t.VectorTileWorkerSource{constructor(t,e,i,r,n){super(t,e,i,r,xt),n&&(this.loadGeoJSON=n)}loadData(e,i){const r=e&&e.request,n=r&&r.collectResourceTiming;this.loadGeoJSON(e,(o,a)=>{if(o||!a)return i(o);if("object"!=typeof a)return i(new Error(`Input data given to '${e.source}' is not a valid GeoJSON object.`));{s(a,!0);try{if(e.filter){const i=t.createExpression(e.filter,{type:"boolean","property-type":"data-driven",overridable:!1,transition:!1});if("error"===i.result)throw new Error(i.value.map(t=>`${t.key}: ${t.message}`).join(", "));const r=a.features.filter(t=>i.value.evaluate({zoom:0},t));a={type:"FeatureCollection",features:r}}this._geoJSONIndex=e.cluster?new R(function({superclusterOptions:e,clusterProperties:i}){if(!i||!e)return e;const r={},n={},o={accumulated:null,zoom:0},s={properties:null},a=Object.keys(i);for(const l of a){const[e,o]=i[l],s=t.createExpression(o),a=t.createExpression("string"==typeof e?[e,["accumulated"],["get",l]]:e);r[l]=s.value,n[l]=a.value}return e.map=t=>{s.properties=t;const e={};for(const i of a)e[i]=r[i].evaluate(o,s);return e},e.reduce=(t,e)=>{s.properties=e;for(const i of a)o.accumulated=t[i],t[i]=n[i].evaluate(o,s)},e}(e)).load(a.features):function(t,e){return new gt(t,e)}(a,e.geojsonVtOptions)}catch(o){return i(o)}this.loaded={};const l={};if(n){const i=t.getPerformanceMeasurement(r);i&&(l.resourceTiming={},l.resourceTiming[e.source]=JSON.parse(JSON.stringify(i)))}i(null,l)}})}reloadTile(t,e){const i=this.loaded;return i&&i[t.uid]?super.reloadTile(t,e):this.loadTile(t,e)}loadGeoJSON(e,i){if(e.request)t.getJSON(e.request,i);else{if("string"!=typeof e.data)return i(new Error(`Input data given to '${e.source}' is not a valid GeoJSON object.`));try{return i(null,JSON.parse(e.data))}catch(t){return i(new Error(`Input data given to '${e.source}' is not a valid GeoJSON object.`))}}}getClusterExpansionZoom(t,e){try{e(null,this._geoJSONIndex.getClusterExpansionZoom(t.clusterId))}catch(t){e(t)}}getClusterChildren(t,e){try{e(null,this._geoJSONIndex.getChildren(t.clusterId))}catch(t){e(t)}}getClusterLeaves(t,e){try{e(null,this._geoJSONIndex.getLeaves(t.clusterId,t.limit,t.offset))}catch(t){e(t)}}}class bt{constructor(e){this.self=e,this.actor=new t.Actor(e,this),this.layerIndexes={},this.availableImages={},this.isSpriteLoaded={},this.projections={},this.defaultProjection=t.getProjection({name:"mercator"}),this.workerSourceTypes={vector:t.VectorTileWorkerSource,geojson:vt},this.workerSources={},this.demWorkerSources={},this.self.registerWorkerSource=(t,e)=>{if(this.workerSourceTypes[t])throw new Error(`Worker source with name "${t}" already registered.`);this.workerSourceTypes[t]=e},this.self.registerRTLTextPlugin=e=>{if(t.plugin.isParsed())throw new Error("RTL text plugin already registered.");t.plugin.applyArabicShaping=e.applyArabicShaping,t.plugin.processBidirectionalText=e.processBidirectionalText,t.plugin.processStyledBidirectionalText=e.processStyledBidirectionalText}}clearCaches(t,e,i){delete this.layerIndexes[t],delete this.availableImages[t],delete this.workerSources[t],delete this.demWorkerSources[t],i()}checkIfReady(t,e,i){i()}setReferrer(t,e){this.referrer=e}spriteLoaded(e,i){this.isSpriteLoaded[e]=i;for(const r in this.workerSources[e]){const n=this.workerSources[e][r];for(const e in n)n[e]instanceof t.VectorTileWorkerSource&&(n[e].isSpriteLoaded=i,n[e].fire(new t.Event("isSpriteLoaded")))}}setImages(t,e,i){this.availableImages[t]=e;for(const r in this.workerSources[t]){const i=this.workerSources[t][r];for(const t in i)i[t].availableImages=e}i()}enableTerrain(t,e,i){this.terrain=e,i()}setProjection(e,i){this.projections[e]=t.getProjection(i)}setLayers(t,e,i){this.getLayerIndex(t).replace(e),i()}updateLayers(t,e,i){this.getLayerIndex(t).update(e.layers,e.removedIds),i()}loadTile(e,i,r){const n=this.enableTerrain?t.extend({enableTerrain:this.terrain},i):i;n.projection=this.projections[e]||this.defaultProjection,this.getWorkerSource(e,i.type,i.source).loadTile(n,r)}loadDEMTile(e,i,r){const n=this.enableTerrain?t.extend({buildQuadTree:this.terrain},i):i;this.getDEMWorkerSource(e,i.source).loadTile(n,r)}reloadTile(e,i,r){const n=this.enableTerrain?t.extend({enableTerrain:this.terrain},i):i;n.projection=this.projections[e]||this.defaultProjection,this.getWorkerSource(e,i.type,i.source).reloadTile(n,r)}abortTile(t,e,i){this.getWorkerSource(t,e.type,e.source).abortTile(e,i)}removeTile(t,e,i){this.getWorkerSource(t,e.type,e.source).removeTile(e,i)}removeSource(t,e,i){if(!this.workerSources[t]||!this.workerSources[t][e.type]||!this.workerSources[t][e.type][e.source])return;const r=this.workerSources[t][e.type][e.source];delete this.workerSources[t][e.type][e.source],void 0!==r.removeSource?r.removeSource(e,i):i()}loadWorkerSource(t,e,i){try{this.self.importScripts(e.url),i()}catch(t){i(t.toString())}}syncRTLPluginState(e,i,r){try{t.plugin.setState(i);const e=t.plugin.getPluginURL();if(t.plugin.isLoaded()&&!t.plugin.isParsed()&&null!=e){this.self.importScripts(e);const i=t.plugin.isParsed();r(i?void 0:new Error("RTL Text Plugin failed to import scripts from "+e),i)}}catch(t){r(t.toString())}}getAvailableImages(t){let e=this.availableImages[t];return e||(e=[]),e}getLayerIndex(t){let e=this.layerIndexes[t];return e||(e=this.layerIndexes[t]=new r),e}getWorkerSource(t,e,i){return this.workerSources[t]||(this.workerSources[t]={}),this.workerSources[t][e]||(this.workerSources[t][e]={}),this.workerSources[t][e][i]||(this.workerSources[t][e][i]=new this.workerSourceTypes[e]({send:(e,i,r,n,o,s)=>{this.actor.send(e,i,r,t,o,s)},scheduler:this.actor.scheduler},this.getLayerIndex(t),this.getAvailableImages(t),this.isSpriteLoaded[t])),this.workerSources[t][e][i]}getDEMWorkerSource(t,e){return this.demWorkerSources[t]||(this.demWorkerSources[t]={}),this.demWorkerSources[t][e]||(this.demWorkerSources[t][e]=new o),this.demWorkerSources[t][e]}enforceCacheSizeLimit(e,i){t.enforceCacheSizeLimit(i)}getWorkerPerformanceMetrics(t,e,i){i(void 0,void 0)}}return"undefined"!=typeof WorkerGlobalScope&&"undefined"!=typeof self&&self instanceof WorkerGlobalScope&&(self.worker=new bt(self)),bt})),r(0,(function(t){var e=i;function i(t){return!function(t){return"undefined"==typeof window||"undefined"==typeof document?"not a browser":Array.prototype&&Array.prototype.every&&Array.prototype.filter&&Array.prototype.forEach&&Array.prototype.indexOf&&Array.prototype.lastIndexOf&&Array.prototype.map&&Array.prototype.some&&Array.prototype.reduce&&Array.prototype.reduceRight&&Array.isArray?Function.prototype&&Function.prototype.bind?Object.keys&&Object.create&&Object.getPrototypeOf&&Object.getOwnPropertyNames&&Object.isSealed&&Object.isFrozen&&Object.isExtensible&&Object.getOwnPropertyDescriptor&&Object.defineProperty&&Object.defineProperties&&Object.seal&&Object.freeze&&Object.preventExtensions?"JSON"in window&&"parse"in JSON&&"stringify"in JSON?function(){if(!("Worker"in window&&"Blob"in window&&"URL"in window))return!1;var t,e,i=new Blob([""],{type:"text/javascript"}),r=URL.createObjectURL(i);try{e=new Worker(r),t=!0}catch(e){t=!1}return e&&e.terminate(),URL.revokeObjectURL(r),t}()?"Uint8ClampedArray"in window?ArrayBuffer.isView?function(){var t=document.createElement("canvas");t.width=t.height=1;var e=t.getContext("2d");if(!e)return!1;var i=e.getImageData(0,0,1,1);return i&&i.width===t.width}()?(void 0===r[e=t&&t.failIfMajorPerformanceCaveat]&&(r[e]=function(t){var e,r=function(t){var e=document.createElement("canvas"),r=Object.create(i.webGLContextAttributes);return r.failIfMajorPerformanceCaveat=t,e.getContext("webgl",r)||e.getContext("experimental-webgl",r)}(t);if(!r)return!1;try{e=r.createShader(r.VERTEX_SHADER)}catch(t){return!1}return!(!e||r.isContextLost())&&(r.shaderSource(e,"void main() {}"),r.compileShader(e),!0===r.getShaderParameter(e,r.COMPILE_STATUS))}(e)),r[e]?document.documentMode?"insufficient ECMAScript 6 support":void 0:"insufficient WebGL support"):"insufficient Canvas/getImageData support":"insufficient ArrayBuffer support":"insufficient Uint8ClampedArray support":"insufficient worker support":"insufficient JSON support":"insufficient Object support":"insufficient Function support":"insufficent Array support";var e}(t)}var r={};function n(t,e){if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(let i=0;i{t.window.removeEventListener("click",h,!0)},0)},o.mousePos=function(t,e){const i=t.getBoundingClientRect();return u(t,i,e)},o.touchPos=function(t,e){const i=t.getBoundingClientRect(),r=[];for(let n=0;n=0?0:e.button},o.remove=function(t){t.parentNode&&t.parentNode.removeChild(t)};class p{constructor(t,e){this.pos=t,this.dir=e}intersectsPlane(e,i,r){const n=t.dot(i,this.dir);if(Math.abs(n)<1e-6)return!1;const o=t.dot(t.sub(t.create(),e,this.pos),i)/n,s=t.scaleAndAdd(t.create(),this.pos,this.dir,o);return t.copy(r,s),!0}}class f{constructor(t,e){this.points=t,this.planes=e}static fromInvProjectionMatrix(e,i,r){const n=Math.pow(2,r),o=[[-1,1,-1,1],[1,1,-1,1],[1,-1,-1,1],[-1,-1,-1,1],[-1,1,1,1],[1,1,1,1],[1,-1,1,1],[-1,-1,1,1]].map(r=>{const o=t.transformMat4([],r,e),s=1/o[3]/i*n;return t.mul(o,o,[s,s,1/o[3],s])}),s=[[0,1,2],[6,5,4],[0,3,7],[2,1,5],[3,2,6],[0,4,5]].map(e=>{const i=t.sub([],o[e[0]],o[e[1]]),r=t.sub([],o[e[2]],o[e[1]]),n=t.normalize([],t.cross([],i,r)),s=-t.dot(n,o[e[1]]);return n.concat(s)});return new f(o,s)}}class m{constructor(e,i){this.min=e,this.max=i,this.center=t.scale([],t.add([],this.min,this.max),.5)}quadrant(e){const i=[e%2==0,e<2],r=t.clone(this.min),n=t.clone(this.max);for(let t=0;t=0;if(0===s)return 0;s!==i.length&&(r=!1)}if(r)return 2;for(let t=0;t<3;t++){let i=Number.MAX_VALUE,r=-Number.MAX_VALUE;for(let n=0;nthis.max[t]-this.min[t])return 0}return 1}}function _(t){const{userImage:e}=t;return!!(e&&e.render&&e.render())&&(t.data.replace(new Uint8Array(e.data.buffer)),!0)}class g extends t.Evented{constructor(){super(),this.images={},this.updatedImages={},this.callbackDispatchedThisFrame={},this.loaded=!1,this.requestors=[],this.patterns={},this.atlasImage=new t.RGBAImage({width:1,height:1}),this.dirty=!0}isLoaded(){return this.loaded}setLoaded(t){if(this.loaded!==t&&(this.loaded=t,t)){for(const{ids:t,callback:e}of this.requestors)this._notify(t,e);this.requestors=[]}}getImage(t){return this.images[t]}addImage(t,e){this._validate(t,e)&&(this.images[t]=e)}_validate(e,i){let r=!0;return this._validateStretch(i.stretchX,i.data&&i.data.width)||(this.fire(new t.ErrorEvent(new Error(`Image "${e}" has invalid "stretchX" value`))),r=!1),this._validateStretch(i.stretchY,i.data&&i.data.height)||(this.fire(new t.ErrorEvent(new Error(`Image "${e}" has invalid "stretchY" value`))),r=!1),this._validateContent(i.content,i)||(this.fire(new t.ErrorEvent(new Error(`Image "${e}" has invalid "content" value`))),r=!1),r}_validateStretch(t,e){if(!t)return!0;let i=0;for(const r of t){if(r[0]{this.ready=!0})}broadcast(e,i,r){t.asyncAll(this.actors,(t,r)=>{t.send(e,i,r)},r=r||function(){})}getActor(){return this.currentActor=(this.currentActor+1)%this.actors.length,this.actors[this.currentActor]}remove(){this.actors.forEach(t=>{t.remove()}),this.actors=[],this.workerPool.release(this.id)}}function z(e,i,r){return i*(t.EXTENT/(e.tileSize*Math.pow(2,r-e.tileID.overscaledZ)))}C.Actor=t.Actor;class k{constructor(t,e,i,r){this.screenBounds=t,this.cameraPoint=e,this._screenRaycastCache={},this._cameraRaycastCache={},this.isAboveHorizon=i,this.screenGeometry=this.bufferedScreenGeometry(0),this.screenGeometryMercator=this.screenGeometry.map(t=>r.pointCoordinate3D(t)),this.cameraGeometry=this.bufferedCameraGeometry(0)}static createFromScreenPoints(e,i){let r,n;if(e instanceof t.pointGeometry||"number"==typeof e[0]){const o=t.pointGeometry.convert(e);r=[t.pointGeometry.convert(e)],n=i.isPointAboveHorizon(o)}else{const o=t.pointGeometry.convert(e[0]),s=t.pointGeometry.convert(e[1]);r=[o,s],n=t.polygonizeBounds(o,s).every(t=>i.isPointAboveHorizon(t))}return new k(r,i.getCameraPoint(),n,i)}isPointQuery(){return 1===this.screenBounds.length}bufferedScreenGeometry(e){return t.polygonizeBounds(this.screenBounds[0],1===this.screenBounds.length?this.screenBounds[0]:this.screenBounds[1],e)}bufferedCameraGeometry(e){const i=this.screenBounds[0],r=1===this.screenBounds.length?this.screenBounds[0].add(new t.pointGeometry(1,1)):this.screenBounds[1],n=t.polygonizeBounds(i,r,0,!1);return this.cameraPoint.y>r.y&&(this.cameraPoint.x>i.x&&this.cameraPoint.x=r.x?n[2]=this.cameraPoint:this.cameraPoint.x<=i.x&&(n[3]=this.cameraPoint)),t.bufferConvexPolygon(n,e)}containsTile(e,i,r){const n=e.queryPadding+1,o=e.tileID.wrap,s=r?this._bufferedCameraMercator(n,i).map(i=>t.getTilePoint(e.tileTransform,i,o)):this._bufferedScreenMercator(n,i).map(i=>t.getTilePoint(e.tileTransform,i,o)),a=this.screenGeometryMercator.map(i=>t.getTileVec3(e.tileTransform,i,o)),l=a.map(e=>new t.pointGeometry(e[0],e[1])),c=i.getFreeCameraOptions().position||new t.MercatorCoordinate(0,0,0),h=t.getTileVec3(e.tileTransform,c,o),u=a.map(e=>{const i=t.sub(e,e,h);return t.normalize(i,i),new p(h,i)}),d=z(e,1,i.zoom);if(t.polygonIntersectsBox(s,0,0,t.EXTENT,t.EXTENT))return{queryGeometry:this,tilespaceGeometry:l,tilespaceRays:u,bufferedTilespaceGeometry:s,bufferedTilespaceBounds:(f=t.getBounds(s),f.min.x=t.clamp(f.min.x,0,t.EXTENT),f.min.y=t.clamp(f.min.y,0,t.EXTENT),f.max.x=t.clamp(f.max.x,0,t.EXTENT),f.max.y=t.clamp(f.max.y,0,t.EXTENT),f),tile:e,tileID:e.tileID,pixelToTileUnitsFactor:d};var f}_bufferedScreenMercator(t,e){const i=P(t);if(this._screenRaycastCache[i])return this._screenRaycastCache[i];{const r=this.bufferedScreenGeometry(t).map(t=>e.pointCoordinate3D(t));return this._screenRaycastCache[i]=r,r}}_bufferedCameraMercator(t,e){const i=P(t);if(this._cameraRaycastCache[i])return this._cameraRaycastCache[i];{const r=this.bufferedCameraGeometry(t).map(t=>e.pointCoordinate3D(t));return this._cameraRaycastCache[i]=r,r}}}function P(t){return 100*t|0}function D(e,i,r){const n=function(n,o){if(n)return r(n);if(o){const n=t.pick(t.extend(o,e),["tiles","minzoom","maxzoom","attribution","mapbox_logo","bounds","scheme","tileSize","encoding"]);o.vector_layers&&(n.vectorLayers=o.vector_layers,n.vectorLayerIds=n.vectorLayers.map(t=>t.id)),n.tiles=i.canonicalizeTileset(n,e.url),r(null,n)}};return e.url?t.getJSON(i.transformRequest(i.normalizeSourceURL(e.url),t.ResourceType.Source),n):t.exported.frame(()=>n(null,e))}class L{constructor(e,i,r){this.bounds=t.LngLatBounds.convert(this.validateBounds(e)),this.minzoom=i||0,this.maxzoom=r||24}validateBounds(t){return Array.isArray(t)&&4===t.length?[Math.max(-180,t[0]),Math.max(-90,t[1]),Math.min(180,t[2]),Math.min(90,t[3])]:[-180,-90,180,90]}contains(e){const i=Math.pow(2,e.z),r=Math.floor(t.mercatorXfromLng(this.bounds.getWest())*i),n=Math.floor(t.mercatorYfromLat(this.bounds.getNorth())*i),o=Math.ceil(t.mercatorXfromLng(this.bounds.getEast())*i),s=Math.ceil(t.mercatorYfromLat(this.bounds.getSouth())*i);return e.x>=r&&e.x=n&&e.y{this._tileJSONRequest=null,this._loaded=!0,e?this.fire(new t.ErrorEvent(e)):i&&(t.extend(this,i),i.bounds&&(this.tileBounds=new L(i.bounds,this.minzoom,this.maxzoom)),t.postTurnstileEvent(i.tiles),this.fire(new t.Event("data",{dataType:"source",sourceDataType:"metadata"})),this.fire(new t.Event("data",{dataType:"source",sourceDataType:"content"})))})}loaded(){return this._loaded}onAdd(t){this.map=t,this.load()}onRemove(){this._tileJSONRequest&&(this._tileJSONRequest.cancel(),this._tileJSONRequest=null)}serialize(){return t.extend({},this._options)}hasTile(t){return!this.tileBounds||this.tileBounds.contains(t.canonical)}loadTile(e,i){const r=t.exported.devicePixelRatio>=2,n=this.map._requestManager.normalizeTileURL(e.tileID.canonical.url(this.tiles,this.scheme),r,this.tileSize);e.request=t.getImage(this.map._requestManager.transformRequest(n,t.ResourceType.Tile),(r,n,o,s)=>{if(delete e.request,e.aborted)e.state="unloaded",i(null);else if(r)e.state="errored",i(r);else if(n){this.map._refreshExpiredTiles&&e.setExpiryData({cacheControl:o,expires:s});const r=this.map.painter.context,a=r.gl;e.texture=this.map.painter.getTileTexture(n.width),e.texture?e.texture.update(n,{useMipmap:!0}):(e.texture=new t.Texture(r,n,a.RGBA,{useMipmap:!0}),e.texture.bind(a.LINEAR,a.CLAMP_TO_EDGE),r.extTextureFilterAnisotropic&&a.texParameterf(a.TEXTURE_2D,r.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,r.extTextureFilterAnisotropicMax)),e.state="loaded",t.cacheEntryPossiblyAdded(this.dispatcher),i(null)}})}abortTile(t,e){t.request&&(t.request.cancel(),delete t.request),e()}unloadTile(t,e){t.texture&&this.map.painter.saveTileTexture(t.texture),e()}hasTransition(){return!1}}let Tt;class Et extends t.Evented{constructor(t,e,i,r){super(),this.id=t,this.dispatcher=i,this.coordinates=e.coordinates,this.type="image",this.minzoom=0,this.maxzoom=22,this.tileSize=512,this.tiles={},this._loaded=!1,this.setEventedParent(r),this.options=e}load(e,i){this._loaded=!1,this.fire(new t.Event("dataloading",{dataType:"source"})),this.url=this.options.url,t.getImage(this.map._requestManager.transformRequest(this.url,t.ResourceType.Image),(r,n)=>{this._loaded=!0,r?this.fire(new t.ErrorEvent(r)):n&&(this.image=t.exported.getImageData(n),e&&(this.coordinates=e),i&&i(),this._finishLoading())})}loaded(){return this._loaded}updateImage(t){return this.image&&t.url?(this.options.url=t.url,this.load(t.coordinates,()=>{this.texture=null}),this):this}_finishLoading(){this.map&&(this.setCoordinates(this.coordinates),this.fire(new t.Event("data",{dataType:"source",sourceDataType:"metadata"})))}onAdd(t){this.map=t,this.load()}setCoordinates(e){this.coordinates=e,delete this._boundsArray;const i=e.map(t.MercatorCoordinate.fromLngLat);return this.tileID=function(e){let i=1/0,r=1/0,n=-1/0,o=-1/0;for(const t of e)i=Math.min(i,t.x),r=Math.min(r,t.y),n=Math.max(n,t.x),o=Math.max(o,t.y);const s=Math.max(n-i,o-r),a=Math.max(0,Math.floor(-Math.log(s)/Math.LN2)),l=Math.pow(2,a);return new t.CanonicalTileID(a,Math.floor((i+n)/2*l),Math.floor((r+o)/2*l))}(i),this.minzoom=this.maxzoom=this.tileID.z,this.fire(new t.Event("data",{dataType:"source",sourceDataType:"content"})),this}_clear(){delete this._boundsArray}_makeBoundsArray(){const e=t.tileTransform(this.tileID,this.map.transform.projection),i=this.coordinates.map(i=>{const r=e.projection.project(i[0],i[1]);return t.getTilePoint(e,r)._round()});return this._boundsArray=new t.StructArrayLayout4i8,this._boundsArray.emplaceBack(i[0].x,i[0].y,0,0),this._boundsArray.emplaceBack(i[1].x,i[1].y,t.EXTENT,0),this._boundsArray.emplaceBack(i[3].x,i[3].y,0,t.EXTENT),this._boundsArray.emplaceBack(i[2].x,i[2].y,t.EXTENT,t.EXTENT),this.boundsBuffer&&(this.boundsBuffer.destroy(),delete this.boundsBuffer),this}prepare(){if(0===Object.keys(this.tiles).length||!this.image)return;const e=this.map.painter.context,i=e.gl;this._boundsArray||this._makeBoundsArray(),this.boundsBuffer||(this.boundsBuffer=e.createVertexBuffer(this._boundsArray,t.boundsAttributes.members)),this.boundsSegments||(this.boundsSegments=t.SegmentVector.simpleSegment(0,0,4,2)),this.texture||(this.texture=new t.Texture(e,this.image,i.RGBA),this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE));for(const t in this.tiles){const e=this.tiles[t];"loaded"!==e.state&&(e.state="loaded",e.texture=this.texture)}}loadTile(t,e){this.tileID&&this.tileID.equals(t.tileID.canonical)?(this.tiles[String(t.tileID.wrap)]=t,t.buckets={},e(null)):(t.state="errored",e(null))}serialize(){return{type:"image",url:this.options.url,coordinates:this.coordinates}}hasTransition(){return!1}}const St={vector:class extends t.Evented{constructor(e,i,r,n){if(super(),this.id=e,this.dispatcher=r,this.type="vector",this.minzoom=0,this.maxzoom=22,this.scheme="xyz",this.tileSize=512,this.reparseOverscaled=!0,this.isTileClipped=!0,this._loaded=!1,t.extend(this,t.pick(i,["url","scheme","tileSize","promoteId"])),this._options=t.extend({type:"vector"},i),this._collectResourceTiming=i.collectResourceTiming,512!==this.tileSize)throw new Error("vector tile sources must have a tileSize of 512");this.setEventedParent(n),this._tileWorkers={},this._deduped=new t.DedupedRequest}load(){this._loaded=!1,this.fire(new t.Event("dataloading",{dataType:"source"})),this._tileJSONRequest=D(this._options,this.map._requestManager,(e,i)=>{this._tileJSONRequest=null,this._loaded=!0,e?this.fire(new t.ErrorEvent(e)):i&&(t.extend(this,i),i.bounds&&(this.tileBounds=new L(i.bounds,this.minzoom,this.maxzoom)),t.postTurnstileEvent(i.tiles,this.map._requestManager._customAccessToken),this.fire(new t.Event("data",{dataType:"source",sourceDataType:"metadata"})),this.fire(new t.Event("data",{dataType:"source",sourceDataType:"content"})))})}loaded(){return this._loaded}hasTile(t){return!this.tileBounds||this.tileBounds.contains(t.canonical)}onAdd(t){this.map=t,this.load()}setSourceProperty(t){this._tileJSONRequest&&this._tileJSONRequest.cancel(),t();const e=this.map.style._getSourceCaches(this.id);for(const i of e)i.clearTiles();this.load()}setTiles(t){return this.setSourceProperty(()=>{this._options.tiles=t}),this}setUrl(t){return this.setSourceProperty(()=>{this.url=t,this._options.url=t}),this}onRemove(){this._tileJSONRequest&&(this._tileJSONRequest.cancel(),this._tileJSONRequest=null)}serialize(){return t.extend({},this._options)}loadTile(e,i){const r=this.map._requestManager.normalizeTileURL(e.tileID.canonical.url(this.tiles,this.scheme)),n={request:this.map._requestManager.transformRequest(r,t.ResourceType.Tile),data:void 0,uid:e.uid,tileID:e.tileID,tileZoom:e.tileZoom,zoom:e.tileID.overscaledZ,tileSize:this.tileSize*e.tileID.overscaleFactor(),type:this.type,source:this.id,pixelRatio:t.exported.devicePixelRatio,showCollisionBoxes:this.map.showCollisionBoxes,promoteId:this.promoteId,isSymbolTile:e.isSymbolTile};if(n.request.collectResourceTiming=this._collectResourceTiming,e.actor&&"expired"!==e.state)"loading"===e.state?e.reloadCallback=i:e.request=e.actor.send("reloadTile",n,o.bind(this));else if(e.actor=this._tileWorkers[r]=this._tileWorkers[r]||this.dispatcher.getActor(),this.dispatcher.ready)e.request=e.actor.send("loadTile",n,o.bind(this),void 0,!0);else{const i=t.loadVectorTile.call({deduped:this._deduped},n,(t,i)=>{t||!i?o.call(this,t):(n.data={cacheControl:i.cacheControl,expires:i.expires,rawData:i.rawData.slice(0)},e.actor&&e.actor.send("loadTile",n,o.bind(this),void 0,!0))},!0);e.request={cancel:i}}function o(r,n){return delete e.request,e.aborted?i(null):r&&404!==r.status?i(r):(n&&n.resourceTiming&&(e.resourceTiming=n.resourceTiming),this.map._refreshExpiredTiles&&n&&e.setExpiryData(n),e.loadVectorData(n,this.map.painter),t.cacheEntryPossiblyAdded(this.dispatcher),i(null),void(e.reloadCallback&&(this.loadTile(e,e.reloadCallback),e.reloadCallback=null)))}}abortTile(t){t.request&&(t.request.cancel(),delete t.request),t.actor&&t.actor.send("abortTile",{uid:t.uid,type:this.type,source:this.id})}unloadTile(t){t.unloadVectorData(),t.actor&&t.actor.send("removeTile",{uid:t.uid,type:this.type,source:this.id})}hasTransition(){return!1}afterUpdate(){this._tileWorkers={}}},raster:wt,"raster-dem":class extends wt{constructor(e,i,r,n){super(e,i,r,n),this.type="raster-dem",this.maxzoom=22,this._options=t.extend({type:"raster-dem"},i),this.encoding=i.encoding||"mapbox"}loadTile(e,i){const r=this.map._requestManager.normalizeTileURL(e.tileID.canonical.url(this.tiles,this.scheme),!1,this.tileSize);function n(t,r){t&&(e.state="errored",i(t)),r&&(e.dem=r,e.dem.onDeserialize(),e.needsHillshadePrepare=!0,e.needsDEMTextureUpload=!0,e.state="loaded",i(null))}e.request=t.getImage(this.map._requestManager.transformRequest(r,t.ResourceType.Tile),function(r,o,s,a){if(delete e.request,e.aborted)e.state="unloaded",i(null);else if(r)e.state="errored",i(r);else if(o){this.map._refreshExpiredTiles&&e.setExpiryData({cacheControl:s,expires:a});const i=t.window.ImageBitmap&&o instanceof t.window.ImageBitmap&&(null==Tt&&(Tt=t.window.OffscreenCanvas&&new t.window.OffscreenCanvas(1,1).getContext("2d")&&"function"==typeof t.window.createImageBitmap),Tt),r=1-(o.width-t.prevPowerOfTwo(o.width))/2;r<1||e.neighboringTiles||(e.neighboringTiles=this._getNeighboringTiles(e.tileID));const l=i?o:t.exported.getImageData(o,r),c={uid:e.uid,coord:e.tileID,source:this.id,rawImageData:l,encoding:this.encoding,padding:r};e.actor&&"expired"!==e.state||(e.actor=this.dispatcher.getActor(),e.actor.send("loadDEMTile",c,n.bind(this),void 0,!0))}}.bind(this))}_getNeighboringTiles(e){const i=e.canonical,r=Math.pow(2,i.z),n=(i.x-1+r)%r,o=0===i.x?e.wrap-1:e.wrap,s=(i.x+1+r)%r,a=i.x+1===r?e.wrap+1:e.wrap,l={};return l[new t.OverscaledTileID(e.overscaledZ,o,i.z,n,i.y).key]={backfilled:!1},l[new t.OverscaledTileID(e.overscaledZ,a,i.z,s,i.y).key]={backfilled:!1},i.y>0&&(l[new t.OverscaledTileID(e.overscaledZ,o,i.z,n,i.y-1).key]={backfilled:!1},l[new t.OverscaledTileID(e.overscaledZ,e.wrap,i.z,i.x,i.y-1).key]={backfilled:!1},l[new t.OverscaledTileID(e.overscaledZ,a,i.z,s,i.y-1).key]={backfilled:!1}),i.y+1{if(this._loaded=!0,this._pendingLoad=null,e)this.fire(new t.ErrorEvent(e));else{const e={dataType:"source",sourceDataType:this._metadataFired?"content":"metadata"};this._collectResourceTiming&&i&&i.resourceTiming&&i.resourceTiming[this.id]&&(e.resourceTiming=i.resourceTiming[this.id]),this.fire(new t.Event("data",e)),this._metadataFired=!0}this._coalesce&&(this._updateWorkerData(),this._coalesce=!1)})}loaded(){return this._loaded}loadTile(e,i){const r=e.actor?"reloadTile":"loadTile";e.actor=this.actor,e.request=this.actor.send(r,{type:this.type,uid:e.uid,tileID:e.tileID,tileZoom:e.tileZoom,zoom:e.tileID.overscaledZ,maxZoom:this.maxzoom,tileSize:this.tileSize,source:this.id,pixelRatio:t.exported.devicePixelRatio,showCollisionBoxes:this.map.showCollisionBoxes,promoteId:this.promoteId},(t,n)=>(delete e.request,e.unloadVectorData(),e.aborted?i(null):t?i(t):(e.loadVectorData(n,this.map.painter,"reloadTile"===r),i(null))),void 0,"loadTile"===r)}abortTile(t){t.request&&(t.request.cancel(),delete t.request),t.aborted=!0}unloadTile(t){t.unloadVectorData(),this.actor.send("removeTile",{uid:t.uid,type:this.type,source:this.id})}onRemove(){this._pendingLoad&&this._pendingLoad.cancel()}serialize(){return t.extend({},this._options,{type:this.type,data:this._data})}hasTransition(){return!1}},video:class extends Et{constructor(t,e,i,r){super(t,e,i,r),this.roundZoom=!0,this.type="video",this.options=e}load(){this._loaded=!1;const e=this.options;this.urls=[];for(const i of e.urls)this.urls.push(this.map._requestManager.transformRequest(i,t.ResourceType.Source).url);t.getVideo(this.urls,(e,i)=>{this._loaded=!0,e?this.fire(new t.ErrorEvent(e)):i&&(this.video=i,this.video.loop=!0,this.video.setAttribute("playsinline",""),this.video.addEventListener("playing",()=>{this.map.triggerRepaint()}),this.map&&this.video.play(),this._finishLoading())})}pause(){this.video&&this.video.pause()}play(){this.video&&this.video.play()}seek(e){if(this.video){const i=this.video.seekable;ei.end(0)?this.fire(new t.ErrorEvent(new t.ValidationError("sources."+this.id,null,`Playback for this video can be set only between the ${i.start(0)} and ${i.end(0)}-second mark.`))):this.video.currentTime=e}}getVideo(){return this.video}onAdd(t){this.map||(this.map=t,this.load(),this.video&&(this.video.play(),this.setCoordinates(this.coordinates)))}prepare(){if(0===Object.keys(this.tiles).length||this.video.readyState<2)return;const e=this.map.painter.context,i=e.gl;this._boundsArray||this._makeBoundsArray(),this.boundsBuffer||(this.boundsBuffer=e.createVertexBuffer(this._boundsArray,t.boundsAttributes.members)),this.boundsSegments||(this.boundsSegments=t.SegmentVector.simpleSegment(0,0,4,2)),this.texture?this.video.paused||(this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE),i.texSubImage2D(i.TEXTURE_2D,0,0,0,i.RGBA,i.UNSIGNED_BYTE,this.video)):(this.texture=new t.Texture(e,this.video,i.RGBA),this.texture.bind(i.LINEAR,i.CLAMP_TO_EDGE));for(const t in this.tiles){const e=this.tiles[t];"loaded"!==e.state&&(e.state="loaded",e.texture=this.texture)}}serialize(){return{type:"video",urls:this.urls,coordinates:this.coordinates}}hasTransition(){return this.video&&!this.video.paused}},image:Et,canvas:class extends Et{constructor(e,i,r,n){super(e,i,r,n),i.coordinates?Array.isArray(i.coordinates)&&4===i.coordinates.length&&!i.coordinates.some(t=>!Array.isArray(t)||2!==t.length||t.some(t=>"number"!=typeof t))||this.fire(new t.ErrorEvent(new t.ValidationError("sources."+e,null,'"coordinates" property must be an array of 4 longitude/latitude array pairs'))):this.fire(new t.ErrorEvent(new t.ValidationError("sources."+e,null,'missing required property "coordinates"'))),i.animate&&"boolean"!=typeof i.animate&&this.fire(new t.ErrorEvent(new t.ValidationError("sources."+e,null,'optional "animate" property must be a boolean value'))),i.canvas?"string"==typeof i.canvas||i.canvas instanceof t.window.HTMLCanvasElement||this.fire(new t.ErrorEvent(new t.ValidationError("sources."+e,null,'"canvas" must be either a string representing the ID of the canvas element from which to read, or an HTMLCanvasElement instance'))):this.fire(new t.ErrorEvent(new t.ValidationError("sources."+e,null,'missing required property "canvas"'))),this.options=i,this.animate=void 0===i.animate||i.animate}load(){this._loaded=!0,this.canvas||(this.canvas=this.options.canvas instanceof t.window.HTMLCanvasElement?this.options.canvas:t.window.document.getElementById(this.options.canvas)),this.width=this.canvas.width,this.height=this.canvas.height,this._hasInvalidDimensions()?this.fire(new t.ErrorEvent(new Error("Canvas dimensions cannot be less than or equal to zero."))):(this.play=function(){this._playing=!0,this.map.triggerRepaint()},this.pause=function(){this._playing&&(this.prepare(),this._playing=!1)},this._finishLoading())}getCanvas(){return this.canvas}onAdd(t){this.map=t,this.load(),this.canvas&&this.animate&&this.play()}onRemove(){this.pause()}prepare(){let e=!1;if(this.canvas.width!==this.width&&(this.width=this.canvas.width,e=!0),this.canvas.height!==this.height&&(this.height=this.canvas.height,e=!0),this._hasInvalidDimensions())return;if(0===Object.keys(this.tiles).length)return;const i=this.map.painter.context,r=i.gl;this._boundsArray||this._makeBoundsArray(),this.boundsBuffer||(this.boundsBuffer=i.createVertexBuffer(this._boundsArray,t.boundsAttributes.members)),this.boundsSegments||(this.boundsSegments=t.SegmentVector.simpleSegment(0,0,4,2)),this.texture?(e||this._playing)&&this.texture.update(this.canvas,{premultiply:!0}):this.texture=new t.Texture(i,this.canvas,r.RGBA,{premultiply:!0});for(const t in this.tiles){const e=this.tiles[t];"loaded"!==e.state&&(e.state="loaded",e.texture=this.texture)}}serialize(){return{type:"canvas",coordinates:this.coordinates}}hasTransition(){return this._playing}_hasInvalidDimensions(){for(const t of[this.canvas.width,this.canvas.height])if(isNaN(t)||t<=0)return!0;return!1}}},At=function(e,i,r,n){const o=new St[i.type](e,i,r,n);if(o.id!==e)throw new Error(`Expected Source id to be ${e} instead of ${o.id}`);return t.bindAll(["load","abort","unload","serialize","prepare"],o),o};function It(e,i){const r=t.identity([]);return t.scale$1(r,r,[.5*e.width,.5*-e.height,1]),t.translate(r,r,[1,-1,0]),t.multiply(r,r,e.calculateProjMatrix(i.toUnwrapped()))}function Mt(t,e,i,r,n,o,s,a=!1){const l=t.tilesIn(r,s,a);l.sort(zt);const c=[];for(const u of l)c.push({wrappedTileID:u.tile.tileID.wrapped().key,queryResults:u.tile.queryRenderedFeatures(e,i,t._state,u,n,o,It(t.transform,u.tile.tileID),a)});const h=function(t){const e={},i={};for(const r of t){const t=r.queryResults,n=r.wrappedTileID,o=i[n]=i[n]||{};for(const i in t){const r=t[i],n=o[i]=o[i]||{},s=e[i]=e[i]||[];for(const t of r)n[t.featureIndex]||(n[t.featureIndex]=!0,s.push(t))}}return e}(c);for(const u in h)h[u].forEach(e=>{const i=e.feature,r=t.getFeatureState(i.layer["source-layer"],i.id);i.source=i.layer.source,i.layer["source-layer"]&&(i.sourceLayer=i.layer["source-layer"]),i.state=r});return h}function Ct(t,e){const i=t.getRenderableIds().map(e=>t.getTileByID(e)),r=[],n={};for(let o=0;o{t.terminate()}),this.workers=null)}isPreloaded(){return!!this.active[Pt]}numActive(){return Object.keys(this.active).length}}let Lt;function Bt(){return Lt||(Lt=new Dt),Lt}function Rt(e,i){const r={};for(const t in e)"ref"!==t&&(r[t]=e[t]);return t.refProperties.forEach(t=>{t in i&&(r[t]=i[t])}),r}function Ft(t){t=t.slice();const e=Object.create(null);for(let i=0;i0?(n-s)/a:0;return this.points[o].mult(1-l).add(this.points[i].mult(l))}}class Xt{constructor(t,e,i){const r=this.boxCells=[],n=this.circleCells=[];this.xCellCount=Math.ceil(t/i),this.yCellCount=Math.ceil(e/i);for(let o=0;othis.width||r<0||e>this.height)return!n&&[];const s=[];if(t<=0&&e<=0&&this.width<=i&&this.height<=r){if(n)return!0;for(let t=0;t0:s}_queryCircle(t,e,i,r,n){const o=t-i,s=t+i,a=e-i,l=e+i;if(s<0||o>this.width||l<0||a>this.height)return!r&&[];const c=[];return this._forEachCell(o,a,s,l,this._queryCellCircle,c,{hitTest:r,circle:{x:t,y:e,radius:i},seenUids:{box:{},circle:{}}},n),r?c.length>0:c}query(t,e,i,r,n){return this._query(t,e,i,r,!1,n)}hitTest(t,e,i,r,n){return this._query(t,e,i,r,!0,n)}hitTestCircle(t,e,i,r){return this._queryCircle(t,e,i,!0,r)}_queryCell(t,e,i,r,n,o,s,a){const l=s.seenUids,c=this.boxCells[n];if(null!==c){const n=this.bboxes;for(const h of c)if(!l.box[h]){l.box[h]=!0;const c=4*h;if(t<=n[c+2]&&e<=n[c+3]&&i>=n[c+0]&&r>=n[c+1]&&(!a||a(this.boxKeys[h]))){if(s.hitTest)return o.push(!0),!0;o.push({key:this.boxKeys[h],x1:n[c],y1:n[c+1],x2:n[c+2],y2:n[c+3]})}}}const h=this.circleCells[n];if(null!==h){const n=this.circles;for(const c of h)if(!l.circle[c]){l.circle[c]=!0;const h=3*c;if(this._circleAndRectCollide(n[h],n[h+1],n[h+2],t,e,i,r)&&(!a||a(this.circleKeys[c]))){if(s.hitTest)return o.push(!0),!0;{const t=n[h],e=n[h+1],i=n[h+2];o.push({key:this.circleKeys[c],x1:t-i,y1:e-i,x2:t+i,y2:e+i})}}}}}_queryCellCircle(t,e,i,r,n,o,s,a){const l=s.circle,c=s.seenUids,h=this.boxCells[n];if(null!==h){const t=this.bboxes;for(const e of h)if(!c.box[e]){c.box[e]=!0;const i=4*e;if(this._circleAndRectCollide(l.x,l.y,l.radius,t[i+0],t[i+1],t[i+2],t[i+3])&&(!a||a(this.boxKeys[e])))return o.push(!0),!0}}const u=this.circleCells[n];if(null!==u){const t=this.circles;for(const e of u)if(!c.circle[e]){c.circle[e]=!0;const i=3*e;if(this._circlesCollide(t[i],t[i+1],t[i+2],l.x,l.y,l.radius)&&(!a||a(this.circleKeys[e])))return o.push(!0),!0}}}_forEachCell(t,e,i,r,n,o,s,a){const l=this._convertToXCellCoord(t),c=this._convertToYCellCoord(e),h=this._convertToXCellCoord(i),u=this._convertToYCellCoord(r);for(let d=l;d<=h;d++)for(let l=c;l<=u;l++)if(n.call(this,t,e,i,r,this.xCellCount*l+d,o,s,a))return}_convertToXCellCoord(t){return Math.max(0,Math.min(this.xCellCount-1,Math.floor(t*this.xScale)))}_convertToYCellCoord(t){return Math.max(0,Math.min(this.yCellCount-1,Math.floor(t*this.yScale)))}_circlesCollide(t,e,i,r,n,o){const s=r-t,a=n-e,l=i+o;return l*l>s*s+a*a}_circleAndRectCollide(t,e,i,r,n,o,s){const a=(o-r)/2,l=Math.abs(t-(r+a));if(l>a+i)return!1;const c=(s-n)/2,h=Math.abs(e-(n+c));if(h>c+i)return!1;if(l<=a||h<=c)return!0;const u=l-a,d=h-c;return u*u+d*d<=i*i}}const Wt=Math.tan(85*Math.PI/180);function Ht(e,i,r,n,o){const s=t.create$1();if(i){const e=d([],o);s[0]=e[0],s[1]=e[1],s[4]=e[2],s[5]=e[3],r||t.rotateZ(s,s,n.angle)}else t.multiply(s,n.labelPlaneMatrix,e);return s}function Kt(e,i,r,n,o){if(i){const i=t.clone$1(e),s=t.identity([]);return s[0]=o[0],s[1]=o[1],s[4]=o[2],s[5]=o[3],t.multiply(i,i,s),r||t.rotateZ(i,i,-n.angle),i}return n.glCoordMatrix}function Yt(e,i,r=0){const n=[e.x,e.y,r,1];r?t.transformMat4(n,n,i):ce(n,n,i);const o=n[3];return{point:new t.pointGeometry(n[0]/o,n[1]/o),signedDistanceFromCamera:o}}function Jt(t,e){return Math.min(.5+t/e*.5,1.5)}function Qt(t,e){const i=t[0]/t[3],r=t[1]/t[3];return i>=-e[0]&&i<=e[0]&&r>=-e[1]&&r<=e[1]}function te(e,i,r,n,o,s,a,l,c){const h=n?e.textSizeData:e.iconSizeData,u=t.evaluateSizeForZoom(h,r.transform.zoom),d=[256/r.width*2+1,256/r.height*2+1],p=n?e.text.dynamicLayoutVertexArray:e.icon.dynamicLayoutVertexArray;p.clear();const f=e.lineVertexArray,m=n?e.text.placedSymbolArray:e.icon.placedSymbolArray,_=r.transform.width/r.transform.height;let g=!1;for(let y=0;yMath.abs(r.x-i.x)*n?{useVertical:!0}:e.writingMode===t.WritingMode.vertical?i.yWt}(i,r,n)?1===e.flipState?{needsFlipping:!0}:null:i.x>r.x?{needsFlipping:!0}:null}function re(e,i,r,n,o,s,a,l,c,h,u,d,p,f,m){const _=i/24,g=e.lineOffsetX*_,y=e.lineOffsetY*_;let x;if(e.numGlyphs>1){const t=e.glyphStartIndex+e.numGlyphs,i=e.lineStartIndex,o=e.lineStartIndex+e.lineLength,h=ee(_,l,g,y,r,u,d,e,c,s,p,m,!1);if(!h)return{notEnoughRoom:!0};const v=Yt(h.first.point,a).point,b=Yt(h.last.point,a).point;if(n&&!r){const t=ie(e,v,b,f);if(e.flipState=t&&t.needsFlipping?1:2,t)return t}x=[h.first];for(let n=e.glyphStartIndex+1;n0?s.point:oe(d,n,i,1,o,void 0),f);if(e.flipState=a&&a.needsFlipping?1:2,a)return a}const i=se(_*l.getoffsetX(e.glyphStartIndex),g,y,r,u,d,e.segment,e.lineStartIndex,e.lineStartIndex+e.lineLength,c,s,p,m,!1,!1);if(!i)return{notEnoughRoom:!0};x=[i]}for(const v of x)t.addDynamicAttributes(h,v.point,v.angle);return{}}function ne(e,i,r){const n={x:e.x,y:e.y,z:0};if(!r)return Yt(n,i,n.z);const o=r(e);return Yt(new t.pointGeometry(n.x,n.y),i,n.z+o)}function oe(t,e,i,r,n,o){const s=ne(t.add(t.sub(e)._unit()),n,o).point,a=i.sub(s);return i.add(a._mult(r/a.mag()))}function se(e,i,r,n,o,s,a,l,c,h,u,d,p,f,m){const _=n?e-i:e+i;let g=_>0?1:-1,y=0;n&&(g*=-1,y=Math.PI),g<0&&(y+=Math.PI);let x=g>0?l+a:l+a+1,v=o,b=o,w=0,T=0;const E=Math.abs(_),S=[],A=[];let I=s;const M=()=>{const e=x-g;return 0===w?s:new t.pointGeometry(h.getx(e),h.gety(e))},C=()=>oe(M(),I,b,E-w+1,u,p);for(;w+T<=E;){if(x+=g,x=c)return null;if(b=v,S.push(v),f&&A.push(I||M()),v=d[x],void 0===v){I=new t.pointGeometry(h.getx(x),h.gety(x));const e=ne(I,u,p);v=e.signedDistanceFromCamera>0?d[x]=e.point:C()}else I=null;w+=T,T=b.dist(v)}m&&p&&(I=I||new t.pointGeometry(h.getx(x),h.gety(x)),d[x]=v=void 0===d[x]?v:C(),T=b.dist(v));const z=(E-w)/T,k=v.sub(b),P=k.mult(z)._add(b);r&&P._add(k._unit()._perp()._mult(r*g));const D=y+Math.atan2(v.y-b.y,v.x-b.x);return S.push(P),f&&(I=I||new t.pointGeometry(h.getx(x),h.gety(x)),A.push(function(e,i,r){const n=1-r;return new t.pointGeometry(e.x*n+i.x*r,e.y*n+i.y*r)}(A.length>0?A[A.length-1]:I,I,z))),{point:P,angle:D,path:S,tilePath:A}}const ae=new Float32Array([-1/0,-1/0,0,-1/0,-1/0,0,-1/0,-1/0,0,-1/0,-1/0,0]);function le(t,e){for(let i=0;i_.getAtTileOffset(f,t.x,t.y):t=>0,y=new t.pointGeometry(i.tileAnchorX,i.tileAnchorY),x=g(y),v=this.projectAndGetPerspectiveRatio(s,y.x,y.y,x,f),{perspectiveRatio:b}=v,w=(h?o/b:o*b)/t.ONE_EM,T=Yt(y,a,x).point,E=v.signedDistanceFromCamera>0?ee(w,n,i.lineOffsetX*w,i.lineOffsetY*w,!1,T,y,i,r,a,{},_&&!h?g:null,h&&!!_):null;let S=!1,A=!1,I=!0;if(E&&!v.aboveHorizon){const i=.5*d*b+p,r=new t.pointGeometry(-100,-100),n=new t.pointGeometry(this.screenRightBoundary,this.screenBottomBoundary),o=new $t,s=E.first,a=E.last;let h=[];for(let t=s.path.length-1;t>=1;t--)h.push(s.path[t]);for(let t=1;t{const i=g(eYt(t,l));h=t.some(t=>t.signedDistanceFromCamera<=0)?[]:t.map(t=>t.point)}let y=[];if(h.length>0){const e=h[0].clone(),i=h[0].clone();for(let t=1;t=r.x&&i.x<=n.x&&e.y>=r.y&&i.y<=n.y?[h]:i.xn.x||i.yn.y?[]:t.clipLine([h],r.x,r.y,n.x,n.y)}for(const t of y){o.reset(t,.25*i);let r=0;r=o.length<=.5*i?1:Math.ceil(o.paddedLength/f)+1;for(let t=0;t0){t.transformMat4(s,s,e);let l=!1;this.fogState&&o&&(l=function(e,i,r,n,o,s){const a=s.calculateFogTileMatrix(o),l=[i,r,n];return t.transformMat4$1(l,l,a),E(e,l,s.pitch,s._fov)}(this.fogState,i,r,n||0,o.toUnwrapped(),this.transform)>.9),a=s[2]>s[3]||l}else ce(s,s,e);return{point:new t.pointGeometry((s[0]/s[3]+1)/2*this.transform.width+he,(-s[1]/s[3]+1)/2*this.transform.height+he),perspectiveRatio:Math.min(.5+this.transform.cameraToCenterDistance/s[3]*.5,1.5),signedDistanceFromCamera:s[3],aboveHorizon:a}}isOffscreen(t,e,i,r){return i=this.screenRightBoundary||rthis.screenBottomBoundary}isInsideGrid(t,e,i,r){return i>=0&&t=0&&et.collisionGroupID===e}}return this.collisionGroups[t]}}function ye(e,i,r,n,o){const{horizontalAlign:s,verticalAlign:a}=t.getAnchorAlignment(e),l=-(s-.5)*i,c=-(a-.5)*r,h=t.evaluateVariableOffset(e,n);return new t.pointGeometry(l+h[0]*o,c+h[1]*o)}function xe(e,i,r,n,o){const s=new t.pointGeometry(e,i);return r&&s._rotate(n?o:-o),s}class ve{constructor(t,e,i,r,n){this.transform=t.clone(),this.collisionIndex=new ue(this.transform,n),this.placements={},this.opacities={},this.variableOffsets={},this.stale=!1,this.commitTime=0,this.fadeDuration=e,this.retainedQueryData={},this.collisionGroups=new ge(i),this.collisionCircleArrays={},this.prevPlacement=r,r&&(r.prevPlacement=void 0),this.placedOrientations={}}getBucketParts(e,i,r,n){const o=r.getBucket(i),s=r.latestFeatureIndex;if(!o||!s||i.id!==o.layerIds[0])return;const a=o.layers[0].layout,l=r.collisionBoxArray,c=Math.pow(2,this.transform.zoom-r.tileID.overscaledZ),h=r.tileSize/t.EXTENT,u=r.tileID.toUnwrapped(),d=this.transform.calculateProjMatrix(u),p="map"===a.get("text-pitch-alignment"),f="map"===a.get("text-rotation-alignment");i.compileFilter();const m=i.dynamicFilter(),_=i.dynamicFilterNeedsFeature(),g=this.transform.calculatePixelsToTileUnitsMatrix(r),y=Ht(d,p,f,this.transform,g);let x=null;if(p){const e=Kt(d,p,f,this.transform,g);x=t.multiply([],this.transform.labelPlaneMatrix,e)}let v=null;m&&r.latestFeatureIndex&&(v={unwrappedTileID:u,dynamicFilter:m,dynamicFilterNeedsFeature:_,featureIndex:r.latestFeatureIndex}),this.retainedQueryData[o.bucketInstanceId]=new _e(o.bucketInstanceId,s,o.sourceLayerIndex,o.index,r.tileID);const b={bucket:o,layout:a,posMatrix:d,textLabelPlaneMatrix:y,labelToScreenMatrix:x,clippingData:v,scale:c,textPixelRatio:h,holdingForFade:r.holdingForFade(),collisionBoxArray:l,partiallyEvaluatedTextSize:t.evaluateSizeForZoom(o.textSizeData,this.transform.zoom),partiallyEvaluatedIconSize:t.evaluateSizeForZoom(o.iconSizeData,this.transform.zoom),collisionGroup:this.collisionGroups.get(o.sourceID)};if(n)for(const t of o.sortKeyRanges){const{sortKey:i,symbolInstanceStart:r,symbolInstanceEnd:n}=t;e.push({sortKey:i,symbolInstanceStart:r,symbolInstanceEnd:n,parameters:b})}else e.push({symbolInstanceStart:0,symbolInstanceEnd:o.symbolInstances.length,parameters:b})}attemptAnchorPlacement(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m,_,g){const y=[u.textOffset0,u.textOffset1],x=ye(t,i,r,y,n),v=this.collisionIndex.placeCollisionBox(n,e,xe(x.x,x.y,o,s,this.transform.angle),h,a,l,c.predicate);if((!m||0!==this.collisionIndex.placeCollisionBox(p.getSymbolInstanceIconSize(g,this.transform.zoom,d),m,xe(x.x,x.y,o,s,this.transform.angle),h,a,l,c.predicate).box.length)&&v.box.length>0){let e;return this.prevPlacement&&this.prevPlacement.variableOffsets[u.crossTileID]&&this.prevPlacement.placements[u.crossTileID]&&this.prevPlacement.placements[u.crossTileID].text&&(e=this.prevPlacement.variableOffsets[u.crossTileID].anchor),this.variableOffsets[u.crossTileID]={textOffset:y,width:i,height:r,anchor:t,textScale:n,prevAnchor:e},this.markUsedJustification(p,t,u,f),p.allowVerticalPlacement&&(this.markUsedOrientation(p,f,u),this.placedOrientations[u.crossTileID]=f),{shift:x,placedGlyphBoxes:v}}}placeLayerBucketPart(e,i,r,n){const{bucket:o,layout:s,posMatrix:a,textLabelPlaneMatrix:l,labelToScreenMatrix:c,clippingData:h,textPixelRatio:u,holdingForFade:d,collisionBoxArray:p,partiallyEvaluatedTextSize:f,partiallyEvaluatedIconSize:m,collisionGroup:_}=e.parameters,g=s.get("text-optional"),y=s.get("icon-optional"),x=s.get("text-allow-overlap"),v=s.get("icon-allow-overlap"),b="map"===s.get("text-rotation-alignment"),w="map"===s.get("text-pitch-alignment"),T="none"!==s.get("icon-text-fit"),E="viewport-y"===s.get("symbol-z-order"),S=x&&(v||!o.hasIconData()||y),A=v&&(x||!o.hasTextData()||g);!o.collisionArrays&&p&&o.deserializeCollisionBoxes(p),r&&n&&o.updateCollisionDebugBuffers(this.transform.zoom,p);const I=(e,n,p)=>{if(h){const r={zoom:this.transform.zoom,pitch:this.transform.pitch};let n=null;if(h.dynamicFilterNeedsFeature){const t=this.retainedQueryData[o.bucketInstanceId];n=h.featureIndex.loadFeature({featureIndex:e.featureIndex,bucketIndex:t.bucketIndex,sourceLayerIndex:t.sourceLayerIndex,layoutVertexArrayOffset:0})}if(!(0,h.dynamicFilter)(r,n,this.retainedQueryData[o.bucketInstanceId].tileID.canonical,new t.pointGeometry(e.tileAnchorX,e.tileAnchorY),this.transform.calculateDistanceTileData(h.unwrappedTileID)))return this.placements[e.crossTileID]=new fe(!1,!1,!1,!0),void(i[e.crossTileID]=!0)}if(i[e.crossTileID])return;if(d)return void(this.placements[e.crossTileID]=new fe(!1,!1,!1));let E=!1,I=!1,M=!0,C=null,z={box:null,offscreen:null},k={box:null,offscreen:null},P=null,D=null,L=null,B=0,R=0,F=0;p.textFeatureIndex?B=p.textFeatureIndex:e.useRuntimeCollisionCircles&&(B=e.featureIndex),p.verticalTextFeatureIndex&&(R=p.verticalTextFeatureIndex);const O=t=>{t.tileID=this.retainedQueryData[o.bucketInstanceId].tileID,(this.transform.elevation||t.elevation)&&(t.elevation=this.transform.elevation?this.transform.elevation.getAtTileOffset(this.retainedQueryData[o.bucketInstanceId].tileID,t.tileAnchorX,t.tileAnchorY):0)},U=p.textBox;if(U){O(U);const i=i=>{let r=t.WritingMode.horizontal;if(o.allowVerticalPlacement&&!i&&this.prevPlacement){const t=this.prevPlacement.placedOrientations[e.crossTileID];t&&(this.placedOrientations[e.crossTileID]=t,r=t,this.markUsedOrientation(o,r,e))}return r},r=(i,r)=>{if(o.allowVerticalPlacement&&e.numVerticalGlyphVertices>0&&p.verticalTextBox){for(const e of o.writingModes)if(e===t.WritingMode.vertical?(z=r(),k=z):z=i(),z&&z.box&&z.box.length)break}else z=i()};if(s.get("text-variable-anchor")){let l=s.get("text-variable-anchor");if(this.prevPlacement&&this.prevPlacement.variableOffsets[e.crossTileID]){const t=this.prevPlacement.variableOffsets[e.crossTileID];l.indexOf(t.anchor)>0&&(l=l.filter(e=>e!==t.anchor),l.unshift(t.anchor))}const c=(t,i,r)=>{const s=o.getSymbolInstanceTextSize(f,e,this.transform.zoom,n),c=(t.x2-t.x1)*s+2*t.padding,h=(t.y2-t.y1)*s+2*t.padding,d=T&&!v?i:null;d&&O(d);let p={box:[],offscreen:!1};const g=x?2*l.length:l.length;for(let y=0;y=l.length,e,n,o,r,d,f,m);if(i&&(p=i.placedGlyphBoxes,p&&p.box&&p.box.length)){E=!0,C=i.shift;break}}return p};r(()=>c(U,p.iconBox,t.WritingMode.horizontal),()=>{const i=p.verticalTextBox;return i&&O(i),o.allowVerticalPlacement&&!(z&&z.box&&z.box.length)&&e.numVerticalGlyphVertices>0&&i?c(i,p.verticalIconBox,t.WritingMode.vertical):{box:null,offscreen:null}}),z&&(E=z.box,M=z.offscreen);const h=i(z&&z.box);if(!E&&this.prevPlacement){const t=this.prevPlacement.variableOffsets[e.crossTileID];t&&(this.variableOffsets[e.crossTileID]=t,this.markUsedJustification(o,t.anchor,e,h))}}else{const s=(i,r)=>{const s=o.getSymbolInstanceTextSize(f,e,this.transform.zoom,n),l=this.collisionIndex.placeCollisionBox(s,i,new t.pointGeometry(0,0),x,u,a,_.predicate);return l&&l.box&&l.box.length&&(this.markUsedOrientation(o,r,e),this.placedOrientations[e.crossTileID]=r),l};r(()=>s(U,t.WritingMode.horizontal),()=>{const i=p.verticalTextBox;return o.allowVerticalPlacement&&e.numVerticalGlyphVertices>0&&i?(O(i),s(i,t.WritingMode.vertical)):{box:null,offscreen:null}}),i(z&&z.box&&z.box.length)}}if(P=z,E=P&&P.box&&P.box.length>0,M=P&&P.offscreen,e.useRuntimeCollisionCircles){const i=o.text.placedSymbolArray.get(e.centerJustifiedTextSymbolIndex>=0?e.centerJustifiedTextSymbolIndex:e.verticalPlacedTextSymbolIndex),n=t.evaluateSizeForFeature(o.textSizeData,f,i),h=s.get("text-padding");D=this.collisionIndex.placeCollisionCircles(x,i,o.lineVertexArray,o.glyphOffsetArray,n,a,l,c,r,w,_.predicate,e.collisionCircleDiameter*n/t.ONE_EM,h,this.retainedQueryData[o.bucketInstanceId].tileID),E=x||D.circles.length>0&&!D.collisionDetected,M=M&&D.offscreen}if(p.iconFeatureIndex&&(F=p.iconFeatureIndex),p.iconBox){const e=e=>{O(e);const i=T&&C?xe(C.x,C.y,b,w,this.transform.angle):new t.pointGeometry(0,0),r=o.getSymbolInstanceIconSize(m,this.transform.zoom,n);return this.collisionIndex.placeCollisionBox(r,e,i,v,u,a,_.predicate)};k&&k.box&&k.box.length&&p.verticalIconBox?(L=e(p.verticalIconBox),I=L.box.length>0):(L=e(p.iconBox),I=L.box.length>0),M=M&&L.offscreen}const V=g||0===e.numHorizontalGlyphVertices&&0===e.numVerticalGlyphVertices,N=y||0===e.numIconVertices;if(V||N?N?V||(I=I&&E):E=I&&E:I=E=I&&E,E&&P&&P.box&&this.collisionIndex.insertCollisionBox(P.box,s.get("text-ignore-placement"),o.bucketInstanceId,k&&k.box&&R?R:B,_.ID),I&&L&&this.collisionIndex.insertCollisionBox(L.box,s.get("icon-ignore-placement"),o.bucketInstanceId,F,_.ID),D&&(E&&this.collisionIndex.insertCollisionCircles(D.circles,s.get("text-ignore-placement"),o.bucketInstanceId,B,_.ID),r)){const t=o.bucketInstanceId;let e=this.collisionCircleArrays[t];void 0===e&&(e=this.collisionCircleArrays[t]=new me);for(let i=0;i=0;--e){const i=t[e];I(o.symbolInstances.get(i),i,o.collisionArrays[i])}}else for(let t=e.symbolInstanceStart;t=0&&(e.text.placedSymbolArray.get(t).crossTileID=o>=0&&t!==o?0:r.crossTileID)}markUsedOrientation(e,i,r){const n=i===t.WritingMode.horizontal||i===t.WritingMode.horizontalOnly?i:0,o=i===t.WritingMode.vertical?i:0,s=[r.leftJustifiedTextSymbolIndex,r.centerJustifiedTextSymbolIndex,r.rightJustifiedTextSymbolIndex];for(const t of s)e.text.placedSymbolArray.get(t).placedOrientation=n;r.verticalPlacedTextSymbolIndex&&(e.text.placedSymbolArray.get(r.verticalPlacedTextSymbolIndex).placedOrientation=o)}commit(t){this.commitTime=t,this.zoomAtLastRecencyCheck=this.transform.zoom;const e=this.prevPlacement;let i=!1;this.prevZoomAdjustment=e?e.zoomAdjustment(this.transform.zoom):0;const r=e?e.symbolFadeChange(t):1,n=e?e.opacities:{},o=e?e.variableOffsets:{},s=e?e.placedOrientations:{};for(const a in this.placements){const t=this.placements[a],e=n[a];e?(this.opacities[a]=new pe(e,r,t.text,t.icon,null,t.clipped),i=i||t.text!==e.text.placed||t.icon!==e.icon.placed):(this.opacities[a]=new pe(null,r,t.text,t.icon,t.skipFade,t.clipped),i=i||t.text||t.icon)}for(const a in n){const t=n[a];if(!this.opacities[a]){const e=new pe(t,r,!1,!1);e.isHidden()||(this.opacities[a]=e,i=i||t.text.placed||t.icon.placed)}}for(const a in o)this.variableOffsets[a]||!this.opacities[a]||this.opacities[a].isHidden()||(this.variableOffsets[a]=o[a]);for(const a in s)this.placedOrientations[a]||!this.opacities[a]||this.opacities[a].isHidden()||(this.placedOrientations[a]=s[a]);i?this.lastPlacementChangeTime=t:"number"!=typeof this.lastPlacementChangeTime&&(this.lastPlacementChangeTime=e?e.lastPlacementChangeTime:t)}updateLayerOpacities(t,e){const i={};for(const r of e){const e=r.getBucket(t);e&&r.latestFeatureIndex&&t.id===e.layerIds[0]&&this.updateBucketOpacities(e,i,r.collisionBoxArray)}}updateBucketOpacities(e,i,r){e.hasTextData()&&e.text.opacityVertexArray.clear(),e.hasIconData()&&e.icon.opacityVertexArray.clear(),e.hasIconCollisionBoxData()&&e.iconCollisionBox.collisionVertexArray.clear(),e.hasTextCollisionBoxData()&&e.textCollisionBox.collisionVertexArray.clear();const n=e.layers[0].layout,o=!!e.layers[0].dynamicFilter(),s=new pe(null,0,!1,!1,!0),a=n.get("text-allow-overlap"),l=n.get("icon-allow-overlap"),c=n.get("text-variable-anchor"),h="map"===n.get("text-rotation-alignment"),u="map"===n.get("text-pitch-alignment"),d="none"!==n.get("icon-text-fit"),p=new pe(null,0,a&&(l||!e.hasIconData()||n.get("icon-optional")),l&&(a||!e.hasTextData()||n.get("text-optional")),!0);!e.collisionArrays&&r&&(e.hasIconCollisionBoxData()||e.hasTextCollisionBoxData())&&e.deserializeCollisionBoxes(r);const f=(t,e,i)=>{for(let r=0;r0,y=this.placedOrientations[r.crossTileID],x=y===t.WritingMode.vertical,v=y===t.WritingMode.horizontal||y===t.WritingMode.horizontalOnly;if(n>0||a>0){const t=Ce(_.text);f(e.text,n,x?ze:t),f(e.text,a,v?ze:t);const i=_.text.isHidden();[r.rightJustifiedTextSymbolIndex,r.centerJustifiedTextSymbolIndex,r.leftJustifiedTextSymbolIndex].forEach(t=>{t>=0&&(e.text.placedSymbolArray.get(t).hidden=i||x?1:0)}),r.verticalPlacedTextSymbolIndex>=0&&(e.text.placedSymbolArray.get(r.verticalPlacedTextSymbolIndex).hidden=i||v?1:0);const o=this.variableOffsets[r.crossTileID];o&&this.markUsedJustification(e,o.anchor,r,y);const s=this.placedOrientations[r.crossTileID];s&&(this.markUsedJustification(e,"left",r,s),this.markUsedOrientation(e,s,r))}if(g){const t=Ce(_.icon);r.placedIconSymbolIndex>=0&&(f(e.icon,r.numIconVertices,x?ze:t),e.icon.placedSymbolArray.get(r.placedIconSymbolIndex).hidden=_.icon.isHidden()),r.verticalPlacedIconSymbolIndex>=0&&(f(e.icon,r.numVerticalIconVertices,v?ze:t),e.icon.placedSymbolArray.get(r.verticalPlacedIconSymbolIndex).hidden=_.icon.isHidden())}if(e.hasIconCollisionBoxData()||e.hasTextCollisionBoxData()){const i=e.collisionArrays[m];if(i){let r=new t.pointGeometry(0,0),n=!0;if(i.textBox||i.verticalTextBox){if(c){const t=this.variableOffsets[l];t?(r=ye(t.anchor,t.width,t.height,t.textOffset,t.textScale),h&&r._rotate(u?this.transform.angle:-this.transform.angle)):n=!1}o&&(n=!_.clipped),i.textBox&&be(e.textCollisionBox.collisionVertexArray,_.text.placed,!n||x,r.x,r.y),i.verticalTextBox&&be(e.textCollisionBox.collisionVertexArray,_.text.placed,!n||v,r.x,r.y)}const s=n&&Boolean(!v&&i.verticalIconBox);i.iconBox&&be(e.iconCollisionBox.collisionVertexArray,_.icon.placed,s,d?r.x:0,d?r.y:0),i.verticalIconBox&&be(e.iconCollisionBox.collisionVertexArray,_.icon.placed,!s,d?r.x:0,d?r.y:0)}}}if(e.sortFeatures(this.transform.angle),this.retainedQueryData[e.bucketInstanceId]&&(this.retainedQueryData[e.bucketInstanceId].featureSortOrder=e.featureSortOrder),e.hasTextData()&&e.text.opacityVertexBuffer&&e.text.opacityVertexBuffer.updateData(e.text.opacityVertexArray),e.hasIconData()&&e.icon.opacityVertexBuffer&&e.icon.opacityVertexBuffer.updateData(e.icon.opacityVertexArray),e.hasIconCollisionBoxData()&&e.iconCollisionBox.collisionVertexBuffer&&e.iconCollisionBox.collisionVertexBuffer.updateData(e.iconCollisionBox.collisionVertexArray),e.hasTextCollisionBoxData()&&e.textCollisionBox.collisionVertexBuffer&&e.textCollisionBox.collisionVertexBuffer.updateData(e.textCollisionBox.collisionVertexArray),e.bucketInstanceId in this.collisionCircleArrays){const t=this.collisionCircleArrays[e.bucketInstanceId];e.placementInvProjMatrix=t.invProjMatrix,e.placementViewportMatrix=t.viewportMatrix,e.collisionCircleArray=t.circles,delete this.collisionCircleArrays[e.bucketInstanceId]}}symbolFadeChange(t){return 0===this.fadeDuration?1:(t-this.commitTime)/this.fadeDuration+this.prevZoomAdjustment}zoomAdjustment(t){return Math.max(0,(this.transform.zoom-t)/1.5)}hasTransitions(t){return this.stale||t-this.lastPlacementChangeTimet}setStale(){this.stale=!0}}function be(t,e,i,r,n){t.emplaceBack(e?1:0,i?1:0,r||0,n||0),t.emplaceBack(e?1:0,i?1:0,r||0,n||0),t.emplaceBack(e?1:0,i?1:0,r||0,n||0),t.emplaceBack(e?1:0,i?1:0,r||0,n||0)}const we=Math.pow(2,25),Te=Math.pow(2,24),Ee=Math.pow(2,17),Se=Math.pow(2,16),Ae=Math.pow(2,9),Ie=Math.pow(2,8),Me=Math.pow(2,1);function Ce(t){if(0===t.opacity&&!t.placed)return 0;if(1===t.opacity&&t.placed)return 4294967295;const e=t.placed?1:0,i=Math.floor(127*t.opacity);return i*we+e*Te+i*Ee+e*Se+i*Ae+e*Ie+i*Me+e}const ze=0;class ke{constructor(t){this._sortAcrossTiles="viewport-y"!==t.layout.get("symbol-z-order")&&void 0!==t.layout.get("symbol-sort-key").constantOr(1),this._currentTileIndex=0,this._currentPartIndex=0,this._seenCrossTileIDs={},this._bucketParts=[]}continuePlacement(t,e,i,r,n){const o=this._bucketParts;for(;this._currentTileIndext.sortKey-e.sortKey));this._currentPartIndex{const e=t.exported.now()-n;return!this._forceFullPlacement&&e>2};for(;this._currentPlacementIndex>=0;){const t=i[e[this._currentPlacementIndex]],n=this.placement.collisionIndex.transform.zoom;if("symbol"===t.type&&(!t.minzoom||t.minzoom<=n)&&(!t.maxzoom||t.maxzoom>n)){if(this._inProgressLayer||(this._inProgressLayer=new ke(t)),this._inProgressLayer.continuePlacement(r[t.source],this.placement,this._showCollisionBoxes,t,o))return;delete this._inProgressLayer}this._currentPlacementIndex--}this._done=!0}commit(t){return this.placement.commit(t),this.placement}}const De=512/t.EXTENT/2;class Le{constructor(t,e,i){this.tileID=t,this.indexedSymbolInstances={},this.bucketInstanceId=i;for(let r=0;rt.overscaledZ)for(const n in i){const o=i[n];o.tileID.isChildOf(t)&&o.findMatches(e.symbolInstances,t,r)}else{const o=i[t.scaledTo(Number(n)).key];o&&o.findMatches(e.symbolInstances,t,r)}}for(let n=0;n{e[t]=!0});for(const i in this.layerIndexes)e[i]||delete this.layerIndexes[i]}}const Oe=(e,i)=>t.emitValidationErrors(e,i&&i.filter(t=>"source.canvas"!==t.identifier)),Ue=t.pick(Ot,["addLayer","removeLayer","setPaintProperty","setLayoutProperty","setFilter","addSource","removeSource","setLayerZoomRange","setLight","setTransition","setGeoJSONSourceData","setTerrain","setFog","setProjection"]),Ve=t.pick(Ot,["setCenter","setZoom","setBearing","setPitch"]),Ne=function(){const e={},i=t.spec.$version;for(const r in t.spec.$root){const n=t.spec.$root[r];if(n.required){let t=null;t="version"===r?i:"array"===n.type?[]:{},null!=t&&(e[r]=t)}}return e}(),je={fill:!0,line:!0,background:!0,hillshade:!0,raster:!0};class Ge extends t.Evented{constructor(e,i={}){super(),this.map=e,this.dispatcher=new C(Bt(),this),this.imageManager=new g,this.imageManager.setEventedParent(this),this.glyphManager=new t.GlyphManager(e._requestManager,i.localFontFamily?t.LocalGlyphMode.all:i.localIdeographFontFamily?t.LocalGlyphMode.ideographs:t.LocalGlyphMode.none,i.localFontFamily||i.localIdeographFontFamily),this.lineAtlas=new t.LineAtlas(256,512),this.crossTileSymbolIndex=new Fe,this._layers={},this._num3DLayers=0,this._numSymbolLayers=0,this._numCircleLayers=0,this._serializedLayers={},this._sourceCaches={},this._otherSourceCaches={},this._symbolSourceCaches={},this.zoomHistory=new t.ZoomHistory,this._loaded=!1,this._availableImages=[],this._order=[],this._drapedFirstOrder=[],this._markersNeedUpdate=!1,this._resetUpdates(),this.dispatcher.broadcast("setReferrer",t.getReferrer());const r=this;this._rtlTextPluginCallback=Ge.registerForPluginStateChange(e=>{r.dispatcher.broadcast("syncRTLPluginState",{pluginStatus:e.pluginStatus,pluginURL:e.pluginURL},(e,i)=>{if(t.triggerPluginCompletionEvent(e),i&&i.every(t=>t))for(const t in r._sourceCaches){const e=r._sourceCaches[t],i=e.getSource().type;"vector"!==i&&"geojson"!==i||e.reload()}})}),this.on("data",t=>{if("source"!==t.dataType||"metadata"!==t.sourceDataType)return;const e=this.getSource(t.sourceId);if(e&&e.vectorLayerIds)for(const i in this._layers){const t=this._layers[i];t.source===e.id&&this._validateLayer(t)}})}loadURL(e,i={}){this.fire(new t.Event("dataloading",{dataType:"style"}));const r="boolean"==typeof i.validate?i.validate:!t.isMapboxURL(e);e=this.map._requestManager.normalizeStyleURL(e,i.accessToken);const n=this.map._requestManager.transformRequest(e,t.ResourceType.Style);this._request=t.getJSON(n,(e,i)=>{this._request=null,e?this.fire(new t.ErrorEvent(e)):i&&this._load(i,r)})}loadJSON(e,i={}){this.fire(new t.Event("dataloading",{dataType:"style"})),this._request=t.exported.frame(()=>{this._request=null,this._load(e,!1!==i.validate)})}loadEmpty(){this.fire(new t.Event("dataloading",{dataType:"style"})),this._load(Ne,!1)}_updateLayerCount(t,e){const i=e?1:-1;t.is3D()&&(this._num3DLayers+=i),"circle"===t.type&&(this._numCircleLayers+=i),"symbol"===t.type&&(this._numSymbolLayers+=i)}_load(e,i){if(i&&Oe(this,t.validateStyle(e)))return;this._loaded=!0,this.stylesheet=e,this.updateProjection();for(const t in e.sources)this.addSource(t,e.sources[t],{validate:!1});this._changed=!1,e.sprite?this._loadSprite(e.sprite):(this.imageManager.setLoaded(!0),this.dispatcher.broadcast("spriteLoaded",!0)),this.glyphManager.setURL(e.glyphs);const r=Ft(this.stylesheet.layers);this._order=r.map(t=>t.id),this._layers={},this._serializedLayers={};for(let n of r)n=t.createStyleLayer(n),n.setEventedParent(this,{layer:{id:n.id}}),this._layers[n.id]=n,this._serializedLayers[n.id]=n.serialize(),this._updateLayerCount(n,!0);this.dispatcher.broadcast("setLayers",this._serializeLayers(this._order)),this.light=new v(this.stylesheet.light),this.stylesheet.terrain&&this._createTerrain(this.stylesheet.terrain),this.stylesheet.fog&&this._createFog(this.stylesheet.fog),this._updateDrapeFirstLayers(),this.fire(new t.Event("data",{dataType:"style"})),this.fire(new t.Event("style.load"))}setProjection(t){t?this.stylesheet.projection=t:delete this.stylesheet.projection,this.updateProjection()}updateProjection(){const t=this.map.transform.setProjection(this.map._runtimeProjection||(this.stylesheet?this.stylesheet.projection:void 0));if(this.dispatcher.broadcast("setProjection",this.map.transform.projectionOptions),t){this.map.painter.clearBackgroundTiles();for(const t in this._sourceCaches)this._sourceCaches[t].clearTiles();this.map._update(!0)}}_loadSprite(e){this._spriteRequest=function(e,i,r){let n,o,s;const a=t.exported.devicePixelRatio>1?"@2x":"";let l=t.getJSON(i.transformRequest(i.normalizeSpriteURL(e,a,".json"),t.ResourceType.SpriteJSON),(t,e)=>{l=null,s||(s=t,n=e,h())}),c=t.getImage(i.transformRequest(i.normalizeSpriteURL(e,a,".png"),t.ResourceType.SpriteImage),(t,e)=>{c=null,s||(s=t,o=e,h())});function h(){if(s)r(s);else if(n&&o){const e=t.exported.getImageData(o),i={};for(const r in n){const{width:o,height:s,x:a,y:l,sdf:c,pixelRatio:h,stretchX:u,stretchY:d,content:p}=n[r],f=new t.RGBAImage({width:o,height:s});t.RGBAImage.copy(e,f,{x:a,y:l},{x:0,y:0},{width:o,height:s}),i[r]={data:f,pixelRatio:h,sdf:c,stretchX:u,stretchY:d,content:p}}r(null,i)}}return{cancel(){l&&(l.cancel(),l=null),c&&(c.cancel(),c=null)}}}(e,this.map._requestManager,(e,i)=>{if(this._spriteRequest=null,e)this.fire(new t.ErrorEvent(e));else if(i)for(const t in i)this.imageManager.addImage(t,i[t]);this.imageManager.setLoaded(!0),this._availableImages=this.imageManager.listImages(),this.dispatcher.broadcast("setImages",this._availableImages),this.dispatcher.broadcast("spriteLoaded",!0),this.fire(new t.Event("data",{dataType:"style"}))})}_validateLayer(e){const i=this.getSource(e.source);if(!i)return;const r=e.sourceLayer;r&&("geojson"===i.type||i.vectorLayerIds&&-1===i.vectorLayerIds.indexOf(r))&&this.fire(new t.ErrorEvent(new Error(`Source layer "${r}" does not exist on source "${i.id}" as specified by style layer "${e.id}"`)))}loaded(){if(!this._loaded)return!1;if(Object.keys(this._updatedSources).length)return!1;for(const t in this._sourceCaches)if(!this._sourceCaches[t].loaded())return!1;return!!this.imageManager.isLoaded()}_serializeLayers(t){const e=[];for(const i of t){const t=this._layers[i];"custom"!==t.type&&e.push(t.serialize())}return e}hasTransitions(){if(this.light&&this.light.hasTransition())return!0;if(this.fog&&this.fog.hasTransition())return!0;for(const t in this._sourceCaches)if(this._sourceCaches[t].hasTransition())return!0;for(const t in this._layers)if(this._layers[t].hasTransition())return!0;return!1}get order(){return this.map._optimizeForTerrain&&this.terrain?this._drapedFirstOrder:this._order}isLayerDraped(t){return!!this.terrain&&je[t.type]}_checkLoaded(){if(!this._loaded)throw new Error("Style is not done loading")}update(e){if(!this._loaded)return;const i=this._changed;if(this._changed){const t=Object.keys(this._updatedLayers),i=Object.keys(this._removedLayers);(t.length||i.length)&&this._updateWorkerLayers(t,i);for(const e in this._updatedSources){const t=this._updatedSources[e];"reload"===t?this._reloadSource(e):"clear"===t&&this._clearSource(e)}this._updateTilesForChangedImages();for(const r in this._updatedPaintProps)this._layers[r].updateTransitions(e);this.light.updateTransitions(e),this.fog&&this.fog.updateTransitions(e),this._resetUpdates()}const r={};for(const t in this._sourceCaches){const e=this._sourceCaches[t];r[t]=e.used,e.used=!1}for(const t of this._order){const i=this._layers[t];if(i.recalculate(e,this._availableImages),!i.isHidden(e.zoom)){const t=this._getLayerSourceCache(i);t&&(t.used=!0)}const r=this.map.painter;if(r){const t=i.getProgramIds();if(!t)continue;const n=i.getProgramConfiguration(e.zoom);for(const e of t)r.useProgram(e,n)}}for(const n in r){const e=this._sourceCaches[n];r[n]!==e.used&&e.getSource().fire(new t.Event("data",{sourceDataType:"visibility",dataType:"source",sourceId:e.getSource().id}))}this.light.recalculate(e),this.terrain&&this.terrain.recalculate(e),this.fog&&this.fog.recalculate(e),this.z=e.zoom,this._markersNeedUpdate&&(this._updateMarkersOpacity(),this._markersNeedUpdate=!1),i&&this.fire(new t.Event("data",{dataType:"style"}))}_updateTilesForChangedImages(){const t=Object.keys(this._changedImages);if(t.length){for(const e in this._sourceCaches)this._sourceCaches[e].reloadTilesForDependencies(["icons","patterns"],t);this._changedImages={}}}_updateWorkerLayers(t,e){this.dispatcher.broadcast("updateLayers",{layers:this._serializeLayers(t),removedIds:e})}_resetUpdates(){this._changed=!1,this._updatedLayers={},this._removedLayers={},this._updatedSources={},this._updatedPaintProps={},this._changedImages={}}setState(e){if(this._checkLoaded(),Oe(this,t.validateStyle(e)))return!1;(e=t.clone$2(e)).layers=Ft(e.layers);const i=function(t,e){if(!t)return[{command:Ot.setStyle,args:[e]}];let i=[];try{if(!n(t.version,e.version))return[{command:Ot.setStyle,args:[e]}];n(t.center,e.center)||i.push({command:Ot.setCenter,args:[e.center]}),n(t.zoom,e.zoom)||i.push({command:Ot.setZoom,args:[e.zoom]}),n(t.bearing,e.bearing)||i.push({command:Ot.setBearing,args:[e.bearing]}),n(t.pitch,e.pitch)||i.push({command:Ot.setPitch,args:[e.pitch]}),n(t.sprite,e.sprite)||i.push({command:Ot.setSprite,args:[e.sprite]}),n(t.glyphs,e.glyphs)||i.push({command:Ot.setGlyphs,args:[e.glyphs]}),n(t.transition,e.transition)||i.push({command:Ot.setTransition,args:[e.transition]}),n(t.light,e.light)||i.push({command:Ot.setLight,args:[e.light]}),n(t.fog,e.fog)||i.push({command:Ot.setFog,args:[e.fog]}),n(t.projection,e.projection)||i.push({command:Ot.setProjection,args:[e.projection]});const r={},o=[];!function(t,e,i,r){let o;for(o in e=e||{},t=t||{})t.hasOwnProperty(o)&&(e.hasOwnProperty(o)||Vt(o,i,r));for(o in e)e.hasOwnProperty(o)&&(t.hasOwnProperty(o)?n(t[o],e[o])||("geojson"===t[o].type&&"geojson"===e[o].type&&jt(t,e,o)?i.push({command:Ot.setGeoJSONSourceData,args:[o,e[o].data]}):Nt(o,e,i,r)):Ut(o,e,i))}(t.sources,e.sources,o,r);const s=[];t.layers&&t.layers.forEach(t=>{r[t.source]?i.push({command:Ot.removeLayer,args:[t.id]}):s.push(t)});let a=t.terrain;a&&r[a.source]&&(i.push({command:Ot.setTerrain,args:[void 0]}),a=void 0),i=i.concat(o),n(a,e.terrain)||i.push({command:Ot.setTerrain,args:[e.terrain]}),function(t,e,i){e=e||[];const r=(t=t||[]).map(Zt),o=e.map(Zt),s=t.reduce(qt,{}),a=e.reduce(qt,{}),l=r.slice(),c=Object.create(null);let h,u,d,p,f,m,_;for(h=0,u=0;h!(t.command in Ve));if(0===i.length)return!1;const r=i.filter(t=>!(t.command in Ue));if(r.length>0)throw new Error(`Unimplemented: ${r.map(t=>t.command).join(", ")}.`);return i.forEach(t=>{"setTransition"!==t.command&&this[t.command].apply(this,t.args)}),this.stylesheet=e,!0}addImage(e,i){if(this.getImage(e))return this.fire(new t.ErrorEvent(new Error("An image with this name already exists.")));this.imageManager.addImage(e,i),this._afterImageUpdated(e)}updateImage(t,e){this.imageManager.updateImage(t,e)}getImage(t){return this.imageManager.getImage(t)}removeImage(e){if(!this.getImage(e))return this.fire(new t.ErrorEvent(new Error("No image with this name exists.")));this.imageManager.removeImage(e),this._afterImageUpdated(e)}_afterImageUpdated(e){this._availableImages=this.imageManager.listImages(),this._changedImages[e]=!0,this._changed=!0,this.dispatcher.broadcast("setImages",this._availableImages),this.fire(new t.Event("data",{dataType:"style"}))}listImages(){return this._checkLoaded(),this._availableImages.slice()}addSource(e,i,r={}){if(this._checkLoaded(),void 0!==this.getSource(e))throw new Error("There is already a source with this ID");if(!i.type)throw new Error(`The type property must be defined, but only the following properties were given: ${Object.keys(i).join(", ")}.`);if(["vector","raster","geojson","video","image"].indexOf(i.type)>=0&&this._validate(t.validateStyle.source,"sources."+e,i,null,r))return;this.map&&this.map._collectResourceTiming&&(i.collectResourceTiming=!0);const n=At(e,i,this.dispatcher,this);n.setEventedParent(this,()=>({isSourceLoaded:this.loaded(),source:n.serialize(),sourceId:e}));const o=i=>{const r=(i?"symbol:":"other:")+e,o=this._sourceCaches[r]=new t.SourceCache(r,n,i);(i?this._symbolSourceCaches:this._otherSourceCaches)[e]=o,o.style=this,o.onAdd(this.map)};o(!1),"vector"!==i.type&&"geojson"!==i.type||o(!0),n.onAdd&&n.onAdd(this.map),this._changed=!0}removeSource(e){this._checkLoaded();const i=this.getSource(e);if(void 0===i)throw new Error("There is no source with this ID");for(const n in this._layers)if(this._layers[n].source===e)return this.fire(new t.ErrorEvent(new Error(`Source "${e}" cannot be removed while layer "${n}" is using it.`)));if(this.terrain&&this.terrain.get().source===e)return this.fire(new t.ErrorEvent(new Error(`Source "${e}" cannot be removed while terrain is using it.`)));const r=this._getSourceCaches(e);for(const n of r)delete this._sourceCaches[n.id],delete this._updatedSources[n.id],n.fire(new t.Event("data",{sourceDataType:"metadata",dataType:"source",sourceId:n.getSource().id})),n.setEventedParent(null),n.clearTiles();delete this._otherSourceCaches[e],delete this._symbolSourceCaches[e],i.setEventedParent(null),i.onRemove&&i.onRemove(this.map),this._changed=!0}setGeoJSONSourceData(t,e){this._checkLoaded(),this.getSource(t).setData(e),this._changed=!0}getSource(t){const e=this._getSourceCache(t);return e&&e.getSource()}addLayer(e,i,r={}){this._checkLoaded();const n=e.id;if(this.getLayer(n))return void this.fire(new t.ErrorEvent(new Error(`Layer with id "${n}" already exists on this map`)));let o;if("custom"===e.type){if(Oe(this,t.validateCustomStyleLayer(e)))return;o=t.createStyleLayer(e)}else{if("object"==typeof e.source&&(this.addSource(n,e.source),e=t.clone$2(e),e=t.extend(e,{source:n})),this._validate(t.validateStyle.layer,"layers."+n,e,{arrayIndex:-1},r))return;o=t.createStyleLayer(e),this._validateLayer(o),o.setEventedParent(this,{layer:{id:n}}),this._serializedLayers[o.id]=o.serialize(),this._updateLayerCount(o,!0)}const s=i?this._order.indexOf(i):this._order.length;if(i&&-1===s)return void this.fire(new t.ErrorEvent(new Error(`Layer with id "${i}" does not exist on this map.`)));this._order.splice(s,0,n),this._layerOrderChanged=!0,this._layers[n]=o;const a=this._getLayerSourceCache(o);if(this._removedLayers[n]&&o.source&&a&&"custom"!==o.type){const t=this._removedLayers[n];delete this._removedLayers[n],t.type!==o.type?this._updatedSources[o.source]="clear":(this._updatedSources[o.source]="reload",a.pause())}this._updateLayer(o),o.onAdd&&o.onAdd(this.map),this._updateDrapeFirstLayers()}moveLayer(e,i){if(this._checkLoaded(),this._changed=!0,!this._layers[e])return void this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot be moved.`)));if(e===i)return;const r=this._order.indexOf(e);this._order.splice(r,1);const n=i?this._order.indexOf(i):this._order.length;i&&-1===n?this.fire(new t.ErrorEvent(new Error(`Layer with id "${i}" does not exist on this map.`))):(this._order.splice(n,0,e),this._layerOrderChanged=!0,this._updateDrapeFirstLayers())}removeLayer(e){this._checkLoaded();const i=this._layers[e];if(!i)return void this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot be removed.`)));i.setEventedParent(null),this._updateLayerCount(i,!1);const r=this._order.indexOf(e);this._order.splice(r,1),this._layerOrderChanged=!0,this._changed=!0,this._removedLayers[e]=i,delete this._layers[e],delete this._serializedLayers[e],delete this._updatedLayers[e],delete this._updatedPaintProps[e],i.onRemove&&i.onRemove(this.map),this._updateDrapeFirstLayers()}getLayer(t){return this._layers[t]}hasLayer(t){return t in this._layers}hasLayerType(t){for(const e in this._layers)if(this._layers[e].type===t)return!0;return!1}setLayerZoomRange(e,i,r){this._checkLoaded();const n=this.getLayer(e);n?n.minzoom===i&&n.maxzoom===r||(null!=i&&(n.minzoom=i),null!=r&&(n.maxzoom=r),this._updateLayer(n)):this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot have zoom extent.`)))}setFilter(e,i,r={}){this._checkLoaded();const o=this.getLayer(e);if(o){if(!n(o.filter,i))return null==i?(o.filter=void 0,void this._updateLayer(o)):void(this._validate(t.validateStyle.filter,`layers.${o.id}.filter`,i,{layerType:o.type},r)||(o.filter=t.clone$2(i),this._updateLayer(o)))}else this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot be filtered.`)))}getFilter(e){return t.clone$2(this.getLayer(e).filter)}setLayoutProperty(e,i,r,o={}){this._checkLoaded();const s=this.getLayer(e);s?n(s.getLayoutProperty(i),r)||(s.setLayoutProperty(i,r,o),this._updateLayer(s)):this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot be styled.`)))}getLayoutProperty(e,i){const r=this.getLayer(e);if(r)return r.getLayoutProperty(i);this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style.`)))}setPaintProperty(e,i,r,o={}){this._checkLoaded();const s=this.getLayer(e);s?n(s.getPaintProperty(i),r)||(s.setPaintProperty(i,r,o)&&this._updateLayer(s),this._changed=!0,this._updatedPaintProps[e]=!0):this.fire(new t.ErrorEvent(new Error(`The layer '${e}' does not exist in the map's style and cannot be styled.`)))}getPaintProperty(t,e){return this.getLayer(t).getPaintProperty(e)}setFeatureState(e,i){this._checkLoaded();const r=e.source,n=e.sourceLayer,o=this.getSource(r);if(void 0===o)return void this.fire(new t.ErrorEvent(new Error(`The source '${r}' does not exist in the map's style.`)));const s=o.type;if("geojson"===s&&n)return void this.fire(new t.ErrorEvent(new Error("GeoJSON sources cannot have a sourceLayer parameter.")));if("vector"===s&&!n)return void this.fire(new t.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")));void 0===e.id&&this.fire(new t.ErrorEvent(new Error("The feature id parameter must be provided.")));const a=this._getSourceCaches(r);for(const t of a)t.setFeatureState(n,e.id,i)}removeFeatureState(e,i){this._checkLoaded();const r=e.source,n=this.getSource(r);if(void 0===n)return void this.fire(new t.ErrorEvent(new Error(`The source '${r}' does not exist in the map's style.`)));const o=n.type,s="vector"===o?e.sourceLayer:void 0;if("vector"===o&&!s)return void this.fire(new t.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")));if(i&&"string"!=typeof e.id&&"number"!=typeof e.id)return void this.fire(new t.ErrorEvent(new Error("A feature id is required to remove its specific state property.")));const a=this._getSourceCaches(r);for(const t of a)t.removeFeatureState(s,e.id,i)}getFeatureState(e){this._checkLoaded();const i=e.source,r=e.sourceLayer,n=this.getSource(i);if(void 0!==n){if("vector"!==n.type||r)return void 0===e.id&&this.fire(new t.ErrorEvent(new Error("The feature id parameter must be provided."))),this._getSourceCaches(i)[0].getFeatureState(r,e.id);this.fire(new t.ErrorEvent(new Error("The sourceLayer parameter must be provided for vector source types.")))}else this.fire(new t.ErrorEvent(new Error(`The source '${i}' does not exist in the map's style.`)))}getTransition(){return t.extend({duration:300,delay:0},this.stylesheet&&this.stylesheet.transition)}serialize(){const e={};for(const t in this._sourceCaches){const i=this._sourceCaches[t].getSource();e[i.id]||(e[i.id]=i.serialize())}return t.filterObject({version:this.stylesheet.version,name:this.stylesheet.name,metadata:this.stylesheet.metadata,light:this.stylesheet.light,terrain:this.stylesheet.terrain,fog:this.stylesheet.fog,center:this.stylesheet.center,zoom:this.stylesheet.zoom,bearing:this.stylesheet.bearing,pitch:this.stylesheet.pitch,sprite:this.stylesheet.sprite,glyphs:this.stylesheet.glyphs,transition:this.stylesheet.transition,projection:this.stylesheet.projection,sources:e,layers:this._serializeLayers(this._order)},t=>void 0!==t)}_updateLayer(t){this._updatedLayers[t.id]=!0;const e=this._getLayerSourceCache(t);t.source&&!this._updatedSources[t.source]&&e&&"raster"!==e.getSource().type&&(this._updatedSources[t.source]="reload",e.pause()),this._changed=!0,t.invalidateCompiledFilter()}_flattenAndSortRenderedFeatures(t){const e=t=>"fill-extrusion"===this._layers[t].type,i={},r=[];for(let o=this._order.length-1;o>=0;o--){const n=this._order[o];if(e(n)){i[n]=o;for(const e of t){const t=e[n];if(t)for(const e of t)r.push(e)}}}r.sort((t,e)=>e.intersectionZ-t.intersectionZ);const n=[];for(let o=this._order.length-1;o>=0;o--){const s=this._order[o];if(e(s))for(let t=r.length-1;t>=0;t--){const e=r[t].feature;if(i[e.layer.id]{const e=this.getLayer(t);return e&&e.is3D()}):this.has3DLayers(),a=k.createFromScreenPoints(e,r);for(const t in this._sourceCaches){const e=this._sourceCaches[t].getSource().id;i.layers&&!n[e]||o.push(Mt(this._sourceCaches[t],this._layers,this._serializedLayers,a,i,r,s,!!this.map._showQueryGeometry))}return this.placement&&o.push(function(t,e,i,r,n,o,s){const a={},l=o.queryRenderedSymbols(r),c=[];for(const h of Object.keys(l).map(Number))c.push(s[h]);c.sort(zt);for(const h of c){const i=h.featureIndex.lookupSymbolFeatures(l[h.bucketInstanceId],e,h.bucketIndex,h.sourceLayerIndex,n.filter,n.layers,n.availableImages,t);for(const t in i){const e=a[t]=a[t]||[],r=i[t];r.sort((t,e)=>{const i=h.featureSortOrder;if(i){const r=i.indexOf(t.featureIndex);return i.indexOf(e.featureIndex)-r}return e.featureIndex-t.featureIndex});for(const t of r)e.push(t)}}for(const h in a)a[h].forEach(e=>{const r=e.feature,n=i(t[h]).getFeatureState(r.layer["source-layer"],r.id);r.source=r.layer.source,r.layer["source-layer"]&&(r.sourceLayer=r.layer["source-layer"]),r.state=n});return a}(this._layers,this._serializedLayers,this._getLayerSourceCache.bind(this),a.screenGeometry,i,this.placement.collisionIndex,this.placement.retainedQueryData)),this._flattenAndSortRenderedFeatures(o)}querySourceFeatures(e,i){i&&i.filter&&this._validate(t.validateStyle.filter,"querySourceFeatures.filter",i.filter,null,i);const r=this._getSourceCaches(e);let n=[];for(const t of r)n=n.concat(Ct(t,i));return n}addSourceType(t,e,i){return Ge.getSourceType(t)?i(new Error(`A source type called "${t}" already exists.`)):(Ge.setSourceType(t,e),e.workerSourceURL?void this.dispatcher.broadcast("loadWorkerSource",{name:t,url:e.workerSourceURL},i):i(null,null))}getLight(){return this.light.getLight()}setLight(e,i={}){this._checkLoaded();const r=this.light.getLight();let o=!1;for(const t in e)if(!n(e[t],r[t])){o=!0;break}if(!o)return;const s={now:t.exported.now(),transition:t.extend({duration:300,delay:0},this.stylesheet.transition)};this.light.setLight(e,i),this.light.updateTransitions(s)}getTerrain(){return this.terrain?this.terrain.get():null}setTerrain(e){if(this._checkLoaded(),!e)return delete this.terrain,delete this.stylesheet.terrain,this.dispatcher.broadcast("enableTerrain",!1),this._force3DLayerUpdate(),void(this._markersNeedUpdate=!0);if("object"==typeof e.source){const i="terrain-dem-src";this.addSource(i,e.source),e=t.clone$2(e),e=t.extend(e,{source:i})}if(!this._validate(t.validateStyle.terrain,"terrain",e)){if(this.terrain){const i=this.terrain,r=i.get();for(const o in e)if(!n(e[o],r[o])){i.set(e),this.stylesheet.terrain=e;const r={now:t.exported.now(),transition:t.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r);break}}else this._createTerrain(e);this._updateDrapeFirstLayers(),this._markersNeedUpdate=!0}}_createFog(e){const i=this.fog=new M(e,this.map.transform);this.stylesheet.fog=e;const r={now:t.exported.now(),transition:t.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r)}_updateMarkersOpacity(){0!==this.map._markers.length&&this.map._requestDomTask(()=>{for(const t of this.map._markers)t._evaluateOpacity()})}getFog(){return this.fog?this.fog.get():null}setFog(e){if(this._checkLoaded(),!e)return delete this.fog,delete this.stylesheet.fog,void(this._markersNeedUpdate=!0);if(this.fog){const i=this.fog,r=i.get();for(const o in e)if(!n(e[o],r[o])){i.set(e),this.stylesheet.fog=e;const r={now:t.exported.now(),transition:t.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r);break}}else this._createFog(e);this._markersNeedUpdate=!0}_updateDrapeFirstLayers(){if(!this.map._optimizeForTerrain||!this.terrain)return;const t=this._order.filter(t=>this.isLayerDraped(this._layers[t])),e=this._order.filter(t=>!this.isLayerDraped(this._layers[t]));this._drapedFirstOrder=[],this._drapedFirstOrder.push(...t),this._drapedFirstOrder.push(...e)}_createTerrain(e){const i=this.terrain=new T(e);this.stylesheet.terrain=e,this.dispatcher.broadcast("enableTerrain",!0),this._force3DLayerUpdate();const r={now:t.exported.now(),transition:t.extend({duration:0},this.stylesheet.transition)};i.updateTransitions(r)}_force3DLayerUpdate(){for(const t in this._layers){const e=this._layers[t];"fill-extrusion"===e.type&&this._updateLayer(e)}}_validate(e,i,r,n,o={}){return(!o||!1!==o.validate)&&Oe(this,e.call(t.validateStyle,t.extend({key:i,style:this.serialize(),value:r,styleSpec:t.spec},n)))}_remove(){this._request&&(this._request.cancel(),this._request=null),this._spriteRequest&&(this._spriteRequest.cancel(),this._spriteRequest=null),t.evented.off("pluginStateChange",this._rtlTextPluginCallback);for(const t in this._layers)this._layers[t].setEventedParent(null);for(const t in this._sourceCaches)this._sourceCaches[t].clearTiles(),this._sourceCaches[t].setEventedParent(null);this.imageManager.setEventedParent(null),this.setEventedParent(null),this.dispatcher.remove()}_clearSource(t){const e=this._getSourceCaches(t);for(const i of e)i.clearTiles()}_reloadSource(t){const e=this._getSourceCaches(t);for(const i of e)i.resume(),i.reload()}_updateSources(t){for(const e in this._sourceCaches)this._sourceCaches[e].update(t)}_generateCollisionBoxes(){for(const t in this._sourceCaches){const e=this._sourceCaches[t];e.resume(),e.reload()}}_updatePlacement(e,i,r,n,o=!1){let s=!1,a=!1;const l={};for(const t of this._order){const i=this._layers[t];if("symbol"!==i.type)continue;if(!l[i.source]){const t=this._getLayerSourceCache(i);if(!t)continue;l[i.source]=t.getRenderableIds(!0).map(e=>t.getTileByID(e)).sort((t,e)=>e.tileID.overscaledZ-t.tileID.overscaledZ||(t.tileID.isLessThan(e.tileID)?-1:1))}const r=this.crossTileSymbolIndex.addLayer(i,l[i.source],e.center.lng);s=s||r}if(this.crossTileSymbolIndex.pruneUnusedLayers(this._order),o=o||this._layerOrderChanged||0===r,this._layerOrderChanged&&this.fire(new t.Event("neworder")),(o||!this.pauseablePlacement||this.pauseablePlacement.isDone()&&!this.placement.stillRecent(t.exported.now(),e.zoom))&&(this.pauseablePlacement=new Pe(e,this._order,o,i,r,n,this.placement,this.fog&&!this.fog.isSoftDisabled()?this.fog.state:null),this._layerOrderChanged=!1),this.pauseablePlacement.isDone()?this.placement.setStale():(this.pauseablePlacement.continuePlacement(this._order,this._layers,l),this.pauseablePlacement.isDone()&&(this.placement=this.pauseablePlacement.commit(t.exported.now()),a=!0),s&&this.pauseablePlacement.placement.setStale()),a||s)for(const t of this._order){const e=this._layers[t];"symbol"===e.type&&this.placement.updateLayerOpacities(e,l[e.source])}return!this.pauseablePlacement.isDone()||this.placement.hasTransitions(t.exported.now())}_releaseSymbolFadeTiles(){for(const t in this._sourceCaches)this._sourceCaches[t].releaseSymbolFadeTiles()}getImages(t,e,i){this.imageManager.getImages(e.icons,i),this._updateTilesForChangedImages();const r=t=>{t&&t.setDependencies(e.tileID.key,e.type,e.icons)};r(this._otherSourceCaches[e.source]),r(this._symbolSourceCaches[e.source])}getGlyphs(t,e,i){this.glyphManager.getGlyphs(e.stacks,i)}getResource(e,i,r){return t.makeRequest(i,r)}_getSourceCache(t){return this._otherSourceCaches[t]}_getLayerSourceCache(t){return"symbol"===t.type?this._symbolSourceCaches[t.source]:this._otherSourceCaches[t.source]}_getSourceCaches(t){const e=[];return this._otherSourceCaches[t]&&e.push(this._otherSourceCaches[t]),this._symbolSourceCaches[t]&&e.push(this._symbolSourceCaches[t]),e}has3DLayers(){return this._num3DLayers>0}hasSymbolLayers(){return this._numSymbolLayers>0}hasCircleLayers(){return this._numCircleLayers>0}clearWorkerCaches(){this.dispatcher.broadcast("clearCaches")}}Ge.getSourceType=function(t){return St[t]},Ge.setSourceType=function(t,e){St[t]=e},Ge.registerForPluginStateChange=t.registerForPluginStateChange;var Ze="\n#define EPSILON 0.0000001\n#define PI 3.141592653589793\n#define EXTENT 8192.0\n#ifdef FOG\nuniform mediump vec4 u_fog_color;uniform mediump vec2 u_fog_range;uniform mediump float u_fog_horizon_blend;varying vec3 v_fog_pos;float fog_range(float depth) {return (depth-u_fog_range[0])/(u_fog_range[1]-u_fog_range[0]);}float fog_horizon_blending(vec3 camera_dir) {float t=max(0.0,camera_dir.z/u_fog_horizon_blend);return u_fog_color.a*exp(-3.0*t*t);}float fog_opacity(float t) {const float decay=6.0;float falloff=1.0-min(1.0,exp(-decay*t));falloff*=falloff*falloff;return u_fog_color.a*min(1.0,1.00747*falloff);}\n#endif",qe="attribute highp vec3 a_pos_3f;uniform lowp mat4 u_matrix;varying highp vec3 v_uv;void main() {const mat3 half_neg_pi_around_x=mat3(1.0,0.0, 0.0,0.0,0.0,-1.0,0.0,1.0, 0.0);v_uv=half_neg_pi_around_x*a_pos_3f;vec4 pos=u_matrix*vec4(a_pos_3f,1.0);gl_Position=pos.xyww;}";let $e={},Xe={};$e=Ye("","\n#define ELEVATION_SCALE 7.0\n#define ELEVATION_OFFSET 450.0\n#ifdef PROJECTION_GLOBE_VIEW\nuniform vec3 u_tile_tl_up;uniform vec3 u_tile_tr_up;uniform vec3 u_tile_br_up;uniform vec3 u_tile_bl_up;uniform float u_tile_up_scale;vec3 elevationVector(vec2 pos) {vec2 uv=pos/EXTENT;vec3 up=normalize(mix(\nmix(u_tile_tl_up,u_tile_tr_up,uv.xxx),mix(u_tile_bl_up,u_tile_br_up,uv.xxx),uv.yyy));return up*u_tile_up_scale;}\n#else \nvec3 elevationVector(vec2 pos) { return vec3(0,0,1); }\n#endif\n#ifdef TERRAIN\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nuniform highp sampler2D u_dem;uniform highp sampler2D u_dem_prev;\n#else\nuniform sampler2D u_dem;uniform sampler2D u_dem_prev;\n#endif\nuniform vec4 u_dem_unpack;uniform vec2 u_dem_tl;uniform vec2 u_dem_tl_prev;uniform float u_dem_scale;uniform float u_dem_scale_prev;uniform float u_dem_size;uniform float u_dem_lerp;uniform float u_exaggeration;uniform float u_meter_to_dem;uniform mat4 u_label_plane_matrix_inv;uniform sampler2D u_depth;uniform vec2 u_depth_size_inv;vec4 tileUvToDemSample(vec2 uv,float dem_size,float dem_scale,vec2 dem_tl) {vec2 pos=dem_size*(uv*dem_scale+dem_tl)+1.0;vec2 f=fract(pos);return vec4((pos-f+0.5)/(dem_size+2.0),f);}float decodeElevation(vec4 v) {return dot(vec4(v.xyz*255.0,-1.0),u_dem_unpack);}float currentElevation(vec2 apos) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nvec2 pos=(u_dem_size*(apos/8192.0*u_dem_scale+u_dem_tl)+1.5)/(u_dem_size+2.0);return u_exaggeration*texture2D(u_dem,pos).a;\n#else\nfloat dd=1.0/(u_dem_size+2.0);vec4 r=tileUvToDemSample(apos/8192.0,u_dem_size,u_dem_scale,u_dem_tl);vec2 pos=r.xy;vec2 f=r.zw;float tl=decodeElevation(texture2D(u_dem,pos));\n#ifdef TERRAIN_DEM_NEAREST_FILTER\nreturn u_exaggeration*tl;\n#endif\nfloat tr=decodeElevation(texture2D(u_dem,pos+vec2(dd,0.0)));float bl=decodeElevation(texture2D(u_dem,pos+vec2(0.0,dd)));float br=decodeElevation(texture2D(u_dem,pos+vec2(dd,dd)));return u_exaggeration*mix(mix(tl,tr,f.x),mix(bl,br,f.x),f.y);\n#endif\n}float prevElevation(vec2 apos) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nvec2 pos=(u_dem_size*(apos/8192.0*u_dem_scale_prev+u_dem_tl_prev)+1.5)/(u_dem_size+2.0);return u_exaggeration*texture2D(u_dem_prev,pos).a;\n#else\nfloat dd=1.0/(u_dem_size+2.0);vec4 r=tileUvToDemSample(apos/8192.0,u_dem_size,u_dem_scale_prev,u_dem_tl_prev);vec2 pos=r.xy;vec2 f=r.zw;float tl=decodeElevation(texture2D(u_dem_prev,pos));float tr=decodeElevation(texture2D(u_dem_prev,pos+vec2(dd,0.0)));float bl=decodeElevation(texture2D(u_dem_prev,pos+vec2(0.0,dd)));float br=decodeElevation(texture2D(u_dem_prev,pos+vec2(dd,dd)));return u_exaggeration*mix(mix(tl,tr,f.x),mix(bl,br,f.x),f.y);\n#endif\n}\n#ifdef TERRAIN_VERTEX_MORPHING\nfloat elevation(vec2 apos) {float nextElevation=currentElevation(apos);float prevElevation=prevElevation(apos);return mix(prevElevation,nextElevation,u_dem_lerp);}\n#else\nfloat elevation(vec2 apos) {return currentElevation(apos);}\n#endif\nfloat unpack_depth(vec4 rgba_depth)\n{const vec4 bit_shift=vec4(1.0/(256.0*256.0*256.0),1.0/(256.0*256.0),1.0/256.0,1.0);return dot(rgba_depth,bit_shift)*2.0-1.0;}bool isOccluded(vec4 frag) {vec3 coord=frag.xyz/frag.w;float depth=unpack_depth(texture2D(u_depth,(coord.xy+1.0)*0.5));return coord.z > depth+0.0005;}float occlusionFade(vec4 frag) {vec3 coord=frag.xyz/frag.w;vec3 df=vec3(5.0*u_depth_size_inv,0.0);vec2 uv=0.5*coord.xy+0.5;vec4 depth=vec4(\nunpack_depth(texture2D(u_depth,uv-df.xz)),unpack_depth(texture2D(u_depth,uv+df.xz)),unpack_depth(texture2D(u_depth,uv-df.zy)),unpack_depth(texture2D(u_depth,uv+df.zy))\n);return dot(vec4(0.25),vec4(1.0)-clamp(300.0*(vec4(coord.z-0.001)-depth),0.0,1.0));}vec4 fourSample(vec2 pos,vec2 off) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nfloat tl=texture2D(u_dem,pos).a;float tr=texture2D(u_dem,pos+vec2(off.x,0.0)).a;float bl=texture2D(u_dem,pos+vec2(0.0,off.y)).a;float br=texture2D(u_dem,pos+off).a;\n#else\nvec4 demtl=vec4(texture2D(u_dem,pos).xyz*255.0,-1.0);float tl=dot(demtl,u_dem_unpack);vec4 demtr=vec4(texture2D(u_dem,pos+vec2(off.x,0.0)).xyz*255.0,-1.0);float tr=dot(demtr,u_dem_unpack);vec4 dembl=vec4(texture2D(u_dem,pos+vec2(0.0,off.y)).xyz*255.0,-1.0);float bl=dot(dembl,u_dem_unpack);vec4 dembr=vec4(texture2D(u_dem,pos+off).xyz*255.0,-1.0);float br=dot(dembr,u_dem_unpack);\n#endif\nreturn vec4(tl,tr,bl,br);}float flatElevation(vec2 pack) {vec2 apos=floor(pack/8.0);vec2 span=10.0*(pack-apos*8.0);vec2 uvTex=(apos-vec2(1.0,1.0))/8190.0;float size=u_dem_size+2.0;float dd=1.0/size;vec2 pos=u_dem_size*(uvTex*u_dem_scale+u_dem_tl)+1.0;vec2 f=fract(pos);pos=(pos-f+0.5)*dd;vec4 h=fourSample(pos,vec2(dd));float z=mix(mix(h.x,h.y,f.x),mix(h.z,h.w,f.x),f.y);vec2 w=floor(0.5*(span*u_meter_to_dem-1.0));vec2 d=dd*w;vec4 bounds=vec4(d,vec2(1.0)-d);h=fourSample(pos-d,2.0*d+vec2(dd));vec4 diff=abs(h.xzxy-h.ywzw);vec2 slope=min(vec2(0.25),u_meter_to_dem*0.5*(diff.xz+diff.yw)/(2.0*w+vec2(1.0)));vec2 fix=slope*span;float base=z+max(fix.x,fix.y);return u_exaggeration*base;}float elevationFromUint16(float word) {return u_exaggeration*(word/ELEVATION_SCALE-ELEVATION_OFFSET);}\n#else\nfloat elevation(vec2 pos) { return 0.0; }bool isOccluded(vec4 frag) { return false; }float occlusionFade(vec4 frag) { return 1.0; }\n#endif",!0),Xe=Ye("#ifdef FOG\nuniform float u_fog_temporal_offset;float fog_opacity(vec3 pos) {float depth=length(pos);return fog_opacity(fog_range(depth));}vec3 fog_apply(vec3 color,vec3 pos) {float depth=length(pos);float opacity=fog_opacity(fog_range(depth));opacity*=fog_horizon_blending(pos/depth);return mix(color,u_fog_color.rgb,opacity);}vec4 fog_apply_from_vert(vec4 color,float fog_opac) {float alpha=EPSILON+color.a;color.rgb=mix(color.rgb/alpha,u_fog_color.rgb,fog_opac)*alpha;return color;}vec3 fog_apply_sky_gradient(vec3 camera_ray,vec3 sky_color) {float horizon_blend=fog_horizon_blending(normalize(camera_ray));return mix(sky_color,u_fog_color.rgb,horizon_blend);}vec4 fog_apply_premultiplied(vec4 color,vec3 pos) {float alpha=EPSILON+color.a;color.rgb=fog_apply(color.rgb/alpha,pos)*alpha;return color;}vec3 fog_dither(vec3 color) {vec2 dither_seed=gl_FragCoord.xy+u_fog_temporal_offset;return dither(color,dither_seed);}vec4 fog_dither(vec4 color) {return vec4(fog_dither(color.rgb),color.a);}\n#endif","#ifdef FOG\nuniform mat4 u_fog_matrix;vec3 fog_position(vec3 pos) {return (u_fog_matrix*vec4(pos,1.0)).xyz;}vec3 fog_position(vec2 pos) {return fog_position(vec3(pos,0.0));}float fog(vec3 pos) {float depth=length(pos);float opacity=fog_opacity(fog_range(depth));return opacity*fog_horizon_blending(pos/depth);}\n#endif",!0);const We=Ye("\nhighp vec3 hash(highp vec2 p) {highp vec3 p3=fract(p.xyx*vec3(443.8975,397.2973,491.1871));p3+=dot(p3,p3.yxz+19.19);return fract((p3.xxy+p3.yzz)*p3.zyx);}vec3 dither(vec3 color,highp vec2 seed) {vec3 rnd=hash(seed)+hash(seed+0.59374)-0.5;return color+rnd/255.0;}\n#ifdef TERRAIN\nhighp vec4 pack_depth(highp float ndc_z) {highp float depth=ndc_z*0.5+0.5;const highp vec4 bit_shift=vec4(256.0*256.0*256.0,256.0*256.0,256.0,1.0);const highp vec4 bit_mask =vec4(0.0,1.0/256.0,1.0/256.0,1.0/256.0);highp vec4 res=fract(depth*bit_shift);res-=res.xxyz*bit_mask;return res;}\n#endif","\nfloat wrap(float n,float min,float max) {float d=max-min;float w=mod(mod(n-min,d)+d,d)+min;return (w==min) ? max : w;}vec3 mercator_tile_position(mat4 matrix,vec2 tile_anchor,vec3 tile_id,vec2 mercator_center) {\n#if defined(PROJECTION_GLOBE_VIEW) && !defined(PROJECTED_POS_ON_VIEWPORT)\nfloat tiles=tile_id.z;vec2 mercator=(tile_anchor/EXTENT+tile_id.xy)/tiles;mercator-=mercator_center;mercator.x=wrap(mercator.x,-0.5,0.5);vec4 mercator_tile=vec4(mercator.xy*EXTENT,EXTENT/(2.0*PI),1.0);mercator_tile=matrix*mercator_tile;return mercator_tile.xyz;\n#else\nreturn vec3(0.0);\n#endif\n}vec3 mix_globe_mercator(vec3 globe,vec3 mercator,float t) {\n#if defined(PROJECTION_GLOBE_VIEW) && !defined(PROJECTED_POS_ON_VIEWPORT)\nreturn mix(globe,mercator,t);\n#else\nreturn globe;\n#endif\n}vec2 unpack_float(const float packedValue) {int packedIntValue=int(packedValue);int v0=packedIntValue/256;return vec2(v0,packedIntValue-v0*256);}vec2 unpack_opacity(const float packedOpacity) {int intOpacity=int(packedOpacity)/2;return vec2(float(intOpacity)/127.0,mod(packedOpacity,2.0));}vec4 decode_color(const vec2 encodedColor) {return vec4(\nunpack_float(encodedColor[0])/255.0,unpack_float(encodedColor[1])/255.0\n);}float unpack_mix_vec2(const vec2 packedValue,const float t) {return mix(packedValue[0],packedValue[1],t);}vec4 unpack_mix_color(const vec4 packedColors,const float t) {vec4 minColor=decode_color(vec2(packedColors[0],packedColors[1]));vec4 maxColor=decode_color(vec2(packedColors[2],packedColors[3]));return mix(minColor,maxColor,t);}vec2 get_pattern_pos(const vec2 pixel_coord_upper,const vec2 pixel_coord_lower,const vec2 pattern_size,const float tile_units_to_pixels,const vec2 pos) {vec2 offset=mod(mod(mod(pixel_coord_upper,pattern_size)*256.0,pattern_size)*256.0+pixel_coord_lower,pattern_size);return (tile_units_to_pixels*pos+offset)/pattern_size;}const vec4 AWAY=vec4(-1000.0,-1000.0,-1000.0,1);//Normalized device coordinate that is not rendered."),He=Ze;var Ke={background:Ye("uniform vec4 u_color;uniform float u_opacity;void main() {vec4 out_color=u_color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),backgroundPattern:Ye("uniform vec2 u_pattern_tl_a;uniform vec2 u_pattern_br_a;uniform vec2 u_pattern_tl_b;uniform vec2 u_pattern_br_b;uniform vec2 u_texsize;uniform float u_mix;uniform float u_opacity;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;void main() {vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(u_pattern_tl_a/u_texsize,u_pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(u_pattern_tl_b/u_texsize,u_pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_mix);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pattern_size_a;uniform vec2 u_pattern_size_b;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform float u_scale_a;uniform float u_scale_b;uniform float u_tile_units_to_pixels;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,u_scale_a*u_pattern_size_a,u_tile_units_to_pixels,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,u_scale_b*u_pattern_size_b,u_tile_units_to_pixels,a_pos);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),circle:Ye("varying vec3 v_data;varying float v_visibility;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define mediump float radius\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define highp vec4 stroke_color\n#pragma mapbox: define mediump float stroke_width\n#pragma mapbox: define lowp float stroke_opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize mediump float radius\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize highp vec4 stroke_color\n#pragma mapbox: initialize mediump float stroke_width\n#pragma mapbox: initialize lowp float stroke_opacity\nvec2 extrude=v_data.xy;float extrude_length=length(extrude);lowp float antialiasblur=v_data.z;float antialiased_blur=-max(blur,antialiasblur);float opacity_t=smoothstep(0.0,antialiased_blur,extrude_length-1.0);float color_t=stroke_width < 0.01 ? 0.0 : smoothstep(\nantialiased_blur,0.0,extrude_length-radius/(radius+stroke_width)\n);vec4 out_color=mix(color*opacity,stroke_color*stroke_opacity,color_t);\n#ifdef FOG\nout_color=fog_apply_premultiplied(out_color,v_fog_pos);\n#endif\ngl_FragColor=out_color*(v_visibility*opacity_t);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","#define NUM_VISIBILITY_RINGS 2\n#define INV_SQRT2 0.70710678\n#define ELEVATION_BIAS 0.0001\n#define NUM_SAMPLES_PER_RING 16\nuniform mat4 u_matrix;uniform mat2 u_extrude_scale;uniform lowp float u_device_pixel_ratio;uniform highp float u_camera_to_center_distance;attribute vec2 a_pos;varying vec3 v_data;varying float v_visibility;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define mediump float radius\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define highp vec4 stroke_color\n#pragma mapbox: define mediump float stroke_width\n#pragma mapbox: define lowp float stroke_opacity\nvec2 calc_offset(vec2 extrusion,float radius,float stroke_width, float view_scale) {return extrusion*(radius+stroke_width)*u_extrude_scale*view_scale;}float cantilevered_elevation(vec2 pos,float radius,float stroke_width,float view_scale) {vec2 c1=pos+calc_offset(vec2(-1,-1),radius,stroke_width,view_scale);vec2 c2=pos+calc_offset(vec2(1,-1),radius,stroke_width,view_scale);vec2 c3=pos+calc_offset(vec2(1,1),radius,stroke_width,view_scale);vec2 c4=pos+calc_offset(vec2(-1,1),radius,stroke_width,view_scale);float h1=elevation(c1)+ELEVATION_BIAS;float h2=elevation(c2)+ELEVATION_BIAS;float h3=elevation(c3)+ELEVATION_BIAS;float h4=elevation(c4)+ELEVATION_BIAS;return max(h4,max(h3,max(h1,h2)));}float circle_elevation(vec2 pos) {\n#if defined(TERRAIN)\nreturn elevation(pos)+ELEVATION_BIAS;\n#else\nreturn 0.0;\n#endif\n}vec4 project_vertex(vec2 extrusion,vec4 world_center,vec4 projected_center,float radius,float stroke_width, float view_scale) {vec2 sample_offset=calc_offset(extrusion,radius,stroke_width,view_scale);\n#ifdef PITCH_WITH_MAP\nreturn u_matrix*( world_center+vec4(sample_offset,0,0) );\n#else\nreturn projected_center+vec4(sample_offset,0,0);\n#endif\n}float get_sample_step() {\n#ifdef PITCH_WITH_MAP\nreturn 2.0*PI/float(NUM_SAMPLES_PER_RING);\n#else\nreturn PI/float(NUM_SAMPLES_PER_RING);\n#endif\n}void main(void) {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize mediump float radius\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize highp vec4 stroke_color\n#pragma mapbox: initialize mediump float stroke_width\n#pragma mapbox: initialize lowp float stroke_opacity\nvec2 extrude=vec2(mod(a_pos,2.0)*2.0-1.0);vec2 circle_center=floor(a_pos*0.5);float height=circle_elevation(circle_center);vec4 world_center=vec4(circle_center,height,1);vec4 projected_center=u_matrix*world_center;float view_scale=0.0;\n#ifdef PITCH_WITH_MAP\n#ifdef SCALE_WITH_MAP\nview_scale=1.0;\n#else\nview_scale=projected_center.w/u_camera_to_center_distance;\n#endif\n#else\n#ifdef SCALE_WITH_MAP\nview_scale=u_camera_to_center_distance;\n#else\nview_scale=projected_center.w;\n#endif\n#endif\ngl_Position=project_vertex(extrude,world_center,projected_center,radius,stroke_width,view_scale);float visibility=0.0;\n#ifdef TERRAIN\nfloat step=get_sample_step();\n#ifdef PITCH_WITH_MAP\nfloat cantilevered_height=cantilevered_elevation(circle_center,radius,stroke_width,view_scale);vec4 occlusion_world_center=vec4(circle_center,cantilevered_height,1);vec4 occlusion_projected_center=u_matrix*occlusion_world_center;\n#else\nvec4 occlusion_world_center=world_center;vec4 occlusion_projected_center=projected_center;\n#endif\nfor(int ring=0; ring < NUM_VISIBILITY_RINGS; ring++) {float scale=(float(ring)+1.0)/float(NUM_VISIBILITY_RINGS);for(int i=0; i < NUM_SAMPLES_PER_RING; i++) {vec2 extrusion=vec2(cos(step*float(i)),-sin(step*float(i)))*scale;vec4 frag_pos=project_vertex(extrusion,occlusion_world_center,occlusion_projected_center,radius,stroke_width,view_scale);visibility+=float(!isOccluded(frag_pos));}}visibility/=float(NUM_VISIBILITY_RINGS)*float(NUM_SAMPLES_PER_RING);\n#else\nvisibility=1.0;\n#endif\nv_visibility=visibility;lowp float antialiasblur=1.0/u_device_pixel_ratio/(radius+stroke_width);v_data=vec3(extrude.x,extrude.y,antialiasblur);\n#ifdef FOG\nv_fog_pos=fog_position(world_center.xyz);\n#endif\n}"),clippingMask:Ye("void main() {gl_FragColor=vec4(1.0);}","attribute vec2 a_pos;uniform mat4 u_matrix;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);}"),heatmap:Ye("uniform highp float u_intensity;varying vec2 v_extrude;\n#pragma mapbox: define highp float weight\n#define GAUSS_COEF 0.3989422804014327\nvoid main() {\n#pragma mapbox: initialize highp float weight\nfloat d=-0.5*3.0*3.0*dot(v_extrude,v_extrude);float val=weight*u_intensity*GAUSS_COEF*exp(d);gl_FragColor=vec4(val,1.0,1.0,1.0);\n#ifdef FOG\ngl_FragColor.r*=pow(1.0-fog_opacity(v_fog_pos),2.0);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform float u_extrude_scale;uniform float u_opacity;uniform float u_intensity;attribute vec2 a_pos;\n#ifdef PROJECTION_GLOBE_VIEW\nattribute vec3 a_pos_3;attribute vec3 a_pos_normal_3;attribute float a_scale;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform vec3 u_up_dir;\n#endif\nvarying vec2 v_extrude;\n#pragma mapbox: define highp float weight\n#pragma mapbox: define mediump float radius\nconst highp float ZERO=1.0/255.0/16.0;\n#define GAUSS_COEF 0.3989422804014327\nvoid main(void) {\n#pragma mapbox: initialize highp float weight\n#pragma mapbox: initialize mediump float radius\nvec2 unscaled_extrude=vec2(mod(a_pos,2.0)*2.0-1.0);float S=sqrt(-2.0*log(ZERO/weight/u_intensity/GAUSS_COEF))/3.0;v_extrude=S*unscaled_extrude;vec2 extrude=v_extrude*radius*u_extrude_scale;vec2 tilePos=floor(a_pos*0.5);\n#ifdef PROJECTION_GLOBE_VIEW\nextrude*=a_scale;vec3 normal=normalize(mix(a_pos_normal_3/16384.0,u_up_dir,u_zoom_transition));vec3 xAxis=normalize(vec3(normal.z,0.0,-normal.x));vec3 yAxis=normalize(cross(normal,xAxis));vec3 globePos=a_pos_3+xAxis*extrude.x+yAxis*extrude.y+elevationVector(tilePos)*elevation(tilePos);vec3 mercPos=mercator_tile_position(u_inv_rot_matrix,tilePos,u_tile_id,u_merc_center)+xAxis*extrude.x+yAxis*extrude.y;vec3 pos=mix_globe_mercator(globePos,mercPos,u_zoom_transition);\n#else\nvec3 pos=vec3(tilePos+extrude,elevation(tilePos));\n#endif\ngl_Position=u_matrix*vec4(pos,1);\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),heatmapTexture:Ye("uniform sampler2D u_image;uniform sampler2D u_color_ramp;uniform float u_opacity;varying vec2 v_pos;void main() {float t=texture2D(u_image,v_pos).r;vec4 color=texture2D(u_color_ramp,vec2(t,0.5));gl_FragColor=color*u_opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(0.0);\n#endif\n}","attribute vec2 a_pos;varying vec2 v_pos;void main() {gl_Position=vec4(a_pos,0,1);v_pos=a_pos*0.5+0.5;}"),collisionBox:Ye("varying float v_placed;varying float v_notUsed;void main() {vec4 red =vec4(1.0,0.0,0.0,1.0);vec4 blue=vec4(0.0,0.0,1.0,0.5);gl_FragColor =mix(red,blue,step(0.5,v_placed))*0.5;gl_FragColor*=mix(1.0,0.1,step(0.5,v_notUsed));}","attribute vec3 a_pos;attribute vec2 a_anchor_pos;attribute vec2 a_extrude;attribute vec2 a_placed;attribute vec2 a_shift;attribute float a_size_scale;attribute vec2 a_padding;uniform mat4 u_matrix;uniform vec2 u_extrude_scale;uniform float u_camera_to_center_distance;varying float v_placed;varying float v_notUsed;void main() {vec4 projectedPoint=u_matrix*vec4(a_pos+elevationVector(a_anchor_pos)*elevation(a_anchor_pos),1);highp float camera_to_anchor_distance=projectedPoint.w;highp float collision_perspective_ratio=clamp(\n0.5+0.5*(u_camera_to_center_distance/camera_to_anchor_distance),0.0,1.5);gl_Position=projectedPoint;gl_Position.xy+=(a_extrude*a_size_scale+a_shift+a_padding)*u_extrude_scale*gl_Position.w*collision_perspective_ratio;v_placed=a_placed.x;v_notUsed=a_placed.y;}"),collisionCircle:Ye("varying float v_radius;varying vec2 v_extrude;varying float v_perspective_ratio;varying float v_collision;void main() {float alpha=0.5*min(v_perspective_ratio,1.0);float stroke_radius=0.9*max(v_perspective_ratio,1.0);float distance_to_center=length(v_extrude);float distance_to_edge=abs(distance_to_center-v_radius);float opacity_t=smoothstep(-stroke_radius,0.0,-distance_to_edge);vec4 color=mix(vec4(0.0,0.0,1.0,0.5),vec4(1.0,0.0,0.0,1.0),v_collision);gl_FragColor=color*alpha*opacity_t;}","attribute vec2 a_pos_2f;attribute float a_radius;attribute vec2 a_flags;uniform mat4 u_matrix;uniform mat4 u_inv_matrix;uniform vec2 u_viewport_size;uniform float u_camera_to_center_distance;varying float v_radius;varying vec2 v_extrude;varying float v_perspective_ratio;varying float v_collision;vec3 toTilePosition(vec2 screenPos) {vec4 rayStart=u_inv_matrix*vec4(screenPos,-1.0,1.0);vec4 rayEnd =u_inv_matrix*vec4(screenPos, 1.0,1.0);rayStart.xyz/=rayStart.w;rayEnd.xyz /=rayEnd.w;highp float t=(0.0-rayStart.z)/(rayEnd.z-rayStart.z);return mix(rayStart.xyz,rayEnd.xyz,t);}void main() {vec2 quadCenterPos=a_pos_2f;float radius=a_radius;float collision=a_flags.x;float vertexIdx=a_flags.y;vec2 quadVertexOffset=vec2(\nmix(-1.0,1.0,float(vertexIdx >=2.0)),mix(-1.0,1.0,float(vertexIdx >=1.0 && vertexIdx <=2.0)));vec2 quadVertexExtent=quadVertexOffset*radius;vec3 tilePos=toTilePosition(quadCenterPos);vec4 clipPos=u_matrix*vec4(tilePos,1.0);highp float camera_to_anchor_distance=clipPos.w;highp float collision_perspective_ratio=clamp(\n0.5+0.5*(u_camera_to_center_distance/camera_to_anchor_distance),0.0,4.0);float padding_factor=1.2;v_radius=radius;v_extrude=quadVertexExtent*padding_factor;v_perspective_ratio=collision_perspective_ratio;v_collision=collision;gl_Position=vec4(clipPos.xyz/clipPos.w,1.0)+vec4(quadVertexExtent*padding_factor/u_viewport_size*2.0,0.0,0.0);}"),debug:Ye("uniform highp vec4 u_color;uniform sampler2D u_overlay;varying vec2 v_uv;void main() {vec4 overlay_color=texture2D(u_overlay,v_uv);gl_FragColor=mix(u_color,overlay_color,overlay_color.a);}","attribute vec2 a_pos;varying vec2 v_uv;uniform mat4 u_matrix;uniform float u_overlay_scale;void main() {float h=elevation(a_pos);v_uv=a_pos/8192.0;gl_Position=u_matrix*vec4(a_pos*u_overlay_scale,h,1);}"),fill:Ye("#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float opacity\nvec4 out_color=color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float opacity\ngl_Position=u_matrix*vec4(a_pos,0,1);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillOutline:Ye("varying vec2 v_pos;\n#pragma mapbox: define highp vec4 outline_color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 outline_color\n#pragma mapbox: initialize lowp float opacity\nfloat dist=length(v_pos-gl_FragCoord.xy);float alpha=1.0-smoothstep(0.0,1.0,dist);vec4 out_color=outline_color;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec2 a_pos;uniform mat4 u_matrix;uniform vec2 u_world;varying vec2 v_pos;\n#pragma mapbox: define highp vec4 outline_color\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 outline_color\n#pragma mapbox: initialize lowp float opacity\ngl_Position=u_matrix*vec4(a_pos,0,1);v_pos=(gl_Position.xy/gl_Position.w+1.0)/2.0*u_world;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillOutlinePattern:Ye("uniform vec2 u_texsize;uniform sampler2D u_image;uniform float u_fade;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec2 v_pos;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);float dist=length(v_pos-gl_FragCoord.xy);float alpha=1.0-smoothstep(0.0,1.0,dist);vec4 out_color=mix(color1,color2,u_fade);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_world;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform vec3 u_scale;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec2 v_pos;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;gl_Position=u_matrix*vec4(a_pos,0,1);vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileRatio,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileRatio,a_pos);v_pos=(gl_Position.xy/gl_Position.w+1.0)/2.0*u_world;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillPattern:Ye("uniform vec2 u_texsize;uniform float u_fade;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_fade);\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*opacity;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform vec3 u_scale;attribute vec2 a_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;gl_Position=u_matrix*vec4(a_pos,0,1);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileZoomRatio,a_pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileZoomRatio,a_pos);\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),fillExtrusion:Ye("varying vec4 v_color;void main() {vec4 color=v_color;\n#ifdef FOG\ncolor=fog_dither(fog_apply_premultiplied(color,v_fog_pos));\n#endif\ngl_FragColor=color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec3 u_lightcolor;uniform lowp vec3 u_lightpos;uniform lowp float u_lightintensity;uniform float u_vertical_gradient;uniform lowp float u_opacity;attribute vec4 a_pos_normal_ed;attribute vec2 a_centroid_pos;varying vec4 v_color;\n#pragma mapbox: define highp float base\n#pragma mapbox: define highp float height\n#pragma mapbox: define highp vec4 color\nvoid main() {\n#pragma mapbox: initialize highp float base\n#pragma mapbox: initialize highp float height\n#pragma mapbox: initialize highp vec4 color\nvec3 pos_nx=floor(a_pos_normal_ed.xyz*0.5);mediump vec3 top_up_ny=a_pos_normal_ed.xyz-2.0*pos_nx;float x_normal=pos_nx.z/8192.0;vec3 normal=top_up_ny.y==1.0 ? vec3(0.0,0.0,1.0) : normalize(vec3(x_normal,(2.0*top_up_ny.z-1.0)*(1.0-abs(x_normal)),0.0));base=max(0.0,base);height=max(0.0,height);float t=top_up_ny.x;vec2 centroid_pos=vec2(0.0);\n#if defined(HAS_CENTROID) || defined(TERRAIN)\ncentroid_pos=a_centroid_pos;\n#endif\n#ifdef TERRAIN\nbool flat_roof=centroid_pos.x !=0.0 && t > 0.0;float ele=elevation(pos_nx.xy);float c_ele=flat_roof ? centroid_pos.y==0.0 ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos) : ele;float h=flat_roof ? max(c_ele+height,ele+base+2.0) : ele+(t > 0.0 ? height : base==0.0 ?-5.0 : base);vec3 pos=vec3(pos_nx.xy,h);\n#else\nvec3 pos=vec3(pos_nx.xy,t > 0.0 ? height : base);\n#endif\nfloat hidden=float(centroid_pos.x==0.0 && centroid_pos.y==1.0);gl_Position=mix(u_matrix*vec4(pos,1),AWAY,hidden);float colorvalue=color.r*0.2126+color.g*0.7152+color.b*0.0722;v_color=vec4(0.0,0.0,0.0,1.0);vec4 ambientlight=vec4(0.03,0.03,0.03,1.0);color+=ambientlight;float directional=clamp(dot(normal,u_lightpos),0.0,1.0);directional=mix((1.0-u_lightintensity),max((1.0-colorvalue+u_lightintensity),1.0),directional);if (normal.y !=0.0) {directional*=(\n(1.0-u_vertical_gradient)+(u_vertical_gradient*clamp((t+base)*pow(height/150.0,0.5),mix(0.7,0.98,1.0-u_lightintensity),1.0)));}v_color.rgb+=clamp(color.rgb*directional*u_lightcolor,mix(vec3(0.0),vec3(0.3),1.0-u_lightcolor),vec3(1.0));v_color*=u_opacity;\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),fillExtrusionPattern:Ye("uniform vec2 u_texsize;uniform float u_fade;uniform sampler2D u_image;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec4 v_lighting;\n#pragma mapbox: define lowp float base\n#pragma mapbox: define lowp float height\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float base\n#pragma mapbox: initialize lowp float height\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;vec2 imagecoord=mod(v_pos_a,1.0);vec2 pos=mix(pattern_tl_a/u_texsize,pattern_br_a/u_texsize,imagecoord);vec4 color1=texture2D(u_image,pos);vec2 imagecoord_b=mod(v_pos_b,1.0);vec2 pos2=mix(pattern_tl_b/u_texsize,pattern_br_b/u_texsize,imagecoord_b);vec4 color2=texture2D(u_image,pos2);vec4 out_color=mix(color1,color2,u_fade);out_color=out_color*v_lighting;\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_pixel_coord_upper;uniform vec2 u_pixel_coord_lower;uniform float u_height_factor;uniform vec3 u_scale;uniform float u_vertical_gradient;uniform lowp float u_opacity;uniform vec3 u_lightcolor;uniform lowp vec3 u_lightpos;uniform lowp float u_lightintensity;attribute vec4 a_pos_normal_ed;attribute vec2 a_centroid_pos;varying vec2 v_pos_a;varying vec2 v_pos_b;varying vec4 v_lighting;\n#pragma mapbox: define lowp float base\n#pragma mapbox: define lowp float height\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float base\n#pragma mapbox: initialize lowp float height\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec3 pos_nx=floor(a_pos_normal_ed.xyz*0.5);mediump vec3 top_up_ny=a_pos_normal_ed.xyz-2.0*pos_nx;float x_normal=pos_nx.z/8192.0;vec3 normal=top_up_ny.y==1.0 ? vec3(0.0,0.0,1.0) : normalize(vec3(x_normal,(2.0*top_up_ny.z-1.0)*(1.0-abs(x_normal)),0.0));float edgedistance=a_pos_normal_ed.w;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;base=max(0.0,base);height=max(0.0,height);float t=top_up_ny.x;float z=t > 0.0 ? height : base;vec2 centroid_pos=vec2(0.0);\n#if defined(HAS_CENTROID) || defined(TERRAIN)\ncentroid_pos=a_centroid_pos;\n#endif\n#ifdef TERRAIN\nbool flat_roof=centroid_pos.x !=0.0 && t > 0.0;float ele=elevation(pos_nx.xy);float c_ele=flat_roof ? centroid_pos.y==0.0 ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos) : ele;float h=flat_roof ? max(c_ele+height,ele+base+2.0) : ele+(t > 0.0 ? height : base==0.0 ?-5.0 : base);vec3 p=vec3(pos_nx.xy,h);\n#else\nvec3 p=vec3(pos_nx.xy,z);\n#endif\nfloat hidden=float(centroid_pos.x==0.0 && centroid_pos.y==1.0);gl_Position=mix(u_matrix*vec4(p,1),AWAY,hidden);vec2 pos=normal.z==1.0\n? pos_nx.xy\n: vec2(edgedistance,z*u_height_factor);v_pos_a=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,fromScale*display_size_a,tileRatio,pos);v_pos_b=get_pattern_pos(u_pixel_coord_upper,u_pixel_coord_lower,toScale*display_size_b,tileRatio,pos);v_lighting=vec4(0.0,0.0,0.0,1.0);float directional=clamp(dot(normal,u_lightpos),0.0,1.0);directional=mix((1.0-u_lightintensity),max((0.5+u_lightintensity),1.0),directional);if (normal.y !=0.0) {directional*=(\n(1.0-u_vertical_gradient)+(u_vertical_gradient*clamp((t+base)*pow(height/150.0,0.5),mix(0.7,0.98,1.0-u_lightintensity),1.0)));}v_lighting.rgb+=clamp(directional*u_lightcolor,mix(vec3(0.0),vec3(0.3),1.0-u_lightcolor),vec3(1.0));v_lighting*=u_opacity;\n#ifdef FOG\nv_fog_pos=fog_position(p);\n#endif\n}"),hillshadePrepare:Ye("#ifdef GL_ES\nprecision highp float;\n#endif\nuniform sampler2D u_image;varying vec2 v_pos;uniform vec2 u_dimension;uniform float u_zoom;uniform vec4 u_unpack;float getElevation(vec2 coord) {\n#ifdef TERRAIN_DEM_FLOAT_FORMAT\nreturn texture2D(u_image,coord).a/4.0;\n#else\nvec4 data=texture2D(u_image,coord)*255.0;data.a=-1.0;return dot(data,u_unpack)/4.0;\n#endif\n}void main() {vec2 epsilon=1.0/u_dimension;float a=getElevation(v_pos+vec2(-epsilon.x,-epsilon.y));float b=getElevation(v_pos+vec2(0,-epsilon.y));float c=getElevation(v_pos+vec2(epsilon.x,-epsilon.y));float d=getElevation(v_pos+vec2(-epsilon.x,0));float e=getElevation(v_pos);float f=getElevation(v_pos+vec2(epsilon.x,0));float g=getElevation(v_pos+vec2(-epsilon.x,epsilon.y));float h=getElevation(v_pos+vec2(0,epsilon.y));float i=getElevation(v_pos+vec2(epsilon.x,epsilon.y));float exaggerationFactor=u_zoom < 2.0 ? 0.4 : u_zoom < 4.5 ? 0.35 : 0.3;float exaggeration=u_zoom < 15.0 ? (u_zoom-15.0)*exaggerationFactor : 0.0;vec2 deriv=vec2(\n(c+f+f+i)-(a+d+d+g),(g+h+h+i)-(a+b+b+c)\n)/pow(2.0,exaggeration+(19.2562-u_zoom));gl_FragColor=clamp(vec4(\nderiv.x/2.0+0.5,deriv.y/2.0+0.5,1.0,1.0),0.0,1.0);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_dimension;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);highp vec2 epsilon=1.0/u_dimension;float scale=(u_dimension.x-2.0)/u_dimension.x;v_pos=(a_texture_pos/8192.0)*scale+epsilon;}"),hillshade:Ye("uniform sampler2D u_image;varying vec2 v_pos;uniform vec2 u_latrange;uniform vec2 u_light;uniform vec4 u_shadow;uniform vec4 u_highlight;uniform vec4 u_accent;void main() {vec4 pixel=texture2D(u_image,v_pos);vec2 deriv=((pixel.rg*2.0)-1.0);float scaleFactor=cos(radians((u_latrange[0]-u_latrange[1])*(1.0-v_pos.y)+u_latrange[1]));float slope=atan(1.25*length(deriv)/scaleFactor);float aspect=deriv.x !=0.0 ? atan(deriv.y,-deriv.x) : PI/2.0*(deriv.y > 0.0 ? 1.0 :-1.0);float intensity=u_light.x;float azimuth=u_light.y+PI;float base=1.875-intensity*1.75;float maxValue=0.5*PI;float scaledSlope=intensity !=0.5 ? ((pow(base,slope)-1.0)/(pow(base,maxValue)-1.0))*maxValue : slope;float accent=cos(scaledSlope);vec4 accent_color=(1.0-accent)*u_accent*clamp(intensity*2.0,0.0,1.0);float shade=abs(mod((aspect+azimuth)/PI+0.5,2.0)-1.0);vec4 shade_color=mix(u_shadow,u_highlight,shade)*sin(scaledSlope)*clamp(intensity*2.0,0.0,1.0);gl_FragColor=accent_color*(1.0-shade_color.a)+shade_color;\n#ifdef FOG\ngl_FragColor=fog_dither(fog_apply_premultiplied(gl_FragColor,v_fog_pos));\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);v_pos=a_texture_pos/8192.0;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),line:Ye("uniform lowp float u_device_pixel_ratio;varying vec2 v_width2;varying vec2 v_normal;varying float v_gamma_scale;\n#ifdef RENDER_LINE_DASH\nuniform sampler2D u_dash_image;uniform float u_mix;uniform vec3 u_scale;varying vec2 v_tex_a;varying vec2 v_tex_b;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nuniform sampler2D u_gradient_image;varying highp vec2 v_uv;\n#endif\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 dash_from\n#pragma mapbox: define lowp vec4 dash_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize lowp vec4 dash_from\n#pragma mapbox: initialize lowp vec4 dash_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\nfloat dist=length(v_normal)*v_width2.s;float blur2=(blur+1.0/u_device_pixel_ratio)*v_gamma_scale;float alpha=clamp(min(dist-(v_width2.t-blur2),v_width2.s-dist)/blur2,0.0,1.0);\n#ifdef RENDER_LINE_DASH\nfloat sdfdist_a=texture2D(u_dash_image,v_tex_a).a;float sdfdist_b=texture2D(u_dash_image,v_tex_b).a;float sdfdist=mix(sdfdist_a,sdfdist_b,u_mix);float sdfwidth=min(dash_from.z*u_scale.y,dash_to.z*u_scale.z);float sdfgamma=1.0/(2.0*u_device_pixel_ratio)/sdfwidth;alpha*=smoothstep(0.5-sdfgamma/floorwidth,0.5+sdfgamma/floorwidth,sdfdist);\n#endif\n#ifdef RENDER_LINE_GRADIENT\nvec4 out_color=texture2D(u_gradient_image,v_uv);\n#else\nvec4 out_color=color;\n#endif\n#ifdef FOG\nout_color=fog_dither(fog_apply_premultiplied(out_color,v_fog_pos));\n#endif\ngl_FragColor=out_color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","\n#define EXTRUDE_SCALE 0.015873016\nattribute vec2 a_pos_normal;attribute vec4 a_data;\n#ifdef RENDER_LINE_GRADIENT\nattribute vec3 a_packed;\n#else\nattribute float a_linesofar;\n#endif\nuniform mat4 u_matrix;uniform mat2 u_pixels_to_tile_units;uniform vec2 u_units_to_pixels;uniform lowp float u_device_pixel_ratio;varying vec2 v_normal;varying vec2 v_width2;varying float v_gamma_scale;\n#ifdef RENDER_LINE_DASH\nuniform vec2 u_texsize;uniform mediump vec3 u_scale;varying vec2 v_tex_a;varying vec2 v_tex_b;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nuniform float u_image_height;varying highp vec2 v_uv;\n#endif\n#pragma mapbox: define highp vec4 color\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 dash_from\n#pragma mapbox: define lowp vec4 dash_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define mediump float gapwidth\n#pragma mapbox: define lowp float offset\n#pragma mapbox: define mediump float width\nvoid main() {\n#pragma mapbox: initialize highp vec4 color\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize lowp vec4 dash_from\n#pragma mapbox: initialize lowp vec4 dash_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize mediump float gapwidth\n#pragma mapbox: initialize lowp float offset\n#pragma mapbox: initialize mediump float width\nfloat ANTIALIASING=1.0/u_device_pixel_ratio/2.0;vec2 a_extrude=a_data.xy-128.0;float a_direction=mod(a_data.z,4.0)-1.0;vec2 pos=floor(a_pos_normal*0.5);mediump vec2 normal=a_pos_normal-2.0*pos;normal.y=normal.y*2.0-1.0;v_normal=normal;gapwidth=gapwidth/2.0;float halfwidth=width/2.0;offset=-1.0*offset;float inset=gapwidth+(gapwidth > 0.0 ? ANTIALIASING : 0.0);float outset=gapwidth+halfwidth*(gapwidth > 0.0 ? 2.0 : 1.0)+(halfwidth==0.0 ? 0.0 : ANTIALIASING);mediump vec2 dist=outset*a_extrude*EXTRUDE_SCALE;mediump float u=0.5*a_direction;mediump float t=1.0-abs(u);mediump vec2 offset2=offset*a_extrude*EXTRUDE_SCALE*normal.y*mat2(t,-u,u,t);vec4 projected_extrude=u_matrix*vec4(dist*u_pixels_to_tile_units,0.0,0.0);gl_Position=u_matrix*vec4(pos+offset2*u_pixels_to_tile_units,0.0,1.0)+projected_extrude;\n#ifndef RENDER_TO_TEXTURE\nfloat extrude_length_without_perspective=length(dist);float extrude_length_with_perspective=length(projected_extrude.xy/gl_Position.w*u_units_to_pixels);v_gamma_scale=extrude_length_without_perspective/extrude_length_with_perspective;\n#else\nv_gamma_scale=1.0;\n#endif\n#ifdef RENDER_LINE_GRADIENT\nfloat a_uv_x=a_packed[0];float a_split_index=a_packed[1];float a_linesofar=a_packed[2];highp float texel_height=1.0/u_image_height;highp float half_texel_height=0.5*texel_height;v_uv=vec2(a_uv_x,a_split_index*texel_height-half_texel_height);\n#endif\n#ifdef RENDER_LINE_DASH\nfloat tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;float scaleA=dash_from.z==0.0 ? 0.0 : tileZoomRatio/(dash_from.z*fromScale);float scaleB=dash_to.z==0.0 ? 0.0 : tileZoomRatio/(dash_to.z*toScale);float heightA=dash_from.y;float heightB=dash_to.y;v_tex_a=vec2(a_linesofar*scaleA/floorwidth,(-normal.y*heightA+dash_from.x+0.5)/u_texsize.y);v_tex_b=vec2(a_linesofar*scaleB/floorwidth,(-normal.y*heightB+dash_to.x+0.5)/u_texsize.y);\n#endif\nv_width2=vec2(outset,inset);\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),linePattern:Ye("uniform lowp float u_device_pixel_ratio;uniform vec2 u_texsize;uniform float u_fade;uniform mediump vec3 u_scale;uniform sampler2D u_image;varying vec2 v_normal;varying vec2 v_width2;varying float v_linesofar;varying float v_gamma_scale;varying float v_width;\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\nvec2 pattern_tl_a=pattern_from.xy;vec2 pattern_br_a=pattern_from.zw;vec2 pattern_tl_b=pattern_to.xy;vec2 pattern_br_b=pattern_to.zw;float tileZoomRatio=u_scale.x;float fromScale=u_scale.y;float toScale=u_scale.z;vec2 display_size_a=(pattern_br_a-pattern_tl_a)/pixel_ratio_from;vec2 display_size_b=(pattern_br_b-pattern_tl_b)/pixel_ratio_to;vec2 pattern_size_a=vec2(display_size_a.x*fromScale/tileZoomRatio,display_size_a.y);vec2 pattern_size_b=vec2(display_size_b.x*toScale/tileZoomRatio,display_size_b.y);float aspect_a=display_size_a.y/v_width;float aspect_b=display_size_b.y/v_width;float dist=length(v_normal)*v_width2.s;float blur2=(blur+1.0/u_device_pixel_ratio)*v_gamma_scale;float alpha=clamp(min(dist-(v_width2.t-blur2),v_width2.s-dist)/blur2,0.0,1.0);float x_a=mod(v_linesofar/pattern_size_a.x*aspect_a,1.0);float x_b=mod(v_linesofar/pattern_size_b.x*aspect_b,1.0);float y=0.5*v_normal.y+0.5;vec2 texel_size=1.0/u_texsize;vec2 pos_a=mix(pattern_tl_a*texel_size-texel_size,pattern_br_a*texel_size+texel_size,vec2(x_a,y));vec2 pos_b=mix(pattern_tl_b*texel_size-texel_size,pattern_br_b*texel_size+texel_size,vec2(x_b,y));vec4 color=mix(texture2D(u_image,pos_a),texture2D(u_image,pos_b),u_fade);\n#ifdef FOG\ncolor=fog_dither(fog_apply_premultiplied(color,v_fog_pos));\n#endif\ngl_FragColor=color*(alpha*opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","\n#define scale 0.015873016\nattribute vec2 a_pos_normal;attribute vec4 a_data;attribute float a_linesofar;uniform mat4 u_matrix;uniform vec2 u_units_to_pixels;uniform mat2 u_pixels_to_tile_units;uniform lowp float u_device_pixel_ratio;varying vec2 v_normal;varying vec2 v_width2;varying float v_linesofar;varying float v_gamma_scale;varying float v_width;\n#pragma mapbox: define lowp float blur\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float offset\n#pragma mapbox: define mediump float gapwidth\n#pragma mapbox: define mediump float width\n#pragma mapbox: define lowp float floorwidth\n#pragma mapbox: define lowp vec4 pattern_from\n#pragma mapbox: define lowp vec4 pattern_to\n#pragma mapbox: define lowp float pixel_ratio_from\n#pragma mapbox: define lowp float pixel_ratio_to\nvoid main() {\n#pragma mapbox: initialize lowp float blur\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float offset\n#pragma mapbox: initialize mediump float gapwidth\n#pragma mapbox: initialize mediump float width\n#pragma mapbox: initialize lowp float floorwidth\n#pragma mapbox: initialize mediump vec4 pattern_from\n#pragma mapbox: initialize mediump vec4 pattern_to\n#pragma mapbox: initialize lowp float pixel_ratio_from\n#pragma mapbox: initialize lowp float pixel_ratio_to\nfloat ANTIALIASING=1.0/u_device_pixel_ratio/2.0;vec2 a_extrude=a_data.xy-128.0;float a_direction=mod(a_data.z,4.0)-1.0;vec2 pos=floor(a_pos_normal*0.5);mediump vec2 normal=a_pos_normal-2.0*pos;normal.y=normal.y*2.0-1.0;v_normal=normal;gapwidth=gapwidth/2.0;float halfwidth=width/2.0;offset=-1.0*offset;float inset=gapwidth+(gapwidth > 0.0 ? ANTIALIASING : 0.0);float outset=gapwidth+halfwidth*(gapwidth > 0.0 ? 2.0 : 1.0)+(halfwidth==0.0 ? 0.0 : ANTIALIASING);mediump vec2 dist=outset*a_extrude*scale;mediump float u=0.5*a_direction;mediump float t=1.0-abs(u);mediump vec2 offset2=offset*a_extrude*scale*normal.y*mat2(t,-u,u,t);vec4 projected_extrude=u_matrix*vec4(dist*u_pixels_to_tile_units,0.0,0.0);gl_Position=u_matrix*vec4(pos+offset2*u_pixels_to_tile_units,0.0,1.0)+projected_extrude;\n#ifndef RENDER_TO_TEXTURE\nfloat extrude_length_without_perspective=length(dist);float extrude_length_with_perspective=length(projected_extrude.xy/gl_Position.w*u_units_to_pixels);v_gamma_scale=extrude_length_without_perspective/extrude_length_with_perspective;\n#else\nv_gamma_scale=1.0;\n#endif\nv_linesofar=a_linesofar;v_width2=vec2(outset,inset);v_width=floorwidth;\n#ifdef FOG\nv_fog_pos=fog_position(pos);\n#endif\n}"),raster:Ye("uniform float u_fade_t;uniform float u_opacity;uniform sampler2D u_image0;uniform sampler2D u_image1;varying vec2 v_pos0;varying vec2 v_pos1;uniform float u_brightness_low;uniform float u_brightness_high;uniform float u_saturation_factor;uniform float u_contrast_factor;uniform vec3 u_spin_weights;void main() {vec4 color0=texture2D(u_image0,v_pos0);vec4 color1=texture2D(u_image1,v_pos1);if (color0.a > 0.0) {color0.rgb=color0.rgb/color0.a;}if (color1.a > 0.0) {color1.rgb=color1.rgb/color1.a;}vec4 color=mix(color0,color1,u_fade_t);color.a*=u_opacity;vec3 rgb=color.rgb;rgb=vec3(\ndot(rgb,u_spin_weights.xyz),dot(rgb,u_spin_weights.zxy),dot(rgb,u_spin_weights.yzx));float average=(color.r+color.g+color.b)/3.0;rgb+=(average-rgb)*u_saturation_factor;rgb=(rgb-0.5)*u_contrast_factor+0.5;vec3 u_high_vec=vec3(u_brightness_low,u_brightness_low,u_brightness_low);vec3 u_low_vec=vec3(u_brightness_high,u_brightness_high,u_brightness_high);vec3 out_color=mix(u_high_vec,u_low_vec,rgb);\n#ifdef FOG\nout_color=fog_dither(fog_apply(out_color,v_fog_pos));\n#endif\ngl_FragColor=vec4(out_color*color.a,color.a);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform vec2 u_tl_parent;uniform float u_scale_parent;uniform float u_buffer_scale;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos0;varying vec2 v_pos1;void main() {gl_Position=u_matrix*vec4(a_pos,0,1);v_pos0=(((a_texture_pos/8192.0)-0.5)/u_buffer_scale )+0.5;v_pos1=(v_pos0*u_scale_parent)+u_tl_parent;\n#ifdef FOG\nv_fog_pos=fog_position(a_pos);\n#endif\n}"),symbolIcon:Ye("uniform sampler2D u_texture;varying vec2 v_tex;varying float v_fade_opacity;\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\nlowp float alpha=opacity*v_fade_opacity;gl_FragColor=texture2D(u_texture,v_tex)*alpha;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_pixeloffset;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform highp float u_camera_to_center_distance;uniform highp float u_pitch;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform float u_fade_change;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform vec2 u_texsize;varying vec2 v_tex;varying float v_fade_opacity;\n#pragma mapbox: define lowp float opacity\nvoid main() {\n#pragma mapbox: initialize lowp float opacity\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);vec2 a_pxoffset=a_pixeloffset.xy;vec2 a_minFontScale=a_pixeloffset.zw/256.0;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchorZ=a_z_tile_anchor.x;vec2 tileAnchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tileAnchor)*elevation(tileAnchor);vec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tileAnchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchorZ)+h,mercator_pos,u_zoom_transition);vec4 projectedPoint=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projectedPoint.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float fontScale=u_is_text ? size/24.0 : size;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offsetProjectedPoint=u_matrix*vec4(a_pos+vec2(1,0),anchorZ,1);vec2 a=projectedPoint.xy/projectedPoint.w;vec2 b=offsetProjectedPoint.xy/offsetProjectedPoint.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}vec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchorZ),mercator_pos,u_zoom_transition);\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*max(a_minFontScale,fontScale)+a_pxoffset/16.0);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projectedPoint);gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projectedPoint.w <=0.0 || occlusion_fade==0.0));float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nv_tex=a_tex/u_texsize;vec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;v_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change))*projection_transition_fade;}"),symbolSDF:Ye("#define SDF_PX 8.0\nuniform bool u_is_halo;uniform sampler2D u_texture;uniform highp float u_gamma_scale;uniform lowp float u_device_pixel_ratio;uniform bool u_is_text;varying vec2 v_data0;varying vec3 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nfloat EDGE_GAMMA=0.105/u_device_pixel_ratio;vec2 tex=v_data0.xy;float gamma_scale=v_data1.x;float size=v_data1.y;float fade_opacity=v_data1[2];float fontScale=u_is_text ? size/24.0 : size;lowp vec4 color=fill_color;highp float gamma=EDGE_GAMMA/(fontScale*u_gamma_scale);lowp float buff=(256.0-64.0)/256.0;if (u_is_halo) {color=halo_color;gamma=(halo_blur*1.19/SDF_PX+EDGE_GAMMA)/(fontScale*u_gamma_scale);buff=(6.0-halo_width/fontScale)/SDF_PX;}lowp float dist=texture2D(u_texture,tex).a;highp float gamma_scaled=gamma*gamma_scale;highp float alpha=smoothstep(buff-gamma_scaled,buff+gamma_scaled,dist);gl_FragColor=color*(alpha*opacity*fade_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_pixeloffset;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform highp float u_pitch;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform highp float u_camera_to_center_distance;uniform float u_fade_change;uniform vec2 u_texsize;uniform vec3 u_tile_id;uniform float u_zoom_transition;varying vec2 v_data0;varying vec3 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);vec2 a_pxoffset=a_pixeloffset.xy;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchorZ=a_z_tile_anchor.x;vec2 tileAnchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tileAnchor)*elevation(tileAnchor);vec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tileAnchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchorZ)+h,mercator_pos,u_zoom_transition);vec4 projectedPoint=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projectedPoint.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float fontScale=u_is_text ? size/24.0 : size;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offsetProjectedPoint=u_matrix*vec4(a_pos+vec2(1,0),anchorZ,1);vec2 a=projectedPoint.xy/projectedPoint.w;vec2 b=offsetProjectedPoint.xy/offsetProjectedPoint.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}vec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchorZ),mercator_pos,u_zoom_transition);\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*fontScale+a_pxoffset);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projectedPoint);gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projectedPoint.w <=0.0 || occlusion_fade==0.0));float gamma_scale=gl_Position.w;float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nvec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;float interpolated_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change));v_data0=a_tex/u_texsize;v_data1=vec3(gamma_scale,size,interpolated_fade_opacity*projection_transition_fade);}"),symbolTextAndIcon:Ye("#define SDF_PX 8.0\n#define SDF 1.0\n#define ICON 0.0\nuniform bool u_is_halo;uniform sampler2D u_texture;uniform sampler2D u_texture_icon;uniform highp float u_gamma_scale;uniform lowp float u_device_pixel_ratio;varying vec4 v_data0;varying vec4 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nfloat fade_opacity=v_data1[2];if (v_data1.w==ICON) {vec2 tex_icon=v_data0.zw;lowp float alpha=opacity*fade_opacity;gl_FragColor=texture2D(u_texture_icon,tex_icon)*alpha;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\nreturn;}vec2 tex=v_data0.xy;float EDGE_GAMMA=0.105/u_device_pixel_ratio;float gamma_scale=v_data1.x;float size=v_data1.y;float fontScale=size/24.0;lowp vec4 color=fill_color;highp float gamma=EDGE_GAMMA/(fontScale*u_gamma_scale);lowp float buff=(256.0-64.0)/256.0;if (u_is_halo) {color=halo_color;gamma=(halo_blur*1.19/SDF_PX+EDGE_GAMMA)/(fontScale*u_gamma_scale);buff=(6.0-halo_width/fontScale)/SDF_PX;}lowp float dist=texture2D(u_texture,tex).a;highp float gamma_scaled=gamma*gamma_scale;highp float alpha=smoothstep(buff-gamma_scaled,buff+gamma_scaled,dist);gl_FragColor=color*(alpha*opacity*fade_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","attribute vec4 a_pos_offset;attribute vec4 a_tex_size;attribute vec4 a_z_tile_anchor;attribute vec3 a_projected_pos;attribute float a_fade_opacity;uniform bool u_is_size_zoom_constant;uniform bool u_is_size_feature_constant;uniform highp float u_size_t;uniform highp float u_size;uniform mat4 u_matrix;uniform mat4 u_label_plane_matrix;uniform mat4 u_coord_matrix;uniform bool u_is_text;uniform bool u_pitch_with_map;uniform highp float u_pitch;uniform bool u_rotate_symbol;uniform highp float u_aspect_ratio;uniform highp float u_camera_to_center_distance;uniform float u_fade_change;uniform vec2 u_texsize;uniform vec2 u_texsize_icon;uniform mat4 u_inv_rot_matrix;uniform vec2 u_merc_center;uniform vec3 u_tile_id;uniform float u_zoom_transition;varying vec4 v_data0;varying vec4 v_data1;\n#pragma mapbox: define highp vec4 fill_color\n#pragma mapbox: define highp vec4 halo_color\n#pragma mapbox: define lowp float opacity\n#pragma mapbox: define lowp float halo_width\n#pragma mapbox: define lowp float halo_blur\nvoid main() {\n#pragma mapbox: initialize highp vec4 fill_color\n#pragma mapbox: initialize highp vec4 halo_color\n#pragma mapbox: initialize lowp float opacity\n#pragma mapbox: initialize lowp float halo_width\n#pragma mapbox: initialize lowp float halo_blur\nvec2 a_pos=a_pos_offset.xy;vec2 a_offset=a_pos_offset.zw;vec2 a_tex=a_tex_size.xy;vec2 a_size=a_tex_size.zw;float a_size_min=floor(a_size[0]*0.5);float is_sdf=a_size[0]-2.0*a_size_min;highp float segment_angle=-a_projected_pos[2];float size;if (!u_is_size_zoom_constant && !u_is_size_feature_constant) {size=mix(a_size_min,a_size[1],u_size_t)/128.0;} else if (u_is_size_zoom_constant && !u_is_size_feature_constant) {size=a_size_min/128.0;} else {size=u_size;}float anchorZ=a_z_tile_anchor.x;vec2 tileAnchor=a_z_tile_anchor.yz;vec3 h=elevationVector(tileAnchor)*elevation(tileAnchor);vec3 mercator_pos=mercator_tile_position(u_inv_rot_matrix,tileAnchor,u_tile_id,u_merc_center);vec3 world_pos=mix_globe_mercator(vec3(a_pos,anchorZ)+h,mercator_pos,u_zoom_transition);vec4 projectedPoint=u_matrix*vec4(world_pos,1);highp float camera_to_anchor_distance=projectedPoint.w;highp float distance_ratio=u_pitch_with_map ?\ncamera_to_anchor_distance/u_camera_to_center_distance :\nu_camera_to_center_distance/camera_to_anchor_distance;highp float perspective_ratio=clamp(\n0.5+0.5*distance_ratio,0.0,1.5);size*=perspective_ratio;float fontScale=size/24.0;highp float symbol_rotation=0.0;if (u_rotate_symbol) {vec4 offsetProjectedPoint=u_matrix*vec4(a_pos+vec2(1,0),anchorZ,1);vec2 a=projectedPoint.xy/projectedPoint.w;vec2 b=offsetProjectedPoint.xy/offsetProjectedPoint.w;symbol_rotation=atan((b.y-a.y)/u_aspect_ratio,b.x-a.x);}vec3 proj_pos=mix_globe_mercator(vec3(a_projected_pos.xy,anchorZ),mercator_pos,u_zoom_transition);\n#ifdef PROJECTED_POS_ON_VIEWPORT\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xy,0.0,1.0);\n#else\nvec4 projected_pos=u_label_plane_matrix*vec4(proj_pos.xyz+h,1.0);\n#endif\nhighp float angle_sin=sin(segment_angle+symbol_rotation);highp float angle_cos=cos(segment_angle+symbol_rotation);mat2 rotation_matrix=mat2(angle_cos,-1.0*angle_sin,angle_sin,angle_cos);float z=0.0;vec2 offset=rotation_matrix*(a_offset/32.0*fontScale);\n#ifdef PITCH_WITH_MAP_TERRAIN\nvec4 tile_pos=u_label_plane_matrix_inv*vec4(a_projected_pos.xy+offset,0.0,1.0);z=elevation(tile_pos.xy);\n#endif\nfloat occlusion_fade=occlusionFade(projectedPoint);gl_Position=mix(u_coord_matrix*vec4(projected_pos.xy/projected_pos.w+offset,z,1.0),AWAY,float(projectedPoint.w <=0.0 || occlusion_fade==0.0));float gamma_scale=gl_Position.w;vec2 fade_opacity=unpack_opacity(a_fade_opacity);float fade_change=fade_opacity[1] > 0.5 ? u_fade_change :-u_fade_change;float interpolated_fade_opacity=max(0.0,min(occlusion_fade,fade_opacity[0]+fade_change));float projection_transition_fade=1.0;\n#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)\nprojection_transition_fade=1.0-step(EPSILON,u_zoom_transition);\n#endif\nv_data0.xy=a_tex/u_texsize;v_data0.zw=a_tex/u_texsize_icon;v_data1=vec4(gamma_scale,size,interpolated_fade_opacity*projection_transition_fade,is_sdf);}"),terrainRaster:Ye("uniform sampler2D u_image0;varying vec2 v_pos0;\n#ifdef FOG\nvarying float v_fog_opacity;\n#endif\nvoid main() {vec4 color=texture2D(u_image0,v_pos0);\n#ifdef FOG\ncolor=fog_dither(fog_apply_from_vert(color,v_fog_opacity));\n#endif\ngl_FragColor=color;\n#ifdef TERRAIN_WIREFRAME\ngl_FragColor=vec4(1.0,0.0,0.0,0.8);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_matrix;uniform float u_skirt_height;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying vec2 v_pos0;\n#ifdef FOG\nvarying float v_fog_opacity;\n#endif\nconst float skirtOffset=24575.0;const float wireframeOffset=0.00015;void main() {v_pos0=a_texture_pos/8192.0;float skirt=float(a_pos.x >=skirtOffset);float elevation=elevation(a_texture_pos)-skirt*u_skirt_height;\n#ifdef TERRAIN_WIREFRAME\nelevation+=u_skirt_height*u_skirt_height*wireframeOffset;\n#endif\nvec2 decodedPos=a_pos-vec2(skirt*skirtOffset,0.0);gl_Position=u_matrix*vec4(decodedPos,elevation,1.0);\n#ifdef FOG\nv_fog_opacity=fog(fog_position(vec3(decodedPos,elevation)));\n#endif\n}"),terrainDepth:Ye("#ifdef GL_ES\nprecision highp float;\n#endif\nvarying float v_depth;void main() {gl_FragColor=pack_depth(v_depth);}","uniform mat4 u_matrix;attribute vec2 a_pos;attribute vec2 a_texture_pos;varying float v_depth;void main() {float elevation=elevation(a_texture_pos);gl_Position=u_matrix*vec4(a_pos,elevation,1.0);v_depth=gl_Position.z/gl_Position.w;}"),skybox:Ye("\nvarying lowp vec3 v_uv;uniform lowp samplerCube u_cubemap;uniform lowp float u_opacity;uniform highp float u_temporal_offset;uniform highp vec3 u_sun_direction;float sun_disk(highp vec3 ray_direction,highp vec3 sun_direction) {highp float cos_angle=dot(normalize(ray_direction),sun_direction);const highp float cos_sun_angular_diameter=0.99996192306;const highp float smoothstep_delta=1e-5;return smoothstep(\ncos_sun_angular_diameter-smoothstep_delta,cos_sun_angular_diameter+smoothstep_delta,cos_angle);}float map(float value,float start,float end,float new_start,float new_end) {return ((value-start)*(new_end-new_start))/(end-start)+new_start;}void main() {vec3 uv=v_uv;const float y_bias=0.015;uv.y+=y_bias;uv.y=pow(abs(uv.y),1.0/5.0);uv.y=map(uv.y,0.0,1.0,-1.0,1.0);vec3 sky_color=textureCube(u_cubemap,uv).rgb;\n#ifdef FOG\nsky_color=fog_apply_sky_gradient(v_uv.xzy,sky_color);\n#endif\nsky_color.rgb=dither(sky_color.rgb,gl_FragCoord.xy+u_temporal_offset);sky_color+=0.1*sun_disk(v_uv,u_sun_direction);gl_FragColor=vec4(sky_color*u_opacity,u_opacity);\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}",qe),skyboxGradient:Ye("varying highp vec3 v_uv;uniform lowp sampler2D u_color_ramp;uniform highp vec3 u_center_direction;uniform lowp float u_radius;uniform lowp float u_opacity;uniform highp float u_temporal_offset;void main() {float progress=acos(dot(normalize(v_uv),u_center_direction))/u_radius;vec4 color=texture2D(u_color_ramp,vec2(progress,0.5));\n#ifdef FOG\ncolor.rgb=fog_apply_sky_gradient(v_uv.xzy,color.rgb/color.a)*color.a;\n#endif\ncolor*=u_opacity;color.rgb=dither(color.rgb,gl_FragCoord.xy+u_temporal_offset);gl_FragColor=color;\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}",qe),skyboxCapture:Ye("\nvarying highp vec3 v_position;uniform highp float u_sun_intensity;uniform highp float u_luminance;uniform lowp vec3 u_sun_direction;uniform highp vec4 u_color_tint_r;uniform highp vec4 u_color_tint_m;\n#ifdef GL_ES\nprecision highp float;\n#endif\n#define BETA_R vec3(5.5e-6,13.0e-6,22.4e-6)\n#define BETA_M vec3(21e-6,21e-6,21e-6)\n#define MIE_G 0.76\n#define DENSITY_HEIGHT_SCALE_R 8000.0\n#define DENSITY_HEIGHT_SCALE_M 1200.0\n#define PLANET_RADIUS 6360e3\n#define ATMOSPHERE_RADIUS 6420e3\n#define SAMPLE_STEPS 10\n#define DENSITY_STEPS 4\nfloat ray_sphere_exit(vec3 orig,vec3 dir,float radius) {float a=dot(dir,dir);float b=2.0*dot(dir,orig);float c=dot(orig,orig)-radius*radius;float d=sqrt(b*b-4.0*a*c);return (-b+d)/(2.0*a);}vec3 extinction(vec2 density) {return exp(-vec3(BETA_R*u_color_tint_r.a*density.x+BETA_M*u_color_tint_m.a*density.y));}vec2 local_density(vec3 point) {float height=max(length(point)-PLANET_RADIUS,0.0);float exp_r=exp(-height/DENSITY_HEIGHT_SCALE_R);float exp_m=exp(-height/DENSITY_HEIGHT_SCALE_M);return vec2(exp_r,exp_m);}float phase_ray(float cos_angle) {return (3.0/(16.0*PI))*(1.0+cos_angle*cos_angle);}float phase_mie(float cos_angle) {return (3.0/(8.0*PI))*((1.0-MIE_G*MIE_G)*(1.0+cos_angle*cos_angle))/((2.0+MIE_G*MIE_G)*pow(1.0+MIE_G*MIE_G-2.0*MIE_G*cos_angle,1.5));}vec2 density_to_atmosphere(vec3 point,vec3 light_dir) {float ray_len=ray_sphere_exit(point,light_dir,ATMOSPHERE_RADIUS);float step_len=ray_len/float(DENSITY_STEPS);vec2 density_point_to_atmosphere=vec2(0.0);for (int i=0; i < DENSITY_STEPS;++i) {vec3 point_on_ray=point+light_dir*((float(i)+0.5)*step_len);density_point_to_atmosphere+=local_density(point_on_ray)*step_len;;}return density_point_to_atmosphere;}vec3 atmosphere(vec3 ray_dir,vec3 sun_direction,float sun_intensity) {vec2 density_orig_to_point=vec2(0.0);vec3 scatter_r=vec3(0.0);vec3 scatter_m=vec3(0.0);vec3 origin=vec3(0.0,PLANET_RADIUS,0.0);float ray_len=ray_sphere_exit(origin,ray_dir,ATMOSPHERE_RADIUS);float step_len=ray_len/float(SAMPLE_STEPS);for (int i=0; i < SAMPLE_STEPS;++i) {vec3 point_on_ray=origin+ray_dir*((float(i)+0.5)*step_len);vec2 density=local_density(point_on_ray)*step_len;density_orig_to_point+=density;vec2 density_point_to_atmosphere=density_to_atmosphere(point_on_ray,sun_direction);vec2 density_orig_to_atmosphere=density_orig_to_point+density_point_to_atmosphere;vec3 extinction=extinction(density_orig_to_atmosphere);scatter_r+=density.x*extinction;scatter_m+=density.y*extinction;}float cos_angle=dot(ray_dir,sun_direction);float phase_r=phase_ray(cos_angle);float phase_m=phase_mie(cos_angle);vec3 beta_r=BETA_R*u_color_tint_r.rgb*u_color_tint_r.a;vec3 beta_m=BETA_M*u_color_tint_m.rgb*u_color_tint_m.a;return (scatter_r*phase_r*beta_r+scatter_m*phase_m*beta_m)*sun_intensity;}const float A=0.15;const float B=0.50;const float C=0.10;const float D=0.20;const float E=0.02;const float F=0.30;vec3 uncharted2_tonemap(vec3 x) {return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;}void main() {vec3 ray_direction=v_position;ray_direction.y=pow(ray_direction.y,5.0);const float y_bias=0.015;ray_direction.y+=y_bias;vec3 color=atmosphere(normalize(ray_direction),u_sun_direction,u_sun_intensity);float white_scale=1.0748724675633854;color=uncharted2_tonemap((log2(2.0/pow(u_luminance,4.0)))*color)*white_scale;gl_FragColor=vec4(color,1.0);}","attribute highp vec3 a_pos_3f;uniform mat3 u_matrix_3f;varying highp vec3 v_position;float map(float value,float start,float end,float new_start,float new_end) {return ((value-start)*(new_end-new_start))/(end-start)+new_start;}void main() {vec4 pos=vec4(u_matrix_3f*a_pos_3f,1.0);v_position=pos.xyz;v_position.y*=-1.0;v_position.y=map(v_position.y,-1.0,1.0,0.0,1.0);gl_Position=vec4(a_pos_3f.xy,0.0,1.0);}"),globeRaster:Ye("uniform sampler2D u_image0;varying vec2 v_pos0;void main() {vec4 color=texture2D(u_image0,v_pos0);gl_FragColor=color;\n#ifdef TERRAIN_WIREFRAME\ngl_FragColor=vec4(1.0,0.0,0.0,0.8);\n#endif\n#ifdef OVERDRAW_INSPECTOR\ngl_FragColor=vec4(1.0);\n#endif\n}","uniform mat4 u_proj_matrix;uniform mat4 u_globe_matrix;uniform mat4 u_merc_matrix;uniform mat4 u_up_vector_matrix;uniform float u_zoom_transition;uniform vec2 u_merc_center;attribute vec3 a_globe_pos;attribute vec2 a_merc_pos;attribute vec2 a_uv;varying vec2 v_pos0;void main() {v_pos0=a_uv;vec2 uv=a_uv*EXTENT;vec4 up_vector=u_up_vector_matrix*vec4(elevationVector(uv),1.0);float height=elevation(uv);vec4 globe=u_globe_matrix*vec4(a_globe_pos+up_vector.xyz*height,1.0);vec4 mercator=vec4(a_merc_pos,height,1.0);mercator.xy-=u_merc_center;mercator.x=wrap(mercator.x,-0.5,0.5);mercator=u_merc_matrix*mercator;vec3 position=mix(globe.xyz,mercator.xyz,u_zoom_transition);gl_Position=u_proj_matrix*vec4(position,1.0);}"),globeAtmosphere:Ye("uniform vec2 u_center;uniform float u_radius;uniform vec2 u_screen_size;uniform float u_opacity;uniform highp float u_fadeout_range;uniform vec3 u_start_color;uniform vec3 u_end_color;uniform float u_pixel_ratio;void main() {highp vec2 fragCoord=gl_FragCoord.xy/u_pixel_ratio;fragCoord.y=u_screen_size.y-fragCoord.y;float distFromCenter=length(fragCoord-u_center);float normDistFromCenter=length(fragCoord-u_center)/u_radius;if (normDistFromCenter < 1.0)\ndiscard;float t=clamp(1.0-sqrt(normDistFromCenter-1.0)/u_fadeout_range,0.0,1.0);vec3 color=mix(u_start_color,u_end_color,1.0-t);gl_FragColor=vec4(color*t*u_opacity,u_opacity);}","attribute vec3 a_pos;void main() {gl_Position=vec4(a_pos,1.0);}"),globeDepth:Ye("#ifdef GL_ES\nprecision highp float;\n#endif\nvarying float v_depth;void main() {gl_FragColor=pack_depth(v_depth);}","uniform mat4 u_proj_matrix;uniform mat4 u_globe_matrix;uniform mat4 u_merc_matrix;uniform mat4 u_up_vector_matrix;uniform float u_zoom_transition;uniform vec2 u_merc_center;attribute vec3 a_globe_pos;attribute vec2 a_merc_pos;attribute vec2 a_uv;varying float v_depth;void main() {vec2 uv=a_uv*EXTENT;vec4 up_vector=u_up_vector_matrix*vec4(elevationVector(uv),1.0);float height=elevation(uv);vec4 globe=u_globe_matrix*vec4(a_globe_pos+up_vector.xyz*height,1.0);vec4 mercator=vec4(a_merc_pos,height,1.0);mercator.xy-=u_merc_center;mercator.x=wrap(mercator.x,-0.5,0.5);mercator=u_merc_matrix*mercator;vec3 position=mix(globe.xyz,mercator.xyz,u_zoom_transition);gl_Position=u_proj_matrix*vec4(position,1.0);v_depth=gl_Position.z/gl_Position.w;}")};function Ye(t,e,i){const r=/#pragma mapbox: ([\w]+) ([\w]+) ([\w]+) ([\w]+)/g,n=/uniform (highp |mediump |lowp )?([\w]+) ([\w]+)([\s]*)([\w]*)/g,o=e.match(/attribute (highp |mediump |lowp )?([\w]+) ([\w]+)/g),s=t.match(n),a=e.match(n),l=Ze.match(n);let c=a?a.concat(s):s;i||($e.staticUniforms&&(c=$e.staticUniforms.concat(c)),Xe.staticUniforms&&(c=Xe.staticUniforms.concat(c))),c&&(c=c.concat(l));const h={};return{fragmentSource:t=t.replace(r,(t,e,i,r,n)=>(h[n]=!0,"define"===e?`\n#ifndef HAS_UNIFORM_u_${n}\nvarying ${i} ${r} ${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:`\n#ifdef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = u_${n};\n#endif\n`)),vertexSource:e=e.replace(r,(t,e,i,r,n)=>{const o="float"===r?"vec2":"vec4",s=n.match(/color/)?"color":o;return h[n]?"define"===e?`\n#ifndef HAS_UNIFORM_u_${n}\nuniform lowp float u_${n}_t;\nattribute ${i} ${o} a_${n};\nvarying ${i} ${r} ${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:"vec4"===s?`\n#ifndef HAS_UNIFORM_u_${n}\n ${n} = a_${n};\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:`\n#ifndef HAS_UNIFORM_u_${n}\n ${n} = unpack_mix_${s}(a_${n}, u_${n}_t);\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:"define"===e?`\n#ifndef HAS_UNIFORM_u_${n}\nuniform lowp float u_${n}_t;\nattribute ${i} ${o} a_${n};\n#else\nuniform ${i} ${r} u_${n};\n#endif\n`:"vec4"===s?`\n#ifndef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = a_${n};\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`:`\n#ifndef HAS_UNIFORM_u_${n}\n ${i} ${r} ${n} = unpack_mix_${s}(a_${n}, u_${n}_t);\n#else\n ${i} ${r} ${n} = u_${n};\n#endif\n`}),staticAttributes:o,staticUniforms:c}}class Je{constructor(){this.boundProgram=null,this.boundLayoutVertexBuffer=null,this.boundPaintVertexBuffers=[],this.boundIndexBuffer=null,this.boundVertexOffset=null,this.boundDynamicVertexBuffer=null,this.vao=null}bind(t,e,i,r,n,o,s,a){this.context=t;let l=this.boundPaintVertexBuffers.length!==r.length;for(let c=0;!l&&c{const n=i.paint.get("hillshade-shadow-color"),o=i.paint.get("hillshade-highlight-color"),s=i.paint.get("hillshade-accent-color");let a=i.paint.get("hillshade-illumination-direction")*(Math.PI/180);"viewport"===i.paint.get("hillshade-illumination-anchor")&&(a-=t.transform.angle);const l=!t.options.moving;return{u_matrix:r||t.transform.calculateProjMatrix(e.tileID.toUnwrapped(),l),u_image:0,u_latrange:Qe(0,e.tileID),u_light:[i.paint.get("hillshade-exaggeration"),a],u_shadow:n,u_highlight:o,u_accent:s}})(e,r,n,e.terrain?i.projMatrix:null);e.prepareDrawProgram(l,u,i.toUnwrapped());const{tileBoundsBuffer:p,tileBoundsIndexBuffer:f,tileBoundsSegments:m}=e.getTileBoundsBuffers(r);u.draw(l,c.TRIANGLES,o,s,a,t.CullFaceMode.disabled,d,n.id,p,f,m)}function ei(e,i,r){if(!i.needsDEMTextureUpload)return;const n=e.context,o=n.gl;n.pixelStoreUnpackPremultiplyAlpha.set(!1),i.demTexture=i.demTexture||e.getTileTexture(r.stride);const s=r.getPixels();i.demTexture?i.demTexture.update(s,{premultiply:!1}):i.demTexture=new t.Texture(n,s,o.RGBA,{premultiply:!1}),i.needsDEMTextureUpload=!1}function ii(e,i,r,n,o,s){const a=e.context,l=a.gl;if(!i.dem)return;const c=i.dem;if(a.activeTexture.set(l.TEXTURE1),ei(e,i,c),!i.demTexture)return;i.demTexture.bind(l.NEAREST,l.CLAMP_TO_EDGE);const h=c.dim;a.activeTexture.set(l.TEXTURE0);let u=i.fbo;if(!u){const e=new t.Texture(a,{width:h,height:h,data:null},l.RGBA);e.bind(l.LINEAR,l.CLAMP_TO_EDGE),u=i.fbo=a.createFramebuffer(h,h,!0),u.colorAttachment.set(e.texture)}a.bindFramebuffer.set(u.framebuffer),a.viewport.set([0,0,h,h]);const{tileBoundsBuffer:d,tileBoundsIndexBuffer:p,tileBoundsSegments:f}=e.getMercatorTileBoundsBuffers();e.useProgram("hillshadePrepare").draw(a,l.TRIANGLES,n,o,s,t.CullFaceMode.disabled,((e,i)=>{const r=i.stride,n=t.create$1();return t.ortho(n,0,t.EXTENT,-t.EXTENT,0,0,1),t.translate(n,n,[0,-t.EXTENT,0]),{u_matrix:n,u_image:1,u_dimension:[r,r],u_zoom:e.overscaledZ,u_unpack:i.unpackVector}})(i.tileID,c),r.id,d,p,f),i.needsHillshadePrepare=!1}const ri=(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_image0:new t.Uniform1i(e,i.u_image0),u_skirt_height:new t.Uniform1f(e,i.u_skirt_height)}),ni=(t,e)=>({u_matrix:t,u_image0:0,u_skirt_height:e}),oi=new class{constructor(){this.operations={}}newMorphing(t,e,i,r,n){if(t in this.operations){const e=this.operations[t];e.to.tileID.key!==i.tileID.key&&(e.queued=i)}else this.operations[t]={startTime:r,phase:0,duration:n,from:e,to:i,queued:null}}getMorphValuesForProxy(t){if(!(t in this.operations))return null;const e=this.operations[t];return{from:e.from,to:e.to,phase:e.phase}}update(t){for(const e in this.operations){const i=this.operations[e];for(i.phase=(t-i.startTime)/i.duration;i.phase>=1||!this._validOp(i);)if(!this._nextOp(i,t)){delete this.operations[e];break}}}_nextOp(t,e){return!!t.queued&&(t.from=t.to,t.to=t.queued,t.queued=null,t.phase=0,t.startTime=e,!0)}_validOp(t){return t.from.hasData()&&t.to.hasData()}},si={0:null,1:"TERRAIN_VERTEX_MORPHING",2:"TERRAIN_WIREFRAME"};function ai(t,e){const i=1<({u_matrix:t});function ci(e,i,r,n,o){if(o>0){const s=t.exported.now(),a=(s-e.timeAdded)/o,l=i?(s-i.timeAdded)/o:-1,c=r.getSource(),h=n.coveringZoomLevel({tileSize:c.tileSize,roundZoom:c.roundZoom}),u=!i||Math.abs(i.tileID.overscaledZ-h)>Math.abs(e.tileID.overscaledZ-h),d=u&&e.refreshedUponExpiration?1:t.clamp(u?a:1-l,0,1);return e.refreshedUponExpiration&&a>=1&&(e.refreshedUponExpiration=!1),i?{opacity:1,mix:1-d}:{opacity:d,mix:0}}return{opacity:1,mix:0}}class hi extends t.SourceCache{constructor(t){const e=At("proxy",{type:"geojson",maxzoom:t.transform.maxZoom},new C(Bt(),null),t.style);super("proxy",e,!1),e.setEventedParent(this),this.map=this.getSource().map=t,this.used=this._sourceLoaded=!0,this.renderCache=[],this.renderCachePool=[],this.proxyCachedFBO={}}update(e,i,r){if(e.freezeTileCoverage)return;this.transform=e;const n=e.coveringTiles({tileSize:this._source.tileSize,minzoom:this._source.minzoom,maxzoom:this._source.maxzoom,roundZoom:this._source.roundZoom,reparseOverscaled:this._source.reparseOverscaled}).reduce((i,r)=>{if(i[r.key]="",!this._tiles[r.key]){const i=new t.Tile(r,this._source.tileSize*r.overscaleFactor(),e.tileZoom);i.state="loaded",this._tiles[r.key]=i}return i},{});for(const t in this._tiles)t in n||(this.freeFBO(t),this._tiles[t].unloadVectorData(),delete this._tiles[t])}freeFBO(t){const e=this.proxyCachedFBO[t];if(void 0!==e){const i=Object.values(e);this.renderCachePool.push(...i),delete this.proxyCachedFBO[t]}}deallocRenderCache(){this.renderCache.forEach(t=>t.fb.destroy()),this.renderCache=[],this.renderCachePool=[],this.proxyCachedFBO={}}}class ui extends t.OverscaledTileID{constructor(t,e,i){super(t.overscaledZ,t.wrap,t.canonical.z,t.canonical.x,t.canonical.y),this.proxyTileKey=e,this.projMatrix=i}}class di extends t.Elevation{constructor(e,i){super(),this.painter=e,this.terrainTileForTile={},this.prevTerrainTileForTile={};const[r,n,o]=function(e){const i=new t.StructArrayLayout4i8,r=new t.StructArrayLayout3ui6,n=131;i.reserve(17161),r.reserve(33800);const o=t.EXTENT/128,s=t.EXTENT+o/2,a=s+o;for(let c=-o;cs||c<0||c>s?24575:0,n=t.clamp(Math.round(e),0,t.EXTENT),o=t.clamp(Math.round(c),0,t.EXTENT);i.emplaceBack(n+r,o,n,o)}const l=(t,e)=>{const i=e*n+t;r.emplaceBack(i+1,i,i+n),r.emplaceBack(i+n,i+n+1,i+1)};for(let t=1;t<129;t++)for(let e=1;e<129;e++)l(e,t);return[0,129].forEach(t=>{for(let e=0;e<130;e++)l(e,t),l(t,e)}),[i,r,32768]}(),s=e.context;this.gridBuffer=s.createVertexBuffer(r,t.boundsAttributes.members),this.gridIndexBuffer=s.createIndexBuffer(n),this.gridSegments=t.SegmentVector.simpleSegment(0,0,r.length,n.length),this.gridNoSkirtSegments=t.SegmentVector.simpleSegment(0,0,r.length,o),this.proxyCoords=[],this.proxiedCoords={},this._visibleDemTiles=[],this._drapedRenderBatches=[],this._sourceTilesOverlap={},this.proxySourceCache=new hi(i.map),this.orthoMatrix=t.create$1(),t.ortho(this.orthoMatrix,0,t.EXTENT,0,t.EXTENT,0,1);const a=s.gl;this._overlapStencilMode=new t.StencilMode({func:a.GEQUAL,mask:255},0,255,a.KEEP,a.KEEP,a.REPLACE),this._previousZoom=e.transform.zoom,this.pool=[],this._findCoveringTileCache={},this._tilesDirty={},this.style=i,this._useVertexMorphing=!0,this._exaggeration=1}set style(t){t.on("data",this._onStyleDataEvent.bind(this)),t.on("neworder",this._checkRenderCacheEfficiency.bind(this)),this._style=t,this._checkRenderCacheEfficiency()}update(e,i,r){if(e&&e.terrain){this._style!==e&&(this.style=e),this.enabled=!0;const n=e.terrain.properties;this.sourceCache=e._getSourceCache(n.get("source")),this._exaggeration=n.get("exaggeration");const o=()=>{this.sourceCache.used&&t.warnOnce(`Raster DEM source '${this.sourceCache.id}' is used both for terrain and as layer source.\nThis leads to lower resolution of hillshade. For full hillshade resolution but higher memory consumption, define another raster DEM source.`);const e=this.sourceCache.getSource().tileSize/128,r=this.proxySourceCache.getSource().tileSize;this.sourceCache.update(i,e*r,!0),this._findCoveringTileCache[this.sourceCache.id]={}};this.sourceCache.usedForTerrain||(this._findCoveringTileCache[this.sourceCache.id]={},this.sourceCache.usedForTerrain=!0,o(),this._initializing=!0),o(),i.updateElevation(!r),this._findCoveringTileCache[this.proxySourceCache.id]={},this.proxySourceCache.update(i),this._emptyDEMTextureDirty=!0}else this._disable()}_checkRenderCacheEfficiency(){const e=this.renderCacheEfficiency(this._style);this._style.map._optimizeForTerrain||100!==e.efficiency&&t.warnOnce(`Terrain render cache efficiency is not optimal (${e.efficiency}%) and performance\n may be affected negatively, consider placing all background, fill and line layers before layer\n with id '${e.firstUndrapedLayer}' or create a map using optimizeForTerrain: true option.`)}_onStyleDataEvent(t){t.coord&&"source"===t.dataType?this._clearRenderCacheForTile(t.sourceCacheId,t.coord):"style"===t.dataType&&(this._invalidateRenderCache=!0)}_disable(){if(this.enabled&&(this.enabled=!1,this._sharedDepthStencil=void 0,this.proxySourceCache.deallocRenderCache(),this._style))for(const t in this._style._sourceCaches)this._style._sourceCaches[t].usedForTerrain=!1}destroy(){this._disable(),this._emptyDEMTexture&&this._emptyDEMTexture.destroy(),this.pool.forEach(t=>t.fb.destroy()),this.pool=[],this._depthFBO&&(this._depthFBO.destroy(),delete this._depthFBO,delete this._depthTexture)}_source(){return this.enabled?this.sourceCache:null}exaggeration(){return this._exaggeration}get visibleDemTiles(){return this._visibleDemTiles}get drapeBufferSize(){const t=2*this.proxySourceCache.getSource().tileSize;return[t,t]}set useVertexMorphing(t){this._useVertexMorphing=t}updateTileBinding(e){if(!this.enabled)return;this.prevTerrainTileForTile=this.terrainTileForTile;const i=this.proxySourceCache,r=this.painter.transform;this._initializing&&(this._initializing=0===r._centerAltitude&&-1===this.getAtPointOrZero(t.MercatorCoordinate.fromLngLat(r.center),-1),this._emptyDEMTextureDirty=!this._initializing);const n=this.proxyCoords=i.getIds().map(t=>{const e=i.getTileByID(t).tileID;return e.projMatrix=r.calculateProjMatrix(e.toUnwrapped()),e});!function(e,i){const r=i.transform.pointCoordinate(i.transform.getCameraPoint()),n=new t.pointGeometry(r.x,r.y);e.sort((e,i)=>{if(i.overscaledZ-e.overscaledZ)return i.overscaledZ-e.overscaledZ;const r=new t.pointGeometry(e.canonical.x+(1<{this.proxyToSource[t.key]={}}),this.terrainTileForTile={};const s=this._style._sourceCaches;for(const t in s){const i=s[t];if(!i.used)continue;if(i!==this.sourceCache&&(this._findCoveringTileCache[i.id]={}),this._setupProxiedCoordsForOrtho(i,e[t],o),i.usedForTerrain)continue;const r=e[t];i.getSource().reparseOverscaled&&this._assignTerrainTiles(r)}this.proxiedCoords[i.id]=n.map(t=>new ui(t,t.key,this.orthoMatrix)),this._assignTerrainTiles(n),this._prepareDEMTextures(),this._setupDrapedRenderBatches(),this._initFBOPool(),this._setupRenderCache(o),this.renderingToTexture=!1,this._updateTimestamp=t.exported.now();const a={};this._visibleDemTiles=[];for(const t of this.proxyCoords){const e=this.terrainTileForTile[t.key];if(!e)continue;const i=e.tileID.key;i in a||(this._visibleDemTiles.push(e),a[i]=i)}}_assignTerrainTiles(t){this._initializing||t.forEach(t=>{if(this.terrainTileForTile[t.key])return;const e=this._findTileCoveringTileID(t,this.sourceCache);e&&(this.terrainTileForTile[t.key]=e)})}_prepareDEMTextures(){const t=this.painter.context,e=t.gl;for(const i in this.terrainTileForTile){const r=this.terrainTileForTile[i],n=r.dem;!n||r.demTexture&&!r.needsDEMTextureUpload||(t.activeTexture.set(e.TEXTURE1),ei(this.painter,r,n))}}_prepareDemTileUniforms(t,e,i,r){if(!e||null==e.demTexture)return!1;const n=t.tileID.canonical,o=Math.pow(2,e.tileID.canonical.z-n.z),s=r||"";return i["u_dem_tl"+s]=[n.x*o%1,n.y*o%1],i["u_dem_scale"+s]=o,!0}get emptyDEMTexture(){return!this._emptyDEMTextureDirty&&this._emptyDEMTexture?this._emptyDEMTexture:this._updateEmptyDEMTexture()}_getLoadedAreaMinimum(){let t=0;const e=this._visibleDemTiles.reduce((e,i)=>{if(!i.dem)return e;const r=i.dem.tree.minimums[0];return r>0&&t++,e+r},0);return t?e/t:0}_updateEmptyDEMTexture(){const e=this.painter.context,i=e.gl;e.activeTexture.set(i.TEXTURE2);const r=this._getLoadedAreaMinimum(),n={width:1,height:1,data:new Uint8Array(t.DEMData.pack(r,this.sourceCache.getSource().encoding))};this._emptyDEMTextureDirty=!1;let o=this._emptyDEMTexture;return o?o.update(n,{premultiply:!1}):o=this._emptyDEMTexture=new t.Texture(e,n,i.RGBA,{premultiply:!1}),o}setupElevationDraw(e,i,r){const n=this.painter.context,o=n.gl,s=(a=this.sourceCache.getSource().encoding,{u_dem:2,u_dem_prev:4,u_dem_unpack:t.DEMData.getUnpackVector(a),u_dem_tl:[0,0],u_dem_tl_prev:[0,0],u_dem_scale:0,u_dem_scale_prev:0,u_dem_size:0,u_dem_lerp:1,u_depth:3,u_depth_size_inv:[0,0],u_exaggeration:0,u_tile_tl_up:[0,0,1],u_tile_tr_up:[0,0,1],u_tile_br_up:[0,0,1],u_tile_bl_up:[0,0,1],u_tile_up_scale:1});var a;s.u_dem_size=this.sourceCache.getSource().tileSize,s.u_exaggeration=this.exaggeration();let l=null,c=null,h=1;if(r&&r.morphing&&this._useVertexMorphing){const t=r.morphing.srcDemTile,i=r.morphing.dstDemTile;h=r.morphing.phase,t&&i&&(this._prepareDemTileUniforms(e,t,s,"_prev")&&(c=t),this._prepareDemTileUniforms(e,i,s)&&(l=i))}if(c&&l?(n.activeTexture.set(o.TEXTURE2),l.demTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE,o.NEAREST),n.activeTexture.set(o.TEXTURE4),c.demTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE,o.NEAREST),s.u_dem_lerp=h):(l=this.terrainTileForTile[e.tileID.key],n.activeTexture.set(o.TEXTURE2),(this._prepareDemTileUniforms(e,l,s)?l.demTexture:this.emptyDEMTexture).bind(o.NEAREST,o.CLAMP_TO_EDGE)),r&&r.useDepthForOcclusion&&(n.activeTexture.set(o.TEXTURE3),this._depthTexture.bind(o.NEAREST,o.CLAMP_TO_EDGE),s.u_depth_size_inv=[1/this._depthFBO.width,1/this._depthFBO.height]),r&&r.useMeterToDem&&l){const e=(1<{if(c===t)return;const r=[si[t]];i&&r.push(si[h]),l=e.useProgram("terrainRaster",null,r),c=t},d=e.colorModeForRenderPass(),p=new t.DepthMode(a.LEQUAL,t.DepthMode.ReadWrite,e.depthRangeFor3D);oi.update(o);const f=e.transform,m=6*Math.pow(1.5,22-f.zoom)*i.exaggeration();(h?[!1,!0]:[!1]).forEach(h=>{c=-1;const _=h?a.LINES:a.TRIANGLES,[g,y]=h?i.getWirefameBuffer():[i.gridIndexBuffer,i.gridSegments];for(const c of n){const n=r.getTile(c),b=t.StencilMode.disabled,w=i.prevTerrainTileForTile[c.key],T=i.terrainTileForTile[c.key];v=T,null!=(x=w)&&null!=v&&x.hasData()&&v.hasData()&&null!=x.demTexture&&null!=v.demTexture&&x.tileID.key!==v.tileID.key&&oi.newMorphing(c.key,w,T,o,250),s.activeTexture.set(a.TEXTURE0),n.texture.bind(a.LINEAR,a.CLAMP_TO_EDGE);const E=oi.getMorphValuesForProxy(c.key),S=E?1:0;let A;E&&(A={morphing:{srcDemTile:E.from,dstDemTile:E.to,phase:t.easeCubicInOut(E.phase)}});const I=ni(c.projMatrix,ai(c.canonical,f.renderWorldCopies)?m/10:m);u(S,h),i.setupElevationDraw(n,l,A),e.prepareDrawProgram(s,l,c.toUnwrapped()),l.draw(s,_,p,b,d,t.CullFaceMode.backCCW,I,"terrain_raster",i.gridBuffer,g,y)}var x,v})}(i,this,this.proxySourceCache,e,this._updateTimestamp),this.renderingToTexture=!0,e.splice(0,e.length))}renderBatch(e){if(0===this._drapedRenderBatches.length)return e+1;this.renderingToTexture=!0;const i=this.painter,r=this.painter.context,n=this.proxySourceCache,o=this.proxiedCoords[n.id],s=this._drapedRenderBatches.shift(),a=[],l=i.style.order;let c=0;for(const h of o){const o=n.getTileByID(h.proxyTileKey),u=n.proxyCachedFBO[h.key]?n.proxyCachedFBO[h.key][e]:void 0,d=void 0!==u?n.renderCache[u]:this.pool[c++],p=void 0!==u;if(o.texture=d.tex,p&&!d.dirty){a.push(o.tileID);continue}let f;r.bindFramebuffer.set(d.fb.framebuffer),this.renderedToTile=!1,d.dirty&&(r.clear({color:t.Color.transparent}),d.dirty=!1);for(let t=s.start;t<=s.end;++t){const e=i.style._layers[l[t]];if(e.isHidden(i.transform.zoom))continue;const n=i.style._getLayerSourceCache(e),o=n?this.proxyToSource[h.key][n.id]:[h];if(!o)continue;const s=o;r.viewport.set([0,0,d.fb.width,d.fb.height]),f!==(n?n.id:null)&&(this._setupStencil(d,o,e,n),f=n?n.id:null),i.renderLayer(i,n,e,s)}this.renderedToTile?(d.dirty=!0,a.push(o.tileID)):p||--c,5===c&&(c=0,this.renderToBackBuffer(a))}return this.renderToBackBuffer(a),this.renderingToTexture=!1,r.bindFramebuffer.set(null),r.viewport.set([0,0,i.width,i.height]),s.end+1}postRender(){}renderCacheEfficiency(t){const e=t.order.length;if(0===e)return{efficiency:100};let i,r=0,n=0,o=!1;for(let s=0;st.dem).forEach(e=>{t=Math.min(t,e.dem.tree.minimums[0])}),0===t?t:(t-30)*this._exaggeration}raycast(t,e,i){if(!this._visibleDemTiles)return null;const r=this._visibleDemTiles.filter(t=>t.dem).map(r=>{const n=r.tileID,o=Math.pow(2,n.overscaledZ),{x:s,y:a}=n.canonical,l=s/o,c=(s+1)/o,h=a/o,u=(a+1)/o;return{minx:l,miny:h,maxx:c,maxy:u,t:r.dem.tree.raycastRoot(l,h,c,u,t,e,i),tile:r}});r.sort((t,e)=>(null!==t.t?t.t:Number.MAX_VALUE)-(null!==e.t?e.t:Number.MAX_VALUE));for(const n of r){if(null==n.t)return null;const r=n.tile.dem.tree.raycast(n.minx,n.miny,n.maxx,n.maxy,t,e,i);if(null!=r)return r}return null}_createFBO(){const e=this.painter.context,i=e.gl,r=this.drapeBufferSize;e.activeTexture.set(i.TEXTURE0);const n=new t.Texture(e,{width:r[0],height:r[1],data:null},i.RGBA);n.bind(i.LINEAR,i.CLAMP_TO_EDGE);const o=e.createFramebuffer(r[0],r[1],!1);return o.colorAttachment.set(n.texture),o.depthAttachment=new xt(e,o.framebuffer),void 0===this._sharedDepthStencil?(this._sharedDepthStencil=e.createRenderbuffer(e.gl.DEPTH_STENCIL,r[0],r[1]),this._stencilRef=0,o.depthAttachment.set(this._sharedDepthStencil),e.clear({stencil:0})):o.depthAttachment.set(this._sharedDepthStencil),e.extTextureFilterAnisotropic&&!e.extTextureFilterAnisotropicForceOff&&i.texParameterf(i.TEXTURE_2D,e.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,e.extTextureFilterAnisotropicMax),{fb:o,tex:n,dirty:!1}}_initFBOPool(){for(;this.pool.length{const e=this._style._layers[t],i=e.isHidden(this.painter.transform.zoom),r=e.getCrossfadeParameters(),n=!!r&&1!==r.t,o=e.hasTransition();return"custom"!==e.type&&!i&&(n||o)})}_clearRasterFadeFromRenderCache(){let t=!1;for(const e in this._style._sourceCaches)if(this._style._sourceCaches[e]._source instanceof wt){t=!0;break}if(t)for(let e=0;ee.renderCachePool.length){const t=Object.values(e.proxyCachedFBO);e.proxyCachedFBO={};for(let i=0;i=0;o--){const n=i[o];if(e.getTileByID(n.key),void 0!==e.proxyCachedFBO[n.key]){const i=t[n.key],o=this.proxyToSource[n.key];let s=0;for(const t in o){const e=o[t],n=i[t];if(!n||n.length!==e.length||e.some((e,i)=>e!==n[i]||r[t]&&r[t].hasOwnProperty(e.key))){s=-1;break}++s}for(const t in e.proxyCachedFBO[n.key])e.renderCache[e.proxyCachedFBO[n.key][t]].dirty=s<0||s!==Object.values(i).length}}const n=[...this._drapedRenderBatches];n.sort((t,e)=>e.end-e.start-(t.end-t.start));for(const o of n)for(const t of i){if(e.proxyCachedFBO[t.key])continue;let i=e.renderCachePool.pop();void 0===i&&e.renderCache.length<50&&(i=e.renderCache.length,e.renderCache.push(this._createFBO())),void 0!==i&&(e.proxyCachedFBO[t.key]={},e.proxyCachedFBO[t.key][o.start]=i,e.renderCache[i].dirty=!0)}this._tilesDirty={}}_setupStencil(t,e,i,r){if(!r||!this._sourceTilesOverlap[r.id])return void(this._overlapStencilType&&(this._overlapStencilType=!1));const n=this.painter.context,o=n.gl;if(e.length<=1)return void(this._overlapStencilType=!1);let s;if(i.isTileClipped())s=e.length,this._overlapStencilMode.test={func:o.EQUAL,mask:255},this._overlapStencilType="Clip";else{if(!(e[0].overscaledZ>e[e.length-1].overscaledZ))return void(this._overlapStencilType=!1);s=1,this._overlapStencilMode.test={func:o.GREATER,mask:255},this._overlapStencilType="Mask"}this._stencilRef+s>255&&(n.clear({stencil:0}),this._stencilRef=0),this._stencilRef+=s,this._overlapStencilMode.ref=this._stencilRef,i.isTileClipped()&&this._renderTileClippingMasks(e,this._overlapStencilMode.ref)}stencilModeForRTTOverlap(e){return this.renderingToTexture&&this._overlapStencilType?("Clip"===this._overlapStencilType&&(this._overlapStencilMode.ref=this.painter._tileClippingMaskIDs[e.key]),this._overlapStencilMode):t.StencilMode.disabled}_renderTileClippingMasks(e,i){const r=this.painter,n=this.painter.context,o=n.gl;r._tileClippingMaskIDs={},n.setColorMode(t.ColorMode.disabled),n.setDepthMode(t.DepthMode.disabled);const s=r.useProgram("clippingMask");for(const a of e){const e=r._tileClippingMaskIDs[a.key]=--i;s.draw(n,o.TRIANGLES,t.DepthMode.disabled,new t.StencilMode({func:o.ALWAYS,mask:0},e,255,o.KEEP,o.KEEP,o.REPLACE),t.ColorMode.disabled,t.CullFaceMode.disabled,li(a.projMatrix),"$clipping",r.tileExtentBuffer,r.quadTriangleIndexBuffer,r.tileExtentSegments)}}pointCoordinate(e){const i=this.painter.transform;if(e.x<0||e.x>i.width||e.y<0||e.y>i.height)return null;const r=[e.x,e.y,1,1];t.transformMat4(r,r,i.pixelMatrixInverse),t.scale$2(r,r,1/r[3]),r[0]/=i.worldSize,r[1]/=i.worldSize;const n=i._camera.position,o=t.mercatorZfromAltitude(1,i.center.lat),s=[n[0],n[1],n[2]/o,0],a=t.subtract([],r.slice(0,3),s);t.normalize(a,a);const l=this.raycast(s,a,this._exaggeration);return null!==l&&l?(t.scaleAndAdd(s,s,a,l),s[3]=s[2],s[2]*=o,s):null}drawDepth(){const e=this.painter,i=e.context,r=this.proxySourceCache,n=Math.ceil(e.width),o=Math.ceil(e.height);if(!this._depthFBO||this._depthFBO.width===n&&this._depthFBO.height===o||(this._depthFBO.destroy(),delete this._depthFBO,delete this._depthTexture),!this._depthFBO){const e=i.gl,r=i.createFramebuffer(n,o,!0);i.activeTexture.set(e.TEXTURE0);const s=new t.Texture(i,{width:n,height:o,data:null},e.RGBA);s.bind(e.NEAREST,e.CLAMP_TO_EDGE),r.colorAttachment.set(s.texture);const a=i.createRenderbuffer(i.gl.DEPTH_COMPONENT16,n,o);r.depthAttachment.set(a),this._depthFBO=r,this._depthTexture=s}i.bindFramebuffer.set(this._depthFBO.framebuffer),i.viewport.set([0,0,n,o]),function(e,i,r,n){const o=e.context,s=o.gl;o.clear({depth:1});const a=e.useProgram("terrainDepth"),l=new t.DepthMode(s.LESS,t.DepthMode.ReadWrite,e.depthRangeFor3D);for(const c of n){const e=r.getTile(c),n=ni(c.projMatrix,0);i.setupElevationDraw(e,a),a.draw(o,s.TRIANGLES,l,t.StencilMode.disabled,t.ColorMode.unblended,t.CullFaceMode.backCCW,n,"terrain_depth",i.gridBuffer,i.gridIndexBuffer,i.gridNoSkirtSegments)}}(e,this,r,this.proxyCoords)}_setupProxiedCoordsForOrtho(t,e,i){if(t.getSource()instanceof Et)return this._setupProxiedCoordsForImageSource(t,e,i);this._findCoveringTileCache[t.id]=this._findCoveringTileCache[t.id]||{};const r=this.proxiedCoords[t.id]=[],n=this.proxyCoords;for(let s=0;s(t.min.x=Math.min(t.min.x,e.x-a.x),t.min.y=Math.min(t.min.y,e.y-a.y),t.max.x=Math.max(t.max.x,e.x-a.x),t.max.y=Math.max(t.max.y,e.y-a.y),t),{min:new t.pointGeometry(Number.MAX_VALUE,Number.MAX_VALUE),max:new t.pointGeometry(-Number.MAX_VALUE,-Number.MAX_VALUE)}),c=(e,i)=>{const r=e.wrap+e.canonical.x/(1<s+l.max.x||n+oa+l.max.y};for(let t=0;tt.key===i.tileID.key);if(t)return t}if(i.tileID.key!==e.key){const r=e.canonical.z-i.tileID.canonical.z;let o,s,a;n=t.create$1();const l=i.tileID.wrap-e.wrap<0?(o=t.EXTENT>>r,s=o*((i.tileID.canonical.x<=n){const r=e.canonical.z-n;i.getSource().reparseOverscaled?(a=Math.max(e.canonical.z+2,i.transform.tileZoom),s=new t.OverscaledTileID(a,e.wrap,n,e.canonical.x>>r,e.canonical.y>>r)):0!==r&&(a=n,s=new t.OverscaledTileID(a,e.wrap,n,e.canonical.x>>r,e.canonical.y>>r))}s.key!==e.key&&(c.push(s.key),r=i.getTile(s))}const h=t=>{c.forEach(e=>{n[e]=t}),c.length=0};for(a-=1;a>=l&&(!r||!r.hasData());a--){r&&h(r.tileID.key);const t=s.calculateScaledKey(a);if(r=i.getTileByID(t),r&&r.hasData())break;const e=n[t];if(null===e)break;void 0===e?c.push(t):r=i.getTileByID(e)}return h(r?r.tileID.key:null),r&&r.hasData()?r:null}findDEMTileFor(t){return this.enabled?this._findTileCoveringTileID(t,this.sourceCache):null}prepareDrawTile(t){this.renderedToTile=!0}_clearRenderCacheForTile(t,e){let i=this._tilesDirty[t];i||(i=this._tilesDirty[t]={}),i[e.key]=!0}getWirefameBuffer(){if(!this.wireframeSegments){const e=function(e){let i,r,n;const o=new t.StructArrayLayout2ui4,s=131;for(r=1;r<129;r++){for(i=1;i<129;i++)n=r*s+i,o.emplaceBack(n,n+1),o.emplaceBack(n,n+s),o.emplaceBack(n+1,n+s),128===r&&o.emplaceBack(n+s,n+s+1);o.emplaceBack(n+1,n+1+s)}return o}();this.wireframeIndexBuffer=this.painter.context.createIndexBuffer(e),this.wireframeSegments=t.SegmentVector.simpleSegment(0,0,this.gridBuffer.length,e.length)}return[this.wireframeIndexBuffer,this.wireframeSegments]}}function pi(t){const e=[];for(let i=0;i"#define "+t));const _=m.concat("\n#ifdef GL_ES\nprecision mediump float;\n#else\n\n#if !defined(lowp)\n#define lowp\n#endif\n\n#if !defined(mediump)\n#define mediump\n#endif\n\n#if !defined(highp)\n#define highp\n#endif\n\n#endif",He,We.fragmentSource,Xe.fragmentSource,r.fragmentSource).join("\n"),g=m.concat("\n#ifdef GL_ES\nprecision highp float;\n#else\n\n#if !defined(lowp)\n#define lowp\n#endif\n\n#if !defined(mediump)\n#define mediump\n#endif\n\n#if !defined(highp)\n#define highp\n#endif\n\n#endif",He,We.vertexSource,Xe.vertexSource,$e.vertexSource,r.vertexSource).join("\n"),y=a.createShader(a.FRAGMENT_SHADER);if(a.isContextLost())return void(this.failedToCreate=!0);a.shaderSource(y,_),a.compileShader(y),a.attachShader(this.program,y);const x=a.createShader(a.VERTEX_SHADER);if(a.isContextLost())return void(this.failedToCreate=!0);a.shaderSource(x,g),a.compileShader(x),a.attachShader(this.program,x),this.attributes={};const v={};this.numAttributes=h.length;for(let t=0;t({u_dem:new t.Uniform1i(e,i.u_dem),u_dem_prev:new t.Uniform1i(e,i.u_dem_prev),u_dem_unpack:new t.Uniform4f(e,i.u_dem_unpack),u_dem_tl:new t.Uniform2f(e,i.u_dem_tl),u_dem_scale:new t.Uniform1f(e,i.u_dem_scale),u_dem_tl_prev:new t.Uniform2f(e,i.u_dem_tl_prev),u_dem_scale_prev:new t.Uniform1f(e,i.u_dem_scale_prev),u_dem_size:new t.Uniform1f(e,i.u_dem_size),u_dem_lerp:new t.Uniform1f(e,i.u_dem_lerp),u_exaggeration:new t.Uniform1f(e,i.u_exaggeration),u_depth:new t.Uniform1i(e,i.u_depth),u_depth_size_inv:new t.Uniform2f(e,i.u_depth_size_inv),u_meter_to_dem:new t.Uniform1f(e,i.u_meter_to_dem),u_label_plane_matrix_inv:new t.UniformMatrix4f(e,i.u_label_plane_matrix_inv),u_tile_tl_up:new t.Uniform3f(e,i.u_tile_tl_up),u_tile_tr_up:new t.Uniform3f(e,i.u_tile_tr_up),u_tile_br_up:new t.Uniform3f(e,i.u_tile_br_up),u_tile_bl_up:new t.Uniform3f(e,i.u_tile_bl_up),u_tile_up_scale:new t.Uniform1f(e,i.u_tile_up_scale)}))(e,v)),-1!==s.indexOf("FOG")&&(this.fogUniforms=((e,i)=>({u_fog_matrix:new t.UniformMatrix4f(e,i.u_fog_matrix),u_fog_range:new t.Uniform2f(e,i.u_fog_range),u_fog_color:new t.Uniform4f(e,i.u_fog_color),u_fog_horizon_blend:new t.Uniform1f(e,i.u_fog_horizon_blend),u_fog_temporal_offset:new t.Uniform1f(e,i.u_fog_temporal_offset)}))(e,v))}setTerrainUniformValues(t,e){if(!this.terrainUniforms)return;const i=this.terrainUniforms;if(!this.failedToCreate){t.program.set(this.program);for(const t in e)i[t].set(e[t])}}setFogUniformValues(t,e){if(!this.fogUniforms)return;const i=this.fogUniforms;if(!this.failedToCreate){t.program.set(this.program);for(const t in e)i[t].location&&i[t].set(e[t])}}draw(t,e,i,r,n,o,s,a,l,c,h,u,d,p,f,m){const _=t.gl;if(this.failedToCreate)return;t.program.set(this.program),t.setDepthMode(i),t.setStencilMode(r),t.setColorMode(n),t.setCullFace(o);for(const y in this.fixedUniforms)this.fixedUniforms[y].set(s[y]);p&&p.setUniforms(t,this.binderUniforms,u,{zoom:d});const g={[_.LINES]:2,[_.TRIANGLES]:3,[_.LINE_STRIP]:1}[e];for(const y of h.get()){const i=y.vaos||(y.vaos={});(i[a]||(i[a]=new Je)).bind(t,this,l,p?p.getPaintVertexBuffers():[],c,y.vertexOffset,f,m),_.drawElements(e,y.primitiveLength*g,_.UNSIGNED_SHORT,y.primitiveOffset*g*2)}}}function mi(t,e,i){const r=1/z(i,1,e.transform.tileZoom),n=Math.pow(2,i.tileID.overscaledZ),o=i.tileSize*Math.pow(2,e.transform.tileZoom)/n,s=o*(i.tileID.canonical.x+i.tileID.wrap*n),a=o*i.tileID.canonical.y;return{u_image:0,u_texsize:i.imageAtlasTexture.size,u_scale:[r,t.fromScale,t.toScale],u_fade:t.t,u_pixel_coord_upper:[s>>16,a>>16],u_pixel_coord_lower:[65535&s,65535&a]}}const _i=(e,i,r,n)=>{const o=i.style.light,s=o.properties.get("position"),a=[s.x,s.y,s.z],l=t.create$2();"viewport"===o.properties.get("anchor")&&(t.fromRotation(l,-i.transform.angle),t.transformMat3(a,a,l));const c=o.properties.get("color");return{u_matrix:e,u_lightpos:a,u_lightintensity:o.properties.get("intensity"),u_lightcolor:[c.r,c.g,c.b],u_vertical_gradient:+r,u_opacity:n}},gi=(e,i,r,n,o,s,a)=>t.extend(_i(e,i,r,n),mi(s,i,a),{u_height_factor:-Math.pow(2,o.overscaledZ)/a.tileSize/8}),yi=t=>({u_matrix:t}),xi=(e,i,r,n)=>t.extend(yi(e),mi(r,i,n)),vi=(t,e)=>({u_matrix:t,u_world:e}),bi=(e,i,r,n,o)=>t.extend(xi(e,i,r,n),{u_world:o}),wi=(e,i,r,n)=>{const o=e.transform;let s;return s="map"===n.paint.get("circle-pitch-alignment")?o.calculatePixelsToTileUnitsMatrix(r):new Float32Array([o.pixelsToGLUnits[0],0,0,o.pixelsToGLUnits[1]]),{u_camera_to_center_distance:o.cameraToCenterDistance,u_matrix:e.translatePosMatrix(i.projMatrix,r,n.paint.get("circle-translate"),n.paint.get("circle-translate-anchor")),u_device_pixel_ratio:t.exported.devicePixelRatio,u_extrude_scale:s}},Ti=t=>{const e=[];return"map"===t.paint.get("circle-pitch-alignment")&&e.push("PITCH_WITH_MAP"),"map"===t.paint.get("circle-pitch-scale")&&e.push("SCALE_WITH_MAP"),e},Ei=(e,i,r)=>{const n=t.EXTENT/r.tileSize;return{u_matrix:e,u_camera_to_center_distance:i.cameraToCenterDistance,u_extrude_scale:[i.pixelsToGLUnits[0]/n,i.pixelsToGLUnits[1]/n]}},Si=(t,e,i=1)=>({u_matrix:t,u_color:e,u_overlay:0,u_overlay_scale:i}),Ai=(t,e,i,r)=>({u_matrix:t,u_extrude_scale:z(e,1,i),u_intensity:r}),Ii=(e,i,r,n,o,s)=>{const a=e.transform,l=a.calculatePixelsToTileUnitsMatrix(i),c={u_matrix:zi(e,i,r,o),u_pixels_to_tile_units:l,u_device_pixel_ratio:t.exported.devicePixelRatio,u_units_to_pixels:[1/a.pixelsToGLUnits[0],1/a.pixelsToGLUnits[1]],u_dash_image:0,u_gradient_image:1,u_image_height:s,u_texsize:[0,0],u_scale:[0,0,0],u_mix:0};if(Pi(r)){const t=Ci(i,e.transform);c.u_texsize=i.lineAtlasTexture.size,c.u_scale=[t,n.fromScale,n.toScale],c.u_mix=n.t}return c},Mi=(e,i,r,n,o)=>{const s=e.transform,a=Ci(i,s);return{u_matrix:zi(e,i,r,o),u_texsize:i.imageAtlasTexture.size,u_pixels_to_tile_units:s.calculatePixelsToTileUnitsMatrix(i),u_device_pixel_ratio:t.exported.devicePixelRatio,u_image:0,u_scale:[a,n.fromScale,n.toScale],u_fade:n.t,u_units_to_pixels:[1/s.pixelsToGLUnits[0],1/s.pixelsToGLUnits[1]]}};function Ci(t,e){return 1/z(t,1,e.tileZoom)}function zi(t,e,i,r){return t.translatePosMatrix(r||e.tileID.projMatrix,e,i.paint.get("line-translate"),i.paint.get("line-translate-anchor"))}const ki=t=>{const e=[];return Pi(t)&&e.push("RENDER_LINE_DASH"),t.paint.get("line-gradient")&&e.push("RENDER_LINE_GRADIENT"),e};function Pi(t){const e=t.paint.get("line-dasharray").value;return e.value||"constant"!==e.kind}const Di=(t,e,i,r,n)=>{return{u_matrix:t,u_tl_parent:e,u_scale_parent:i,u_buffer_scale:1,u_fade_t:r.mix,u_opacity:r.opacity*n.paint.get("raster-opacity"),u_image0:0,u_image1:1,u_brightness_low:n.paint.get("raster-brightness-min"),u_brightness_high:n.paint.get("raster-brightness-max"),u_saturation_factor:(s=n.paint.get("raster-saturation"),s>0?1-1/(1.001-s):-s),u_contrast_factor:(o=n.paint.get("raster-contrast"),o>0?1/(1-o):1+o),u_spin_weights:Li(n.paint.get("raster-hue-rotate"))};var o,s};function Li(t){t*=Math.PI/180;const e=Math.sin(t),i=Math.cos(t);return[(2*i+1)/3,(-Math.sqrt(3)*e-i+1)/3,(Math.sqrt(3)*e-i+1)/3]}const Bi=(t,e,i,r,n,o,s,a,l,c,h,u,d,p)=>{const f=n.transform;return{u_is_size_zoom_constant:+("constant"===t||"source"===t),u_is_size_feature_constant:+("constant"===t||"camera"===t),u_size_t:e?e.uSizeT:0,u_size:e?e.uSize:0,u_camera_to_center_distance:f.cameraToCenterDistance,u_pitch:f.pitch/360*2*Math.PI,u_rotate_symbol:+i,u_aspect_ratio:f.width/f.height,u_fade_change:n.options.fadeDuration?n.symbolFadeChange:1,u_matrix:o,u_label_plane_matrix:s,u_coord_matrix:a,u_is_text:+l,u_pitch_with_map:+r,u_texsize:c,u_tile_id:h,u_zoom_transition:u,u_inv_rot_matrix:d,u_merc_center:p,u_texture:0}},Ri=(e,i,r,n,o,s,a,l,c,h,u,d,p,f,m)=>{const{cameraToCenterDistance:_,_pitch:g}=o.transform;return t.extend(Bi(e,i,r,n,o,s,a,l,c,h,d,p,f,m),{u_gamma_scale:n?_*Math.cos(o.terrain?0:g):1,u_device_pixel_ratio:t.exported.devicePixelRatio,u_is_halo:+u})},Fi=(e,i,r,n,o,s,a,l,c,h,u,d,p,f)=>t.extend(Ri(e,i,r,n,o,s,a,l,!0,c,!0,u,d,p,f),{u_texsize_icon:h,u_texture_icon:1}),Oi=(t,e,i)=>({u_matrix:t,u_opacity:e,u_color:i}),Ui=(e,i,r,n,o,s)=>t.extend(function(t,e,i,r){const n=i.imageManager.getPattern(t.from.toString()),o=i.imageManager.getPattern(t.to.toString()),{width:s,height:a}=i.imageManager.getPixelSize(),l=Math.pow(2,r.tileID.overscaledZ),c=r.tileSize*Math.pow(2,i.transform.tileZoom)/l,h=c*(r.tileID.canonical.x+r.tileID.wrap*l),u=c*r.tileID.canonical.y;return{u_image:0,u_pattern_tl_a:n.tl,u_pattern_br_a:n.br,u_pattern_tl_b:o.tl,u_pattern_br_b:o.br,u_texsize:[s,a],u_mix:e.t,u_pattern_size_a:n.displaySize,u_pattern_size_b:o.displaySize,u_scale_a:e.fromScale,u_scale_b:e.toScale,u_tile_units_to_pixels:1/z(r,1,i.transform.tileZoom),u_pixel_coord_upper:[h>>16,u>>16],u_pixel_coord_lower:[65535&h,65535&u]}}(n,s,r,o),{u_matrix:e,u_opacity:i}),Vi={fillExtrusion:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_lightpos:new t.Uniform3f(e,i.u_lightpos),u_lightintensity:new t.Uniform1f(e,i.u_lightintensity),u_lightcolor:new t.Uniform3f(e,i.u_lightcolor),u_vertical_gradient:new t.Uniform1f(e,i.u_vertical_gradient),u_opacity:new t.Uniform1f(e,i.u_opacity)}),fillExtrusionPattern:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_lightpos:new t.Uniform3f(e,i.u_lightpos),u_lightintensity:new t.Uniform1f(e,i.u_lightintensity),u_lightcolor:new t.Uniform3f(e,i.u_lightcolor),u_vertical_gradient:new t.Uniform1f(e,i.u_vertical_gradient),u_height_factor:new t.Uniform1f(e,i.u_height_factor),u_image:new t.Uniform1i(e,i.u_image),u_texsize:new t.Uniform2f(e,i.u_texsize),u_pixel_coord_upper:new t.Uniform2f(e,i.u_pixel_coord_upper),u_pixel_coord_lower:new t.Uniform2f(e,i.u_pixel_coord_lower),u_scale:new t.Uniform3f(e,i.u_scale),u_fade:new t.Uniform1f(e,i.u_fade),u_opacity:new t.Uniform1f(e,i.u_opacity)}),fill:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix)}),fillPattern:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_image:new t.Uniform1i(e,i.u_image),u_texsize:new t.Uniform2f(e,i.u_texsize),u_pixel_coord_upper:new t.Uniform2f(e,i.u_pixel_coord_upper),u_pixel_coord_lower:new t.Uniform2f(e,i.u_pixel_coord_lower),u_scale:new t.Uniform3f(e,i.u_scale),u_fade:new t.Uniform1f(e,i.u_fade)}),fillOutline:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_world:new t.Uniform2f(e,i.u_world)}),fillOutlinePattern:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_world:new t.Uniform2f(e,i.u_world),u_image:new t.Uniform1i(e,i.u_image),u_texsize:new t.Uniform2f(e,i.u_texsize),u_pixel_coord_upper:new t.Uniform2f(e,i.u_pixel_coord_upper),u_pixel_coord_lower:new t.Uniform2f(e,i.u_pixel_coord_lower),u_scale:new t.Uniform3f(e,i.u_scale),u_fade:new t.Uniform1f(e,i.u_fade)}),circle:(e,i)=>({u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_extrude_scale:new t.UniformMatrix2f(e,i.u_extrude_scale),u_device_pixel_ratio:new t.Uniform1f(e,i.u_device_pixel_ratio),u_matrix:new t.UniformMatrix4f(e,i.u_matrix)}),collisionBox:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_extrude_scale:new t.Uniform2f(e,i.u_extrude_scale)}),collisionCircle:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_inv_matrix:new t.UniformMatrix4f(e,i.u_inv_matrix),u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_viewport_size:new t.Uniform2f(e,i.u_viewport_size)}),debug:(e,i)=>({u_color:new t.UniformColor(e,i.u_color),u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_overlay:new t.Uniform1i(e,i.u_overlay),u_overlay_scale:new t.Uniform1f(e,i.u_overlay_scale)}),clippingMask:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix)}),heatmap:(e,i)=>({u_extrude_scale:new t.Uniform1f(e,i.u_extrude_scale),u_intensity:new t.Uniform1f(e,i.u_intensity),u_matrix:new t.UniformMatrix4f(e,i.u_matrix)}),heatmapTexture:(e,i)=>({u_image:new t.Uniform1i(e,i.u_image),u_color_ramp:new t.Uniform1i(e,i.u_color_ramp),u_opacity:new t.Uniform1f(e,i.u_opacity)}),hillshade:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_image:new t.Uniform1i(e,i.u_image),u_latrange:new t.Uniform2f(e,i.u_latrange),u_light:new t.Uniform2f(e,i.u_light),u_shadow:new t.UniformColor(e,i.u_shadow),u_highlight:new t.UniformColor(e,i.u_highlight),u_accent:new t.UniformColor(e,i.u_accent)}),hillshadePrepare:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_image:new t.Uniform1i(e,i.u_image),u_dimension:new t.Uniform2f(e,i.u_dimension),u_zoom:new t.Uniform1f(e,i.u_zoom),u_unpack:new t.Uniform4f(e,i.u_unpack)}),line:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_pixels_to_tile_units:new t.UniformMatrix2f(e,i.u_pixels_to_tile_units),u_device_pixel_ratio:new t.Uniform1f(e,i.u_device_pixel_ratio),u_units_to_pixels:new t.Uniform2f(e,i.u_units_to_pixels),u_dash_image:new t.Uniform1i(e,i.u_dash_image),u_gradient_image:new t.Uniform1i(e,i.u_gradient_image),u_image_height:new t.Uniform1f(e,i.u_image_height),u_texsize:new t.Uniform2f(e,i.u_texsize),u_scale:new t.Uniform3f(e,i.u_scale),u_mix:new t.Uniform1f(e,i.u_mix)}),linePattern:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_texsize:new t.Uniform2f(e,i.u_texsize),u_pixels_to_tile_units:new t.UniformMatrix2f(e,i.u_pixels_to_tile_units),u_device_pixel_ratio:new t.Uniform1f(e,i.u_device_pixel_ratio),u_image:new t.Uniform1i(e,i.u_image),u_units_to_pixels:new t.Uniform2f(e,i.u_units_to_pixels),u_scale:new t.Uniform3f(e,i.u_scale),u_fade:new t.Uniform1f(e,i.u_fade)}),raster:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_tl_parent:new t.Uniform2f(e,i.u_tl_parent),u_scale_parent:new t.Uniform1f(e,i.u_scale_parent),u_buffer_scale:new t.Uniform1f(e,i.u_buffer_scale),u_fade_t:new t.Uniform1f(e,i.u_fade_t),u_opacity:new t.Uniform1f(e,i.u_opacity),u_image0:new t.Uniform1i(e,i.u_image0),u_image1:new t.Uniform1i(e,i.u_image1),u_brightness_low:new t.Uniform1f(e,i.u_brightness_low),u_brightness_high:new t.Uniform1f(e,i.u_brightness_high),u_saturation_factor:new t.Uniform1f(e,i.u_saturation_factor),u_contrast_factor:new t.Uniform1f(e,i.u_contrast_factor),u_spin_weights:new t.Uniform3f(e,i.u_spin_weights)}),symbolIcon:(e,i)=>({u_is_size_zoom_constant:new t.Uniform1i(e,i.u_is_size_zoom_constant),u_is_size_feature_constant:new t.Uniform1i(e,i.u_is_size_feature_constant),u_size_t:new t.Uniform1f(e,i.u_size_t),u_size:new t.Uniform1f(e,i.u_size),u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_pitch:new t.Uniform1f(e,i.u_pitch),u_rotate_symbol:new t.Uniform1i(e,i.u_rotate_symbol),u_aspect_ratio:new t.Uniform1f(e,i.u_aspect_ratio),u_fade_change:new t.Uniform1f(e,i.u_fade_change),u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_label_plane_matrix:new t.UniformMatrix4f(e,i.u_label_plane_matrix),u_coord_matrix:new t.UniformMatrix4f(e,i.u_coord_matrix),u_is_text:new t.Uniform1i(e,i.u_is_text),u_pitch_with_map:new t.Uniform1i(e,i.u_pitch_with_map),u_texsize:new t.Uniform2f(e,i.u_texsize),u_tile_id:new t.Uniform3f(e,i.u_tile_id),u_zoom_transition:new t.Uniform1f(e,i.u_zoom_transition),u_inv_rot_matrix:new t.UniformMatrix4f(e,i.u_inv_rot_matrix),u_merc_center:new t.Uniform2f(e,i.u_merc_center),u_texture:new t.Uniform1i(e,i.u_texture)}),symbolSDF:(e,i)=>({u_is_size_zoom_constant:new t.Uniform1i(e,i.u_is_size_zoom_constant),u_is_size_feature_constant:new t.Uniform1i(e,i.u_is_size_feature_constant),u_size_t:new t.Uniform1f(e,i.u_size_t),u_size:new t.Uniform1f(e,i.u_size),u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_pitch:new t.Uniform1f(e,i.u_pitch),u_rotate_symbol:new t.Uniform1i(e,i.u_rotate_symbol),u_aspect_ratio:new t.Uniform1f(e,i.u_aspect_ratio),u_fade_change:new t.Uniform1f(e,i.u_fade_change),u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_label_plane_matrix:new t.UniformMatrix4f(e,i.u_label_plane_matrix),u_coord_matrix:new t.UniformMatrix4f(e,i.u_coord_matrix),u_is_text:new t.Uniform1i(e,i.u_is_text),u_pitch_with_map:new t.Uniform1i(e,i.u_pitch_with_map),u_texsize:new t.Uniform2f(e,i.u_texsize),u_texture:new t.Uniform1i(e,i.u_texture),u_gamma_scale:new t.Uniform1f(e,i.u_gamma_scale),u_device_pixel_ratio:new t.Uniform1f(e,i.u_device_pixel_ratio),u_tile_id:new t.Uniform3f(e,i.u_tile_id),u_zoom_transition:new t.Uniform1f(e,i.u_zoom_transition),u_inv_rot_matrix:new t.UniformMatrix4f(e,i.u_inv_rot_matrix),u_merc_center:new t.Uniform2f(e,i.u_merc_center),u_is_halo:new t.Uniform1i(e,i.u_is_halo)}),symbolTextAndIcon:(e,i)=>({u_is_size_zoom_constant:new t.Uniform1i(e,i.u_is_size_zoom_constant),u_is_size_feature_constant:new t.Uniform1i(e,i.u_is_size_feature_constant),u_size_t:new t.Uniform1f(e,i.u_size_t),u_size:new t.Uniform1f(e,i.u_size),u_camera_to_center_distance:new t.Uniform1f(e,i.u_camera_to_center_distance),u_pitch:new t.Uniform1f(e,i.u_pitch),u_rotate_symbol:new t.Uniform1i(e,i.u_rotate_symbol),u_aspect_ratio:new t.Uniform1f(e,i.u_aspect_ratio),u_fade_change:new t.Uniform1f(e,i.u_fade_change),u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_label_plane_matrix:new t.UniformMatrix4f(e,i.u_label_plane_matrix),u_coord_matrix:new t.UniformMatrix4f(e,i.u_coord_matrix),u_is_text:new t.Uniform1i(e,i.u_is_text),u_pitch_with_map:new t.Uniform1i(e,i.u_pitch_with_map),u_texsize:new t.Uniform2f(e,i.u_texsize),u_texsize_icon:new t.Uniform2f(e,i.u_texsize_icon),u_texture:new t.Uniform1i(e,i.u_texture),u_texture_icon:new t.Uniform1i(e,i.u_texture_icon),u_gamma_scale:new t.Uniform1f(e,i.u_gamma_scale),u_device_pixel_ratio:new t.Uniform1f(e,i.u_device_pixel_ratio),u_is_halo:new t.Uniform1i(e,i.u_is_halo)}),background:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_opacity:new t.Uniform1f(e,i.u_opacity),u_color:new t.UniformColor(e,i.u_color)}),backgroundPattern:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_opacity:new t.Uniform1f(e,i.u_opacity),u_image:new t.Uniform1i(e,i.u_image),u_pattern_tl_a:new t.Uniform2f(e,i.u_pattern_tl_a),u_pattern_br_a:new t.Uniform2f(e,i.u_pattern_br_a),u_pattern_tl_b:new t.Uniform2f(e,i.u_pattern_tl_b),u_pattern_br_b:new t.Uniform2f(e,i.u_pattern_br_b),u_texsize:new t.Uniform2f(e,i.u_texsize),u_mix:new t.Uniform1f(e,i.u_mix),u_pattern_size_a:new t.Uniform2f(e,i.u_pattern_size_a),u_pattern_size_b:new t.Uniform2f(e,i.u_pattern_size_b),u_scale_a:new t.Uniform1f(e,i.u_scale_a),u_scale_b:new t.Uniform1f(e,i.u_scale_b),u_pixel_coord_upper:new t.Uniform2f(e,i.u_pixel_coord_upper),u_pixel_coord_lower:new t.Uniform2f(e,i.u_pixel_coord_lower),u_tile_units_to_pixels:new t.Uniform1f(e,i.u_tile_units_to_pixels)}),terrainRaster:ri,terrainDepth:ri,skybox:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_sun_direction:new t.Uniform3f(e,i.u_sun_direction),u_cubemap:new t.Uniform1i(e,i.u_cubemap),u_opacity:new t.Uniform1f(e,i.u_opacity),u_temporal_offset:new t.Uniform1f(e,i.u_temporal_offset)}),skyboxGradient:(e,i)=>({u_matrix:new t.UniformMatrix4f(e,i.u_matrix),u_color_ramp:new t.Uniform1i(e,i.u_color_ramp),u_center_direction:new t.Uniform3f(e,i.u_center_direction),u_radius:new t.Uniform1f(e,i.u_radius),u_opacity:new t.Uniform1f(e,i.u_opacity),u_temporal_offset:new t.Uniform1f(e,i.u_temporal_offset)}),skyboxCapture:(e,i)=>({u_matrix_3f:new t.UniformMatrix3f(e,i.u_matrix_3f),u_sun_direction:new t.Uniform3f(e,i.u_sun_direction),u_sun_intensity:new t.Uniform1f(e,i.u_sun_intensity),u_color_tint_r:new t.Uniform4f(e,i.u_color_tint_r),u_color_tint_m:new t.Uniform4f(e,i.u_color_tint_m),u_luminance:new t.Uniform1f(e,i.u_luminance)})};let Ni;function ji(e,i,r,n,o,s,a){const l=e.context,c=l.gl,h=e.useProgram("collisionBox"),u=[];let d=0,p=0;for(let v=0;v0){const i=t.create$1(),r=g;t.mul$1(i,_.placementInvProjMatrix,e.transform.glCoordMatrix),t.mul$1(i,i,_.placementViewportMatrix),u.push({circleArray:x,circleOffset:p,transform:r,invTransform:i}),d+=x.length/4,p=d}y&&(e.terrain&&e.terrain.setupElevationDraw(m,h),h.draw(l,c.LINES,t.DepthMode.disabled,t.StencilMode.disabled,e.colorModeForRenderPass(),t.CullFaceMode.disabled,Ei(g,e.transform,m),r.id,y.layoutVertexBuffer,y.indexBuffer,y.segments,null,e.transform.zoom,null,y.collisionVertexBuffer,y.collisionVertexBufferExt))}if(!a||!u.length)return;const f=e.useProgram("collisionCircle"),m=new t.StructArrayLayout2f1f2i16;m.resize(4*d),m._trim();let _=0;for(const t of u)for(let e=0;e=0&&(_[m.associatedIconIndex]={shiftedAnchor:I,angle:M})}else le(m.numGlyphs,f)}if(u){m.clear();const i=e.icon.placedSymbolArray;for(let e=0;et.getAtTileOffset(I,e.x,e.y):null)}const G=e.translatePosMatrix(I.projMatrix,n,s,a),Z=y||o&&E||j?Gi:O,q=e.translatePosMatrix(V,n,s,a,!0),$=d&&0!==r.paint.get(o?"text-halo-width":"icon-halo-width").constantOr(1);let X;X=d?l.iconsInText?Fi(p.kind,C,x,g,e,G,Z,q,k,B,z,0,e.identityMat,T):Ri(p.kind,C,x,g,e,G,Z,q,o,k,!0,z,0,e.identityMat,T):Bi(p.kind,C,x,g,e,G,Z,q,o,k,z,0,e.identityMat,T);const W={program:M,buffers:c,uniformValues:X,atlasTexture:P,atlasTextureIcon:R,atlasInterpolation:D,atlasInterpolationIcon:L,isSDF:d,hasHalo:$,tile:n,labelPlaneMatrixInv:U};if(v&&l.canOverlap){b=!0;const e=c.segments.get();for(const i of e)S.push({segments:new t.SegmentVector([i]),sortKey:i.sortKey,state:W})}else S.push({segments:c.segments,sortKey:0,state:W})}b&&S.sort((t,e)=>t.sortKey-e.sortKey);for(const t of S){const i=t.state;if(e.terrain&&e.terrain.setupElevationDraw(i.tile,i.program,{useDepthForOcclusion:!0,labelPlaneMatrixInv:i.labelPlaneMatrixInv}),p.activeTexture.set(f.TEXTURE0),i.atlasTexture.bind(i.atlasInterpolation,f.CLAMP_TO_EDGE),i.atlasTextureIcon&&(p.activeTexture.set(f.TEXTURE1),i.atlasTextureIcon&&i.atlasTextureIcon.bind(i.atlasInterpolationIcon,f.CLAMP_TO_EDGE)),i.isSDF){const n=i.uniformValues;i.hasHalo&&(n.u_is_halo=1,Wi(i.buffers,t.segments,r,e,i.program,w,u,d,n)),n.u_is_halo=0}Wi(i.buffers,t.segments,r,e,i.program,w,u,d,i.uniformValues)}}function Wi(e,i,r,n,o,s,a,l,c){const h=n.context;o.draw(h,h.gl.TRIANGLES,s,a,l,t.CullFaceMode.disabled,c,r.id,e.layoutVertexBuffer,e.indexBuffer,i,r.paint,n.transform.zoom,e.programConfigurations.get(r.id),e.dynamicLayoutVertexBuffer,e.opacityVertexBuffer)}function Hi(e,i,r,n,o,s,a){const l=e.context.gl,c=r.paint.get("fill-pattern"),h=c&&c.constantOr(1),u=r.getCrossfadeParameters();let d,p,f,m,_;a?(p=h&&!r.getPaintProperty("fill-outline-color")?"fillOutlinePattern":"fillOutline",d=l.LINES):(p=h?"fillPattern":"fill",d=l.TRIANGLES);for(const g of n){const n=i.getTile(g);if(h&&!n.patternsLoaded())continue;const y=n.getBucket(r);if(!y)continue;e.prepareDrawTile(g);const x=y.programConfigurations.get(r.id),v=e.useProgram(p,x);h&&(e.context.activeTexture.set(l.TEXTURE0),n.imageAtlasTexture.bind(l.LINEAR,l.CLAMP_TO_EDGE),x.updatePaintBuffers(u));const b=c.constantOr(null);if(b&&n.imageAtlas){const t=n.imageAtlas,e=t.patternPositions[b.to.toString()],i=t.patternPositions[b.from.toString()];e&&i&&x.setConstantPatternPositions(e,i)}const w=e.translatePosMatrix(g.projMatrix,n,r.paint.get("fill-translate"),r.paint.get("fill-translate-anchor"));if(a){m=y.indexBuffer2,_=y.segments2;const t=e.terrain&&e.terrain.renderingToTexture?e.terrain.drapeBufferSize:[l.drawingBufferWidth,l.drawingBufferHeight];f="fillOutlinePattern"===p&&h?bi(w,e,u,n,t):vi(w,t)}else m=y.indexBuffer,_=y.segments,f=h?xi(w,e,u,n):yi(w);e.prepareDrawProgram(e.context,v,g.toUnwrapped()),v.draw(e.context,d,o,e.stencilModeForClipping(g),s,t.CullFaceMode.disabled,f,r.id,y.layoutVertexBuffer,m,_,r.paint,e.transform.zoom,x)}}function Ki(e,i,r,n,o,s,a){const l=e.context,c=l.gl,h=r.paint.get("fill-extrusion-pattern"),u=h.constantOr(1),d=r.getCrossfadeParameters(),p=r.paint.get("fill-extrusion-opacity");for(const f of n){const n=i.getTile(f),m=n.getBucket(r);if(!m)continue;const _=m.programConfigurations.get(r.id),g=e.useProgram(u?"fillExtrusionPattern":"fillExtrusion",_);if(e.terrain){const t=e.terrain;if(!m.enableTerrain)continue;if(t.setupElevationDraw(n,g,{useMeterToDem:!0}),Yi(l,i,f,m,r,t),!m.centroidVertexBuffer){const t=g.attributes.a_centroid_pos;void 0!==t&&c.vertexAttrib2f(t,0,0)}}u&&(e.context.activeTexture.set(c.TEXTURE0),n.imageAtlasTexture.bind(c.LINEAR,c.CLAMP_TO_EDGE),_.updatePaintBuffers(d));const y=h.constantOr(null);if(y&&n.imageAtlas){const t=n.imageAtlas,e=t.patternPositions[y.to.toString()],i=t.patternPositions[y.from.toString()];e&&i&&_.setConstantPatternPositions(e,i)}const x=e.translatePosMatrix(f.projMatrix,n,r.paint.get("fill-extrusion-translate"),r.paint.get("fill-extrusion-translate-anchor")),v=r.paint.get("fill-extrusion-vertical-gradient"),b=u?gi(x,e,v,p,f,d,n):_i(x,e,v,p);e.prepareDrawProgram(l,g,f.toUnwrapped()),g.draw(l,l.gl.TRIANGLES,o,s,a,t.CullFaceMode.backCCW,b,r.id,m.layoutVertexBuffer,m.indexBuffer,m.segments,r.paint,e.transform.zoom,_,e.terrain?m.centroidVertexBuffer:null)}}function Yi(e,i,r,n,o,s){const a=[e=>{let i=e.canonical.x-1,r=e.wrap;return i<0&&(i=(1<{let i=e.canonical.x+1,r=e.wrap;return i===1<new t.OverscaledTileID(e.overscaledZ,e.wrap,e.canonical.z,e.canonical.x,(0===e.canonical.y?1<new t.OverscaledTileID(e.overscaledZ,e.wrap,e.canonical.z,e.canonical.x,e.canonical.y===(1<{const e=i.getSource().maxzoom,r=t=>{const e=i.getTileByID(t);if(e&&e.hasData())return e.getBucket(o)};let n,s,a;return(t.overscaledZ===t.canonical.z||t.overscaledZ>=e)&&(n=r(t.key)),t.overscaledZ>=e&&(s=r(t.calculateScaledKey(t.overscaledZ+1))),t.overscaledZ>e&&(a=r(t.calculateScaledKey(t.overscaledZ-1))),n||s||a},c=[0,0,0],h=(e,i)=>(c[0]=Math.min(e.min.y,i.min.y),c[1]=Math.max(e.max.y,i.max.y),c[2]=t.EXTENT-i.min.x>e.max.x?i.min.x-t.EXTENT:e.max.x,c),u=(e,i)=>(c[0]=Math.min(e.min.x,i.min.x),c[1]=Math.max(e.max.x,i.max.x),c[2]=t.EXTENT-i.min.y>e.max.y?i.min.y-t.EXTENT:e.max.y,c),d=[(t,e)=>h(t,e),(t,e)=>h(e,t),(t,e)=>u(t,e),(t,e)=>u(e,t)],p=new t.pointGeometry(0,0);let f,m,_;const g=(e,i,n,o,a)=>{const l=[[o?n:e,o?e:n,0],[o?n:i,o?i:n,0]],c=a<0?t.EXTENT+a:a,h=[o?c:(e+i)/2,o?(e+i)/2:c,0];return 0===n&&a<0||0!==n&&a>0?s.getForTilePoints(_,[h],!0,m):l.push(h),s.getForTilePoints(r,l,!0,f),Math.max(l[0][2],l[1][2],h[2])/s.exaggeration()};for(let y=0;y<4;y++){const e=n.borders[y];if(0===e.length&&(n.borderDone[y]=!0),n.borderDone[y])continue;const i=_=a[y](r),o=l(i);if(!o||!o.enableTerrain)continue;if(m=s.findDEMTileFor(i),!m||!m.dem)continue;if(!f){const t=s.findDEMTileFor(r);if(!t||!t.dem)return;f=t}const c=(y<2?1:5)-y,h=o.borders[c];let u=0;for(let r=0;rs[0]+3));)o.borderDone[c]||o.encodeCentroid(void 0,a,!1),u++;if(a&&us[1]-3)&&(r++,++u!==h.length);)a=o.featuresOnBorder[h[u]];if(a=o.featuresOnBorder[h[e]],i.intersectsCount()>1||a.intersectsCount()>1||1!==r){1!==r&&(u=e),n.encodeCentroid(void 0,i,!1),o.borderDone[c]||o.encodeCentroid(void 0,a,!1);continue}const l=d[y](i,a),f=y%2?t.EXTENT-1:0;p.x=g(l[0],Math.min(t.EXTENT-1,l[1]),f,y<2,l[2]),p.y=0,n.encodeCentroid(p,i,!1),o.borderDone[c]||o.encodeCentroid(p,a,!1)}else n.encodeCentroid(void 0,i,!1)}n.borderDone[y]=n.needsCentroidUpdate=!0,o.borderDone[c]||(o.borderDone[c]=o.needsCentroidUpdate=!0)}(n.needsCentroidUpdate||!n.centroidVertexBuffer&&0!==n.centroidVertexArray.length)&&n.uploadCentroid(e)}const Ji=new t.Color(1,0,0,1),Qi=new t.Color(0,1,0,1),tr=new t.Color(0,0,1,1),er=new t.Color(1,0,1,1),ir=new t.Color(0,1,1,1);function rr(t,e,i,r){or(t,0,e+i/2,t.transform.width,i,r)}function nr(t,e,i,r){or(t,e-i/2,0,i,t.transform.height,r)}function or(e,i,r,n,o,s){const a=e.context,l=a.gl;l.enable(l.SCISSOR_TEST),l.scissor(i*t.exported.devicePixelRatio,r*t.exported.devicePixelRatio,n*t.exported.devicePixelRatio,o*t.exported.devicePixelRatio),a.clear({color:s}),l.disable(l.SCISSOR_TEST)}function sr(e,i,r){const n=e.context,o=n.gl,s=r.projMatrix,a=e.useProgram("debug"),l=i.getTileByID(r.key);e.terrain&&e.terrain.setupElevationDraw(l,a);const c=t.DepthMode.disabled,h=t.StencilMode.disabled,u=e.colorModeForRenderPass(),d="$debug";n.activeTexture.set(o.TEXTURE0),e.emptyTexture.bind(o.LINEAR,o.CLAMP_TO_EDGE),l._makeDebugTileBoundsBuffers(e.context,e.transform.projection);const p=l._tileDebugBuffer||e.debugBuffer,f=l._tileDebugIndexBuffer||e.debugIndexBuffer,m=l._tileDebugSegments||e.debugSegments;a.draw(n,o.LINE_STRIP,c,h,u,t.CullFaceMode.disabled,Si(s,t.Color.red),d,p,f,m);const _=l.latestRawTileData,g=Math.floor((_&&_.byteLength||0)/1024),y=i.getTile(r).tileSize,x=512/Math.min(y,512)*(r.overscaledZ/e.transform.zoom)*.5;let v=r.canonical.toString();r.overscaledZ!==r.canonical.z&&(v+=" => "+r.overscaledZ),function(t,e){t.initDebugOverlayCanvas();const i=t.debugOverlayCanvas,r=t.context.gl,n=t.debugOverlayCanvas.getContext("2d");n.clearRect(0,0,i.width,i.height),n.shadowColor="white",n.shadowBlur=2,n.lineWidth=1.5,n.strokeStyle="white",n.textBaseline="top",n.font="bold 36px Open Sans, sans-serif",n.fillText(e,5,5),n.strokeText(e,5,5),t.debugOverlayTexture.update(i),t.debugOverlayTexture.bind(r.LINEAR,r.CLAMP_TO_EDGE)}(e,`${v} ${g}kb`),a.draw(n,o.TRIANGLES,c,h,t.ColorMode.alphaBlended,t.CullFaceMode.disabled,Si(s,t.Color.transparent,x),d,e.debugBuffer,e.quadTriangleIndexBuffer,e.debugSegments)}const ar=t.createLayout([{name:"a_pos_3f",components:3,type:"Float32"}]),{members:lr}=ar;function cr(t,e,i,r){t.emplaceBack(e,i,r)}class hr{constructor(e){this.vertexArray=new t.StructArrayLayout3f12,this.indices=new t.StructArrayLayout3ui6,cr(this.vertexArray,-1,-1,1),cr(this.vertexArray,1,-1,1),cr(this.vertexArray,-1,1,1),cr(this.vertexArray,1,1,1),cr(this.vertexArray,-1,-1,-1),cr(this.vertexArray,1,-1,-1),cr(this.vertexArray,-1,1,-1),cr(this.vertexArray,1,1,-1),this.indices.emplaceBack(5,1,3),this.indices.emplaceBack(3,7,5),this.indices.emplaceBack(6,2,0),this.indices.emplaceBack(0,4,6),this.indices.emplaceBack(2,6,7),this.indices.emplaceBack(7,3,2),this.indices.emplaceBack(5,4,0),this.indices.emplaceBack(0,1,5),this.indices.emplaceBack(0,2,3),this.indices.emplaceBack(3,1,0),this.indices.emplaceBack(7,6,4),this.indices.emplaceBack(4,5,7),this.vertexBuffer=e.createVertexBuffer(this.vertexArray,lr),this.indexBuffer=e.createIndexBuffer(this.indices),this.segment=t.SegmentVector.simpleSegment(0,0,36,12)}}function ur(e,i,r,n,o,s){const a=e.gl,l=i.paint.get("sky-atmosphere-color"),c=i.paint.get("sky-atmosphere-halo-color"),h=i.paint.get("sky-atmosphere-sun-intensity"),u=((t,e,i,r,n)=>({u_matrix_3f:t,u_sun_direction:e,u_sun_intensity:i,u_color_tint_r:[r.r,r.g,r.b,r.a],u_color_tint_m:[n.r,n.g,n.b,n.a],u_luminance:5e-5}))(t.fromMat4([],n),o,h,l,c);a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_CUBE_MAP_POSITIVE_X+s,i.skyboxTexture,0),r.draw(e,a.TRIANGLES,t.DepthMode.disabled,t.StencilMode.disabled,t.ColorMode.unblended,t.CullFaceMode.frontCW,u,"skyboxCapture",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}const dr={symbol:function(e,i,r,n,o){if("translucent"!==e.renderPass)return;const s=t.StencilMode.disabled,a=e.colorModeForRenderPass();r.layout.get("text-variable-anchor")&&function(e,i,r,n,o,s,a){const l=i.transform,c="map"===o,h="map"===s;for(const u of e){const e=n.getTile(u),o=e.getBucket(r);if(!o||!o.text||!o.text.segments.get().length)continue;const s=t.evaluateSizeForZoom(o.textSizeData,l.zoom),d=i.transform.calculatePixelsToTileUnitsMatrix(e),p=Ht(u.projMatrix,h,c,i.transform,d),f="none"!==r.layout.get("icon-text-fit")&&o.hasIconData();if(s){const i=Math.pow(2,l.zoom-e.tileID.overscaledZ),r=l.elevation;qi(o,c,h,a,t.symbolSize,l,p,u.projMatrix,i,s,f,r?t=>r.getAtTileOffset(u,t.x,t.y):t=>0)}}}(n,e,r,i,r.layout.get("text-rotation-alignment"),r.layout.get("text-pitch-alignment"),o),0!==r.paint.get("icon-opacity").constantOr(1)&&Xi(e,i,r,n,!1,r.paint.get("icon-translate"),r.paint.get("icon-translate-anchor"),r.layout.get("icon-rotation-alignment"),r.layout.get("icon-pitch-alignment"),r.layout.get("icon-keep-upright"),s,a),0!==r.paint.get("text-opacity").constantOr(1)&&Xi(e,i,r,n,!0,r.paint.get("text-translate"),r.paint.get("text-translate-anchor"),r.layout.get("text-rotation-alignment"),r.layout.get("text-pitch-alignment"),r.layout.get("text-keep-upright"),s,a),i.map.showCollisionBoxes&&(ji(e,i,r,n,r.paint.get("text-translate"),r.paint.get("text-translate-anchor"),!0),ji(e,i,r,n,r.paint.get("icon-translate"),r.paint.get("icon-translate-anchor"),!1))},circle:function(e,i,r,n){if("translucent"!==e.renderPass)return;const o=r.paint.get("circle-opacity"),s=r.paint.get("circle-stroke-width"),a=r.paint.get("circle-stroke-opacity"),l=void 0!==r.layout.get("circle-sort-key").constantOr(1);if(0===o.constantOr(1)&&(0===s.constantOr(1)||0===a.constantOr(1)))return;const c=e.context,h=c.gl,u=e.depthModeForSublayer(0,t.DepthMode.ReadOnly),d=t.StencilMode.disabled,p=e.colorModeForRenderPass(),f=[];for(let m=0;mt.sortKey-e.sortKey);for(const m of f){const{programConfiguration:i,program:n,layoutVertexBuffer:o,indexBuffer:s,uniformValues:a,tile:l}=m.state,f=m.segments;e.terrain&&e.terrain.setupElevationDraw(l,n,{useDepthForOcclusion:!0}),e.prepareDrawProgram(c,n,l.tileID.toUnwrapped()),n.draw(c,h.TRIANGLES,u,d,p,t.CullFaceMode.disabled,a,r.id,o,s,f,r.paint,e.transform.zoom,i)}},heatmap:function(e,i,r,n){if(0!==r.paint.get("heatmap-opacity"))if("offscreen"===e.renderPass){const o=e.context,s=o.gl,a=t.StencilMode.disabled,l=new t.ColorMode([s.ONE,s.ONE],t.Color.transparent,[!0,!0,!0,!0]);!function(t,e,i){const r=t.gl;t.activeTexture.set(r.TEXTURE1),t.viewport.set([0,0,e.width/4,e.height/4]);let n=i.heatmapFbo;if(n)r.bindTexture(r.TEXTURE_2D,n.colorAttachment.get()),t.bindFramebuffer.set(n.framebuffer);else{const o=r.createTexture();r.bindTexture(r.TEXTURE_2D,o),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR),n=i.heatmapFbo=t.createFramebuffer(e.width/4,e.height/4,!1),function(t,e,i,r){const n=t.gl;n.texImage2D(n.TEXTURE_2D,0,n.RGBA,e.width/4,e.height/4,0,n.RGBA,t.extRenderToTextureHalfFloat?t.extTextureHalfFloat.HALF_FLOAT_OES:n.UNSIGNED_BYTE,null),r.colorAttachment.set(i)}(t,e,o,n)}}(o,e,r),o.clear({color:t.Color.transparent});for(let c=0;c({u_image:0,u_color_ramp:1,u_opacity:e.paint.get("heatmap-opacity")}))(0,i),i.id,e.viewportBuffer,e.quadTriangleIndexBuffer,e.viewportSegments,i.paint,e.transform.zoom)}(e,r))},line:function(e,i,r,n){if("translucent"!==e.renderPass)return;const o=r.paint.get("line-opacity"),s=r.paint.get("line-width");if(0===o.constantOr(1)||0===s.constantOr(1))return;const a=e.depthModeForSublayer(0,t.DepthMode.ReadOnly),l=e.colorModeForRenderPass(),c=r.paint.get("line-dasharray"),h=c.constantOr(1),u=r.layout.get("line-cap"),d=r.paint.get("line-pattern"),p=d.constantOr(1),f=r.paint.get("line-gradient"),m=r.getCrossfadeParameters(),_=p?"linePattern":"line",g=e.context,y=g.gl;for(const x of n){const n=i.getTile(x);if(p&&!n.patternsLoaded())continue;const o=n.getBucket(r);if(!o)continue;e.prepareDrawTile(x);const s=o.programConfigurations.get(r.id),v=ki(r),b=e.useProgram(_,s,v),w=d.constantOr(null);if(w&&n.imageAtlas){const t=n.imageAtlas,e=t.patternPositions[w.to.toString()],i=t.patternPositions[w.from.toString()];e&&i&&s.setConstantPatternPositions(e,i)}const T=c.constantOr(null),E=u.constantOr(null);if(!p&&T&&E&&n.lineAtlas){const t=n.lineAtlas,e=t.getDash(T.to,E),i=t.getDash(T.from,E);e&&i&&s.setConstantPatternPositions(e,i)}const S=e.terrain?x.projMatrix:null,A=p?Mi(e,n,r,m,S):Ii(e,n,r,m,S,o.lineClipsArray.length);if(f){const n=o.gradients[r.id];let s=n.texture;if(r.gradientVersion!==n.version){let a=256;if(r.stepInterpolant){const r=i.getSource().maxzoom,n=x.canonical.z===r?Math.ceil(1<t.tileID)),u&&(a.activeTexture.set(l.TEXTURE0),e.imageManager.bind(e.context));const x=r.getCrossfadeParameters();for(const v of y){const d=v.toUnwrapped(),y=n?v.projMatrix:e.transform.calculateProjMatrix(d);e.prepareDrawTile(v);const b=i?i.getTile(v):g?g[v.key]:new t.Tile(v,h,c.zoom,e),w=u?Ui(y,s,e,u,{tileID:v,tileSize:h},x):Oi(y,s,o);e.prepareDrawProgram(a,_,d);const{tileBoundsBuffer:T,tileBoundsIndexBuffer:E,tileBoundsSegments:S}=e.getTileBoundsBuffers(b);_.draw(a,l.TRIANGLES,f,p,m,t.CullFaceMode.disabled,w,r.id,T,E,S)}},sky:function(e,i,r){const n=e.transform,o="mercator"===n.projection.name?1:t.smoothstep(7,8,n.zoom),s=r.paint.get("sky-opacity")*o;if(0===s)return;const a=e.context,l=r.paint.get("sky-type"),c=new t.DepthMode(a.gl.LEQUAL,t.DepthMode.ReadOnly,[0,1]),h=e.frameCounter/1e3%1;"atmosphere"===l?"offscreen"===e.renderPass?r.needsSkyboxCapture(e)&&(function(e,i,r,n){const o=e.context,s=o.gl;let a=i.skyboxFbo;if(!a){a=i.skyboxFbo=o.createFramebuffer(32,32,!1),i.skyboxGeometry=new hr(o),i.skyboxTexture=o.gl.createTexture(),s.bindTexture(s.TEXTURE_CUBE_MAP,i.skyboxTexture),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_WRAP_S,s.CLAMP_TO_EDGE),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_WRAP_T,s.CLAMP_TO_EDGE),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_MIN_FILTER,s.LINEAR),s.texParameteri(s.TEXTURE_CUBE_MAP,s.TEXTURE_MAG_FILTER,s.LINEAR);for(let t=0;t<6;++t)s.texImage2D(s.TEXTURE_CUBE_MAP_POSITIVE_X+t,0,s.RGBA,32,32,0,s.RGBA,s.UNSIGNED_BYTE,null)}o.bindFramebuffer.set(a.framebuffer),o.viewport.set([0,0,32,32]);const l=i.getCenter(e,!0),c=e.useProgram("skyboxCapture"),h=new Float64Array(16);t.identity(h),t.rotateY(h,h,.5*-Math.PI),ur(o,i,c,h,l,0),t.identity(h),t.rotateY(h,h,.5*Math.PI),ur(o,i,c,h,l,1),t.identity(h),t.rotateX(h,h,.5*-Math.PI),ur(o,i,c,h,l,2),t.identity(h),t.rotateX(h,h,.5*Math.PI),ur(o,i,c,h,l,3),t.identity(h),ur(o,i,c,h,l,4),t.identity(h),t.rotateY(h,h,Math.PI),ur(o,i,c,h,l,5),o.viewport.set([0,0,e.width,e.height])}(e,r),r.markSkyboxValid(e)):"sky"===e.renderPass&&function(e,i,r,n,o){const s=e.context,a=s.gl,l=e.transform,c=e.useProgram("skybox");s.activeTexture.set(a.TEXTURE0),a.bindTexture(a.TEXTURE_CUBE_MAP,i.skyboxTexture);const h=((t,e,i,r,n)=>({u_matrix:t,u_sun_direction:e,u_cubemap:0,u_opacity:r,u_temporal_offset:n}))(l.skyboxMatrix,i.getCenter(e,!1),0,n,o);e.prepareDrawProgram(s,c),c.draw(s,a.TRIANGLES,r,t.StencilMode.disabled,e.colorModeForRenderPass(),t.CullFaceMode.backCW,h,"skybox",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}(e,r,c,s,h):"gradient"===l&&"sky"===e.renderPass&&function(e,i,r,n,o){const s=e.context,a=s.gl,l=e.transform,c=e.useProgram("skyboxGradient");i.skyboxGeometry||(i.skyboxGeometry=new hr(s)),s.activeTexture.set(a.TEXTURE0);let h=i.colorRampTexture;h||(h=i.colorRampTexture=new t.Texture(s,i.colorRamp,a.RGBA)),h.bind(a.LINEAR,a.CLAMP_TO_EDGE);const u=((e,i,r,n,o)=>({u_matrix:e,u_color_ramp:0,u_center_direction:i,u_radius:t.degToRad(r),u_opacity:n,u_temporal_offset:o}))(l.skyboxMatrix,i.getCenter(e,!1),i.paint.get("sky-gradient-radius"),n,o);e.prepareDrawProgram(s,c),c.draw(s,a.TRIANGLES,r,t.StencilMode.disabled,e.colorModeForRenderPass(),t.CullFaceMode.backCW,u,"skyboxGradient",i.skyboxGeometry.vertexBuffer,i.skyboxGeometry.indexBuffer,i.skyboxGeometry.segment)}(e,r,c,s,h)},debug:function(t,e,i){for(let r=0;rr)return void(this.transform.fogCullDistSq=null);const n=i+.78*(r-i);this.transform.fogCullDistSq=n*n}get terrain(){return this.transform._terrainEnabled()&&this._terrain&&this._terrain.enabled?this._terrain:null}resize(e,i){if(this.width=e*t.exported.devicePixelRatio,this.height=i*t.exported.devicePixelRatio,this.context.viewport.set([0,0,this.width,this.height]),this.style)for(const t of this.style.order)this.style._layers[t].resize()}setup(){const e=this.context,i=new t.StructArrayLayout2i4;i.emplaceBack(0,0),i.emplaceBack(t.EXTENT,0),i.emplaceBack(0,t.EXTENT),i.emplaceBack(t.EXTENT,t.EXTENT),this.tileExtentBuffer=e.createVertexBuffer(i,t.posAttributes.members),this.tileExtentSegments=t.SegmentVector.simpleSegment(0,0,4,2);const r=new t.StructArrayLayout2i4;r.emplaceBack(0,0),r.emplaceBack(t.EXTENT,0),r.emplaceBack(0,t.EXTENT),r.emplaceBack(t.EXTENT,t.EXTENT),this.debugBuffer=e.createVertexBuffer(r,t.posAttributes.members),this.debugSegments=t.SegmentVector.simpleSegment(0,0,4,5);const n=new t.StructArrayLayout2i4;n.emplaceBack(-1,-1),n.emplaceBack(1,-1),n.emplaceBack(-1,1),n.emplaceBack(1,1),this.viewportBuffer=e.createVertexBuffer(n,t.posAttributes.members),this.viewportSegments=t.SegmentVector.simpleSegment(0,0,4,2);const o=new t.StructArrayLayout4i8;o.emplaceBack(0,0,0,0),o.emplaceBack(t.EXTENT,0,t.EXTENT,0),o.emplaceBack(0,t.EXTENT,0,t.EXTENT),o.emplaceBack(t.EXTENT,t.EXTENT,t.EXTENT,t.EXTENT),this.mercatorBoundsBuffer=e.createVertexBuffer(o,t.boundsAttributes.members),this.mercatorBoundsSegments=t.SegmentVector.simpleSegment(0,0,4,2);const s=new t.StructArrayLayout3ui6;s.emplaceBack(0,1,2),s.emplaceBack(2,1,3),this.quadTriangleIndexBuffer=e.createIndexBuffer(s);const a=new t.StructArrayLayout1ui2;for(const t of[0,1,3,2,0])a.emplaceBack(t);this.debugIndexBuffer=e.createIndexBuffer(a),this.emptyTexture=new t.Texture(e,{width:1,height:1,data:new Uint8Array([0,0,0,0])},e.gl.RGBA),this.identityMat=t.create$1();const l=this.context.gl;this.stencilClearMode=new t.StencilMode({func:l.ALWAYS,mask:0},0,255,l.ZERO,l.ZERO,l.ZERO),this.loadTimeStamps.push(t.window.performance.now())}getMercatorTileBoundsBuffers(){return{tileBoundsBuffer:this.mercatorBoundsBuffer,tileBoundsIndexBuffer:this.quadTriangleIndexBuffer,tileBoundsSegments:this.mercatorBoundsSegments}}getTileBoundsBuffers(t){return t._makeTileBoundsBuffers(this.context,this.transform.projection),t._tileBoundsBuffer?{tileBoundsBuffer:t._tileBoundsBuffer,tileBoundsIndexBuffer:t._tileBoundsIndexBuffer,tileBoundsSegments:t._tileBoundsSegments}:this.getMercatorTileBoundsBuffers()}clearStencil(){const e=this.context,i=e.gl;this.nextStencilID=1,this.currentStencilSource=void 0,this.useProgram("clippingMask").draw(e,i.TRIANGLES,t.DepthMode.disabled,this.stencilClearMode,t.ColorMode.disabled,t.CullFaceMode.disabled,li(this.identityMat),"$clipping",this.viewportBuffer,this.quadTriangleIndexBuffer,this.viewportSegments)}_renderTileClippingMasks(e,i,r){if(!(i&&this.currentStencilSource!==i.id&&e.isTileClipped()&&r&&r.length))return;this.currentStencilSource=i.id;const n=this.context,o=n.gl;this.nextStencilID+r.length>256&&this.clearStencil(),n.setColorMode(t.ColorMode.disabled),n.setDepthMode(t.DepthMode.disabled);const s=this.useProgram("clippingMask");this._tileClippingMaskIDs={};for(const a of r){const e=i.getTile(a),r=this._tileClippingMaskIDs[a.key]=this.nextStencilID++,{tileBoundsBuffer:l,tileBoundsIndexBuffer:c,tileBoundsSegments:h}=this.getTileBoundsBuffers(e);s.draw(n,o.TRIANGLES,t.DepthMode.disabled,new t.StencilMode({func:o.ALWAYS,mask:0},r,255,o.KEEP,o.KEEP,o.REPLACE),t.ColorMode.disabled,t.CullFaceMode.disabled,li(a.projMatrix),"$clipping",l,c,h)}}stencilModeFor3D(){this.currentStencilSource=void 0,this.nextStencilID+1>256&&this.clearStencil();const e=this.nextStencilID++,i=this.context.gl;return new t.StencilMode({func:i.NOTEQUAL,mask:255},e,255,i.KEEP,i.KEEP,i.REPLACE)}stencilModeForClipping(e){if(this.terrain)return this.terrain.stencilModeForRTTOverlap(e);const i=this.context.gl;return new t.StencilMode({func:i.EQUAL,mask:255},this._tileClippingMaskIDs[e.key],0,i.KEEP,i.KEEP,i.REPLACE)}stencilConfigForOverlap(e){const i=this.context.gl,r=e.sort((t,e)=>e.overscaledZ-t.overscaledZ),n=r[r.length-1].overscaledZ,o=r[0].overscaledZ-n+1;if(o>1){this.currentStencilSource=void 0,this.nextStencilID+o>256&&this.clearStencil();const e={};for(let r=0;r=0;this.currentLayer--){const t=this.style._layers[r[this.currentLayer]],i=e._getLayerSourceCache(t);if(t.isSky())continue;const n=i?s[i.id]:void 0;this._renderTileClippingMasks(t,i,n),this.renderLayer(this,i,t,n)}if(this.renderPass="sky",this.transform.isHorizonVisible())for(this.currentLayer=0;this.currentLayer{const r=e._getLayerSourceCache(t);r&&!t.isHidden(this.transform.zoom)&&(!i||i.getSource().maxzoom0?e.pop():null}isPatternMissing(t){if(!t)return!1;if(!t.from||!t.to)return!0;const e=this.imageManager.getPattern(t.from.toString()),i=this.imageManager.getPattern(t.to.toString());return!e||!i}currentGlobalDefines(){const t=this.terrain&&this.terrain.renderingToTexture,e=this.style&&this.style.fog,i=[];return this.terrain&&!this.terrain.renderingToTexture&&i.push("TERRAIN"),e&&!t&&0!==e.getOpacity(this.transform.pitch)&&i.push("FOG"),t&&i.push("RENDER_TO_TEXTURE"),this._showOverdrawInspector&&i.push("OVERDRAW_INSPECTOR"),i}useProgram(t,e,i){this.cache=this.cache||{};const r=i||[],n=this.currentGlobalDefines().concat(r),o=fi.cacheKey(t,n,e);return this.cache[o]||(this.cache[o]=new fi(this.context,t,Ke[t],e,Vi[t],n)),this.cache[o]}setCustomLayerDefaults(){this.context.unbindVAO(),this.context.cullFace.setDefault(),this.context.frontFace.setDefault(),this.context.cullFaceSide.setDefault(),this.context.activeTexture.setDefault(),this.context.pixelStoreUnpack.setDefault(),this.context.pixelStoreUnpackPremultiplyAlpha.setDefault(),this.context.pixelStoreUnpackFlipY.setDefault()}setBaseState(){const t=this.context.gl;this.context.cullFace.set(!1),this.context.viewport.set([0,0,this.width,this.height]),this.context.blendEquation.set(t.FUNC_ADD)}initDebugOverlayCanvas(){null==this.debugOverlayCanvas&&(this.debugOverlayCanvas=t.window.document.createElement("canvas"),this.debugOverlayCanvas.width=512,this.debugOverlayCanvas.height=512,this.debugOverlayTexture=new t.Texture(this.context,this.debugOverlayCanvas,this.context.gl.RGBA))}destroy(){this._terrain&&this._terrain.destroy(),this.emptyTexture.destroy(),this.debugOverlayTexture&&this.debugOverlayTexture.destroy()}prepareDrawTile(t){this.terrain&&this.terrain.prepareDrawTile(t)}prepareDrawProgram(t,e,i){if(this.terrain&&this.terrain.renderingToTexture)return;const r=this.style.fog;if(r){const n=r.getOpacity(this.transform.pitch);0!==n&&e.setFogUniformValues(t,((t,e,i,r)=>{const n=e.properties.get("color"),o=t.frameCounter/1e3%1,s=[n.r/n.a,n.g/n.a,n.b/n.a,r];return{u_fog_matrix:i?t.transform.calculateFogTileMatrix(i):t.identityMat,u_fog_range:e.getFovAdjustedRange(t.transform._fov),u_fog_color:s,u_fog_horizon_blend:e.properties.get("horizon-blend"),u_fog_temporal_offset:o}})(this,r,i,n))}}setTileLoadedFlag(t){this.tileLoaded=t}saveCanvasCopy(){this.frameCopies.push(this.canvasCopy()),this.tileLoaded=!1}canvasCopy(){const t=this.context.gl,e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.copyTexImage2D(t.TEXTURE_2D,0,t.RGBA,0,0,t.drawingBufferWidth,t.drawingBufferHeight,0),e}getCanvasCopiesAndTimestamps(){return{canvasCopies:this.frameCopies,timeStamps:this.loadTimeStamps}}averageElevationNeedsEasing(){if(!this.transform._elevation)return!1;const t=this.style&&this.style.fog;return!!t&&0!==t.getOpacity(this.transform.pitch)}getBackgroundTiles(){const e=this._backgroundTiles,i=this._backgroundTiles={},r=this.transform.coveringTiles({tileSize:512});for(const n of r)i[n.key]=e[n.key]||new t.Tile(n,512,this.transform.tileZoom,this);return i}clearBackgroundTiles(){this._backgroundTiles={}}}class fr{constructor(t=0,e=0,i=0,r=0){if(isNaN(t)||t<0||isNaN(e)||e<0||isNaN(i)||i<0||isNaN(r)||r<0)throw new Error("Invalid value for edge-insets, top, bottom, left and right must all be numbers");this.top=t,this.bottom=e,this.left=i,this.right=r}interpolate(e,i,r){return null!=i.top&&null!=e.top&&(this.top=t.number(e.top,i.top,r)),null!=i.bottom&&null!=e.bottom&&(this.bottom=t.number(e.bottom,i.bottom,r)),null!=i.left&&null!=e.left&&(this.left=t.number(e.left,i.left,r)),null!=i.right&&null!=e.right&&(this.right=t.number(e.right,i.right,r)),this}getCenter(e,i){const r=t.clamp((this.left+e-this.right)/2,0,e),n=t.clamp((this.top+i-this.bottom)/2,0,i);return new t.pointGeometry(r,n)}equals(t){return this.top===t.top&&this.bottom===t.bottom&&this.left===t.left&&this.right===t.right}clone(){return new fr(this.top,this.bottom,this.left,this.right)}toJSON(){return{top:this.top,bottom:this.bottom,left:this.left,right:this.right}}}function mr(t,e){return[t[4*e],t[4*e+1],t[4*e+2],t[4*e+3]]}function _r(t,e,i){t[4*e+0]=i[0],t[4*e+1]=i[1],t[4*e+2]=i[2],t[4*e+3]=i[3]}function gr(e,i){const r=mr(e,3);t.fromQuat(e,i),_r(e,3,r)}function yr(t,e){_r(t,3,[e[0],e[1],e[2],1])}function xr(e,i){const r=t.identity$1([]);return t.rotateZ$1(r,r,-i),t.rotateX$1(r,r,-e),r}function vr(e,i){const r=[e[0],e[1],0],n=[i[0],i[1],0];if(t.length(r)>=1e-15){const e=t.normalize([],r);t.scale(n,e,t.dot(n,e)),i[0]=n[0],i[1]=n[1]}const o=t.cross([],i,e);if(t.len(o)<1e-15)return null;const s=Math.atan2(-o[1],o[0]);return xr(Math.atan2(Math.sqrt(e[0]*e[0]+e[1]*e[1]),-e[2]),s)}class br{constructor(t,e){this.position=t,this.orientation=e}get position(){return this._position}set position(e){this._position=this._renderWorldCopies?function(e){if(!e)return;const i=Array.isArray(e)?new t.MercatorCoordinate(e[0],e[1],e[2]):e;return i.x=t.wrap(i.x,0,1),i}(e):e}lookAtPoint(e,i){if(this.orientation=null,!this.position)return;const r=this._elevation?this._elevation.getAtPointOrZero(t.MercatorCoordinate.fromLngLat(e)):0,n=this.position,o=t.MercatorCoordinate.fromLngLat(e,r),s=[o.x-n.x,o.y-n.y,o.z-n.z];i||(i=[0,0,1]),i[2]=Math.abs(i[2]),this.orientation=vr(s,i)}setPitchBearing(e,i){this.orientation=xr(t.degToRad(e),t.degToRad(-i))}}class wr{constructor(e,i){this._transform=t.identity([]),this._orientation=t.identity$1([]),i&&(this._orientation=i,gr(this._transform,this._orientation)),e&&yr(this._transform,e)}get mercatorPosition(){const e=this.position;return new t.MercatorCoordinate(e[0],e[1],e[2])}get position(){const t=mr(this._transform,3);return[t[0],t[1],t[2]]}set position(t){yr(this._transform,t)}get orientation(){return this._orientation}set orientation(t){this._orientation=t,gr(this._transform,this._orientation)}getPitchBearing(){const t=this.forward(),e=this.right();return{bearing:Math.atan2(-e[1],e[0]),pitch:Math.atan2(Math.sqrt(t[0]*t[0]+t[1]*t[1]),-t[2])}}setPitchBearing(t,e){this._orientation=xr(t,e),gr(this._transform,this._orientation)}forward(){const t=mr(this._transform,2);return[-t[0],-t[1],-t[2]]}up(){const t=mr(this._transform,1);return[-t[0],-t[1],-t[2]]}right(){const t=mr(this._transform,0);return[t[0],t[1],t[2]]}getCameraToWorld(e,i){const r=new Float64Array(16);return t.invert(r,this.getWorldToCamera(e,i)),r}getWorldToCameraPosition(e,i,r){const n=this.position;t.scale(n,n,-e);const o=new Float64Array(16);return t.fromScaling(o,[r,r,r]),t.translate(o,o,n),o[10]*=i,o}getWorldToCamera(e,i){const r=new Float64Array(16),n=new Float64Array(4),o=this.position;return t.conjugate(n,this._orientation),t.scale(o,o,-e),t.fromQuat(r,n),t.translate(r,r,o),r[1]*=-1,r[5]*=-1,r[9]*=-1,r[13]*=-1,r[8]*=i,r[9]*=i,r[10]*=i,r[11]*=i,r}getCameraToClipPerspective(e,i,r,n){const o=new Float64Array(16);return t.perspective(o,e,i,r,n),o}getDistanceToElevation(e){const i=0===e?0:t.mercatorZfromAltitude(e,this.position[1]),r=this.forward();return(i-this.position[2])/r[2]}clone(){return new wr([...this.position],[...this.orientation])}}function Tr(e,i){const r=Sr(e),n=function(e,i,r,n,o){const s=new t.LngLat(r.lng-180*Ar,r.lat),a=new t.LngLat(r.lng+180*Ar,r.lat),l=e.project(s.lng,s.lat),c=e.project(a.lng,a.lat),h=-Math.atan2(c.y-l.y,c.x-l.x),u=t.MercatorCoordinate.fromLngLat(r);u.y=t.clamp(u.y,-.999975,.999975);const d=u.toLngLat(),p=e.project(d.lng,d.lat),f=t.MercatorCoordinate.fromLngLat(d);f.x+=Ar;const m=f.toLngLat(),_=e.project(m.lng,m.lat),g=Mr(_.x-p.x,_.y-p.y,h),y=t.MercatorCoordinate.fromLngLat(d);y.y+=Ar;const x=y.toLngLat(),v=e.project(x.lng,x.lat),b=Mr(v.x-p.x,v.y-p.y,h),w=Math.abs(g.x)/Math.abs(b.y),T=t.identity([]);t.rotateZ(T,T,-h*(1-(o?0:n)));const E=t.identity([]);return t.scale$1(E,E,[1,1-(1-w)*n,1]),E[4]=-b.x/b.y*n,t.rotateZ(E,E,h),t.multiply(E,T,E),E}(e.projection,0,e.center,r,i),o=Er(e);return t.scale$1(n,n,[o,o,1]),n}function Er(e){const i=e.projection,r=Sr(e),n=Ir(i,e.center),o=Ir(i,t.LngLat.convert(i.center));return Math.pow(2,n*r+(1-r)*o)}function Sr(e){const i=e.projection.range;if(!i)return 0;const r=Math.max(e.width,e.height),n=Math.log(r/1024)/Math.LN2;return t.smoothstep(i[0]+n,i[1]+n,e.zoom)}const Ar=1/4e4;function Ir(e,i){const r=t.clamp(i.lat,-t.MAX_MERCATOR_LATITUDE,t.MAX_MERCATOR_LATITUDE),n=new t.LngLat(i.lng-180*Ar,r),o=new t.LngLat(i.lng+180*Ar,r),s=e.project(n.lng,r),a=e.project(o.lng,r),l=t.MercatorCoordinate.fromLngLat(n),c=t.MercatorCoordinate.fromLngLat(o),h=a.x-s.x,u=a.y-s.y,d=c.x-l.x,p=c.y-l.y,f=Math.sqrt((d*d+p*p)/(h*h+u*u));return Math.log(f)/Math.LN2}function Mr(t,e,i){const r=Math.cos(i),n=Math.sin(i);return{x:t*r-e*n,y:t*n+e*r}}class Cr{constructor(e,i,r,n,o){this.tileSize=512,this._renderWorldCopies=void 0===o||o,this._minZoom=e||0,this._maxZoom=i||22,this._minPitch=null==r?0:r,this._maxPitch=null==n?60:n,this.setProjection(),this.setMaxBounds(),this.width=0,this.height=0,this._center=new t.LngLat(0,0),this.zoom=0,this.angle=0,this._fov=.6435011087932844,this._pitch=0,this._unmodified=!0,this._edgeInsets=new fr,this._projMatrixCache={},this._alignedProjMatrixCache={},this._fogTileMatrixCache={},this._distanceTileDataCache={},this._camera=new wr,this._centerAltitude=0,this._averageElevation=0,this.cameraElevationReference="ground",this._horizonShift=.1}clone(){const t=new Cr(this._minZoom,this._maxZoom,this._minPitch,this.maxPitch,this._renderWorldCopies);return t._elevation=this._elevation,t._centerAltitude=this._centerAltitude,t.tileSize=this.tileSize,t.setMaxBounds(this.getMaxBounds()),t.width=this.width,t.height=this.height,t.cameraElevationReference=this.cameraElevationReference,t._center=this._center,t._setZoom(this.zoom),t._cameraZoom=this._cameraZoom,t.angle=this.angle,t._fov=this._fov,t._pitch=this._pitch,t._averageElevation=this._averageElevation,t._unmodified=this._unmodified,t._edgeInsets=this._edgeInsets.clone(),t._camera=this._camera.clone(),t._calcMatrices(),t.freezeTileCoverage=this.freezeTileCoverage,t.setProjection(this.getProjection()),t}get elevation(){return this._elevation}set elevation(t){this._elevation!==t&&(this._elevation=t,t?this._updateCenterElevation()&&this._updateCameraOnTerrain():(this._cameraZoom=null,this._centerAltitude=0),this._calcMatrices())}updateElevation(t){this._terrainEnabled()&&null==this._cameraZoom&&this._updateCenterElevation()&&this._updateCameraOnTerrain(),t&&this._constrainCameraAltitude(),this._calcMatrices()}getProjection(){return t.pick(this.projection,["name","center","parallels"])}setProjection(e){null==e&&(e={name:"mercator"}),this.projectionOptions=e;const i=this.projection?this.getProjection():void 0;return this.projection=t.getProjection(e),!n(i,this.getProjection())&&(this._calcMatrices(),!0)}get minZoom(){return this._minZoom}set minZoom(t){this._minZoom!==t&&(this._minZoom=t,this.zoom=Math.max(this.zoom,t))}get maxZoom(){return this._maxZoom}set maxZoom(t){this._maxZoom!==t&&(this._maxZoom=t,this.zoom=Math.min(this.zoom,t))}get minPitch(){return this._minPitch}set minPitch(t){this._minPitch!==t&&(this._minPitch=t,this.pitch=Math.max(this.pitch,t))}get maxPitch(){return this._maxPitch}set maxPitch(t){this._maxPitch!==t&&(this._maxPitch=t,this.pitch=Math.min(this.pitch,t))}get renderWorldCopies(){return this._renderWorldCopies&&!0===this.projection.wrap}set renderWorldCopies(t){void 0===t?t=!0:null===t&&(t=!1),this._renderWorldCopies=t}get worldSize(){return this.tileSize*this.scale}get cameraWorldSize(){const t=Math.max(this._camera.getDistanceToElevation(this._averageElevation),Number.EPSILON);return this._worldSizeFromZoom(this._zoomFromMercatorZ(t))}get pixelsPerMeter(){return t.mercatorZfromAltitude(1,this.center.lat)*this.worldSize}get cameraPixelsPerMeter(){return t.mercatorZfromAltitude(1,this.center.lat)*this.cameraWorldSize}get centerOffset(){return this.centerPoint._sub(this.size._div(2))}get size(){return new t.pointGeometry(this.width,this.height)}get bearing(){return t.wrap(this.rotation,-180,180)}set bearing(t){this.rotation=t}get rotation(){return-this.angle/Math.PI*180}set rotation(e){const i=-e*Math.PI/180;var r;this.angle!==i&&(this._unmodified=!1,this.angle=i,this._calcMatrices(),this.rotationMatrix=(r=new t.ARRAY_TYPE(4),t.ARRAY_TYPE!=Float32Array&&(r[1]=0,r[2]=0),r[0]=1,r[3]=1,r),function(t,e,i){var r=e[0],n=e[1],o=e[2],s=e[3],a=Math.sin(i),l=Math.cos(i);t[0]=r*l+o*a,t[1]=n*l+s*a,t[2]=r*-a+o*l,t[3]=n*-a+s*l}(this.rotationMatrix,this.rotationMatrix,this.angle))}get pitch(){return this._pitch/Math.PI*180}set pitch(e){const i=t.clamp(e,this.minPitch,this.maxPitch)/180*Math.PI;this._pitch!==i&&(this._unmodified=!1,this._pitch=i,this._calcMatrices())}get fov(){return this._fov/Math.PI*180}set fov(t){t=Math.max(.01,Math.min(60,t)),this._fov!==t&&(this._unmodified=!1,this._fov=t/180*Math.PI,this._calcMatrices())}get averageElevation(){return this._averageElevation}set averageElevation(t){this._averageElevation=t,this._calcFogMatrices()}get zoom(){return this._zoom}set zoom(t){const e=Math.min(Math.max(t,this.minZoom),this.maxZoom);this._zoom!==e&&(this._unmodified=!1,this._setZoom(e),this._terrainEnabled()&&this._updateCameraOnTerrain(),this._constrain(),this._calcMatrices())}_setZoom(t){this._zoom=t,this.scale=this.zoomScale(t),this.tileZoom=Math.floor(t),this.zoomFraction=t-this.tileZoom}_updateCenterElevation(){if(!this._elevation)return!1;const t=this._elevation.getAtPointOrZero(this.locationCoordinate(this.center),-1);return-1===t?(this._cameraZoom=null,!1):(this._centerAltitude=t,!0)}_updateCameraOnTerrain(){const e=this.cameraToCenterDistance/this.worldSize,i=t.mercatorZfromAltitude(this._centerAltitude,this.center.lat);this._cameraZoom=this._zoomFromMercatorZ(i+e)}sampleAverageElevation(){if(!this._elevation)return 0;const e=this._elevation,i=[[.5,.2],[.3,.5],[.5,.5],[.7,.5],[.5,.8]],r=this.horizonLineFromTop();let n=0,o=0;for(let s=0;se.maxzoom&&(i=e.maxzoom);const s=this.locationCoordinate(this.center),a=1<{const i=1/4e4,r=new t.MercatorCoordinate(e.x+i,e.y,e.z),n=new t.MercatorCoordinate(e.x,e.y+i,e.z),o=e.toLngLat(),s=r.toLngLat(),a=n.toLngLat(),l=this.locationCoordinate(o),c=this.locationCoordinate(s),h=this.locationCoordinate(a),u=Math.hypot(c.x-l.x,c.y-l.y),d=Math.hypot(h.x-l.x,h.y-l.y);return Math.sqrt(u*d)*v/i},w=(e,i,r,n,o,s)=>{const l=t.tileTransform({z:e,x:i,y:r},this.projection);return new m([(n+l.x/l.scale)*a,a*(l.y/l.scale),o],[(n+l.x2/l.scale)*a,a*(l.y2/l.scale),s])},T=t=>({aabb:w(0,0,0,t,x,y),zoom:0,x:0,y:0,wrap:t,fullyVisible:!1}),E=[];let S=[];const A=i,I=e.reparseOverscaled?r:i,M=t=>{if(!this._elevation||!t.tileID)return;const e=this._elevation.getMinMaxForTile(t.tileID),i=t.aabb;e?(i.min[2]=e.min,i.max[2]=e.max,i.center[2]=(i.min[2]+i.max[2])/2):(t.shouldSplit=k(t),t.shouldSplit||(i.min[2]=i.max[2]=i.center[2]=this._centerAltitude))},C=t=>t*t,z=C((d-this._centerAltitude)*u),k=e=>{if(e.zoom.85?1:r}const c=i*i+s*s+a;return c{if(e*C(.707)0;){const r=E.pop(),o=r.x,s=r.y;let a=r.fullyVisible;if(!a){const t=r.aabb.intersects(c);if(0===t)continue;a=2===t}if(r.zoom!==A&&k(r))for(let e=0;e<4;e++){const i=(o<<1)+e%2,l=(s<<1)+(e>>1),c={aabb:"mercator"===this.projection.name?r.aabb.quadrant(e):w(r.zoom+1,i,l,r.wrap,0,0),zoom:r.zoom+1,x:i,y:l,wrap:r.wrap,fullyVisible:a,tileID:void 0,shouldSplit:void 0};n&&(c.tileID=new t.OverscaledTileID(r.zoom+1===A?I:r.zoom+1,r.wrap,r.zoom+1,i,l),M(c)),E.push(c)}else{const n=r.zoom===A?I:r.zoom;if(e.minzoom&&e.minzoom>n)continue;const a=l[0]-(.5+o+(r.wrap<{const o=[0,0,0,1],s=[t.EXTENT,t.EXTENT,0,1],a=this.calculateFogTileMatrix(n.tileID.toUnwrapped());t.transformMat4(o,o,a),t.transformMat4(s,s,a);const l=t.getAABBPointSquareDist(o,s);if(0===l)return!0;let c=!1;const h=this._elevation;if(h&&l>i&&0!==r){const i=this.calculateProjMatrix(n.tileID.toUnwrapped());let o;e.isTerrainDEM||(o=h.getMinMaxForTile(n.tileID)),o||(o={min:x,max:y});const s=t.furthestTileCorner(this.rotation),a=[s[0]*t.EXTENT,s[1]*t.EXTENT,o.max];t.transformMat4$1(a,a,i),c=(1-a[1])*this.height*.5t.distanceSq-e.distanceSq).map(t=>t.tileID)}resize(t,e){this.width=t,this.height=e,this.pixelsToGLUnits=[2/t,-2/e],this._constrain(),this._calcMatrices()}get unmodified(){return this._unmodified}zoomScale(t){return Math.pow(2,t)}scaleZoom(t){return Math.log(t)/Math.LN2}project(e){const i=t.clamp(e.lat,-t.MAX_MERCATOR_LATITUDE,t.MAX_MERCATOR_LATITUDE),r=this.projection.project(e.lng,i);return new t.pointGeometry(r.x*this.worldSize,r.y*this.worldSize)}unproject(t){return this.projection.unproject(t.x/this.worldSize,t.y/this.worldSize)}get point(){return this.project(this.center)}setLocationAtPoint(e,i){const r=this.pointCoordinate(i),n=this.pointCoordinate(this.centerPoint),o=this.locationCoordinate(e);this.setLocation(new t.MercatorCoordinate(o.x-(r.x-n.x),o.y-(r.y-n.y)))}setLocation(t){this.center=this.coordinateLocation(t),this.renderWorldCopies&&(this.center=this.center.wrap())}locationPoint(t){return this._coordinatePoint(this.locationCoordinate(t),!1)}locationPoint3D(t){return this._coordinatePoint(this.locationCoordinate(t),!0)}pointLocation(t){return this.coordinateLocation(this.pointCoordinate(t))}pointLocation3D(t){return this.coordinateLocation(this.pointCoordinate3D(t))}locationCoordinate(e,i){const r=i?t.mercatorZfromAltitude(i,e.lat):void 0,n=this.projection.project(e.lng,e.lat);return new t.MercatorCoordinate(n.x,n.y,r)}coordinateLocation(t){return this.projection.unproject(t.x,t.y)}pointRayIntersection(e,i){const r=null!=i?i:this._centerAltitude,n=[e.x,e.y,0,1],o=[e.x,e.y,1,1];t.transformMat4(n,n,this.pixelMatrixInverse),t.transformMat4(o,o,this.pixelMatrixInverse);const s=o[3];t.scale$2(n,n,1/n[3]),t.scale$2(o,o,1/s);const a=n[2],l=o[2];return{p0:n,p1:o,t:a===l?0:(r-a)/(l-a)}}screenPointToMercatorRay(e){const i=[e.x,e.y,0,1],r=[e.x,e.y,1,1];return t.transformMat4(i,i,this.pixelMatrixInverse),t.transformMat4(r,r,this.pixelMatrixInverse),t.scale$2(i,i,1/i[3]),t.scale$2(r,r,1/r[3]),i[2]=t.mercatorZfromAltitude(i[2],this._center.lat)*this.worldSize,r[2]=t.mercatorZfromAltitude(r[2],this._center.lat)*this.worldSize,t.scale$2(i,i,1/this.worldSize),t.scale$2(r,r,1/this.worldSize),new p([i[0],i[1],i[2]],t.normalize([],t.sub([],r,i)))}rayIntersectionCoordinate(e){const{p0:i,p1:r,t:n}=e,o=t.mercatorZfromAltitude(i[2],this._center.lat),s=t.mercatorZfromAltitude(r[2],this._center.lat);return new t.MercatorCoordinate(t.number(i[0],r[0],n)/this.worldSize,t.number(i[1],r[1],n)/this.worldSize,t.number(o,s,n))}pointCoordinate(e,i=this._centerAltitude){const r=this.horizonLineFromTop(!1),n=new t.pointGeometry(e.x,Math.max(r,e.y));return this.rayIntersectionCoordinate(this.pointRayIntersection(n,i))}pointCoordinate3D(e){if(!this.elevation)return this.pointCoordinate(e);const i=this.elevation;let r=this.elevation.pointCoordinate(e);if(r)return new t.MercatorCoordinate(r[0],r[1],r[2]);let n=0,o=this.horizonLineFromTop();if(e.y>o)return this.pointCoordinate(e);const s=.02*o,a=e.clone();for(let l=0;l<10&&o-n>s;l++){a.y=t.number(n,o,.66);const e=i.pointCoordinate(a);e?(o=a.y,r=e):n=a.y}return r?new t.MercatorCoordinate(r[0],r[1],r[2]):this.pointCoordinate(e)}isPointAboveHorizon(t){if(this.elevation)return!this.elevation.pointCoordinate(t);{const e=this.horizonLineFromTop();return t.y0?new t.pointGeometry(n[0]/n[3],n[1]/n[3]):new t.pointGeometry(Number.MAX_VALUE,Number.MAX_VALUE)}_getBounds(e,i){const r=new t.pointGeometry(this._edgeInsets.left,this._edgeInsets.top),n=new t.pointGeometry(this.width-this._edgeInsets.right,this._edgeInsets.top),o=new t.pointGeometry(this.width-this._edgeInsets.right,this.height-this._edgeInsets.bottom),s=new t.pointGeometry(this._edgeInsets.left,this.height-this._edgeInsets.bottom);let a=this.pointCoordinate(r,e),l=this.pointCoordinate(n,e);const c=this.pointCoordinate(o,i),h=this.pointCoordinate(s,i),u=(t,e)=>(e.y-t.y)/(e.x-t.x);return a.y>1&&l.y>=0?a=new t.MercatorCoordinate((1-h.y)/u(h,a)+h.x,1):a.y<0&&l.y<=1&&(a=new t.MercatorCoordinate(-h.y/u(h,a)+h.x,0)),l.y>1&&a.y>=0?l=new t.MercatorCoordinate((1-c.y)/u(c,l)+c.x,1):l.y<0&&a.y<=1&&(l=new t.MercatorCoordinate(-c.y/u(c,l)+c.x,0)),(new t.LngLatBounds).extend(this.coordinateLocation(a)).extend(this.coordinateLocation(l)).extend(this.coordinateLocation(h)).extend(this.coordinateLocation(c))}_getBounds3D(){const t=this.elevation,e=t.visibleDemTiles.reduce((t,e)=>{if(e.dem){const i=e.dem.tree;t.min=Math.min(t.min,i.minimums[0]),t.max=Math.max(t.max,i.maximums[0])}return t},{min:Number.MAX_VALUE,max:0});return this._getBounds(e.min*t.exaggeration(),e.max*t.exaggeration())}getBounds(){return this._terrainEnabled()?this._getBounds3D():this._getBounds(0,0)}horizonLineFromTop(t=!0){const e=this.height/2/Math.tan(this._fov/2)/Math.tan(Math.max(this._pitch,.1))+this.centerOffset.y,i=this.height/2-e*(1-this._horizonShift);return t?Math.max(0,i):i}getMaxBounds(){return this.maxBounds}setMaxBounds(e){this.maxBounds=e,this.minLat=-t.MAX_MERCATOR_LATITUDE,this.maxLat=t.MAX_MERCATOR_LATITUDE,this.minLng=-180,this.maxLng=180,e&&(this.minLat=e.getSouth(),this.maxLat=e.getNorth(),this.minLng=e.getWest(),this.maxLng=e.getEast(),this.maxLng=0)return;const n=t.mercatorZfromAltitude(1,this._center.lat);i[2]/=n,r[2]/=n,t.normalize(r,r);const o=e.raycast(i,r,e.exaggeration());if(o){const e=t.scaleAndAdd([],i,r,o),n=new t.MercatorCoordinate(e[0],e[1],t.mercatorZfromAltitude(e[2],t.latFromMercatorY(e[1]))),s=this._camera.position,a=n.z+t.length([n.x-s[0],n.y-s[1],n.z-s[2]]);this._cameraZoom=this._zoomFromMercatorZ(a),this._centerAltitude=n.toAltitude(),this._center=this.coordinateLocation(n),this._updateZoomFromElevation(),this._constrain(),this._calcMatrices()}}_constrainCameraAltitude(){if(!this._elevation)return;const e=this._elevation;this._updateCameraState();const i=e.getAtPointOrZero(this._camera.mercatorPosition),r=this._minimumHeightOverTerrain()*Math.cos(t.degToRad(this._maxPitch)),n=t.mercatorZfromAltitude(i,this._center.lat),o=this._camera.position[2]-n;if(oh&&(s=h-l),h-ce&&(o=e-a),e-t.5?S-1:S,A>.5?A-1:A,0]),this.alignedProjMatrix=I,g=t.create$1(),t.scale$1(g,g,[this.width/2,-this.height/2,1]),t.translate(g,g,[1,-1,0]),this.labelPlaneMatrix=g,g=t.create$1(),t.scale$1(g,g,[1,-1,1]),t.translate(g,g,[-1,-1,0]),t.scale$1(g,g,[2/this.width,2/this.height,1]),this.glCoordMatrix=g,this.pixelMatrix=t.multiply(new Float64Array(16),this.labelPlaneMatrix,this.projMatrix),this._calcFogMatrices(),this._distanceTileDataCache={},g=t.invert(new Float64Array(16),this.pixelMatrix),!g)throw new Error("failed to invert matrix");this.pixelMatrixInverse=g,this._projMatrixCache={},this._alignedProjMatrixCache={},this._pixelsToTileUnitsCache={}}_calcFogMatrices(){this._fogTileMatrixCache={};const e=this.cameraWorldSize,i=this.cameraPixelsPerMeter,r=this._camera.position,n=1/this.height,o=[e,e,i];t.scale(o,o,n),t.scale(r,r,-1),t.multiply$1(r,r,o);const s=t.create$1();t.translate(s,s,r),t.scale$1(s,s,o),this.mercatorFogMatrix=s,this.worldToFogMatrix=this._camera.getWorldToCameraPosition(e,i,n)}_updateCameraState(){if(!this.height)return;this._camera.setPitchBearing(this._pitch,this.angle);const e=this._camera.forward(),i=this.cameraToCenterDistance,r=this.point,n=this._mercatorZfromZoom(this._cameraZoom?this._cameraZoom:this._zoom)-t.mercatorZfromAltitude(this._centerAltitude,this.center.lat),o=this.cameraToCenterDistance/n;this._camera.position=[r.x/this.worldSize-e[0]*i/o,r.y/this.worldSize-e[1]*i/o,t.mercatorZfromAltitude(this._centerAltitude,this._center.lat)+-e[2]*i/o]}_translateCameraConstrained(e){const i=this._maxCameraBoundsDistance()*Math.cos(this._pitch),r=e[2];let n=1;r>0&&(n=Math.min((i-this._camera.position[2])/r,1)),this._camera.position=t.scaleAndAdd([],this._camera.position,e,n),this._updateStateFromCamera()}_updateStateFromCamera(){const e=this._camera.position,i=this._camera.forward(),{pitch:r,bearing:n}=this._camera.getPitchBearing(),o=t.mercatorZfromAltitude(this._centerAltitude,this.center.lat),s=this._mercatorZfromZoom(this._maxZoom)*Math.cos(t.degToRad(this._maxPitch)),a=Math.max((e[2]-o)/Math.cos(r),s),l=this._zoomFromMercatorZ(a);t.scaleAndAdd(e,e,i,a),this._pitch=t.clamp(r,t.degToRad(this.minPitch),t.degToRad(this.maxPitch)),this.angle=t.wrap(n,-Math.PI,Math.PI),this._setZoom(t.clamp(l,this._minZoom,this._maxZoom)),this._terrainEnabled()&&this._updateCameraOnTerrain(),this._center=this.coordinateLocation(new t.MercatorCoordinate(e[0],e[1],e[2])),this._unmodified=!1,this._constrain(),this._calcMatrices()}_worldSizeFromZoom(t){return Math.pow(2,t)*this.tileSize}_mercatorZfromZoom(t){return this.cameraToCenterDistance/this._worldSizeFromZoom(t)}_minimumHeightOverTerrain(){const t=Math.min((null!=this._cameraZoom?this._cameraZoom:this._zoom)+2,this._maxZoom);return this._mercatorZfromZoom(t)}_zoomFromMercatorZ(t){return this.scaleZoom(this.cameraToCenterDistance/(t*this.tileSize))}_terrainEnabled(){return!(!this._elevation||"mercator"!==this.projection.name&&(t.warnOnce("Terrain is not yet supported with alternate projections. Use mercator to enable terrain."),1))}anyCornerOffEdge(e,i){const r=Math.min(e.x,i.x),n=Math.max(e.x,i.x),o=Math.min(e.y,i.y),s=Math.max(e.y,i.y);if(oc||i.y>1)return!0}return!1}isHorizonVisible(){return this.pitch+t.radToDeg(this.fovAboveCenter)>88||this.anyCornerOffEdge(new t.pointGeometry(0,0),new t.pointGeometry(this.width,this.height))}zoomDeltaToMovement(e,i){const r=t.length(t.sub([],this._camera.position,e)),n=this._zoomFromMercatorZ(r)+i;return r-this._mercatorZfromZoom(n)}getCameraPoint(){const e=Math.tan(this._pitch)*(this.cameraToCenterDistance||1);return this.centerPoint.add(new t.pointGeometry(0,e))}}function zr(t,e){let i=!1,r=null;const n=()=>{r=null,i&&(t(),r=setTimeout(n,e),i=!1)};return()=>(i=!0,r||n(),r)}class kr{constructor(e){this._hashName=e&&encodeURIComponent(e),t.bindAll(["_getCurrentHash","_onHashChange","_updateHash"],this),this._updateHash=zr(this._updateHashUnthrottled.bind(this),300)}addTo(e){return this._map=e,t.window.addEventListener("hashchange",this._onHashChange,!1),this._map.on("moveend",this._updateHash),this}remove(){return t.window.removeEventListener("hashchange",this._onHashChange,!1),this._map.off("moveend",this._updateHash),clearTimeout(this._updateHash()),delete this._map,this}getHashString(e){const i=this._map.getCenter(),r=Math.round(100*this._map.getZoom())/100,n=Math.ceil((r*Math.LN2+Math.log(512/360/.5))/Math.LN10),o=Math.pow(10,n),s=Math.round(i.lng*o)/o,a=Math.round(i.lat*o)/o,l=this._map.getBearing(),c=this._map.getPitch();let h="";if(h+=e?`/${s}/${a}/${r}`:`${r}/${a}/${s}`,(l||c)&&(h+="/"+Math.round(10*l)/10),c&&(h+="/"+Math.round(c)),this._hashName){const e=this._hashName;let i=!1;const r=t.window.location.hash.slice(1).split("&").map(t=>{const r=t.split("=")[0];return r===e?(i=!0,`${r}=${h}`):t}).filter(t=>t);return i||r.push(`${e}=${h}`),"#"+r.join("&")}return"#"+h}_getCurrentHash(){const e=t.window.location.hash.replace("#","");if(this._hashName){let t;return e.split("&").map(t=>t.split("=")).forEach(e=>{e[0]===this._hashName&&(t=e)}),(t&&t[1]||"").split("/")}return e.split("/")}_onHashChange(){const t=this._getCurrentHash();if(t.length>=3&&!t.some(t=>isNaN(t))){const e=this._map.dragRotate.isEnabled()&&this._map.touchZoomRotate.isEnabled()?+(t[3]||0):this._map.getBearing();return this._map.jumpTo({center:[+t[2],+t[1]],zoom:+t[0],bearing:e,pitch:+(t[4]||0)}),!0}return!1}_updateHashUnthrottled(){const e=t.window.location.href.replace(/(#.+)?$/,this.getHashString());t.window.history.replaceState(t.window.history.state,null,e)}}const Pr={linearity:.3,easing:t.bezier(0,0,.3,1)},Dr=t.extend({deceleration:2500,maxSpeed:1400},Pr),Lr=t.extend({deceleration:20,maxSpeed:1400},Pr),Br=t.extend({deceleration:1e3,maxSpeed:360},Pr),Rr=t.extend({deceleration:1e3,maxSpeed:90},Pr);class Fr{constructor(t){this._map=t,this.clear()}clear(){this._inertiaBuffer=[]}record(e){this._drainInertiaBuffer(),this._inertiaBuffer.push({time:t.exported.now(),settings:e})}_drainInertiaBuffer(){const e=this._inertiaBuffer,i=t.exported.now();for(;e.length>0&&i-e[0].time>160;)e.shift()}_onMoveEnd(e){if(this._drainInertiaBuffer(),this._inertiaBuffer.length<2)return;const i={zoom:0,bearing:0,pitch:0,pan:new t.pointGeometry(0,0),pinchAround:void 0,around:void 0};for(const{settings:t}of this._inertiaBuffer)i.zoom+=t.zoomDelta||0,i.bearing+=t.bearingDelta||0,i.pitch+=t.pitchDelta||0,t.panDelta&&i.pan._add(t.panDelta),t.around&&(i.around=t.around),t.pinchAround&&(i.pinchAround=t.pinchAround);const r=this._inertiaBuffer[this._inertiaBuffer.length-1].time-this._inertiaBuffer[0].time,n={};if(i.pan.mag()){const o=Ur(i.pan.mag(),r,t.extend({},Dr,e||{}));n.offset=i.pan.mult(o.amount/i.pan.mag()),n.center=this._map.transform.center,Or(n,o)}if(i.zoom){const t=Ur(i.zoom,r,Lr);n.zoom=this._map.transform.zoom+t.amount,Or(n,t)}if(i.bearing){const e=Ur(i.bearing,r,Br);n.bearing=this._map.transform.bearing+t.clamp(e.amount,-179,179),Or(n,e)}if(i.pitch){const t=Ur(i.pitch,r,Rr);n.pitch=this._map.transform.pitch+t.amount,Or(n,t)}if(n.zoom||n.bearing){const t=void 0===i.pinchAround?i.around:i.pinchAround;n.around=t?this._map.unproject(t):this._map.getCenter()}return this.clear(),t.extend(n,{noMoveStart:!0})}}function Or(t,e){(!t.duration||t.durationi.unproject(t)),l=s.reduce((t,e,i,r)=>t.add(e.div(r.length)),new t.pointGeometry(0,0));super(e,{points:s,point:l,lngLats:a,lngLat:i.unproject(l),originalEvent:r}),this._defaultPrevented=!1}}class jr extends t.Event{preventDefault(){this._defaultPrevented=!0}get defaultPrevented(){return this._defaultPrevented}constructor(t,e,i){super(t,{originalEvent:i}),this._defaultPrevented=!1}}class Gr{constructor(t,e){this._map=t,this._clickTolerance=e.clickTolerance}reset(){delete this._mousedownPos}wheel(t){return this._firePreventable(new jr(t.type,this._map,t))}mousedown(t,e){return this._mousedownPos=e,this._firePreventable(new Vr(t.type,this._map,t))}mouseup(t){this._map.fire(new Vr(t.type,this._map,t))}preclick(e){const i=t.extend({},e);i.type="preclick",this._map.fire(new Vr(i.type,this._map,i))}click(t,e){this._mousedownPos&&this._mousedownPos.dist(e)>=this._clickTolerance||(this.preclick(t),this._map.fire(new Vr(t.type,this._map,t)))}dblclick(t){return this._firePreventable(new Vr(t.type,this._map,t))}mouseover(t){this._map.fire(new Vr(t.type,this._map,t))}mouseout(t){this._map.fire(new Vr(t.type,this._map,t))}touchstart(t){return this._firePreventable(new Nr(t.type,this._map,t))}touchmove(t){this._map.fire(new Nr(t.type,this._map,t))}touchend(t){this._map.fire(new Nr(t.type,this._map,t))}touchcancel(t){this._map.fire(new Nr(t.type,this._map,t))}_firePreventable(t){if(this._map.fire(t),t.defaultPrevented)return{}}isEnabled(){return!0}isActive(){return!1}enable(){}disable(){}}class Zr{constructor(t){this._map=t}reset(){this._delayContextMenu=!1,delete this._contextMenuEvent}mousemove(t){this._map.fire(new Vr(t.type,this._map,t))}mousedown(){this._delayContextMenu=!0}mouseup(){this._delayContextMenu=!1,this._contextMenuEvent&&(this._map.fire(new Vr("contextmenu",this._map,this._contextMenuEvent)),delete this._contextMenuEvent)}contextmenu(t){this._delayContextMenu?this._contextMenuEvent=t:this._map.fire(new Vr(t.type,this._map,t)),this._map.listens("contextmenu")&&t.preventDefault()}isEnabled(){return!0}isActive(){return!1}enable(){}disable(){}}class qr{constructor(t,e){this._map=t,this._el=t.getCanvasContainer(),this._container=t.getContainer(),this._clickTolerance=e.clickTolerance||1}isEnabled(){return!!this._enabled}isActive(){return!!this._active}enable(){this.isEnabled()||(this._enabled=!0)}disable(){this.isEnabled()&&(this._enabled=!1)}mousedown(t,e){this.isEnabled()&&t.shiftKey&&0===t.button&&(o.disableDrag(),this._startPos=this._lastPos=e,this._active=!0)}mousemoveWindow(t,e){if(!this._active)return;const i=e;if(this._lastPos.equals(i)||!this._box&&i.dist(this._startPos){this._box&&(o.setTransform(this._box,`translate(${n}px,${a}px)`),this._box.style.width=s-n+"px",this._box.style.height=l-a+"px")})}mouseupWindow(e,i){if(!this._active)return;if(0!==e.button)return;const r=this._startPos,n=i;if(this.reset(),o.suppressClick(),r.x!==n.x||r.y!==n.y)return this._map.fire(new t.Event("boxzoomend",{originalEvent:e})),{cameraAnimation:t=>t.fitScreenCoordinates(r,n,this._map.getBearing(),{linear:!1})};this._fireEvent("boxzoomcancel",e)}keydown(t){this._active&&27===t.keyCode&&(this.reset(),this._fireEvent("boxzoomcancel",t))}blur(){this.reset()}reset(){this._active=!1,this._container.classList.remove("mapboxgl-crosshair"),this._box&&(o.remove(this._box),this._box=null),o.enableDrag(),delete this._startPos,delete this._lastPos}_fireEvent(e,i){return this._map.fire(new t.Event(e,{originalEvent:i}))}}function $r(t,e){const i={};for(let r=0;rthis.numTouches)&&(this.aborted=!0),this.aborted||(void 0===this.startTime&&(this.startTime=e.timeStamp),r.length===this.numTouches&&(this.centroid=function(e){const i=new t.pointGeometry(0,0);for(const t of e)i._add(t);return i.div(e.length)}(i),this.touches=$r(r,i)))}touchmove(t,e,i){if(this.aborted||!this.centroid)return;const r=$r(i,e);for(const n in this.touches){const t=this.touches[n],e=r[n];(!e||e.dist(t)>30)&&(this.aborted=!0)}}touchend(t,e,i){if((!this.centroid||t.timeStamp-this.startTime>500)&&(this.aborted=!0),0===i.length){const t=!this.aborted&&this.centroid;if(this.reset(),t)return t}}}class Wr{constructor(t){this.singleTap=new Xr(t),this.numTaps=t.numTaps,this.reset()}reset(){this.lastTime=1/0,delete this.lastTap,this.count=0,this.singleTap.reset()}touchstart(t,e,i){this.singleTap.touchstart(t,e,i)}touchmove(t,e,i){this.singleTap.touchmove(t,e,i)}touchend(t,e,i){const r=this.singleTap.touchend(t,e,i);if(r){const e=t.timeStamp-this.lastTime<500,i=!this.lastTap||this.lastTap.dist(r)<30;if(e&&i||this.reset(),this.count++,this.lastTime=t.timeStamp,this.lastTap=r,this.count===this.numTaps)return this.reset(),r}}}class Hr{constructor(){this._zoomIn=new Wr({numTouches:1,numTaps:2}),this._zoomOut=new Wr({numTouches:2,numTaps:1}),this.reset()}reset(){this._active=!1,this._zoomIn.reset(),this._zoomOut.reset()}touchstart(t,e,i){this._zoomIn.touchstart(t,e,i),this._zoomOut.touchstart(t,e,i)}touchmove(t,e,i){this._zoomIn.touchmove(t,e,i),this._zoomOut.touchmove(t,e,i)}touchend(t,e,i){const r=this._zoomIn.touchend(t,e,i),n=this._zoomOut.touchend(t,e,i);return r?(this._active=!0,t.preventDefault(),setTimeout(()=>this.reset(),0),{cameraAnimation:e=>e.easeTo({duration:300,zoom:e.getZoom()+1,around:e.unproject(r)},{originalEvent:t})}):n?(this._active=!0,t.preventDefault(),setTimeout(()=>this.reset(),0),{cameraAnimation:e=>e.easeTo({duration:300,zoom:e.getZoom()-1,around:e.unproject(n)},{originalEvent:t})}):void 0}touchcancel(){this.reset()}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}const Kr={0:1,2:2};class Yr{constructor(t){this.reset(),this._clickTolerance=t.clickTolerance||1}blur(){this.reset()}reset(){this._active=!1,this._moved=!1,delete this._lastPoint,delete this._eventButton}_correctButton(t,e){return!1}_move(t,e){return{}}mousedown(t,e){if(this._lastPoint)return;const i=o.mouseButton(t);this._correctButton(t,i)&&(this._lastPoint=e,this._eventButton=i)}mousemoveWindow(t,e){const i=this._lastPoint;if(i)if(t.preventDefault(),function(t,e){const i=Kr[e];return void 0===t.buttons||(t.buttons&i)!==i}(t,this._eventButton))this.reset();else if(this._moved||!(e.dist(i)0&&(this._active=!0);const n=$r(r,i),o=new t.pointGeometry(0,0),s=new t.pointGeometry(0,0);let a=0;for(const t in n){const e=n[t],i=this._touches[t];i&&(o._add(e),s._add(e.sub(i)),a++,n[t]=e)}if(this._touches=n,a{this._alertContainer.classList.remove("mapboxgl-touch-pan-blocker-show")},500)}}class rn{constructor(){this.reset()}reset(){this._active=!1,delete this._firstTwoTouches}_start(t){}_move(t,e,i){return{}}touchstart(t,e,i){this._firstTwoTouches||i.length<2||(this._firstTwoTouches=[i[0].identifier,i[1].identifier],this._start([e[0],e[1]]))}touchmove(t,e,i){if(!this._firstTwoTouches)return;t.preventDefault();const[r,n]=this._firstTwoTouches,o=nn(i,e,r),s=nn(i,e,n);if(!o||!s)return;const a=this._aroundCenter?null:o.add(s).div(2);return this._move([o,s],a,t)}touchend(t,e,i){if(!this._firstTwoTouches)return;const[r,n]=this._firstTwoTouches,s=nn(i,e,r),a=nn(i,e,n);s&&a||(this._active&&o.suppressClick(),this.reset())}touchcancel(){this.reset()}enable(t){this._enabled=!0,this._aroundCenter=!!t&&"center"===t.around}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}function nn(t,e,i){for(let r=0;rMath.abs(t.x)}class hn extends rn{constructor(t){super(),this._map=t}reset(){super.reset(),this._valid=void 0,delete this._firstMove,delete this._lastPoints}_start(t){this._lastPoints=t,cn(t[0].sub(t[1]))&&(this._valid=!1)}_move(t,e,i){const r=t[0].sub(this._lastPoints[0]),n=t[1].sub(this._lastPoints[1]);if(!(this._map._cooperativeGestures&&i.touches.length<3)&&(this._valid=this.gestureBeginsVertically(r,n,i.timeStamp),this._valid))return this._lastPoints=t,this._active=!0,{pitchDelta:(r.y+n.y)/2*-.5}}gestureBeginsVertically(t,e,i){if(void 0!==this._valid)return this._valid;const r=t.mag()>=2,n=e.mag()>=2;if(!r&&!n)return;if(!r||!n)return void 0===this._firstMove&&(this._firstMove=i),i-this._firstMove<100&&void 0;const o=t.y>0==e.y>0;return cn(t)&&cn(e)&&o}}const un={panStep:100,bearingStep:15,pitchStep:10};class dn{constructor(){const t=un;this._panStep=t.panStep,this._bearingStep=t.bearingStep,this._pitchStep=t.pitchStep,this._rotationDisabled=!1}blur(){this.reset()}reset(){this._active=!1}keydown(t){if(t.altKey||t.ctrlKey||t.metaKey)return;let e=0,i=0,r=0,n=0,o=0;switch(t.keyCode){case 61:case 107:case 171:case 187:e=1;break;case 189:case 109:case 173:e=-1;break;case 37:t.shiftKey?i=-1:(t.preventDefault(),n=-1);break;case 39:t.shiftKey?i=1:(t.preventDefault(),n=1);break;case 38:t.shiftKey?r=1:(t.preventDefault(),o=-1);break;case 40:t.shiftKey?r=-1:(t.preventDefault(),o=1);break;default:return}return this._rotationDisabled&&(i=0,r=0),{cameraAnimation:s=>{const a=s.getZoom();s.easeTo({duration:300,easeId:"keyboardHandler",easing:pn,zoom:e?Math.round(a)+e*(t.shiftKey?2:1):a,bearing:s.getBearing()+i*this._bearingStep,pitch:s.getPitch()+r*this._pitchStep,offset:[-n*this._panStep,-o*this._panStep],center:s.getCenter()},{originalEvent:t})}}}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}disableRotation(){this._rotationDisabled=!0}enableRotation(){this._rotationDisabled=!1}}function pn(t){return t*(2-t)}const fn=4.000244140625;class mn{constructor(e,i){this._map=e,this._el=e.getCanvasContainer(),this._handler=i,this._delta=0,this._defaultZoomRate=.01,this._wheelZoomRate=.0022222222222222222,t.bindAll(["_onTimeout","_addScrollZoomBlocker","_showBlockerAlert","_isFullscreen"],this)}setZoomRate(t){this._defaultZoomRate=t}setWheelZoomRate(t){this._wheelZoomRate=t}isEnabled(){return!!this._enabled}isActive(){return!!this._active||void 0!==this._finishTimeout}isZooming(){return!!this._zooming}enable(t){this.isEnabled()||(this._enabled=!0,this._aroundCenter=t&&"center"===t.around,this._map._cooperativeGestures&&this._addScrollZoomBlocker())}disable(){this.isEnabled()&&(this._enabled=!1,this._map._cooperativeGestures&&(clearTimeout(this._alertTimer),this._alertContainer.remove()))}wheel(e){if(!this.isEnabled())return;if(this._map._cooperativeGestures){if(!(e.ctrlKey||e.metaKey||this.isZooming()||this._isFullscreen()))return void this._showBlockerAlert();"hidden"!==this._alertContainer.style.visibility&&(this._alertContainer.style.visibility="hidden",clearTimeout(this._alertTimer))}let i=e.deltaMode===t.window.WheelEvent.DOM_DELTA_LINE?40*e.deltaY:e.deltaY;const r=t.exported.now(),n=r-(this._lastWheelEventTime||0);this._lastWheelEventTime=r,0!==i&&i%fn==0?this._type="wheel":0!==i&&Math.abs(i)<4?this._type="trackpad":n>400?(this._type=null,this._lastValue=i,this._timeout=setTimeout(this._onTimeout,40,e)):this._type||(this._type=Math.abs(n*i)<200?"trackpad":"wheel",this._timeout&&(clearTimeout(this._timeout),this._timeout=null,i+=this._lastValue)),e.shiftKey&&i&&(i/=4),this._type&&(this._lastWheelEvent=e,this._delta-=i,this._active||this._start(e)),e.preventDefault()}_onTimeout(t){this._type="wheel",this._delta-=this._lastValue,this._active||this._start(t)}_start(t){if(!this._delta)return;this._frameId&&(this._frameId=null),this._active=!0,this.isZooming()||(this._zooming=!0),this._finishTimeout&&(clearTimeout(this._finishTimeout),delete this._finishTimeout);const e=o.mousePos(this._el,t);this._aroundPoint=this._aroundCenter?this._map.transform.centerPoint:e,this._aroundCoord=this._map.transform.pointCoordinate3D(this._aroundPoint),this._targetZoom=void 0,this._frameId||(this._frameId=!0,this._handler._triggerRenderFrame())}renderFrame(){if(!this._frameId)return;if(this._frameId=null,!this.isActive())return;const e=this._map.transform,i=()=>e._terrainEnabled()?e.computeZoomRelativeTo(this._aroundCoord):e.zoom;if(0!==this._delta){const t="wheel"===this._type&&Math.abs(this._delta)>fn?this._wheelZoomRate:this._defaultZoomRate;let r=2/(1+Math.exp(-Math.abs(this._delta*t)));this._delta<0&&0!==r&&(r=1/r);const n=i(),o=Math.pow(2,n),s="number"==typeof this._targetZoom?e.zoomScale(this._targetZoom):o;this._targetZoom=Math.min(e.maxZoom,Math.max(e.minZoom,e.scaleZoom(s*r))),"wheel"===this._type&&(this._startZoom=i(),this._easing=this._smoothOutEasing(200)),this._delta=0}const r="number"==typeof this._targetZoom?this._targetZoom:i(),n=this._startZoom,o=this._easing;let s,a=!1;if("wheel"===this._type&&n&&o){const e=Math.min((t.exported.now()-this._lastWheelEventTime)/200,1),i=o(e);s=t.number(n,r,i),e<1?this._frameId||(this._frameId=!0):a=!0}else s=r,a=!0;return this._active=!0,a&&(this._active=!1,this._finishTimeout=setTimeout(()=>{this._zooming=!1,this._handler._triggerRenderFrame(),delete this._targetZoom,delete this._finishTimeout},200)),{noInertia:!0,needsRenderFrame:!a,zoomDelta:s-i(),around:this._aroundPoint,aroundCoord:this._aroundCoord,originalEvent:this._lastWheelEvent}}_smoothOutEasing(e){let i=t.ease;if(this._prevEase){const e=this._prevEase,r=(t.exported.now()-e.start)/e.duration,n=e.easing(r+.01)-e.easing(r),o=.27/Math.sqrt(n*n+1e-4)*.01,s=Math.sqrt(.0729-o*o);i=t.bezier(o,s,.25,1)}return this._prevEase={start:t.exported.now(),duration:e,easing:i},i}blur(){this.reset()}reset(){this._active=!1}_addScrollZoomBlocker(){this._map&&!this._alertContainer&&(this._alertContainer=o.create("div","mapboxgl-scroll-zoom-blocker",this._map._container),this._alertContainer.textContent=/(Mac|iPad)/i.test(t.window.navigator.userAgent)?this._map._getUIString("ScrollZoomBlocker.CmdMessage"):this._map._getUIString("ScrollZoomBlocker.CtrlMessage"),this._alertContainer.style.fontSize=Math.max(10,Math.min(24,Math.floor(.05*this._el.clientWidth)))+"px")}_isFullscreen(){return!!t.window.document.fullscreenElement}_showBlockerAlert(){"hidden"===this._alertContainer.style.visibility&&(this._alertContainer.style.visibility="visible"),this._alertContainer.classList.add("mapboxgl-scroll-zoom-blocker-show"),clearTimeout(this._alertTimer),this._alertTimer=setTimeout(()=>{this._alertContainer.classList.remove("mapboxgl-scroll-zoom-blocker-show")},200)}}class _n{constructor(t,e){this._clickZoom=t,this._tapZoom=e}enable(){this._clickZoom.enable(),this._tapZoom.enable()}disable(){this._clickZoom.disable(),this._tapZoom.disable()}isEnabled(){return this._clickZoom.isEnabled()&&this._tapZoom.isEnabled()}isActive(){return this._clickZoom.isActive()||this._tapZoom.isActive()}}class gn{constructor(){this.reset()}reset(){this._active=!1}blur(){this.reset()}dblclick(t,e){return t.preventDefault(),{cameraAnimation:i=>{i.easeTo({duration:300,zoom:i.getZoom()+(t.shiftKey?-1:1),around:i.unproject(e)},{originalEvent:t})}}}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}class yn{constructor(){this._tap=new Wr({numTouches:1,numTaps:1}),this.reset()}reset(){this._active=!1,delete this._swipePoint,delete this._swipeTouch,delete this._tapTime,this._tap.reset()}touchstart(t,e,i){this._swipePoint||(this._tapTime&&t.timeStamp-this._tapTime>500&&this.reset(),this._tapTime?i.length>0&&(this._swipePoint=e[0],this._swipeTouch=i[0].identifier):this._tap.touchstart(t,e,i))}touchmove(t,e,i){if(this._tapTime){if(this._swipePoint){if(i[0].identifier!==this._swipeTouch)return;const r=e[0],n=r.y-this._swipePoint.y;return this._swipePoint=r,t.preventDefault(),this._active=!0,{zoomDelta:n/128}}}else this._tap.touchmove(t,e,i)}touchend(t,e,i){this._tapTime?this._swipePoint&&0===i.length&&this.reset():this._tap.touchend(t,e,i)&&(this._tapTime=t.timeStamp)}touchcancel(){this.reset()}enable(){this._enabled=!0}disable(){this._enabled=!1,this.reset()}isEnabled(){return this._enabled}isActive(){return this._active}}class xn{constructor(t,e,i){this._el=t,this._mousePan=e,this._touchPan=i}enable(t){this._inertiaOptions=t||{},this._mousePan.enable(),this._touchPan.enable(),this._el.classList.add("mapboxgl-touch-drag-pan")}disable(){this._mousePan.disable(),this._touchPan.disable(),this._el.classList.remove("mapboxgl-touch-drag-pan")}isEnabled(){return this._mousePan.isEnabled()&&this._touchPan.isEnabled()}isActive(){return this._mousePan.isActive()||this._touchPan.isActive()}}class vn{constructor(t,e,i){this._pitchWithRotate=t.pitchWithRotate,this._mouseRotate=e,this._mousePitch=i}enable(){this._mouseRotate.enable(),this._pitchWithRotate&&this._mousePitch.enable()}disable(){this._mouseRotate.disable(),this._mousePitch.disable()}isEnabled(){return this._mouseRotate.isEnabled()&&(!this._pitchWithRotate||this._mousePitch.isEnabled())}isActive(){return this._mouseRotate.isActive()||this._mousePitch.isActive()}}class bn{constructor(t,e,i,r){this._el=t,this._touchZoom=e,this._touchRotate=i,this._tapDragZoom=r,this._rotationDisabled=!1,this._enabled=!0}enable(t){this._touchZoom.enable(t),this._rotationDisabled||this._touchRotate.enable(t),this._tapDragZoom.enable(),this._el.classList.add("mapboxgl-touch-zoom-rotate")}disable(){this._touchZoom.disable(),this._touchRotate.disable(),this._tapDragZoom.disable(),this._el.classList.remove("mapboxgl-touch-zoom-rotate")}isEnabled(){return this._touchZoom.isEnabled()&&(this._rotationDisabled||this._touchRotate.isEnabled())&&this._tapDragZoom.isEnabled()}isActive(){return this._touchZoom.isActive()||this._touchRotate.isActive()||this._tapDragZoom.isActive()}disableRotation(){this._rotationDisabled=!0,this._touchRotate.disable()}enableRotation(){this._rotationDisabled=!1,this._touchZoom.isEnabled()&&this._touchRotate.enable()}}const wn=t=>t.zoom||t.drag||t.pitch||t.rotate;class Tn extends t.Event{}class En{constructor(){this.constants=[1,1,.01],this.radius=0}setup(e,i){const r=t.sub([],i,e);this.radius=t.length(r[2]<0?t.div([],r,this.constants):[r[0],r[1],0])}projectRay(e){t.div(e,e,this.constants),t.normalize(e,e),t.mul$2(e,e,this.constants);const i=t.scale([],e,this.radius);if(i[2]>0){const e=t.scale([],[0,0,1],t.dot(i,[0,0,1])),r=t.scale([],t.normalize([],[i[0],i[1],0]),this.radius),n=t.add([],i,t.scale([],t.sub([],t.add([],r,e),i),2));i[0]=n[0],i[1]=n[1]}return i}}function Sn(t){return t.panDelta&&t.panDelta.mag()||t.zoomDelta||t.bearingDelta||t.pitchDelta}class An{constructor(e,i){this._map=e,this._el=this._map.getCanvasContainer(),this._handlers=[],this._handlersById={},this._changes=[],this._inertia=new Fr(e),this._bearingSnap=i.bearingSnap,this._previousActiveHandlers={},this._trackingEllipsoid=new En,this._dragOrigin=null,this._eventsInProgress={},this._addDefaultHandlers(i),t.bindAll(["handleEvent","handleWindowEvent"],this);const r=this._el;this._listeners=[[r,"touchstart",{passive:!0}],[r,"touchmove",{passive:!1}],[r,"touchend",void 0],[r,"touchcancel",void 0],[r,"mousedown",void 0],[r,"mousemove",void 0],[r,"mouseup",void 0],[t.window.document,"mousemove",{capture:!0}],[t.window.document,"mouseup",void 0],[r,"mouseover",void 0],[r,"mouseout",void 0],[r,"dblclick",void 0],[r,"click",void 0],[r,"keydown",{capture:!1}],[r,"keyup",void 0],[r,"wheel",{passive:!1}],[r,"contextmenu",void 0],[t.window,"blur",void 0]];for(const[n,s,a]of this._listeners)o.addEventListener(n,s,n===t.window.document?this.handleWindowEvent:this.handleEvent,a)}destroy(){for(const[e,i,r]of this._listeners)o.removeEventListener(e,i,e===t.window.document?this.handleWindowEvent:this.handleEvent,r)}_addDefaultHandlers(t){const e=this._map,i=e.getCanvasContainer();this._add("mapEvent",new Gr(e,t));const r=e.boxZoom=new qr(e,t);this._add("boxZoom",r);const n=new Hr,o=new gn;e.doubleClickZoom=new _n(o,n),this._add("tapZoom",n),this._add("clickZoom",o);const s=new yn;this._add("tapDragZoom",s);const a=e.touchPitch=new hn(e);this._add("touchPitch",a);const l=new Qr(t),c=new tn(t);e.dragRotate=new vn(t,l,c),this._add("mouseRotate",l,["mousePitch"]),this._add("mousePitch",c,["mouseRotate"]);const h=new Jr(t),u=new en(e,t);e.dragPan=new xn(i,h,u),this._add("mousePan",h),this._add("touchPan",u,["touchZoom","touchRotate"]);const d=new ln,p=new sn;e.touchZoomRotate=new bn(i,p,d,s),this._add("touchRotate",d,["touchPan","touchZoom"]),this._add("touchZoom",p,["touchPan","touchRotate"]),this._add("blockableMapEvent",new Zr(e));const f=e.scrollZoom=new mn(e,this);this._add("scrollZoom",f,["mousePan"]);const m=e.keyboard=new dn;this._add("keyboard",m);for(const _ of["boxZoom","doubleClickZoom","tapDragZoom","touchPitch","dragRotate","dragPan","touchZoomRotate","scrollZoom","keyboard"])t.interactive&&t[_]&&e[_].enable(t[_])}_add(t,e,i){this._handlers.push({handlerName:t,handler:e,allowed:i}),this._handlersById[t]=e}stop(t){if(!this._updatingCamera){for(const{handler:t}of this._handlers)t.reset();this._inertia.clear(),this._fireEvents({},{},t),this._changes=[]}}isActive(){for(const{handler:t}of this._handlers)if(t.isActive())return!0;return!1}isZooming(){return!!this._eventsInProgress.zoom||this._map.scrollZoom.isZooming()}isRotating(){return!!this._eventsInProgress.rotate}isMoving(){return Boolean(wn(this._eventsInProgress))||this.isZooming()}_blockedByActive(t,e,i){for(const r in t)if(r!==i&&(!e||e.indexOf(r)<0))return!0;return!1}handleWindowEvent(t){this.handleEvent(t,t.type+"Window")}_getMapTouches(t){const e=[];for(const i of t)this._el.contains(i.target)&&e.push(i);return e}handleEvent(t,e){this._updatingCamera=!0;const i="renderFrame"===t.type,r=i?void 0:t,n={needsRenderFrame:!1},s={},a={},l=t.touches?this._getMapTouches(t.touches):void 0,c=l?o.touchPos(this._el,l):i?void 0:o.mousePos(this._el,t);for(const{handlerName:o,handler:d,allowed:p}of this._handlers){if(!d.isEnabled())continue;let i;this._blockedByActive(a,p,o)?d.reset():d[e||t.type]&&(i=d[e||t.type](t,c,l),this.mergeHandlerResult(n,s,i,o,r),i&&i.needsRenderFrame&&this._triggerRenderFrame()),(i||d.isActive())&&(a[o]=d)}const h={};for(const o in this._previousActiveHandlers)a[o]||(h[o]=r);this._previousActiveHandlers=a,(Object.keys(h).length||Sn(n))&&(this._changes.push([n,s,h]),this._triggerRenderFrame()),(Object.keys(a).length||Sn(n))&&this._map._stop(!0),this._updatingCamera=!1;const{cameraAnimation:u}=n;u&&(this._inertia.clear(),this._fireEvents({},{},!0),this._changes=[],u(this._map))}mergeHandlerResult(e,i,r,n,o){if(!r)return;t.extend(e,r);const s={handlerName:n,originalEvent:r.originalEvent||o};void 0!==r.zoomDelta&&(i.zoom=s),void 0!==r.panDelta&&(i.drag=s),void 0!==r.pitchDelta&&(i.pitch=s),void 0!==r.bearingDelta&&(i.rotate=s)}_applyChanges(){const e={},i={},r={};for(const[n,o,s]of this._changes)n.panDelta&&(e.panDelta=(e.panDelta||new t.pointGeometry(0,0))._add(n.panDelta)),n.zoomDelta&&(e.zoomDelta=(e.zoomDelta||0)+n.zoomDelta),n.bearingDelta&&(e.bearingDelta=(e.bearingDelta||0)+n.bearingDelta),n.pitchDelta&&(e.pitchDelta=(e.pitchDelta||0)+n.pitchDelta),void 0!==n.around&&(e.around=n.around),void 0!==n.aroundCoord&&(e.aroundCoord=n.aroundCoord),void 0!==n.pinchAround&&(e.pinchAround=n.pinchAround),n.noInertia&&(e.noInertia=n.noInertia),t.extend(i,o),t.extend(r,s);this._updateMapTransform(e,i,r),this._changes=[]}_updateMapTransform(e,i,r){const n=this._map,o=n.transform,s=t=>[t.x,t.y,t.z];if((t=>{const e=this._eventsInProgress.drag;return e&&!this._handlersById[e.handlerName].isActive()})()&&!Sn(e)){const t=o.zoom;o.cameraElevationReference="sea",o.recenterOnTerrain(),o.cameraElevationReference="ground",t!==o.zoom&&this._map._update(!0)}if(!Sn(e))return this._fireEvents(i,r,!0);let{panDelta:a,zoomDelta:l,bearingDelta:c,pitchDelta:h,around:u,aroundCoord:d,pinchAround:p}=e;void 0!==p&&(u=p),(t=>i.drag&&!this._eventsInProgress.drag)()&&u&&(this._dragOrigin=s(o.pointCoordinate3D(u)),this._trackingEllipsoid.setup(o._camera.position,this._dragOrigin)),o.cameraElevationReference="sea",n._stop(!0),u=u||n.transform.centerPoint,c&&(o.bearing+=c),h&&(o.pitch+=h),o._updateCameraState();const f=[0,0,0];if(a){const t=o.screenPointToMercatorRay(u),e=o.screenPointToMercatorRay(u.sub(a)),i=this._trackingEllipsoid.projectRay(t.dir),r=this._trackingEllipsoid.projectRay(e.dir);f[0]=r[0]-i[0],f[1]=r[1]-i[1]}const m=o.zoom,_=[0,0,0];if(l){const e=s(d||o.pointCoordinate3D(u)),i={dir:t.normalize([],t.sub([],e,o._camera.position))},r=o.screenPointToMercatorRay(o.centerPoint);if(i.dir[2]<0){const n=t.altitudeFromMercatorZ(e[2],e[1]),a=o.rayIntersectionCoordinate(o.pointRayIntersection(o.centerPoint,n)),c=o.zoomDeltaToMovement(s(a),l)*(r.dir[2]/i.dir[2]);t.scale(_,i.dir,c)}else if(o._terrainEnabled()){const r=o.zoomDeltaToMovement(e,l);t.scale(_,i.dir,r)}}const g=t.add(f,f,_);o._translateCameraConstrained(g),l&&Math.abs(o.zoom-m)>1e-4&&o.recenterOnTerrain(),o.cameraElevationReference="ground",this._map._update(),e.noInertia||this._inertia.record(e),this._fireEvents(i,r,!0)}_fireEvents(e,i,r){const n=wn(this._eventsInProgress),o=wn(e),s={};for(const t in e){const{originalEvent:i}=e[t];this._eventsInProgress[t]||(s[t+"start"]=i),this._eventsInProgress[t]=e[t]}!n&&o&&this._fireEvent("movestart",o.originalEvent);for(const t in s)this._fireEvent(t,s[t]);o&&this._fireEvent("move",o.originalEvent);for(const t in e){const{originalEvent:i}=e[t];this._fireEvent(t,i)}const a={};let l;for(const t in this._eventsInProgress){const{handlerName:e,originalEvent:r}=this._eventsInProgress[t];this._handlersById[e].isActive()||(delete this._eventsInProgress[t],l=i[e]||r,a[t+"end"]=l)}for(const t in a)this._fireEvent(t,a[t]);const c=wn(this._eventsInProgress);if(r&&(n||o)&&!c){this._updatingCamera=!0;const e=this._inertia._onMoveEnd(this._map.dragPan._inertiaOptions),i=t=>0!==t&&-this._bearingSnap{delete this._frameId,this.handleEvent(new Tn("renderFrame",{timeStamp:t})),this._applyChanges()})}_triggerRenderFrame(){void 0===this._frameId&&(this._frameId=this._requestFrame())}}const In="map.setFreeCameraOptions(...) and map.getFreeCameraOptions() are not yet supported for non-mercator projections.";class Mn extends t.Evented{constructor(e,i){super(),this._moving=!1,this._zooming=!1,this.transform=e,this._bearingSnap=i.bearingSnap,t.bindAll(["_renderFrameCallback"],this)}getCenter(){return new t.LngLat(this.transform.center.lng,this.transform.center.lat)}setCenter(t,e){return this.jumpTo({center:t},e)}panBy(e,i,r){return e=t.pointGeometry.convert(e).mult(-1),this.panTo(this.transform.center,t.extend({offset:e},i),r)}panTo(e,i,r){return this.easeTo(t.extend({center:e},i),r)}getZoom(){return this.transform.zoom}setZoom(t,e){return this.jumpTo({zoom:t},e),this}zoomTo(e,i,r){return this.easeTo(t.extend({zoom:e},i),r)}zoomIn(t,e){return this.zoomTo(this.getZoom()+1,t,e),this}zoomOut(t,e){return this.zoomTo(this.getZoom()-1,t,e),this}getBearing(){return this.transform.bearing}setBearing(t,e){return this.jumpTo({bearing:t},e),this}getPadding(){return this.transform.padding}setPadding(t,e){return this.jumpTo({padding:t},e),this}rotateTo(e,i,r){return this.easeTo(t.extend({bearing:e},i),r)}resetNorth(e,i){return this.rotateTo(0,t.extend({duration:1e3},e),i),this}resetNorthPitch(e,i){return this.easeTo(t.extend({bearing:0,pitch:0,duration:1e3},e),i),this}snapToNorth(t,e){return Math.abs(this.getBearing()){if(this._zooming&&(r.zoom=t.number(n,l,e)),this._rotating&&(r.bearing=t.number(o,c,e)),this._pitching&&(r.pitch=t.number(s,h,e)),this._padding&&(r.interpolatePadding(a,u,e),p=r.centerPoint.add(d)),x)r.setLocationAtPoint(x,v);else{const t=r.zoomScale(r.zoom-n),i=l>n?Math.min(2,y):Math.max(.5,y),o=Math.pow(i,1-e),s=r.unproject(_.add(g.mult(e*o)).mult(t));r.setLocationAtPoint(r.renderWorldCopies?s.wrap():s,p)}this._fireMoveEvents(i)},t=>{r.recenterOnTerrain(),this._afterEase(i,t)},e),this}_prepareEase(e,i,r={}){this._moving=!0,this.transform.cameraElevationReference="sea",i||r.moving||this.fire(new t.Event("movestart",e)),this._zooming&&!r.zooming&&this.fire(new t.Event("zoomstart",e)),this._rotating&&!r.rotating&&this.fire(new t.Event("rotatestart",e)),this._pitching&&!r.pitching&&this.fire(new t.Event("pitchstart",e))}_fireMoveEvents(e){this.fire(new t.Event("move",e)),this._zooming&&this.fire(new t.Event("zoom",e)),this._rotating&&this.fire(new t.Event("rotate",e)),this._pitching&&this.fire(new t.Event("pitch",e))}_afterEase(e,i){if(this._easeId&&i&&this._easeId===i)return;delete this._easeId,this.transform.cameraElevationReference="ground";const r=this._zooming,n=this._rotating,o=this._pitching;this._moving=!1,this._zooming=!1,this._rotating=!1,this._pitching=!1,this._padding=!1,r&&this.fire(new t.Event("zoomend",e)),n&&this.fire(new t.Event("rotateend",e)),o&&this.fire(new t.Event("pitchend",e)),this.fire(new t.Event("moveend",e))}flyTo(e,i){if(!e.essential&&t.exported.prefersReducedMotion){const r=t.pick(e,["center","zoom","bearing","pitch","around"]);return this.jumpTo(r,i)}this.stop(),e=t.extend({offset:[0,0],speed:1.2,curve:1.42,easing:t.ease},e);const r=this.transform,n=this.getZoom(),o=this.getBearing(),s=this.getPitch(),a=this.getPadding(),l="zoom"in e?t.clamp(+e.zoom,r.minZoom,r.maxZoom):n,c="bearing"in e?this._normalizeBearing(e.bearing,o):o,h="pitch"in e?+e.pitch:s,u="padding"in e?e.padding:r.padding,d=r.zoomScale(l-n),p=t.pointGeometry.convert(e.offset);let f=r.centerPoint.add(p);const m=r.pointLocation(f),_=t.LngLat.convert(e.center||m);this._normalizeCenter(_);const g=r.project(m),y=r.project(_).sub(g);let x=e.curve;const v=Math.max(r.width,r.height),b=v/d,w=y.mag();if("minZoom"in e){const i=t.clamp(Math.min(e.minZoom,n,l),r.minZoom,r.maxZoom),o=v/r.zoomScale(i-n);x=Math.sqrt(o/w*2)}const T=x*x;function E(t){const e=(b*b-v*v+(t?-1:1)*T*T*w*w)/(2*(t?b:v)*T*w);return Math.log(Math.sqrt(e*e+1)-e)}function S(t){return(Math.exp(t)-Math.exp(-t))/2}function A(t){return(Math.exp(t)+Math.exp(-t))/2}const I=E(0);let M=function(t){return A(I)/A(I+x*t)},C=function(t){return v*((A(I)*(S(e=I+x*t)/A(e))-S(I))/T)/w;var e},z=(E(1)-I)/x;if(Math.abs(w)<1e-6||!isFinite(z)){if(Math.abs(v-b)<1e-6)return this.easeTo(e,i);const t=be.maxDuration&&(e.duration=0),this._zooming=!0,this._rotating=o!==c,this._pitching=h!==s,this._padding=!r.isPaddingEqual(u),this._prepareEase(i,!1),this._ease(e=>{const d=e*z,m=1/M(d);r.zoom=1===e?l:n+r.scaleZoom(m),this._rotating&&(r.bearing=t.number(o,c,e)),this._pitching&&(r.pitch=t.number(s,h,e)),this._padding&&(r.interpolatePadding(a,u,e),f=r.centerPoint.add(p));const x=1===e?_:r.unproject(g.add(y.mult(C(d))).mult(m));r.setLocationAtPoint(r.renderWorldCopies?x.wrap():x,f),r._updateCenterElevation(),this._fireMoveEvents(i)},()=>this._afterEase(i),e),this}isEasing(){return!!this._easeFrameId}stop(){return this._stop()}_stop(t,e){if(this._easeFrameId&&(this._cancelRenderFrame(this._easeFrameId),delete this._easeFrameId,delete this._onEaseFrame),this._onEaseEnd){const t=this._onEaseEnd;delete this._onEaseEnd,t.call(this,e)}if(!t){const t=this.handlers;t&&t.stop(!1)}return this}_ease(e,i,r){!1===r.animate||0===r.duration?(e(1),i()):(this._easeStart=t.exported.now(),this._easeOptions=r,this._onEaseFrame=e,this._onEaseEnd=i,this._easeFrameId=this._requestRenderFrame(this._renderFrameCallback))}_renderFrameCallback(){const e=Math.min((t.exported.now()-this._easeStart)/this._easeOptions.duration,1);this._onEaseFrame(this._easeOptions.easing(e)),e<1?this._easeFrameId=this._requestRenderFrame(this._renderFrameCallback):this.stop()}_normalizeBearing(e,i){e=t.wrap(e,-180,180);const r=Math.abs(e-i);return Math.abs(e-360-i)180?-360:i<-180?360:0}}class Cn{constructor(e={}){this.options=e,t.bindAll(["_toggleAttribution","_updateEditLink","_updateData","_updateCompact"],this)}getDefaultPosition(){return"bottom-right"}onAdd(t){const e=this.options&&this.options.compact;return this._map=t,this._container=o.create("div","mapboxgl-ctrl mapboxgl-ctrl-attrib"),this._compactButton=o.create("button","mapboxgl-ctrl-attrib-button",this._container),o.create("span","mapboxgl-ctrl-icon",this._compactButton).setAttribute("aria-hidden",!0),this._compactButton.type="button",this._compactButton.addEventListener("click",this._toggleAttribution),this._setElementTitle(this._compactButton,"ToggleAttribution"),this._innerContainer=o.create("div","mapboxgl-ctrl-attrib-inner",this._container),this._innerContainer.setAttribute("role","list"),e&&this._container.classList.add("mapboxgl-compact"),this._updateAttributions(),this._updateEditLink(),this._map.on("styledata",this._updateData),this._map.on("sourcedata",this._updateData),this._map.on("moveend",this._updateEditLink),void 0===e&&(this._map.on("resize",this._updateCompact),this._updateCompact()),this._container}onRemove(){o.remove(this._container),this._map.off("styledata",this._updateData),this._map.off("sourcedata",this._updateData),this._map.off("moveend",this._updateEditLink),this._map.off("resize",this._updateCompact),this._map=void 0,this._attribHTML=void 0}_setElementTitle(t,e){const i=this._map._getUIString("AttributionControl."+e);t.setAttribute("aria-label",i),t.firstElementChild&&t.firstElementChild.setAttribute("title",i)}_toggleAttribution(){this._container.classList.contains("mapboxgl-compact-show")?(this._container.classList.remove("mapboxgl-compact-show"),this._compactButton.setAttribute("aria-expanded","false")):(this._container.classList.add("mapboxgl-compact-show"),this._compactButton.setAttribute("aria-expanded","true"))}_updateEditLink(){let e=this._editLink;e||(e=this._editLink=this._container.querySelector(".mapbox-improve-map"));const i=[{key:"owner",value:this.styleOwner},{key:"id",value:this.styleId},{key:"access_token",value:this._map._requestManager._customAccessToken||t.config.ACCESS_TOKEN}];if(e){const r=i.reduce((t,e,r)=>(e.value&&(t+=`${e.key}=${e.value}${r"string"!=typeof t?"":t)):"string"==typeof this.options.customAttribution&&t.push(this.options.customAttribution)),this._map.style.stylesheet){const t=this._map.style.stylesheet;this.styleOwner=t.owner,this.styleId=t.id}const e=this._map.style._sourceCaches;for(const r in e){const i=e[r];if(i.used){const e=i.getSource();e.attribution&&t.indexOf(e.attribution)<0&&t.push(e.attribution)}}t.sort((t,e)=>t.length-e.length),t=t.filter((e,i)=>{for(let r=i+1;r=0)return!1;return!0});const i=t.join(" | ");i!==this._attribHTML&&(this._attribHTML=i,t.length?(this._innerContainer.innerHTML=i,this._container.classList.remove("mapboxgl-attrib-empty")):this._container.classList.add("mapboxgl-attrib-empty"),this._editLink=null)}_updateCompact(){this._map.getCanvasContainer().offsetWidth<=640?this._container.classList.add("mapboxgl-compact"):this._container.classList.remove("mapboxgl-compact","mapboxgl-compact-show")}}class zn{constructor(){t.bindAll(["_updateLogo"],this),t.bindAll(["_updateCompact"],this)}onAdd(t){this._map=t,this._container=o.create("div","mapboxgl-ctrl");const e=o.create("a","mapboxgl-ctrl-logo");return e.target="_blank",e.rel="noopener nofollow",e.href="https://www.mapbox.com/",e.setAttribute("aria-label",this._map._getUIString("LogoControl.Title")),e.setAttribute("rel","noopener nofollow"),this._container.appendChild(e),this._container.style.display="none",this._map.on("sourcedata",this._updateLogo),this._updateLogo(),this._map.on("resize",this._updateCompact),this._updateCompact(),this._container}onRemove(){o.remove(this._container),this._map.off("sourcedata",this._updateLogo),this._map.off("resize",this._updateCompact)}getDefaultPosition(){return"bottom-left"}_updateLogo(t){t&&"metadata"!==t.sourceDataType||(this._container.style.display=this._logoRequired()?"block":"none")}_logoRequired(){if(!this._map.style)return!0;const t=this._map.style._sourceCaches;if(0===Object.entries(t).length)return!0;for(const e in t){const i=t[e].getSource();if(i.hasOwnProperty("mapbox_logo")&&!i.mapbox_logo)return!1}return!0}_updateCompact(){const t=this._container.children;if(t.length){const e=t[0];this._map.getCanvasContainer().offsetWidth<250?e.classList.add("mapboxgl-compact"):e.classList.remove("mapboxgl-compact")}}}class kn{constructor(){this._queue=[],this._id=0,this._cleared=!1,this._currentlyRunning=!1}add(t){const e=++this._id;return this._queue.push({callback:t,id:e,cancelled:!1}),e}remove(t){const e=this._currentlyRunning,i=e?this._queue.concat(e):this._queue;for(const r of i)if(r.id===t)return void(r.cancelled=!0)}run(t=0){const e=this._currentlyRunning=this._queue;this._queue=[];for(const i of e)if(!i.cancelled&&(i.callback(t),this._cleared))break;this._cleared=!1,this._currentlyRunning=!1}clear(){this._currentlyRunning&&(this._cleared=!0),this._queue=[]}}function Pn(e,i,r){if(e=new t.LngLat(e.lng,e.lat),i){const n=new t.LngLat(e.lng-360,e.lat),o=new t.LngLat(e.lng+360,e.lat),s=360*Math.ceil(Math.abs(e.lng-r.center.lng)/360),a=r.locationPoint(e).distSqr(i),l=i.x<0||i.y<0||i.x>r.width||i.y>r.height;r.locationPoint(n).distSqr(i)180;){const t=r.locationPoint(e);if(t.x>=0&&t.y>=0&&t.x<=r.width&&t.y<=r.height)break;e.lng>r.center.lng?e.lng-=360:e.lng+=360}return e}const Dn={center:"translate(-50%,-50%)",top:"translate(-50%,0)","top-left":"translate(0,0)","top-right":"translate(-100%,0)",bottom:"translate(-50%,-100%)","bottom-left":"translate(0,-100%)","bottom-right":"translate(-100%,-100%)",left:"translate(0,-50%)",right:"translate(-100%,-50%)"};class Ln extends t.Evented{constructor(e,i){if(super(),(e instanceof t.window.HTMLElement||i)&&(e=t.extend({element:e},i)),t.bindAll(["_update","_onMove","_onUp","_addDragHandler","_onMapClick","_onKeyPress","_clearFadeTimer"],this),this._anchor=e&&e.anchor||"center",this._color=e&&e.color||"#3FB1CE",this._scale=e&&e.scale||1,this._draggable=e&&e.draggable||!1,this._clickTolerance=e&&e.clickTolerance||0,this._isDragging=!1,this._state="inactive",this._rotation=e&&e.rotation||0,this._rotationAlignment=e&&e.rotationAlignment||"auto",this._pitchAlignment=e&&e.pitchAlignment&&"auto"!==e.pitchAlignment?e.pitchAlignment:this._rotationAlignment,e&&e.element)this._element=e.element,this._offset=t.pointGeometry.convert(e&&e.offset||[0,0]);else{this._defaultMarker=!0,this._element=o.create("div"),this._element.setAttribute("aria-label","Map marker");const i=o.createNS("http://www.w3.org/2000/svg","svg"),r=41,n=27;i.setAttributeNS(null,"display","block"),i.setAttributeNS(null,"height",r+"px"),i.setAttributeNS(null,"width",n+"px"),i.setAttributeNS(null,"viewBox",`0 0 ${n} ${r}`);const s=o.createNS("http://www.w3.org/2000/svg","g");s.setAttributeNS(null,"stroke","none"),s.setAttributeNS(null,"stroke-width","1"),s.setAttributeNS(null,"fill","none"),s.setAttributeNS(null,"fill-rule","evenodd");const a=o.createNS("http://www.w3.org/2000/svg","g");a.setAttributeNS(null,"fill-rule","nonzero");const l=o.createNS("http://www.w3.org/2000/svg","g");l.setAttributeNS(null,"transform","translate(3.0, 29.0)"),l.setAttributeNS(null,"fill","#000000");const c=[{rx:"10.5",ry:"5.25002273"},{rx:"10.5",ry:"5.25002273"},{rx:"9.5",ry:"4.77275007"},{rx:"8.5",ry:"4.29549936"},{rx:"7.5",ry:"3.81822308"},{rx:"6.5",ry:"3.34094679"},{rx:"5.5",ry:"2.86367051"},{rx:"4.5",ry:"2.38636864"}];for(const t of c){const e=o.createNS("http://www.w3.org/2000/svg","ellipse");e.setAttributeNS(null,"opacity","0.04"),e.setAttributeNS(null,"cx","10.5"),e.setAttributeNS(null,"cy","5.80029008"),e.setAttributeNS(null,"rx",t.rx),e.setAttributeNS(null,"ry",t.ry),l.appendChild(e)}const h=o.createNS("http://www.w3.org/2000/svg","g");h.setAttributeNS(null,"fill",this._color);const u=o.createNS("http://www.w3.org/2000/svg","path");u.setAttributeNS(null,"d","M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"),h.appendChild(u);const d=o.createNS("http://www.w3.org/2000/svg","g");d.setAttributeNS(null,"opacity","0.25"),d.setAttributeNS(null,"fill","#000000");const p=o.createNS("http://www.w3.org/2000/svg","path");p.setAttributeNS(null,"d","M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"),d.appendChild(p);const f=o.createNS("http://www.w3.org/2000/svg","g");f.setAttributeNS(null,"transform","translate(6.0, 7.0)"),f.setAttributeNS(null,"fill","#FFFFFF");const m=o.createNS("http://www.w3.org/2000/svg","g");m.setAttributeNS(null,"transform","translate(8.0, 8.0)");const _=o.createNS("http://www.w3.org/2000/svg","circle");_.setAttributeNS(null,"fill","#000000"),_.setAttributeNS(null,"opacity","0.25"),_.setAttributeNS(null,"cx","5.5"),_.setAttributeNS(null,"cy","5.5"),_.setAttributeNS(null,"r","5.4999962");const g=o.createNS("http://www.w3.org/2000/svg","circle");g.setAttributeNS(null,"fill","#FFFFFF"),g.setAttributeNS(null,"cx","5.5"),g.setAttributeNS(null,"cy","5.5"),g.setAttributeNS(null,"r","5.4999962"),m.appendChild(_),m.appendChild(g),a.appendChild(l),a.appendChild(h),a.appendChild(d),a.appendChild(f),a.appendChild(m),i.appendChild(a),i.setAttributeNS(null,"height",r*this._scale+"px"),i.setAttributeNS(null,"width",n*this._scale+"px"),this._element.appendChild(i),this._offset=t.pointGeometry.convert(e&&e.offset||[0,-14])}this._element.classList.add("mapboxgl-marker"),this._element.addEventListener("dragstart",t=>{t.preventDefault()}),this._element.addEventListener("mousedown",t=>{t.preventDefault()});const r=this._element.classList;for(const t in Dn)r.remove("mapboxgl-marker-anchor-"+t);r.add("mapboxgl-marker-anchor-"+this._anchor),this._popup=null}addTo(t){return this.remove(),this._map=t,t.getCanvasContainer().appendChild(this._element),t.on("move",this._update),t.on("moveend",this._update),t.on("remove",this._clearFadeTimer),t._addMarker(this),this.setDraggable(this._draggable),this._update(),this._map.on("click",this._onMapClick),this}remove(){return this._map&&(this._map.off("click",this._onMapClick),this._map.off("move",this._update),this._map.off("moveend",this._update),this._map.off("mousedown",this._addDragHandler),this._map.off("touchstart",this._addDragHandler),this._map.off("mouseup",this._onUp),this._map.off("touchend",this._onUp),this._map.off("mousemove",this._onMove),this._map.off("touchmove",this._onMove),this._map.off("remove",this._clearFadeTimer),this._map._removeMarker(this),delete this._map),this._clearFadeTimer(),o.remove(this._element),this._popup&&this._popup.remove(),this}getLngLat(){return this._lngLat}setLngLat(e){return this._lngLat=t.LngLat.convert(e),this._pos=null,this._popup&&this._popup.setLngLat(this._lngLat),this._update(),this}getElement(){return this._element}setPopup(t){if(this._popup&&(this._popup.remove(),this._popup=null,this._element.removeAttribute("role"),this._element.removeEventListener("keypress",this._onKeyPress),this._originalTabIndex||this._element.removeAttribute("tabindex")),t){if(!("offset"in t.options)){const e=38.1,i=13.5,r=Math.sqrt(Math.pow(i,2)/2);t.options.offset=this._defaultMarker?{top:[0,0],"top-left":[0,0],"top-right":[0,0],bottom:[0,-e],"bottom-left":[r,-1*(e-i+r)],"bottom-right":[-r,-1*(e-i+r)],left:[i,-1*(e-i)],right:[-i,-1*(e-i)]}:this._offset}this._popup=t,this._lngLat&&this._popup.setLngLat(this._lngLat),this._element.setAttribute("role","button"),this._originalTabIndex=this._element.getAttribute("tabindex"),this._originalTabIndex||this._element.setAttribute("tabindex","0"),this._element.addEventListener("keypress",this._onKeyPress),this._element.setAttribute("aria-expanded","false")}return this}_onKeyPress(t){const e=t.code,i=t.charCode||t.keyCode;"Space"!==e&&"Enter"!==e&&32!==i&&13!==i||this.togglePopup()}_onMapClick(t){const e=t.originalEvent.target,i=this._element;this._popup&&(e===i||i.contains(e))&&this.togglePopup()}getPopup(){return this._popup}togglePopup(){const t=this._popup;return t?(t.isOpen()?(t.remove(),this._element.setAttribute("aria-expanded","false")):(t.addTo(this._map),this._element.setAttribute("aria-expanded","true")),this):this}_evaluateOpacity(){const t=this._pos?this._pos.sub(this._transformedOffset()):null;if(!this._withinScreenBounds(t))return void this._clearFadeTimer();const e=this._map.unproject(t);let i=!1;if(this._map.transform._terrainEnabled()&&this._map.getTerrain()){const t=this._map.getFreeCameraOptions();if(t.position){const r=t.position.toLngLat();i=r.distanceTo(e)<.9*r.distanceTo(this._lngLat)}}const r=(1-this._map._queryFogOpacity(e))*(i?.2:1);this._element.style.opacity=""+r,this._popup&&this._popup._setOpacity(""+r),this._fadeTimer=null}_clearFadeTimer(){this._fadeTimer&&(clearTimeout(this._fadeTimer),this._fadeTimer=null)}_withinScreenBounds(t){const e=this._map.transform;return!!t&&t.x>=0&&t.x=0&&t.y{this._map&&(this._element&&this._pos&&this._anchor&&o.setTransform(this._element,`${Dn[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${i} ${e}`),!this._map.getTerrain()&&!this._map.getFog()||this._fadeTimer||(this._fadeTimer=setTimeout(this._evaluateOpacity.bind(this),60)))})}_transformedOffset(){if(!this._defaultMarker)return this._offset;const t=this._map.transform,e=this._offset.mult(this._scale);return"map"===this._rotationAlignment&&e._rotate(t.angle),"map"===this._pitchAlignment&&(e.y*=Math.cos(t._pitch)),e}getOffset(){return this._offset}setOffset(e){return this._offset=t.pointGeometry.convert(e),this._update(),this}_onMove(e){if(!this._isDragging){const t=this._clickTolerance||this._map._clickTolerance;this._isDragging=e.point.dist(this._pointerdownPos)>=t}this._isDragging&&(this._pos=e.point.sub(this._positionDelta),this._lngLat=this._map.unproject(this._pos),this.setLngLat(this._lngLat),this._element.style.pointerEvents="none","pending"===this._state&&(this._state="active",this.fire(new t.Event("dragstart"))),this.fire(new t.Event("drag")))}_onUp(){this._element.style.pointerEvents="auto",this._positionDelta=null,this._pointerdownPos=null,this._isDragging=!1,this._map.off("mousemove",this._onMove),this._map.off("touchmove",this._onMove),"active"===this._state&&this.fire(new t.Event("dragend")),this._state="inactive"}_addDragHandler(t){this._element.contains(t.originalEvent.target)&&(t.preventDefault(),this._positionDelta=t.point.sub(this._pos).add(this._transformedOffset()),this._pointerdownPos=t.point,this._state="pending",this._map.on("mousemove",this._onMove),this._map.on("touchmove",this._onMove),this._map.once("mouseup",this._onUp),this._map.once("touchend",this._onUp))}setDraggable(t){return this._draggable=!!t,this._map&&(t?(this._map.on("mousedown",this._addDragHandler),this._map.on("touchstart",this._addDragHandler)):(this._map.off("mousedown",this._addDragHandler),this._map.off("touchstart",this._addDragHandler))),this}isDraggable(){return this._draggable}setRotation(t){return this._rotation=t||0,this._update(),this}getRotation(){return this._rotation}setRotationAlignment(t){return this._rotationAlignment=t||"auto",this._update(),this}getRotationAlignment(){return this._rotationAlignment}setPitchAlignment(t){return this._pitchAlignment=t&&"auto"!==t?t:this._rotationAlignment,this._update(),this}getPitchAlignment(){return this._pitchAlignment}}class Bn{constructor(t){this.jumpTo(t)}getValue(e){if(e<=this._startTime)return this._start;if(e>=this._endTime)return this._end;const i=t.easeCubicInOut((e-this._startTime)/(this._endTime-this._startTime));return this._start*(1-i)+this._end*i}isEasing(t){return t>=this._startTime&&t<=this._endTime}jumpTo(t){this._startTime=-1/0,this._endTime=-1/0,this._start=t,this._end=t}easeTo(t,e,i){this._start=this.getValue(e),this._end=t,this._startTime=e,this._endTime=e+i}}const Rn={"AttributionControl.ToggleAttribution":"Toggle attribution","AttributionControl.MapFeedback":"Map feedback","FullscreenControl.Enter":"Enter fullscreen","FullscreenControl.Exit":"Exit fullscreen","GeolocateControl.FindMyLocation":"Find my location","GeolocateControl.LocationNotAvailable":"Location not available","LogoControl.Title":"Mapbox logo","NavigationControl.ResetBearing":"Reset bearing to north","NavigationControl.ZoomIn":"Zoom in","NavigationControl.ZoomOut":"Zoom out","ScaleControl.Feet":"ft","ScaleControl.Meters":"m","ScaleControl.Kilometers":"km","ScaleControl.Miles":"mi","ScaleControl.NauticalMiles":"nm","ScrollZoomBlocker.CtrlMessage":"Use ctrl + scroll to zoom the map","ScrollZoomBlocker.CmdMessage":"Use ⌘ + scroll to zoom the map","TouchPanBlocker.Message":"Use two fingers to move the map"},{HTMLImageElement:Fn,HTMLElement:On,ImageBitmap:Un}=t.window,Vn={center:[0,0],zoom:0,bearing:0,pitch:0,minZoom:-2,maxZoom:22,minPitch:0,maxPitch:85,interactive:!0,scrollZoom:!0,boxZoom:!0,dragRotate:!0,dragPan:!0,keyboard:!0,doubleClickZoom:!0,touchZoomRotate:!0,touchPitch:!0,cooperativeGestures:!1,bearingSnap:7,clickTolerance:3,pitchWithRotate:!0,hash:!1,attributionControl:!0,failIfMajorPerformanceCaveat:!1,preserveDrawingBuffer:!1,trackResize:!0,optimizeForTerrain:!0,renderWorldCopies:!0,refreshExpiredTiles:!0,maxTileCacheSize:null,localIdeographFontFamily:"sans-serif",localFontFamily:null,transformRequest:null,accessToken:null,fadeDuration:300,crossSourceCollisions:!0};function Nn(t){t.parentNode&&t.parentNode.removeChild(t)}const jn={showCompass:!0,showZoom:!0,visualizePitch:!1};class Gn{constructor(e,i,r=!1){this._clickTolerance=10,this.element=i,this.mouseRotate=new Qr({clickTolerance:e.dragRotate._mouseRotate._clickTolerance}),this.map=e,r&&(this.mousePitch=new tn({clickTolerance:e.dragRotate._mousePitch._clickTolerance})),t.bindAll(["mousedown","mousemove","mouseup","touchstart","touchmove","touchend","reset"],this),o.addEventListener(i,"mousedown",this.mousedown),o.addEventListener(i,"touchstart",this.touchstart,{passive:!1}),o.addEventListener(i,"touchmove",this.touchmove),o.addEventListener(i,"touchend",this.touchend),o.addEventListener(i,"touchcancel",this.reset)}down(t,e){this.mouseRotate.mousedown(t,e),this.mousePitch&&this.mousePitch.mousedown(t,e),o.disableDrag()}move(t,e){const i=this.map,r=this.mouseRotate.mousemoveWindow(t,e);if(r&&r.bearingDelta&&i.setBearing(i.getBearing()+r.bearingDelta),this.mousePitch){const r=this.mousePitch.mousemoveWindow(t,e);r&&r.pitchDelta&&i.setPitch(i.getPitch()+r.pitchDelta)}}off(){const t=this.element;o.removeEventListener(t,"mousedown",this.mousedown),o.removeEventListener(t,"touchstart",this.touchstart,{passive:!1}),o.removeEventListener(t,"touchmove",this.touchmove),o.removeEventListener(t,"touchend",this.touchend),o.removeEventListener(t,"touchcancel",this.reset),this.offTemp()}offTemp(){o.enableDrag(),o.removeEventListener(t.window,"mousemove",this.mousemove),o.removeEventListener(t.window,"mouseup",this.mouseup)}mousedown(e){this.down(t.extend({},e,{ctrlKey:!0,preventDefault:()=>e.preventDefault()}),o.mousePos(this.element,e)),o.addEventListener(t.window,"mousemove",this.mousemove),o.addEventListener(t.window,"mouseup",this.mouseup)}mousemove(t){this.move(t,o.mousePos(this.element,t))}mouseup(t){this.mouseRotate.mouseupWindow(t),this.mousePitch&&this.mousePitch.mouseupWindow(t),this.offTemp()}touchstart(t){1!==t.targetTouches.length?this.reset():(this._startPos=this._lastPos=o.touchPos(this.element,t.targetTouches)[0],this.down({type:"mousedown",button:0,ctrlKey:!0,preventDefault:()=>t.preventDefault()},this._startPos))}touchmove(t){1!==t.targetTouches.length?this.reset():(this._lastPos=o.touchPos(this.element,t.targetTouches)[0],this.move({preventDefault:()=>t.preventDefault()},this._lastPos))}touchend(t){0===t.targetTouches.length&&this._startPos&&this._lastPos&&this._startPos.dist(this._lastPos)5280?Kn(e,r,i/5280,t._getUIString("ScaleControl.Miles"),t):Kn(e,r,i,t._getUIString("ScaleControl.Feet"),t)}else i&&"nautical"===i.unit?Kn(e,r,a/1852,t._getUIString("ScaleControl.NauticalMiles"),t):a>=1e3?Kn(e,r,a/1e3,t._getUIString("ScaleControl.Kilometers"),t):Kn(e,r,a,t._getUIString("ScaleControl.Meters"),t)}function Kn(t,e,i,r,n){const o=function(t){const e=Math.pow(10,(""+Math.floor(t)).length-1);let i=t/e;return i=i>=10?10:i>=5?5:i>=3?3:i>=2?2:i>=1?1:function(t){const e=Math.pow(10,Math.ceil(-Math.log(t)/Math.LN10));return Math.round(t*e)/e}(i),e*i}(i),s=o/i;n._requestDomTask(()=>{t.style.width=e*s+"px",t.innerHTML=`${o} ${r}`})}const Yn={closeButton:!0,closeOnClick:!0,focusAfterOpen:!0,className:"",maxWidth:"240px"},Jn=["a[href]","[tabindex]:not([tabindex='-1'])","[contenteditable]:not([contenteditable='false'])","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].join(", "),Qn={version:t.version,supported:e,setRTLTextPlugin:t.setRTLTextPlugin,getRTLTextPluginStatus:t.getRTLTextPluginStatus,Map:class extends Mn{constructor(e){if(null!=(e=t.extend({},Vn,e)).minZoom&&null!=e.maxZoom&&e.minZoom>e.maxZoom)throw new Error("maxZoom must be greater than or equal to minZoom");if(null!=e.minPitch&&null!=e.maxPitch&&e.minPitch>e.maxPitch)throw new Error("maxPitch must be greater than or equal to minPitch");if(null!=e.minPitch&&e.minPitch<0)throw new Error("minPitch must be greater than or equal to 0");if(null!=e.maxPitch&&e.maxPitch>85)throw new Error("maxPitch must be less than or equal to 85");if(super(new Cr(e.minZoom,e.maxZoom,e.minPitch,e.maxPitch,e.renderWorldCopies),e),this._interactive=e.interactive,this._maxTileCacheSize=e.maxTileCacheSize,this._failIfMajorPerformanceCaveat=e.failIfMajorPerformanceCaveat,this._preserveDrawingBuffer=e.preserveDrawingBuffer,this._antialias=e.antialias,this._trackResize=e.trackResize,this._bearingSnap=e.bearingSnap,this._refreshExpiredTiles=e.refreshExpiredTiles,this._fadeDuration=e.fadeDuration,this._isInitialLoad=!0,this._crossSourceCollisions=e.crossSourceCollisions,this._crossFadingFactor=1,this._collectResourceTiming=e.collectResourceTiming,this._optimizeForTerrain=e.optimizeForTerrain,this._renderTaskQueue=new kn,this._domRenderTaskQueue=new kn,this._controls=[],this._markers=[],this._mapId=t.uniqueId(),this._locale=t.extend({},Rn,e.locale),this._clickTolerance=e.clickTolerance,this._cooperativeGestures=e.cooperativeGestures,this._averageElevationLastSampledAt=-1/0,this._averageElevation=new Bn(0),this._requestManager=new t.RequestManager(e.transformRequest,e.accessToken,e.testMode),this._silenceAuthErrors=!!e.testMode,"string"==typeof e.container){if(this._container=t.window.document.getElementById(e.container),!this._container)throw new Error(`Container '${e.container}' not found.`)}else{if(!(e.container instanceof On))throw new Error("Invalid type: 'container' must be a String or HTMLElement.");this._container=e.container}if(e.maxBounds&&this.setMaxBounds(e.maxBounds),t.bindAll(["_onWindowOnline","_onWindowResize","_onMapScroll","_contextLost","_contextRestored"],this),this._setupContainer(),this._setupPainter(),void 0===this.painter)throw new Error("Failed to initialize WebGL.");this.on("move",()=>this._update(!1)),this.on("moveend",()=>this._update(!1)),this.on("zoom",()=>this._update(!0)),void 0!==t.window&&(t.window.addEventListener("online",this._onWindowOnline,!1),t.window.addEventListener("resize",this._onWindowResize,!1),t.window.addEventListener("orientationchange",this._onWindowResize,!1),t.window.addEventListener("webkitfullscreenchange",this._onWindowResize,!1)),this.handlers=new An(this,e),this._localFontFamily=e.localFontFamily,this._localIdeographFontFamily=e.localIdeographFontFamily,e.style&&this.setStyle(e.style,{localFontFamily:this._localFontFamily,localIdeographFontFamily:this._localIdeographFontFamily}),e.projection&&this.setProjection(e.projection),this._hash=e.hash&&new kr("string"==typeof e.hash&&e.hash||void 0).addTo(this),this._hash&&this._hash._onHashChange()||(this.jumpTo({center:e.center,zoom:e.zoom,bearing:e.bearing,pitch:e.pitch}),e.bounds&&(this.resize(),this.fitBounds(e.bounds,t.extend({},e.fitBoundsOptions,{duration:0})))),this.resize(),e.attributionControl&&this.addControl(new Cn({customAttribution:e.customAttribution})),this._logoControl=new zn,this.addControl(this._logoControl,e.logoPosition),this.on("style.load",()=>{this.transform.unmodified&&this.jumpTo(this.style.stylesheet)}),this.on("data",e=>{this._update("style"===e.dataType),this.fire(new t.Event(e.dataType+"data",e))}),this.on("dataloading",e=>{this.fire(new t.Event(e.dataType+"dataloading",e))})}_getMapId(){return this._mapId}addControl(e,i){if(void 0===i&&(i=e.getDefaultPosition?e.getDefaultPosition():"top-right"),!e||!e.onAdd)return this.fire(new t.ErrorEvent(new Error("Invalid argument to map.addControl(). Argument must be a control with onAdd and onRemove methods.")));const r=e.onAdd(this);this._controls.push(e);const n=this._controlPositions[i];return-1!==i.indexOf("bottom")?n.insertBefore(r,n.firstChild):n.appendChild(r),this}removeControl(e){if(!e||!e.onRemove)return this.fire(new t.ErrorEvent(new Error("Invalid argument to map.removeControl(). Argument must be a control with onAdd and onRemove methods.")));const i=this._controls.indexOf(e);return i>-1&&this._controls.splice(i,1),e.onRemove(this),this}hasControl(t){return this._controls.indexOf(t)>-1}getContainer(){return this._container}getCanvasContainer(){return this._canvasContainer}getCanvas(){return this._canvas}resize(e){const[i,r]=this._containerDimensions();if(i===this.transform.width&&r===this.transform.height)return this;this._resizeCanvas(i,r),this.transform.resize(i,r),this.painter.resize(Math.ceil(i),Math.ceil(r));const n=!this._moving;return n&&this.fire(new t.Event("movestart",e)).fire(new t.Event("move",e)),this.fire(new t.Event("resize",e)),n&&this.fire(new t.Event("moveend",e)),this}getBounds(){return this.transform.getBounds()}getMaxBounds(){return this.transform.getMaxBounds()||null}setMaxBounds(e){return this.transform.setMaxBounds(t.LngLatBounds.convert(e)),this._update()}setMinZoom(e){if((e=null==e?-2:e)>=-2&&e<=this.transform.maxZoom)return this.transform.minZoom=e,this._update(),this.getZoom()=this.transform.minZoom)return this.transform.maxZoom=e,this._update(),this.getZoom()>e?this.setZoom(e):this.fire(new t.Event("zoomstart")).fire(new t.Event("zoom")).fire(new t.Event("zoomend")),this;throw new Error("maxZoom must be greater than the current minZoom")}getMaxZoom(){return this.transform.maxZoom}setMinPitch(e){if((e=null==e?0:e)<0)throw new Error("minPitch must be greater than or equal to 0");if(e>=0&&e<=this.transform.maxPitch)return this.transform.minPitch=e,this._update(),this.getPitch()85)throw new Error("maxPitch must be less than or equal to 85");if(e>=this.transform.minPitch)return this.transform.maxPitch=e,this._update(),this.getPitch()>e?this.setPitch(e):this.fire(new t.Event("pitchstart")).fire(new t.Event("pitch")).fire(new t.Event("pitchend")),this;throw new Error("maxPitch must be greater than the current minPitch")}getMaxPitch(){return this.transform.maxPitch}getRenderWorldCopies(){return this.transform.renderWorldCopies}setRenderWorldCopies(t){return this.transform.renderWorldCopies=t,this._update()}getProjection(){return this.transform.getProjection()}setProjection(t){this._lazyInitEmptyStyle(),"string"==typeof t&&(t={name:t}),this._runtimeProjection=t,this.style.updateProjection()}project(e){return this.transform.locationPoint3D(t.LngLat.convert(e))}unproject(e){return this.transform.pointLocation3D(t.pointGeometry.convert(e))}isMoving(){return this._moving||this.handlers&&this.handlers.isMoving()}isZooming(){return this._zooming||this.handlers&&this.handlers.isZooming()}isRotating(){return this._rotating||this.handlers&&this.handlers.isRotating()}_createDelegatedListener(t,e,i){if("mouseenter"===t||"mouseover"===t){let r=!1;const n=n=>{const o=e.filter(t=>this.getLayer(t)),s=o.length?this.queryRenderedFeatures(n.point,{layers:o}):[];s.length?r||(r=!0,i.call(this,new Vr(t,this,n.originalEvent,{features:s}))):r=!1},o=()=>{r=!1};return{layers:new Set(e),listener:i,delegates:{mousemove:n,mouseout:o}}}if("mouseleave"===t||"mouseout"===t){let r=!1;const n=n=>{const o=e.filter(t=>this.getLayer(t));(o.length?this.queryRenderedFeatures(n.point,{layers:o}):[]).length?r=!0:r&&(r=!1,i.call(this,new Vr(t,this,n.originalEvent)))},o=e=>{r&&(r=!1,i.call(this,new Vr(t,this,e.originalEvent)))};return{layers:new Set(e),listener:i,delegates:{mousemove:n,mouseout:o}}}{const r=t=>{const r=e.filter(t=>this.getLayer(t)),n=r.length?this.queryRenderedFeatures(t.point,{layers:r}):[];n.length&&(t.features=n,i.call(this,t),delete t.features)};return{layers:new Set(e),listener:i,delegates:{[t]:r}}}}on(t,e,i){if(void 0===i)return super.on(t,e);Array.isArray(e)||(e=[e]);const r=this._createDelegatedListener(t,e,i);this._delegatedListeners=this._delegatedListeners||{},this._delegatedListeners[t]=this._delegatedListeners[t]||[],this._delegatedListeners[t].push(r);for(const n in r.delegates)this.on(n,r.delegates[n]);return this}once(t,e,i){if(void 0===i)return super.once(t,e);Array.isArray(e)||(e=[e]);const r=this._createDelegatedListener(t,e,i);for(const n in r.delegates)this.once(n,r.delegates[n]);return this}off(t,e,i){if(void 0===i)return super.off(t,e);e=new Set(Array.isArray(e)?e:[e]);const r=(t,e)=>{if(t.size!==e.size)return!1;for(const i of t)if(!e.has(i))return!1;return!0},n=this._delegatedListeners?this._delegatedListeners[t]:void 0;return n&&(t=>{for(let n=0;n{e?this.fire(new t.ErrorEvent(e)):r&&this._updateDiff(r,i)})}else"object"==typeof e&&this._updateDiff(e,i)}_updateDiff(e,i){try{this.style.setState(e)&&this._update(!0)}catch(r){t.warnOnce(`Unable to perform style diff: ${r.message||r.error||r}. Rebuilding the style from scratch.`),this._updateStyle(e,i)}}getStyle(){if(this.style)return this.style.serialize()}isStyleLoaded(){return this.style?this.style.loaded():t.warnOnce("There is no style added to the map.")}addSource(t,e){return this._lazyInitEmptyStyle(),this.style.addSource(t,e),this._update(!0)}isSourceLoaded(e){const i=this.style&&this.style._getSourceCaches(e);if(0!==i.length)return i.every(t=>t.loaded());this.fire(new t.ErrorEvent(new Error(`There is no source with ID '${e}'`)))}areTilesLoaded(){const t=this.style&&this.style._sourceCaches;for(const e in t){const i=t[e]._tiles;for(const t in i){const e=i[t];if("loaded"!==e.state&&"errored"!==e.state)return!1}}return!0}addSourceType(t,e,i){return this._lazyInitEmptyStyle(),this.style.addSourceType(t,e,i)}removeSource(t){return this.style.removeSource(t),this._updateTerrain(),this._update(!0)}getSource(t){return this.style.getSource(t)}addImage(e,i,{pixelRatio:r=1,sdf:n=!1,stretchX:o,stretchY:s,content:a}={}){if(this._lazyInitEmptyStyle(),i instanceof Fn||Un&&i instanceof Un){const{width:l,height:c,data:h}=t.exported.getImageData(i);this.style.addImage(e,{data:new t.RGBAImage({width:l,height:c},h),pixelRatio:r,stretchX:o,stretchY:s,content:a,sdf:n,version:0})}else{if(void 0===i.width||void 0===i.height)return this.fire(new t.ErrorEvent(new Error("Invalid arguments to map.addImage(). The second argument must be an `HTMLImageElement`, `ImageData`, `ImageBitmap`, or object with `width`, `height`, and `data` properties with the same format as `ImageData`")));{const{width:l,height:c,data:h}=i,u=i;this.style.addImage(e,{data:new t.RGBAImage({width:l,height:c},new Uint8Array(h)),pixelRatio:r,stretchX:o,stretchY:s,content:a,sdf:n,version:0,userImage:u}),u.onAdd&&u.onAdd(this,e)}}}updateImage(e,i){const r=this.style.getImage(e);if(!r)return this.fire(new t.ErrorEvent(new Error("The map has no image with that id. If you are adding a new image use `map.addImage(...)` instead.")));const n=i instanceof Fn||Un&&i instanceof Un?t.exported.getImageData(i):i,{width:o,height:s,data:a}=n;return void 0===o||void 0===s?this.fire(new t.ErrorEvent(new Error("Invalid arguments to map.updateImage(). The second argument must be an `HTMLImageElement`, `ImageData`, `ImageBitmap`, or object with `width`, `height`, and `data` properties with the same format as `ImageData`"))):o!==r.data.width||s!==r.data.height?this.fire(new t.ErrorEvent(new Error("The width and height of the updated image must be that same as the previous version of the image"))):(r.data.replace(a,!(i instanceof Fn||Un&&i instanceof Un)),void this.style.updateImage(e,r))}hasImage(e){return e?!!this.style.getImage(e):(this.fire(new t.ErrorEvent(new Error("Missing required image id"))),!1)}removeImage(t){this.style.removeImage(t)}loadImage(e,i){t.getImage(this._requestManager.transformRequest(e,t.ResourceType.Image),(e,r)=>{i(e,r instanceof Fn?t.exported.getImageData(r):r)})}listImages(){return this.style.listImages()}addLayer(t,e){return this._lazyInitEmptyStyle(),this.style.addLayer(t,e),this._update(!0)}moveLayer(t,e){return this.style.moveLayer(t,e),this._update(!0)}removeLayer(t){return this.style.removeLayer(t),this._update(!0)}getLayer(t){return this.style.getLayer(t)}setLayerZoomRange(t,e,i){return this.style.setLayerZoomRange(t,e,i),this._update(!0)}setFilter(t,e,i={}){return this.style.setFilter(t,e,i),this._update(!0)}getFilter(t){return this.style.getFilter(t)}setPaintProperty(t,e,i,r={}){return this.style.setPaintProperty(t,e,i,r),this._update(!0)}getPaintProperty(t,e){return this.style.getPaintProperty(t,e)}setLayoutProperty(t,e,i,r={}){return this.style.setLayoutProperty(t,e,i,r),this._update(!0)}getLayoutProperty(t,e){return this.style.getLayoutProperty(t,e)}setLight(t,e={}){return this._lazyInitEmptyStyle(),this.style.setLight(t,e),this._update(!0)}getLight(){return this.style.getLight()}setTerrain(t){return this._lazyInitEmptyStyle(),this.style.setTerrain(t),this._averageElevationLastSampledAt=-1/0,this._update(!0)}getTerrain(){return this.style?this.style.getTerrain():null}setFog(t){return this._lazyInitEmptyStyle(),this.style.setFog(t),this._update(!0)}getFog(){return this.style?this.style.getFog():null}_queryFogOpacity(e){return this.style&&this.style.fog?this.style.fog.getOpacityAtLatLng(t.LngLat.convert(e),this.transform):0}setFeatureState(t,e){return this.style.setFeatureState(t,e),this._update()}removeFeatureState(t,e){return this.style.removeFeatureState(t,e),this._update()}getFeatureState(t){return this.style.getFeatureState(t)}_containerDimensions(){let t=0,e=0;return this._container&&(t=this._container.getBoundingClientRect().width||400,e=this._container.getBoundingClientRect().height||300),[t,e]}_detectMissingCSS(){"rgb(250, 128, 114)"!==t.window.getComputedStyle(this._missingCSSCanary).getPropertyValue("background-color")&&t.warnOnce("This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.")}_setupContainer(){const t=this._container;t.classList.add("mapboxgl-map"),(this._missingCSSCanary=o.create("div","mapboxgl-canary",t)).style.visibility="hidden",this._detectMissingCSS();const e=this._canvasContainer=o.create("div","mapboxgl-canvas-container",t);this._interactive&&e.classList.add("mapboxgl-interactive"),this._canvas=o.create("canvas","mapboxgl-canvas",e),this._canvas.addEventListener("webglcontextlost",this._contextLost,!1),this._canvas.addEventListener("webglcontextrestored",this._contextRestored,!1),this._canvas.setAttribute("tabindex","0"),this._canvas.setAttribute("aria-label","Map"),this._canvas.setAttribute("role","region");const i=this._containerDimensions();this._resizeCanvas(i[0],i[1]);const r=this._controlContainer=o.create("div","mapboxgl-control-container",t),n=this._controlPositions={};["top-left","top-right","bottom-left","bottom-right"].forEach(t=>{n[t]=o.create("div","mapboxgl-ctrl-"+t,r)}),this._container.addEventListener("scroll",this._onMapScroll,!1)}_resizeCanvas(e,i){const r=t.exported.devicePixelRatio||1;this._canvas.width=r*Math.ceil(e),this._canvas.height=r*Math.ceil(i),this._canvas.style.width=e+"px",this._canvas.style.height=i+"px"}_addMarker(t){this._markers.push(t)}_removeMarker(t){const e=this._markers.indexOf(t);-1!==e&&this._markers.splice(e,1)}_setupPainter(){const i=t.extend({},e.webGLContextAttributes,{failIfMajorPerformanceCaveat:this._failIfMajorPerformanceCaveat,preserveDrawingBuffer:this._preserveDrawingBuffer,antialias:this._antialias||!1}),r=this._canvas.getContext("webgl",i)||this._canvas.getContext("experimental-webgl",i);r?(t.storeAuthState(r,!0),this.painter=new pr(r,this.transform),this.on("data",t=>{"source"===t.dataType&&this.painter.setTileLoadedFlag(!0)}),t.exported$1.testSupport(r)):this.fire(new t.ErrorEvent(new Error("Failed to initialize WebGL")))}_contextLost(e){e.preventDefault(),this._frame&&(this._frame.cancel(),this._frame=null),this.fire(new t.Event("webglcontextlost",{originalEvent:e}))}_contextRestored(e){this._setupPainter(),this.resize(),this._update(),this.fire(new t.Event("webglcontextrestored",{originalEvent:e}))}_onMapScroll(t){if(t.target===this._container)return this._container.scrollTop=0,this._container.scrollLeft=0,!1}loaded(){return!this._styleDirty&&!this._sourcesDirty&&!!this.style&&this.style.loaded()}_update(t){return this.style?(this._styleDirty=this._styleDirty||t,this._sourcesDirty=!0,this.triggerRepaint(),this):this}_requestRenderFrame(t){return this._update(),this._renderTaskQueue.add(t)}_cancelRenderFrame(t){this._renderTaskQueue.remove(t)}_requestDomTask(t){!this.loaded()||this.loaded()&&!this.isMoving()?t():this._domRenderTaskQueue.add(t)}_render(e){let i;const r=this.painter.context.extTimerQuery,n=t.exported.now();this.listens("gpu-timing-frame")&&(i=r.createQueryEXT(),r.beginQueryEXT(r.TIME_ELAPSED_EXT,i));let o=this._updateAverageElevation(n);if(this.painter.context.setDirty(),this.painter.setBaseState(),this._renderTaskQueue.run(e),this._domRenderTaskQueue.run(e),this._removed)return;let s=!1;const a=this._isInitialLoad?0:this._fadeDuration;if(this.style&&this._styleDirty){this._styleDirty=!1;const e=this.transform.zoom,i=this.transform.pitch,r=t.exported.now();this.style.zoomHistory.update(e,r);const n=new t.EvaluationParameters(e,{now:r,fadeDuration:a,pitch:i,zoomHistory:this.style.zoomHistory,transition:this.style.getTransition()}),o=n.crossFadingFactor();1===o&&o===this._crossFadingFactor||(s=!0,this._crossFadingFactor=o),this.style.update(n)}if(this.style&&this.style.fog&&this.style.fog.hasTransition()&&(this.style._markersNeedUpdate=!0,this._sourcesDirty=!0),this.style&&this._sourcesDirty&&(this._sourcesDirty=!1,this.painter._updateFog(this.style),this._updateTerrain(),this.style._updateSources(this.transform),this._forceMarkerUpdate()),this._placementDirty=this.style&&this.style._updatePlacement(this.painter.transform,this.showCollisionBoxes,a,this._crossSourceCollisions),this.style&&this.painter.render(this.style,{showTileBoundaries:this.showTileBoundaries,showTerrainWireframe:this.showTerrainWireframe,showOverdrawInspector:this._showOverdrawInspector,showQueryGeometry:!!this._showQueryGeometry,rotating:this.isRotating(),zooming:this.isZooming(),moving:this.isMoving(),fadeDuration:a,isInitialLoad:this._isInitialLoad,showPadding:this.showPadding,gpuTiming:!!this.listens("gpu-timing-layer"),speedIndexTiming:this.speedIndexTiming}),this.fire(new t.Event("render")),this.loaded()&&!this._loaded&&(this._loaded=!0,this.fire(new t.Event("load"))),this.style&&(this.style.hasTransitions()||s)&&(this._styleDirty=!0),this.style&&!this._placementDirty&&this.style._releaseSymbolFadeTiles(),this.listens("gpu-timing-frame")){const e=t.exported.now()-n;r.endQueryEXT(r.TIME_ELAPSED_EXT,i),setTimeout(()=>{const n=r.getQueryObjectEXT(i,r.QUERY_RESULT_EXT)/1e6;r.deleteQueryEXT(i),this.fire(new t.Event("gpu-timing-frame",{cpuTime:e,gpuTime:n}))},50)}if(this.listens("gpu-timing-layer")){const e=this.painter.collectGpuTimers();setTimeout(()=>{const i=this.painter.queryGpuTimers(e);this.fire(new t.Event("gpu-timing-layer",{layerTimes:i}))},50)}const l=this._sourcesDirty||this._styleDirty||this._placementDirty||o;if(l||this._repaint)this.triggerRepaint();else{const e=!this.isMoving()&&this.loaded();if(e&&(o=this._updateAverageElevation(n,!0)),o)this.triggerRepaint();else if(this._triggerFrame(!1),e&&(this.fire(new t.Event("idle")),this._isInitialLoad=!1,this.speedIndexTiming)){const e=this._calculateSpeedIndex();this.fire(new t.Event("speedindexcompleted",{speedIndex:e})),this.speedIndexTiming=!1}}return!this._loaded||this._fullyLoaded||l||(this._fullyLoaded=!0,this._authenticate()),this}_forceMarkerUpdate(){for(const t of this._markers)t._update()}_updateAverageElevation(t,e=!1){const i=t=>(this.transform.averageElevation=t,this._update(!1),!0);if(!this.painter.averageElevationNeedsEasing())return 0!==this.transform.averageElevation&&i(0);if((e||t-this._averageElevationLastSampledAt>500)&&!this._averageElevation.isEasing(t)){const e=this.transform.averageElevation;let r=this.transform.sampleAverageElevation();isNaN(r)?r=0:this._averageElevationLastSampledAt=t;const n=Math.abs(e-r);if(n>1){if(this._isInitialLoad)return this._averageElevation.jumpTo(r),i(r);this._averageElevation.easeTo(r,t,300)}else if(n>1e-4)return this._averageElevation.jumpTo(r),i(r)}return!!this._averageElevation.isEasing(t)&&i(this._averageElevation.getValue(t))}_authenticate(){t.getMapSessionAPI(this._getMapId(),this._requestManager._skuToken,this._requestManager._customAccessToken,e=>{if(e&&(e.message===t.AUTH_ERR_MSG||401===e.status)){const e=this.painter.context.gl;t.storeAuthState(e,!1),this._logoControl instanceof zn&&this._logoControl._updateLogo(),e&&e.clear(e.DEPTH_BUFFER_BIT|e.COLOR_BUFFER_BIT|e.STENCIL_BUFFER_BIT),this._silenceAuthErrors||this.fire(new t.ErrorEvent(new Error("A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/")))}}),t.postMapLoadEvent(this._getMapId(),this._requestManager._skuToken,this._requestManager._customAccessToken,()=>{})}_updateTerrain(){this.painter.updateTerrain(this.style,this.isMoving()||this.isRotating()||this.isZooming())}_calculateSpeedIndex(){const t=this.painter.canvasCopy(),e=this.painter.getCanvasCopiesAndTimestamps();e.timeStamps.push(performance.now());const i=this.painter.context.gl,r=i.createFramebuffer();function n(t){i.framebufferTexture2D(i.FRAMEBUFFER,i.COLOR_ATTACHMENT0,i.TEXTURE_2D,t,0);const e=new Uint8Array(i.drawingBufferWidth*i.drawingBufferHeight*4);return i.readPixels(0,0,i.drawingBufferWidth,i.drawingBufferHeight,i.RGBA,i.UNSIGNED_BYTE,e),e}return i.bindFramebuffer(i.FRAMEBUFFER,r),this._canvasPixelComparison(n(t),e.canvasCopies.map(n),e.timeStamps)}_canvasPixelComparison(t,e,i){let r=i[1]-i[0];const n=t.length/4;for(let o=0;o{const e=!!this._renderNextFrame;this._frame=null,this._renderNextFrame=null,e&&this._render(t)}))}_onWindowOnline(){this._update()}_onWindowResize(t){this._trackResize&&this.resize({originalEvent:t})._update()}get showTileBoundaries(){return!!this._showTileBoundaries}set showTileBoundaries(t){this._showTileBoundaries!==t&&(this._showTileBoundaries=t,this._update())}get showTerrainWireframe(){return!!this._showTerrainWireframe}set showTerrainWireframe(t){this._showTerrainWireframe!==t&&(this._showTerrainWireframe=t,this._update())}get speedIndexTiming(){return!!this._speedIndexTiming}set speedIndexTiming(t){this._speedIndexTiming!==t&&(this._speedIndexTiming=t,this._update())}get showPadding(){return!!this._showPadding}set showPadding(t){this._showPadding!==t&&(this._showPadding=t,this._update())}get showCollisionBoxes(){return!!this._showCollisionBoxes}set showCollisionBoxes(t){this._showCollisionBoxes!==t&&(this._showCollisionBoxes=t,t?this.style._generateCollisionBoxes():this._update())}get showOverdrawInspector(){return!!this._showOverdrawInspector}set showOverdrawInspector(t){this._showOverdrawInspector!==t&&(this._showOverdrawInspector=t,this._update())}get repaint(){return!!this._repaint}set repaint(t){this._repaint!==t&&(this._repaint=t,this.triggerRepaint())}get vertices(){return!!this._vertices}set vertices(t){this._vertices=t,this._update()}_setCacheLimits(e,i){t.setCacheLimits(e,i)}get version(){return t.version}},NavigationControl:class{constructor(e){this.options=t.extend({},jn,e),this._container=o.create("div","mapboxgl-ctrl mapboxgl-ctrl-group"),this._container.addEventListener("contextmenu",t=>t.preventDefault()),this.options.showZoom&&(t.bindAll(["_setButtonTitle","_updateZoomButtons"],this),this._zoomInButton=this._createButton("mapboxgl-ctrl-zoom-in",t=>this._map.zoomIn({},{originalEvent:t})),o.create("span","mapboxgl-ctrl-icon",this._zoomInButton).setAttribute("aria-hidden",!0),this._zoomOutButton=this._createButton("mapboxgl-ctrl-zoom-out",t=>this._map.zoomOut({},{originalEvent:t})),o.create("span","mapboxgl-ctrl-icon",this._zoomOutButton).setAttribute("aria-hidden",!0)),this.options.showCompass&&(t.bindAll(["_rotateCompassArrow"],this),this._compass=this._createButton("mapboxgl-ctrl-compass",t=>{this.options.visualizePitch?this._map.resetNorthPitch({},{originalEvent:t}):this._map.resetNorth({},{originalEvent:t})}),this._compassIcon=o.create("span","mapboxgl-ctrl-icon",this._compass),this._compassIcon.setAttribute("aria-hidden",!0))}_updateZoomButtons(){const t=this._map.getZoom(),e=t===this._map.getMaxZoom(),i=t===this._map.getMinZoom();this._zoomInButton.disabled=e,this._zoomOutButton.disabled=i,this._zoomInButton.setAttribute("aria-disabled",e.toString()),this._zoomOutButton.setAttribute("aria-disabled",i.toString())}_rotateCompassArrow(){const t=this.options.visualizePitch?`scale(${1/Math.pow(Math.cos(this._map.transform.pitch*(Math.PI/180)),.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle*(180/Math.PI)}deg)`:`rotate(${this._map.transform.angle*(180/Math.PI)}deg)`;this._map._requestDomTask(()=>{this._compassIcon&&(this._compassIcon.style.transform=t)})}onAdd(t){return this._map=t,this.options.showZoom&&(this._setButtonTitle(this._zoomInButton,"ZoomIn"),this._setButtonTitle(this._zoomOutButton,"ZoomOut"),this._map.on("zoom",this._updateZoomButtons),this._updateZoomButtons()),this.options.showCompass&&(this._setButtonTitle(this._compass,"ResetBearing"),this.options.visualizePitch&&this._map.on("pitch",this._rotateCompassArrow),this._map.on("rotate",this._rotateCompassArrow),this._rotateCompassArrow(),this._handler=new Gn(this._map,this._compass,this.options.visualizePitch)),this._container}onRemove(){o.remove(this._container),this.options.showZoom&&this._map.off("zoom",this._updateZoomButtons),this.options.showCompass&&(this.options.visualizePitch&&this._map.off("pitch",this._rotateCompassArrow),this._map.off("rotate",this._rotateCompassArrow),this._handler.off(),delete this._handler),delete this._map}_createButton(t,e){const i=o.create("button",t,this._container);return i.type="button",i.addEventListener("click",e),i}_setButtonTitle(t,e){const i=this._map._getUIString("NavigationControl."+e);t.setAttribute("aria-label",i),t.firstElementChild&&t.firstElementChild.setAttribute("title",i)}},GeolocateControl:class extends t.Evented{constructor(e){super(),this.options=t.extend({},Zn,e),t.bindAll(["_onSuccess","_onError","_onZoom","_finish","_setupUI","_updateCamera","_updateMarker","_updateMarkerRotation"],this),this._onDeviceOrientationListener=this._onDeviceOrientation.bind(this),this._updateMarkerRotationThrottled=zr(this._updateMarkerRotation,20)}onAdd(e){var i;return this._map=e,this._container=o.create("div","mapboxgl-ctrl mapboxgl-ctrl-group"),i=this._setupUI,void 0!==qn?i(qn):void 0!==t.window.navigator.permissions?t.window.navigator.permissions.query({name:"geolocation"}).then(t=>{qn="denied"!==t.state,i(qn)}):(qn=!!t.window.navigator.geolocation,i(qn)),this._container}onRemove(){void 0!==this._geolocationWatchID&&(t.window.navigator.geolocation.clearWatch(this._geolocationWatchID),this._geolocationWatchID=void 0),this.options.showUserLocation&&this._userLocationDotMarker&&this._userLocationDotMarker.remove(),this.options.showAccuracyCircle&&this._accuracyCircleMarker&&this._accuracyCircleMarker.remove(),o.remove(this._container),this._map.off("zoom",this._onZoom),this._map=void 0,$n=0,Xn=!1}_isOutOfMapMaxBounds(t){const e=this._map.getMaxBounds(),i=t.coords;return e&&(i.longitudee.getEast()||i.latitudee.getNorth())}_setErrorState(){switch(this._watchState){case"WAITING_ACTIVE":this._watchState="ACTIVE_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error");break;case"ACTIVE_LOCK":this._watchState="ACTIVE_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting");break;case"BACKGROUND":this._watchState="BACKGROUND_ERROR",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting")}}_onSuccess(e){if(this._map){if(this._isOutOfMapMaxBounds(e))return this._setErrorState(),this.fire(new t.Event("outofmaxbounds",e)),this._updateMarker(),void this._finish();if(this.options.trackUserLocation)switch(this._lastKnownPosition=e,this._watchState){case"WAITING_ACTIVE":case"ACTIVE_LOCK":case"ACTIVE_ERROR":this._watchState="ACTIVE_LOCK",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"BACKGROUND":case"BACKGROUND_ERROR":this._watchState="BACKGROUND",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background")}this.options.showUserLocation&&"OFF"!==this._watchState&&this._updateMarker(e),this.options.trackUserLocation&&"ACTIVE_LOCK"!==this._watchState||this._updateCamera(e),this.options.showUserLocation&&this._dotElement.classList.remove("mapboxgl-user-location-dot-stale"),this.fire(new t.Event("geolocate",e)),this._finish()}}_updateCamera(e){const i=new t.LngLat(e.coords.longitude,e.coords.latitude),r=e.coords.accuracy,n=this._map.getBearing(),o=t.extend({bearing:n},this.options.fitBoundsOptions);this._map.fitBounds(i.toBounds(r),o,{geolocateSource:!0})}_updateMarker(e){if(e){const i=new t.LngLat(e.coords.longitude,e.coords.latitude);this._accuracyCircleMarker.setLngLat(i).addTo(this._map),this._userLocationDotMarker.setLngLat(i).addTo(this._map),this._accuracy=e.coords.accuracy,this.options.showUserLocation&&this.options.showAccuracyCircle&&this._updateCircleRadius()}else this._userLocationDotMarker.remove(),this._accuracyCircleMarker.remove()}_updateCircleRadius(){const t=this._map._container.getBoundingClientRect().height/2,e=this._map.unproject([0,t]),i=this._map.unproject([100,t]),r=e.distanceTo(i)/100,n=Math.ceil(2*this._accuracy/r);this._circleElement.style.width=n+"px",this._circleElement.style.height=n+"px"}_onZoom(){this.options.showUserLocation&&this.options.showAccuracyCircle&&this._updateCircleRadius()}_updateMarkerRotation(){this._userLocationDotMarker&&"number"==typeof this._heading?(this._userLocationDotMarker.setRotation(this._heading),this._dotElement.classList.add("mapboxgl-user-location-show-heading")):(this._dotElement.classList.remove("mapboxgl-user-location-show-heading"),this._userLocationDotMarker.setRotation(0))}_onError(e){if(this._map){if(this.options.trackUserLocation)if(1===e.code){this._watchState="OFF",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this._geolocateButton.disabled=!0;const t=this._map._getUIString("GeolocateControl.LocationNotAvailable");this._geolocateButton.setAttribute("aria-label",t),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",t),void 0!==this._geolocationWatchID&&this._clearWatch()}else{if(3===e.code&&Xn)return;this._setErrorState()}"OFF"!==this._watchState&&this.options.showUserLocation&&this._dotElement.classList.add("mapboxgl-user-location-dot-stale"),this.fire(new t.Event("error",e)),this._finish()}}_finish(){this._timeoutId&&clearTimeout(this._timeoutId),this._timeoutId=void 0}_setupUI(e){if(this._container.addEventListener("contextmenu",t=>t.preventDefault()),this._geolocateButton=o.create("button","mapboxgl-ctrl-geolocate",this._container),o.create("span","mapboxgl-ctrl-icon",this._geolocateButton).setAttribute("aria-hidden",!0),this._geolocateButton.type="button",!1===e){t.warnOnce("Geolocation support is not available so the GeolocateControl will be disabled.");const e=this._map._getUIString("GeolocateControl.LocationNotAvailable");this._geolocateButton.disabled=!0,this._geolocateButton.setAttribute("aria-label",e),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",e)}else{const t=this._map._getUIString("GeolocateControl.FindMyLocation");this._geolocateButton.setAttribute("aria-label",t),this._geolocateButton.firstElementChild&&this._geolocateButton.firstElementChild.setAttribute("title",t)}this.options.trackUserLocation&&(this._geolocateButton.setAttribute("aria-pressed","false"),this._watchState="OFF"),this.options.showUserLocation&&(this._dotElement=o.create("div","mapboxgl-user-location"),this._dotElement.appendChild(o.create("div","mapboxgl-user-location-dot")),this._dotElement.appendChild(o.create("div","mapboxgl-user-location-heading")),this._userLocationDotMarker=new Ln({element:this._dotElement,rotationAlignment:"map",pitchAlignment:"map"}),this._circleElement=o.create("div","mapboxgl-user-location-accuracy-circle"),this._accuracyCircleMarker=new Ln({element:this._circleElement,pitchAlignment:"map"}),this.options.trackUserLocation&&(this._watchState="OFF"),this._map.on("zoom",this._onZoom)),this._geolocateButton.addEventListener("click",this.trigger.bind(this)),this._setup=!0,this.options.trackUserLocation&&this._map.on("movestart",e=>{e.geolocateSource||"ACTIVE_LOCK"!==this._watchState||e.originalEvent&&"resize"===e.originalEvent.type||(this._watchState="BACKGROUND",this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this.fire(new t.Event("trackuserlocationend")))})}_onDeviceOrientation(t){this._userLocationDotMarker&&(t.webkitCompassHeading?this._heading=t.webkitCompassHeading:!0===t.absolute&&(this._heading=-1*t.alpha),this._updateMarkerRotationThrottled())}trigger(){if(!this._setup)return t.warnOnce("Geolocate control triggered before added to a map"),!1;if(this.options.trackUserLocation){switch(this._watchState){case"OFF":this._watchState="WAITING_ACTIVE",this.fire(new t.Event("trackuserlocationstart"));break;case"WAITING_ACTIVE":case"ACTIVE_LOCK":case"ACTIVE_ERROR":case"BACKGROUND_ERROR":$n--,Xn=!1,this._watchState="OFF",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-active-error"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background-error"),this.fire(new t.Event("trackuserlocationend"));break;case"BACKGROUND":this._watchState="ACTIVE_LOCK",this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-background"),this._lastKnownPosition&&this._updateCamera(this._lastKnownPosition),this.fire(new t.Event("trackuserlocationstart"))}switch(this._watchState){case"WAITING_ACTIVE":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"ACTIVE_LOCK":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active");break;case"ACTIVE_ERROR":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-active-error");break;case"BACKGROUND":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background");break;case"BACKGROUND_ERROR":this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-background-error")}if("OFF"===this._watchState&&void 0!==this._geolocationWatchID)this._clearWatch();else if(void 0===this._geolocationWatchID){let e;this._geolocateButton.classList.add("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.setAttribute("aria-pressed","true"),$n++,$n>1?(e={maximumAge:6e5,timeout:0},Xn=!0):(e=this.options.positionOptions,Xn=!1),this._geolocationWatchID=t.window.navigator.geolocation.watchPosition(this._onSuccess,this._onError,e),this.options.showUserHeading&&this._addDeviceOrientationListener()}}else t.window.navigator.geolocation.getCurrentPosition(this._onSuccess,this._onError,this.options.positionOptions),this._timeoutId=setTimeout(this._finish,1e4);return!0}_addDeviceOrientationListener(){const e=()=>{t.window.addEventListener("ondeviceorientationabsolute"in t.window?"deviceorientationabsolute":"deviceorientation",this._onDeviceOrientationListener)};void 0!==t.window.DeviceMotionEvent&&"function"==typeof t.window.DeviceMotionEvent.requestPermission?DeviceOrientationEvent.requestPermission().then(t=>{"granted"===t&&e()}).catch(console.error):e()}_clearWatch(){t.window.navigator.geolocation.clearWatch(this._geolocationWatchID),t.window.removeEventListener("deviceorientation",this._onDeviceOrientationListener),t.window.removeEventListener("deviceorientationabsolute",this._onDeviceOrientationListener),this._geolocationWatchID=void 0,this._geolocateButton.classList.remove("mapboxgl-ctrl-geolocate-waiting"),this._geolocateButton.setAttribute("aria-pressed","false"),this.options.showUserLocation&&this._updateMarker(null)}},AttributionControl:Cn,ScaleControl:class{constructor(e){this.options=t.extend({},Wn,e),t.bindAll(["_onMove","setUnit"],this)}getDefaultPosition(){return"bottom-left"}_onMove(){Hn(this._map,this._container,this.options)}onAdd(t){return this._map=t,this._container=o.create("div","mapboxgl-ctrl mapboxgl-ctrl-scale",t.getContainer()),this._map.on("move",this._onMove),this._onMove(),this._container}onRemove(){o.remove(this._container),this._map.off("move",this._onMove),this._map=void 0}setUnit(t){this.options.unit=t,Hn(this._map,this._container,this.options)}},FullscreenControl:class{constructor(e){this._fullscreen=!1,e&&e.container&&(e.container instanceof t.window.HTMLElement?this._container=e.container:t.warnOnce("Full screen control 'container' must be a DOM element.")),t.bindAll(["_onClickFullscreen","_changeIcon"],this),"onfullscreenchange"in t.window.document?this._fullscreenchange="fullscreenchange":"onwebkitfullscreenchange"in t.window.document&&(this._fullscreenchange="webkitfullscreenchange")}onAdd(e){return this._map=e,this._container||(this._container=this._map.getContainer()),this._controlContainer=o.create("div","mapboxgl-ctrl mapboxgl-ctrl-group"),this._checkFullscreenSupport()?this._setupUI():(this._controlContainer.style.display="none",t.warnOnce("This device does not support fullscreen mode.")),this._controlContainer}onRemove(){o.remove(this._controlContainer),this._map=null,t.window.document.removeEventListener(this._fullscreenchange,this._changeIcon)}_checkFullscreenSupport(){return!(!t.window.document.fullscreenEnabled&&!t.window.document.webkitFullscreenEnabled)}_setupUI(){const e=this._fullscreenButton=o.create("button","mapboxgl-ctrl-fullscreen",this._controlContainer);o.create("span","mapboxgl-ctrl-icon",e).setAttribute("aria-hidden",!0),e.type="button",this._updateTitle(),this._fullscreenButton.addEventListener("click",this._onClickFullscreen),t.window.document.addEventListener(this._fullscreenchange,this._changeIcon)}_updateTitle(){const t=this._getTitle();this._fullscreenButton.setAttribute("aria-label",t),this._fullscreenButton.firstElementChild&&this._fullscreenButton.firstElementChild.setAttribute("title",t)}_getTitle(){return this._map._getUIString(this._isFullscreen()?"FullscreenControl.Exit":"FullscreenControl.Enter")}_isFullscreen(){return this._fullscreen}_changeIcon(){(t.window.document.fullscreenElement||t.window.document.webkitFullscreenElement)===this._container!==this._fullscreen&&(this._fullscreen=!this._fullscreen,this._fullscreenButton.classList.toggle("mapboxgl-ctrl-shrink"),this._fullscreenButton.classList.toggle("mapboxgl-ctrl-fullscreen"),this._updateTitle())}_onClickFullscreen(){this._isFullscreen()?t.window.document.exitFullscreen?t.window.document.exitFullscreen():t.window.document.webkitCancelFullScreen&&t.window.document.webkitCancelFullScreen():this._container.requestFullscreen?this._container.requestFullscreen():this._container.webkitRequestFullscreen&&this._container.webkitRequestFullscreen()}},Popup:class extends t.Evented{constructor(e){super(),this.options=t.extend(Object.create(Yn),e),t.bindAll(["_update","_onClose","remove","_onMouseMove","_onMouseUp","_onDrag"],this),this._classList=new Set(e&&e.className?e.className.trim().split(/\s+/):[])}addTo(e){return this._map&&this.remove(),this._map=e,this.options.closeOnClick&&this._map.on("preclick",this._onClose),this.options.closeOnMove&&this._map.on("move",this._onClose),this._map.on("remove",this.remove),this._update(),this._focusFirstElement(),this._trackPointer?(this._map.on("mousemove",this._onMouseMove),this._map.on("mouseup",this._onMouseUp),this._map._canvasContainer.classList.add("mapboxgl-track-pointer")):this._map.on("move",this._update),this.fire(new t.Event("open")),this}isOpen(){return!!this._map}remove(){return this._content&&o.remove(this._content),this._container&&(o.remove(this._container),delete this._container),this._map&&(this._map.off("move",this._update),this._map.off("move",this._onClose),this._map.off("click",this._onClose),this._map.off("remove",this.remove),this._map.off("mousemove",this._onMouseMove),this._map.off("mouseup",this._onMouseUp),this._map.off("drag",this._onDrag),delete this._map),this.fire(new t.Event("close")),this}getLngLat(){return this._lngLat}setLngLat(e){return this._lngLat=t.LngLat.convert(e),this._pos=null,this._trackPointer=!1,this._update(),this._map&&(this._map.on("move",this._update),this._map.off("mousemove",this._onMouseMove),this._map._canvasContainer.classList.remove("mapboxgl-track-pointer")),this}trackPointer(){return this._trackPointer=!0,this._pos=null,this._update(),this._map&&(this._map.off("move",this._update),this._map.on("mousemove",this._onMouseMove),this._map.on("drag",this._onDrag),this._map._canvasContainer.classList.add("mapboxgl-track-pointer")),this}getElement(){return this._container}setText(e){return this.setDOMContent(t.window.document.createTextNode(e))}setHTML(e){const i=t.window.document.createDocumentFragment(),r=t.window.document.createElement("body");let n;for(r.innerHTML=e;n=r.firstChild,n;)i.appendChild(n);return this.setDOMContent(i)}getMaxWidth(){return this._container&&this._container.style.maxWidth}setMaxWidth(t){return this.options.maxWidth=t,this._update(),this}setDOMContent(t){if(this._content)for(;this._content.hasChildNodes();)this._content.firstChild&&this._content.removeChild(this._content.firstChild);else this._content=o.create("div","mapboxgl-popup-content",this._container);return this._content.appendChild(t),this._createCloseButton(),this._update(),this._focusFirstElement(),this}addClassName(t){return this._classList.add(t),this._container&&this._updateClassList(),this}removeClassName(t){return this._classList.delete(t),this._container&&this._updateClassList(),this}setOffset(t){return this.options.offset=t,this._update(),this}toggleClassName(t){let e;return this._classList.delete(t)?e=!1:(this._classList.add(t),e=!0),this._container&&this._updateClassList(),e}_createCloseButton(){this.options.closeButton&&(this._closeButton=o.create("button","mapboxgl-popup-close-button",this._content),this._closeButton.type="button",this._closeButton.setAttribute("aria-label","Close popup"),this._closeButton.setAttribute("aria-hidden","true"),this._closeButton.innerHTML="×",this._closeButton.addEventListener("click",this._onClose))}_onMouseUp(t){this._update(t.point)}_onMouseMove(t){this._update(t.point)}_onDrag(t){this._update(t.point)}_getAnchor(t){if(this.options.anchor)return this.options.anchor;const e=this._pos,i=this._container.offsetWidth,r=this._container.offsetHeight;let n;return n=e.y+t.bottom.ythis._map.transform.height-r?["bottom"]:[],e.xthis._map.transform.width-i/2&&n.push("right"),0===n.length?"bottom":n.join("-")}_updateClassList(){const t=[...this._classList];t.push("mapboxgl-popup"),this._anchor&&t.push("mapboxgl-popup-anchor-"+this._anchor),this._trackPointer&&t.push("mapboxgl-popup-track-pointer"),this._container.className=t.join(" ")}_update(e){if(this._map&&(this._lngLat||this._trackPointer)&&this._content){if(this._container||(this._container=o.create("div","mapboxgl-popup",this._map.getContainer()),this._tip=o.create("div","mapboxgl-popup-tip",this._container),this._container.appendChild(this._content)),this.options.maxWidth&&this._container.style.maxWidth!==this.options.maxWidth&&(this._container.style.maxWidth=this.options.maxWidth),this._map.transform.renderWorldCopies&&!this._trackPointer&&(this._lngLat=Pn(this._lngLat,this._pos,this._map.transform)),!this._trackPointer||e){const i=this._pos=this._trackPointer&&e?e:this._map.project(this._lngLat),r=function(e){if(e||(e=new t.pointGeometry(0,0)),"number"==typeof e){const i=Math.round(Math.sqrt(.5*Math.pow(e,2)));return{center:new t.pointGeometry(0,0),top:new t.pointGeometry(0,e),"top-left":new t.pointGeometry(i,i),"top-right":new t.pointGeometry(-i,i),bottom:new t.pointGeometry(0,-e),"bottom-left":new t.pointGeometry(i,-i),"bottom-right":new t.pointGeometry(-i,-i),left:new t.pointGeometry(e,0),right:new t.pointGeometry(-e,0)}}if(e instanceof t.pointGeometry||Array.isArray(e)){const i=t.pointGeometry.convert(e);return{center:i,top:i,"top-left":i,"top-right":i,bottom:i,"bottom-left":i,"bottom-right":i,left:i,right:i}}return{center:t.pointGeometry.convert(e.center||[0,0]),top:t.pointGeometry.convert(e.top||[0,0]),"top-left":t.pointGeometry.convert(e["top-left"]||[0,0]),"top-right":t.pointGeometry.convert(e["top-right"]||[0,0]),bottom:t.pointGeometry.convert(e.bottom||[0,0]),"bottom-left":t.pointGeometry.convert(e["bottom-left"]||[0,0]),"bottom-right":t.pointGeometry.convert(e["bottom-right"]||[0,0]),left:t.pointGeometry.convert(e.left||[0,0]),right:t.pointGeometry.convert(e.right||[0,0])}}(this.options.offset),n=this._anchor=this._getAnchor(r),s=i.add(r[n]).round();this._map._requestDomTask(()=>{this._container&&n&&o.setTransform(this._container,`${Dn[n]} translate(${s.x}px,${s.y}px)`)})}this._updateClassList()}}_focusFirstElement(){if(!this.options.focusAfterOpen||!this._container)return;const t=this._container.querySelector(Jn);t&&t.focus()}_onClose(){this.remove()}_setOpacity(t){this._content&&(this._content.style.opacity=t),this._tip&&(this._tip.style.opacity=t)}},Marker:Ln,Style:Ge,LngLat:t.LngLat,LngLatBounds:t.LngLatBounds,Point:t.pointGeometry,MercatorCoordinate:t.MercatorCoordinate,FreeCameraOptions:br,Evented:t.Evented,config:t.config,prewarm:function(){Bt().acquire(Pt)},clearPrewarmedResources:function(){const t=Lt;t&&(t.isPreloaded()&&1===t.numActive()?(t.release(Pt),Lt=null):console.warn("Could not clear WebWorkers since there are active Map instances that still reference it. The pre-warmed WebWorker pool can only be cleared when all map instances have been removed with map.remove()"))},get accessToken(){return t.config.ACCESS_TOKEN},set accessToken(e){t.config.ACCESS_TOKEN=e},get baseApiUrl(){return t.config.API_URL},set baseApiUrl(e){t.config.API_URL=e},get workerCount(){return Dt.workerCount},set workerCount(t){Dt.workerCount=t},get maxParallelImageRequests(){return t.config.MAX_PARALLEL_IMAGE_REQUESTS},set maxParallelImageRequests(e){t.config.MAX_PARALLEL_IMAGE_REQUESTS=e},clearStorage(e){t.clearTileCache(e)},workerUrl:"",workerClass:null,setNow:t.exported.setNow,restoreNow:t.exported.restoreNow};return Qn})),i}()}}]); \ No newline at end of file diff --git a/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js b/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js deleted file mode 100644 index 58b37f2b..00000000 --- a/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{"+M/S":function(e,t,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(e){var t=Object(a.a)((function(t){return new t.mapLib.ScaleControl(e)}),{position:e.position});return t.options.unit===e.unit&&t.options.maxWidth===e.maxWidth||(t.options.maxWidth=e.maxWidth,t.setUnit(e.unit)),Object(n.useEffect)((function(){Object(o.a)(t._container,e.style)}),[e.style]),null}i.defaultProps={unit:"metric",maxWidth:100},t.a=n.memo(i)},"+t2D":function(e,t,r){"use strict";function n(e,t){var r=Array.isArray(e)?e[0]:e?e.x:0,n=Array.isArray(e)?e[1]:e?e.y:0,o=Array.isArray(t)?t[0]:t?t.x:0,a=Array.isArray(t)?t[1]:t?t.y:0;return r===o&&n===a}function o(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(var r=0;r prop: "+n);else e.setCoordinates(t.coordinates)}}(f,e,r.current):f=l(t,c,e),r.current=e,f&&o.Children.map(e.children,(function(e){return e&&Object(o.cloneElement)(e,{source:c})}))||null}},OSzm:function(e,t,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(e){var t=Object(a.a)((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return Object(n.useEffect)((function(){Object(o.a)(t._container,e.style)}),[e.style]),null}t.a=n.memo(i)},SA6Z:function(e,t,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0;)r.appendChild(a.childNodes[0]);return o._container=r,t.initialViewState&&n._updateViewState(t.initialViewState,!1),o.resize(),n.setProps(h(h({},t),{},{styleDiffing:!1})),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),n},t._initialize=function(e){var t=this,r=this.props,n=h(h(h({},r),r.initialViewState),{},{accessToken:r.mapboxAccessToken||E()||null,container:e,style:m(r.mapStyle)}),o=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[o.longitude||0,o.latitude||0],zoom:o.zoom||0,pitch:o.pitch||0,bearing:o.bearing||0}),r.gl){var a=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=a,r.gl}}var i=new this._MapClass(n);o.padding&&i.setPadding(o.padding),r.cursor&&(i.getCanvas().style.cursor=r.cursor),this._renderTransform=i.transform.clone();var u=i._render;i._render=function(e){t._inRender=!0,u.call(i,e),t._inRender=!1};var c=i._renderTaskQueue.run;i._renderTaskQueue.run=function(e){c.call(i._renderTaskQueue,e),t._onBeforeRepaint()},i.on("render",(function(){return t._onAfterRepaint()}));var s=i.fire;for(var l in i.fire=this._fireEvent.bind(this,s),i.on("resize",(function(){t._renderTransform.resize(i.transform.width,i.transform.height)})),i.on("styledata",(function(){return t._updateStyleComponents(t.props,{})})),i.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),O)i.on(l,this._onPointerEvent);for(var f in j)i.on(f,this._onCameraEvent);for(var p in P)i.on(p,this._onEvent);this._map=i},t.recycle=function(){e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=c(n,h(h({},u(r.transform)),e));if(s&&t){var l=this._deferredEvents;l.move=!0,l.zoom||(l.zoom=o!==n.zoom),l.rotate||(l.rotate=i!==n.bearing),l.pitch||(l.pitch=a!==n.pitch)}return r.isMoving()||c(r.transform,e),s},t._updateSettings=function(e,t){for(var r,n=this._map,o=!1,a=y(S);!(r=a()).done;){var i=r.value;i in e&&!Object(v.b)(e[i],t[i])&&(o=!0,n["set"+i[0].toUpperCase()+i.slice(1)](e[i]))}return o},t._updateStyle=function(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor),e.mapStyle!==t.mapStyle){var r={diff:e.styleDiffing};return"localIdeographFontFamily"in e&&(r.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(m(e.mapStyle),r),!0}return!1},t._updateStyleComponents=function(e,t){var r=this._map,n=!1;return r.style.loaded()&&("light"in e&&!Object(v.b)(e.light,t.light)&&(n=!0,r.setLight(e.light)),"fog"in e&&!Object(v.b)(e.fog,t.fog)&&(n=!0,r.setFog(e.fog)),"terrain"in e&&!Object(v.b)(e.terrain,t.terrain)&&(e.terrain&&!r.getSource(e.terrain.source)||(n=!0,r.setTerrain(e.terrain),this._renderTransform.elevation=r.transform.elevation))),n},t._updateHandlers=function(e,t){for(var r,n=this._map,o=!1,a=y(w);!(r=a()).done;){var i=r.value,u=e[i];Object(v.b)(u,t[i])||(o=!0,u?n[i].enable(u):n[i].disable())}return o},t._updateHover=function(e){var t=this.props;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var r,n,o=e.type,a=(null===(r=this._hoveredFeatures)||void 0===r?void 0:r.length)>0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(e.point,{layers:t.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,i&&!a&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=o}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){e._map.transform=n}},Object(i.a)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function E(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}function C(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return L(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function I(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r prop: "+n);else e.setCoordinates(t.coordinates)}}(f,e,r.current):f=l(t,c,e),r.current=e,f&&o.Children.map(e.children,(function(e){return e&&Object(o.cloneElement)(e,{source:c})}))||null}},OSzm:function(e,t,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(e){var t=Object(a.a)((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return Object(n.useEffect)((function(){Object(o.a)(t._container,e.style)}),[e.style]),null}t.a=n.memo(i)},SA6Z:function(e,t,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0;)r.appendChild(a.childNodes[0]);return o._container=r,t.initialViewState&&n._updateViewState(t.initialViewState,!1),o.resize(),n.setProps(O(O({},t),{},{styleDiffing:!1})),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),n},t._initialize=function(e){var t=this,r=this.props,n=O(O(O({},r),r.initialViewState),{},{accessToken:r.mapboxAccessToken||C()||null,container:e,style:v(r.mapStyle)}),o=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[o.longitude||0,o.latitude||0],zoom:o.zoom||0,pitch:o.pitch||0,bearing:o.bearing||0}),r.gl){var a=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=a,r.gl}}var i=new this._MapClass(n);o.padding&&i.setPadding(o.padding),r.cursor&&(i.getCanvas().style.cursor=r.cursor),this._renderTransform=u(i.transform);var c=i._render;i._render=function(e){t._inRender=!0,c.call(i,e),t._inRender=!1};var s=i._renderTaskQueue.run;i._renderTaskQueue.run=function(e){s.call(i._renderTaskQueue,e),t._onBeforeRepaint()},i.on("render",(function(){return t._onAfterRepaint()}));var l=i.fire;for(var f in i.fire=this._fireEvent.bind(this,l),i.on("resize",(function(){t._renderTransform.resize(i.transform.width,i.transform.height)})),i.on("styledata",(function(){return t._updateStyleComponents(t.props,{})})),i.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),j)i.on(f,this._onPointerEvent);for(var p in P)i.on(p,this._onCameraEvent);for(var d in S)i.on(d,this._onEvent);this._map=i},t.recycle=function(){e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,u=s(n,O(O({},c(r.transform)),e));if(u&&t){var l=this._deferredEvents;l.move=!0,l.zoom||(l.zoom=o!==n.zoom),l.rotate||(l.rotate=i!==n.bearing),l.pitch||(l.pitch=a!==n.pitch)}return r.isMoving()||s(r.transform,e),u},t._updateSettings=function(e,t){for(var r,n=this._map,o=!1,a=b(w);!(r=a()).done;){var i=r.value;i in e&&!Object(y.b)(e[i],t[i])&&(o=!0,n["set"+i[0].toUpperCase()+i.slice(1)](e[i]))}return o},t._updateStyle=function(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor),e.mapStyle!==t.mapStyle){var r={diff:e.styleDiffing};return"localIdeographFontFamily"in e&&(r.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(v(e.mapStyle),r),!0}return!1},t._updateStyleComponents=function(e,t){var r=this._map,n=!1;return r.style.loaded()&&("light"in e&&!Object(y.b)(e.light,t.light)&&(n=!0,r.setLight(e.light)),"fog"in e&&!Object(y.b)(e.fog,t.fog)&&(n=!0,r.setFog(e.fog)),"terrain"in e&&!Object(y.b)(e.terrain,t.terrain)&&(e.terrain&&!r.getSource(e.terrain.source)||(n=!0,r.setTerrain(e.terrain))),this._renderTransform.elevation=r.transform.elevation),n},t._updateHandlers=function(e,t){for(var r,n=this._map,o=!1,a=b(_);!(r=a()).done;){var i=r.value,u=e[i];Object(y.b)(u,t[i])||(o=!0,u?n[i].enable(u):n[i].disable())}return o},t._updateHover=function(e){var t=this.props;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var r,n,o=e.type,a=(null===(r=this._hoveredFeatures)||void 0===r?void 0:r.length)>0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(e.point,{layers:t.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,i&&!a&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=o}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in P&&("object"==typeof t&&(t.viewState=c(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._map.painter.transform=this._renderTransform,this._onAfterRepaint=function(){e._map.transform=n}},Object(i.a)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function C(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}function L(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return x(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}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(r=e[Symbol.iterator]()).next.bind(r)}function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0&&s.length>r&&!s.warned){s.warned=!0;var u=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(e)+" listeners added. Use emitter.setMaxListeners() to increase limit");u.name="MaxListenersExceededWarning",u.emitter=t,u.type=e,u.count=s.length,a=u,console&&console.warn&&console.warn(a)}return t}function p(){if(!this.fired)return this.target.removeListener(this.type,this.wrapFn),this.fired=!0,0===arguments.length?this.listener.call(this.target):this.listener.apply(this.target,arguments)}function f(t,e,n){var i={fired:!1,wrapFn:void 0,target:t,type:e,listener:n},r=p.bind(i);return r.listener=n,i.wrapFn=r,r}function d(t,e,n){var i=t._events;if(void 0===i)return[];var r=i[e];return void 0===r?[]:"function"==typeof r?n?[r.listener||r]:[r]:n?function(t){for(var e=new Array(t.length),n=0;n0&&(s=e[0]),s instanceof Error)throw s;var a=new Error("Unhandled error."+(s?" ("+s.message+")":""));throw a.context=s,a}var u=r[t];if(void 0===u)return!1;if("function"==typeof u)o(u,this,e);else{var c=u.length,l=m(u,c);for(n=0;n=0;o--)if(n[o]===e||n[o].listener===e){s=n[o].listener,r=o;break}if(r<0)return this;0===r?n.shift():function(t,e){for(;e+1=0;i--)this.removeListener(t,e[i]);return this},a.prototype.listeners=function(t){return d(this,t,!0)},a.prototype.rawListeners=function(t){return d(this,t,!1)},a.listenerCount=function(t,e){return"function"==typeof t.listenerCount?t.listenerCount(e):g.call(t,e)},a.prototype.listenerCount=g,a.prototype.eventNames=function(){return this._eventsCount>0?i(this._events):[]}},"/5w7":function(t,e,n){"use strict";t.exports={placeholder:{de:"Suche",it:"Ricerca",en:"Search",nl:"Zoeken",fr:"Chercher",ca:"Cerca",he:"לחפש",ja:"サーチ",lv:"Meklēt",pt:"Procurar",sr:"Претрага",zh:"搜索",cs:"Vyhledávání",hu:"Keresés",ka:"ძიება",nb:"Søke",sk:"Vyhľadávanie",th:"ค้นหา",fi:"Hae",is:"Leita",ko:"수색",pl:"Szukaj",sl:"Iskanje",fa:"جستجو",ru:"Поиск"}}},"0KjW":function(t,e,n){"use strict";var i=n("KXza");t.exports=i},"2+Hy":function(t,e,n){"use strict";n("E9XD");var i=n("YI60"),r=n("U6jy"),o=n("piyq"),s=n("d0rS"),a=n("jLWS"),u=1;function c(t,e){if(!t)throw new Error("MapiRequest requires a client");if(!e||!e.path||!e.method)throw new Error("MapiRequest requires an options object with path and method properties");var n={};e.body&&(n["content-type"]="application/json");var i=r(n,e.headers),s=Object.keys(i).reduce((function(t,e){return t[e.toLowerCase()]=i[e],t}),{});this.id=u++,this._options=e,this.emitter=new o,this.client=t,this.response=null,this.error=null,this.sent=!1,this.aborted=!1,this.path=e.path,this.method=e.method,this.origin=e.origin||t.origin,this.query=e.query||{},this.params=e.params||{},this.body=e.body||null,this.file=e.file||null,this.encoding=e.encoding||"utf8",this.sendFileAs=e.sendFileAs||null,this.headers=s}c.prototype.url=function(t){var e=s.prependOrigin(this.path,this.origin);e=s.appendQueryObject(e,this.query);var n=this.params,o=null==t?this.client.accessToken:t;if(o){e=s.appendQueryParam(e,"access_token",o);var a=i(o).user;n=r({ownerId:a},n)}return e=s.interpolateRouteParams(e,n),e},c.prototype.send=function(){var t=this;if(t.sent)throw new Error("This request has already been sent. Check the response and error properties. Create a new request with clone().");return t.sent=!0,t.client.sendRequest(t).then((function(e){return t.response=e,t.emitter.emit(a.EVENT_RESPONSE,e),e}),(function(e){throw t.error=e,t.emitter.emit(a.EVENT_ERROR,e),e}))},c.prototype.abort=function(){this._nextPageRequest&&(this._nextPageRequest.abort(),delete this._nextPageRequest),this.response||this.error||this.aborted||(this.aborted=!0,this.client.abortRequest(this))},c.prototype.eachPage=function(t){var e=this;function n(n){t(null,n,(function(){delete e._nextPageRequest;var t=n.nextPage();t&&(e._nextPageRequest=t,r(t))}))}function i(e){t(e,null,(function(){}))}function r(t){t.send().then(n,i)}r(this)},c.prototype.clone=function(){return this._extend()},c.prototype._extend=function(t){var e=r(this._options,t);return new c(this.client,e)},t.exports=c},"4b23":function(t,e,n){for(var i=self.crypto||self.msCrypto,r="-_",o=36;o--;)r+=o.toString(36);for(o=36;o---10;)r+=o.toString(36).toUpperCase();t.exports=function(t){var e="",n=i.getRandomValues(new Uint8Array(t||21));for(o=t||21;o--;)e+=r[63&n[o]];return e}},"5K5J":function(t,e,n){var i,r;i=this,r=function(){var t=/^([a-zA-Z]{2,3})(?:[_-]+([a-zA-Z]{3})(?=$|[_-]+))?(?:[_-]+([a-zA-Z]{4})(?=$|[_-]+))?(?:[_-]+([a-zA-Z]{2}|[0-9]{3})(?=$|[_-]+))?/;function e(e){return e.match(t)||[]}function n(t){return{language:(t=e(t))[1]||"",extlang:t[2]||"",script:t[3]||"",region:t[4]||""}}function i(t,e,n){Object.defineProperty(t,e,{value:n,enumerable:!0})}function r(t,r,o){function s(n){return e(n)[t]||""}i(s,"pattern",r),i(n,o,s)}return r(1,/^[a-zA-Z]{2,3}$/,"language"),r(2,/^[a-zA-Z]{3}$/,"extlang"),r(3,/^[a-zA-Z]{4}$/,"script"),r(4,/^[a-zA-Z]{2}$|^[0-9]{3}$/,"region"),i(n,"split",(function(t){return e(t).filter((function(t,e){return t&&e}))})),n},t.exports?t.exports=r():i.subtag=r()},"73jG":function(t,e,n){"use strict";var i=n("jLWS");t.exports=function(t){var e,n=t.type||i.ERROR_HTTP;if(t.body)try{e=JSON.parse(t.body)}catch(o){e=t.body}else e=null;var r=t.message||null;r||("string"==typeof e?r=e:e&&"string"==typeof e.message?r=e.message:n===i.ERROR_REQUEST_ABORTED&&(r="Request aborted")),this.message=r,this.type=n,this.statusCode=t.statusCode||null,this.request=t.request,this.body=e}},"9/5/":function(t,e,n){(function(e){var n=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,o=/^0o[0-7]+$/i,s=parseInt,a="object"==typeof e&&e&&e.Object===Object&&e,u="object"==typeof self&&self&&self.Object===Object&&self,c=a||u||Function("return this")(),l=Object.prototype.toString,h=Math.max,p=Math.min,f=function(){return c.Date.now()};function d(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function g(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(d(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=d(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var a=r.test(t);return a||o.test(t)?s(t.slice(2),a?2:8):i.test(t)?NaN:+t}t.exports=function(t,e,n){var i,r,o,s,a,u,c=0,l=!1,m=!1,v=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=i,o=r;return i=r=void 0,c=e,s=t.apply(o,n)}function b(t){return c=t,a=setTimeout(x,e),l?y(t):s}function _(t){var n=t-u;return void 0===u||n>=e||n<0||m&&t-c>=o}function x(){var t=f();if(_(t))return w(t);a=setTimeout(x,function(t){var n=e-(t-u);return m?p(n,o-(t-c)):n}(t))}function w(t){return a=void 0,v&&i?y(t):(i=r=void 0,s)}function E(){var t=f(),n=_(t);if(i=arguments,r=this,u=t,n){if(void 0===a)return b(u);if(m)return a=setTimeout(x,e),y(u)}return void 0===a&&(a=setTimeout(x,e)),s}return e=g(e)||0,d(n)&&(l=!!n.leading,o=(m="maxWait"in n)?h(g(n.maxWait)||0,e):o,v="trailing"in n?!!n.trailing:v),E.cancel=function(){void 0!==a&&clearTimeout(a),c=0,i=u=r=a=void 0},E.flush=function(){return void 0===a?s:w(f())},E}}).call(this,n("yLpj"))},AxvH:function(t,e,n){"use strict";n("E9XD"),t.exports=function(t){return t?t.split(/,\s*]*)>(.*)/);if(!e)return null;var n=e[1],i=e[2].split(";"),r=null,o=i.reduce((function(t,e){var n=function(t){var e=t.match(/\s*(.+)\s*=\s*"?([^"]+)"?/);return e?{key:e[1],value:e[2]}:null}(e);return n?"rel"===n.key?(r||(r=n.value),t):(t[n.key]=n.value,t):t}),{});return r?{url:n,rel:r,params:o}:null}(e);return n?(n.rel.split(/\s+/).forEach((function(e){t[e]||(t[e]={url:n.url,params:n.params})})),t):t}),{}):{}}},Bi8L:function(t,e,n){"use strict";var i=n("R/WN");t.exports=i,"undefined"!=typeof window&&(window.Suggestions=i)},Cu2R:function(t,e,n){"use strict";var i=n("ncV3"),r=n("KXza");t.exports=function(t){return function(e){var n;n=i.prototype.isPrototypeOf(e)?e:r(e);var o=Object.create(t);return o.client=n,o}}},KXza:function(t,e,n){"use strict";var i=n("oGbY"),r=n("ncV3");function o(t){r.call(this,t)}o.prototype=Object.create(r.prototype),o.prototype.constructor=o,o.prototype.sendRequest=i.browserSend,o.prototype.abortRequest=i.browserAbort,t.exports=function(t){return new o(t)}},KtRk:function(t,e,n){"use strict";(function(e){var i=n("U6jy"),r=n("pit/");t.exports=i(r,{file:function(t){if("undefined"!=typeof window){if(t instanceof e.Blob||t instanceof e.ArrayBuffer)return;return"Blob or ArrayBuffer"}if("string"!=typeof t&&void 0===t.pipe)return"Filename or Readable stream"},date:function(t){if("boolean"==typeof t)return"date";try{var e=new Date(t);if(e.getTime&&isNaN(e.getTime()))return"date"}catch(n){return"date"}},coordinates:function(t){return r.tuple(r.number,r.number)(t)},assertShape:function(t,e){return r.assert(r.strictShape(t),e)}})}).call(this,n("yLpj"))},LFDd:function(t,e,n){"use strict";var i=n("U6jy"),r=n("KtRk"),o=n("baNz"),s=n("eFQn"),a=n("Cu2R"),u={},c=["country","region","postcode","district","place","locality","neighborhood","address","poi","poi.landmark"];u.forwardGeocode=function(t){r.assertShape({query:r.required(r.string),mode:r.oneOf("mapbox.places","mapbox.places-permanent"),countries:r.arrayOf(r.string),proximity:r.coordinates,types:r.arrayOf(r.oneOf(c)),autocomplete:r.boolean,bbox:r.arrayOf(r.number),limit:r.number,language:r.arrayOf(r.string),routing:r.boolean,fuzzyMatch:r.boolean,worldview:r.string})(t),t.mode=t.mode||"mapbox.places";var e=s(i({country:t.countries},o(t,["proximity","types","autocomplete","bbox","limit","language","routing","fuzzyMatch","worldview"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:o(t,["mode","query"]),query:e})},u.reverseGeocode=function(t){r.assertShape({query:r.required(r.coordinates),mode:r.oneOf("mapbox.places","mapbox.places-permanent"),countries:r.arrayOf(r.string),types:r.arrayOf(r.oneOf(c)),bbox:r.arrayOf(r.number),limit:r.number,language:r.arrayOf(r.string),reverseMode:r.oneOf("distance","score"),routing:r.boolean,worldview:r.string})(t),t.mode=t.mode||"mapbox.places";var e=s(i({country:t.countries},o(t,["country","types","bbox","limit","language","reverseMode","routing","worldview"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:o(t,["mode","query"]),query:e})},t.exports=a(u)},"NkL+":function(t,e,n){"use strict";var i=Object.prototype.toString;t.exports=function(t){var e;return"[object Object]"===i.call(t)&&(null===(e=Object.getPrototypeOf(t))||e===Object.getPrototypeOf({}))}},"P8+q":function(t,e,n){var i;n("E9XD"),i={},t.exports=i,i.simpleFilter=function(t,e){return e.filter((function(e){return i.test(t,e)}))},i.test=function(t,e){return null!==i.match(t,e)},i.match=function(t,e,n){n=n||{};var i,r=0,o=[],s=e.length,a=0,u=0,c=n.pre||"",l=n.post||"",h=n.caseSensitive&&e||e.toLowerCase();t=n.caseSensitive&&t||t.toLowerCase();for(var p=0;p-1},s.prototype.value=function(t){if(this.selected=t,this.el.value=this.getItemValue(t),document.createEvent){var e=document.createEvent("HTMLEvents");e.initEvent("change",!0,!1),this.el.dispatchEvent(e)}else this.el.fireEvent("onchange")},s.prototype.getCandidates=function(t){var e={pre:"",post:"",extract:function(t){return this.getItemValue(t)}.bind(this)};t(this.options.filter?r.filter(this.query,this.data,e).map(function(t){return{original:t.original,string:this.render(t.original,t.string)}}.bind(this)):this.data.map(function(t){return{original:t,string:this.render(t)}}.bind(this)))},s.prototype.getItemValue=function(t){return t},s.prototype.render=function(t,e){if(e)return e;for(var n=t.original?this.getItemValue(t.original):this.getItemValue(t),i=this.normalize(n),r=i.lastIndexOf(this.query);r>-1;){var o=r+this.query.length;n=n.slice(0,r)+""+n.slice(r,o)+""+n.slice(o),r=i.slice(0,r).lastIndexOf(this.query)}return n},s.prototype.renderError=function(t){this.list.drawError(t)},t.exports=s},SX8C:function(t,e,n){"use strict";var i=function(t){return this.component=t,this.items=[],this.active=0,this.wrapper=document.createElement("div"),this.wrapper.className="suggestions-wrapper",this.element=document.createElement("ul"),this.element.className="suggestions",this.wrapper.appendChild(this.element),this.selectingListItem=!1,t.el.parentNode.insertBefore(this.wrapper,t.el.nextSibling),this};i.prototype.show=function(){this.element.style.display="block"},i.prototype.hide=function(){this.element.style.display="none"},i.prototype.add=function(t){this.items.push(t)},i.prototype.clear=function(){this.items=[],this.active=0},i.prototype.isEmpty=function(){return!this.items.length},i.prototype.isVisible=function(){return"block"===this.element.style.display},i.prototype.draw=function(){if(this.element.innerHTML="",0!==this.items.length){for(var t=0;t0&&(this.send(this.eventQueue),this.eventQueue=new Array),this.timer&&clearTimeout(this.timer),this.flushInterval&&(this.timer=setTimeout(this.flush.bind(this),this.flushInterval))},push:function(t,e){this.eventQueue.push(t),(this.eventQueue.length>=this.maxQueueSize||e)&&this.flush()},remove:function(){this.flush()}},t.exports=r},YI60:function(t,e,n){"use strict";var i=n("aqBw"),r={};function o(t,e){return Object.prototype.hasOwnProperty.call(t,e)}t.exports=function(t){if(r[t])return r[t];var e=t.split("."),n=e[0],s=e[1];if(!s)throw new Error("Invalid token");var a=function(t){try{return JSON.parse(i.decode(t))}catch(e){throw new Error("Invalid token")}}(s),u={usage:n,user:a.u};return o(a,"a")&&(u.authorization=a.a),o(a,"exp")&&(u.expires=1e3*a.exp),o(a,"iat")&&(u.created=1e3*a.iat),o(a,"scopes")&&(u.scopes=a.scopes),o(a,"client")&&(u.client=a.client),o(a,"ll")&&(u.lastLogin=a.ll),o(a,"iu")&&(u.impersonator=a.iu),r[t]=u,u}},YuTi:function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),t.webpackPolyfill=1),t}},aqBw:function(t,e,n){(function(t,i){var r;!function(o){var s=e,a=(t&&t.exports,"object"==typeof i&&i);a.global!==a&&a.window;var u=function(t){this.message=t};(u.prototype=new Error).name="InvalidCharacterError";var c=function(t){throw new u(t)},l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",h=/[\t\n\f\r ]/g,p={encode:function(t){t=String(t),/[^\0-\xFF]/.test(t)&&c("The string to be encoded contains characters outside of the Latin1 range.");for(var e,n,i,r,o=t.length%3,s="",a=-1,u=t.length-o;++a>18&63)+l.charAt(r>>12&63)+l.charAt(r>>6&63)+l.charAt(63&r);return 2==o?(e=t.charCodeAt(a)<<8,n=t.charCodeAt(++a),s+=l.charAt((r=e+n)>>10)+l.charAt(r>>4&63)+l.charAt(r<<2&63)+"="):1==o&&(r=t.charCodeAt(a),s+=l.charAt(r>>2)+l.charAt(r<<4&63)+"=="),s},decode:function(t){var e=(t=String(t).replace(h,"")).length;e%4==0&&(e=(t=t.replace(/==?$/,"")).length),(e%4==1||/[^+a-zA-Z0-9/]/.test(t))&&c("Invalid character: the string to be decoded is not correctly encoded.");for(var n,i,r=0,o="",s=-1;++s>(-2*r&6)));return o},version:"0.1.0"};void 0===(r=function(){return p}.call(e,n,e,t))||(t.exports=r)}()}).call(this,n("YuTi")(t),n("yLpj"))},baNz:function(t,e,n){"use strict";n("E9XD"),t.exports=function(t,e){var n=function(t,n){return-1!==e.indexOf(t)&&void 0!==n};return"function"==typeof e&&(n=e),Object.keys(t).filter((function(e){return n(e,t[e])})).reduce((function(e,n){return e[n]=t[n],e}),{})}},cRm7:function(t,e,n){"use strict";var i=n("AxvH");function r(t,e){this.request=t,this.headers=e.headers,this.rawBody=e.body,this.statusCode=e.statusCode;try{this.body=JSON.parse(e.body||"{}")}catch(n){this.body=e.body}this.links=i(this.headers.link)}r.prototype.hasNextPage=function(){return!!this.links.next},r.prototype.nextPage=function(){return this.hasNextPage()?this.request._extend({path:this.links.next.url}):null},t.exports=r},cryX:function(t,e,n){"use strict";t.exports=function(t){var e={};return t?(t.trim().split(/[\r|\n]+/).forEach((function(t){var n=function(t){var e=t.indexOf(":");return{name:t.substring(0,e).trim().toLowerCase(),value:t.substring(e+1).trim()}}(t);e[n.name]=n.value})),e):e}},d0rS:function(t,e,n){"use strict";function i(t){return Array.isArray(t)?t.map(encodeURIComponent).join(","):encodeURIComponent(String(t))}function r(t,e,n){if(!1===n||null===n)return t;var r=/\?/.test(t)?"&":"?",o=encodeURIComponent(e);return void 0!==n&&""!==n&&!0!==n&&(o+="="+i(n)),""+t+r+o}t.exports={appendQueryObject:function(t,e){if(!e)return t;var n=t;return Object.keys(e).forEach((function(t){var i=e[t];void 0!==i&&(Array.isArray(i)&&(i=i.filter((function(t){return null!=t})).join(",")),n=r(n,t,i))})),n},appendQueryParam:r,prependOrigin:function(t,e){if(!e)return t;if("http"===t.slice(0,4))return t;var n="/"===t[0]?"":"/";return""+e.replace(/\/$/,"")+n+t},interpolateRouteParams:function(t,e){return e?t.replace(/\/:([a-zA-Z0-9]+)/g,(function(t,n){var r=e[n];if(void 0===r)throw new Error("Unspecified route parameter "+n);return"/"+i(r)})):t}}},eFQn:function(t,e,n){"use strict";var i=n("Smn/");t.exports=function(t){return i(t,(function(t,e){return"boolean"==typeof e?JSON.stringify(e):e}))}},iFvi:function(t,e,n){"use strict";n("E9XD");var i=n("Bi8L"),r=n("9/5/"),o=n("U6jy"),s=n("+qE3").EventEmitter,a=n("SsYf"),u=n("0KjW"),c=n("LFDd"),l=n("WpKc"),h=n("/5w7"),p=n("5K5J"),f=0,d=1,g=2;function m(t){this._eventEmitter=new s,this.options=o({},this.options,t),this.inputString="",this.fresh=!0,this.lastSelected=null}m.prototype={options:{zoom:16,flyTo:!0,trackProximity:!0,minLength:2,reverseGeocode:!1,limit:5,origin:"https://api.mapbox.com",enableEventLogging:!0,marker:!0,mapboxgl:null,collapsed:!1,clearAndBlurOnEsc:!1,clearOnBlur:!1,getItemValue:function(t){return t.place_name},render:function(t){var e=t.place_name.split(",");return'
'+e[0]+'
'+e.splice(1,e.length).join(",")+"
"}},addTo:function(t){function e(t,e){if(!document.body.contains(e))throw new Error("Element provided to #addTo() exists, but is not in the DOM");var n=t.onAdd();e.appendChild(n)}if(t._controlContainer)t.addControl(this);else if(t instanceof HTMLElement)e(this,t);else{if("string"!=typeof t)throw new Error("Error: addTo must be a mapbox-gl-js map, an html element, or a CSS selector query for a single html element");var n=document.querySelectorAll(t);if(0===n.length)throw new Error("Element ",t,"not found.");if(n.length>1)throw new Error("Geocoder can only be added to a single html element");e(this,n[0])}},onAdd:function(t){if(t&&"string"!=typeof t&&(this._map=t),this.setLanguage(),this.options.localGeocoderOnly||(this.geocoderService=c(u({accessToken:this.options.accessToken,origin:this.options.origin}))),this.options.localGeocoderOnly&&!this.options.localGeocoder)throw new Error("A localGeocoder function must be specified to use localGeocoderOnly mode");this.eventManager=new l(this.options),this._onChange=this._onChange.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPaste=this._onPaste.bind(this),this._onBlur=this._onBlur.bind(this),this._showButton=this._showButton.bind(this),this._hideButton=this._hideButton.bind(this),this._onQueryResult=this._onQueryResult.bind(this),this.clear=this.clear.bind(this),this._updateProximity=this._updateProximity.bind(this),this._collapse=this._collapse.bind(this),this._unCollapse=this._unCollapse.bind(this),this._clear=this._clear.bind(this),this._clearOnBlur=this._clearOnBlur.bind(this);var e=this.container=document.createElement("div");e.className="mapboxgl-ctrl-geocoder mapboxgl-ctrl";var n=this.createIcon("search",'');this._inputEl=document.createElement("input"),this._inputEl.type="text",this._inputEl.className="mapboxgl-ctrl-geocoder--input",this.setPlaceholder(),this.options.collapsed&&(this._collapse(),this.container.addEventListener("mouseenter",this._unCollapse),this.container.addEventListener("mouseleave",this._collapse),this._inputEl.addEventListener("focus",this._unCollapse)),(this.options.collapsed||this.options.clearOnBlur)&&this._inputEl.addEventListener("blur",this._onBlur),this._inputEl.addEventListener("keydown",r(this._onKeyDown,200)),this._inputEl.addEventListener("paste",this._onPaste),this._inputEl.addEventListener("change",this._onChange),this.container.addEventListener("mouseenter",this._showButton),this.container.addEventListener("mouseleave",this._hideButton),this._inputEl.addEventListener("keyup",function(t){this.eventManager.keyevent(t,this)}.bind(this));var o=document.createElement("div");o.classList.add("mapboxgl-ctrl-geocoder--pin-right"),this._clearEl=document.createElement("button"),this._clearEl.setAttribute("aria-label","Clear"),this._clearEl.addEventListener("click",this.clear),this._clearEl.className="mapboxgl-ctrl-geocoder--button";var s=this.createIcon("close",'');return this._clearEl.appendChild(s),this._loadingEl=this.createIcon("loading",''),o.appendChild(this._clearEl),o.appendChild(this._loadingEl),e.appendChild(n),e.appendChild(this._inputEl),e.appendChild(o),this._typeahead=new i(this._inputEl,[],{filter:!1,minLength:this.options.minLength,limit:this.options.limit}),this.setRenderFunction(this.options.render),this._typeahead.getItemValue=this.options.getItemValue,this.mapMarker=null,this._handleMarker=this._handleMarker.bind(this),this._map&&(this.options.trackProximity&&(this._updateProximity(),this._map.on("moveend",this._updateProximity)),this._mapboxgl=this.options.mapboxgl,!this._mapboxgl&&this.options.marker&&(console.error("No mapboxgl detected in options. Map markers are disabled. Please set options.mapboxgl."),this.options.marker=!1)),e},createIcon:function(t,e){var n=document.createElementNS("http://www.w3.org/2000/svg","svg");if(n.setAttribute("class","mapboxgl-ctrl-geocoder--icon mapboxgl-ctrl-geocoder--icon-"+t),n.setAttribute("viewBox","0 0 18 18"),n.setAttribute("xml:space","preserve"),n.setAttribute("width",18),n.setAttribute("height",18),"innerHTML"in n)n.innerHTML=e;else{var i=document.createElement("div");i.innerHTML=""+e.valueOf().toString()+"";var r=i.firstChild.firstChild;n.appendChild(r)}return n},onRemove:function(){return this.container.parentNode.removeChild(this.container),this.options.trackProximity&&this._map&&this._map.off("moveend",this._updateProximity),this._removeMarker(),this._map=null,this},_onPaste:function(t){var e=(t.clipboardData||window.clipboardData).getData("text");e.length>=this.options.minLength&&this._geocode(e)},_onKeyDown:function(t){var e=27,n=9;if(t.keyCode===e&&this.options.clearAndBlurOnEsc)return this._clear(t),this._inputEl.blur();var i=t.target&&t.target.shadowRoot?t.target.shadowRoot.activeElement:t.target;if(!(i?i.value:""))return this.fresh=!0,t.keyCode!==n&&this.clear(t),this._clearEl.style.display="none";t.metaKey||-1!==[n,e,37,39,13,38,40].indexOf(t.keyCode)||i.value.length>=this.options.minLength&&this._geocode(i.value)},_showButton:function(){this._typeahead.selected&&(this._clearEl.style.display="block")},_hideButton:function(){this._typeahead.selected&&(this._clearEl.style.display="none")},_onBlur:function(t){this.options.clearOnBlur&&this._clearOnBlur(t),this.options.collapsed&&this._collapse()},_onChange:function(){var t=this._typeahead.selected;if(t&&JSON.stringify(t)!==this.lastSelected){var e;if(this._clearEl.style.display="none",this.options.flyTo)if(t.properties&&a[t.properties.short_code])e=o({},this.options.flyTo),this._map&&this._map.fitBounds(a[t.properties.short_code].bbox,e);else if(t.bbox){var n=t.bbox;e=o({},this.options.flyTo),this._map&&this._map.fitBounds([[n[0],n[1]],[n[2],n[3]]],e)}else{var i={zoom:this.options.zoom};e=o({},i,this.options.flyTo),t.center?e.center=t.center:t.geometry&&t.geometry.type&&"Point"===t.geometry.type&&t.geometry.coordinates&&(e.center=t.geometry.coordinates),this._map&&this._map.flyTo(e)}this.options.marker&&this._mapboxgl&&this._handleMarker(t),this._inputEl.focus(),this._inputEl.scrollLeft=0,this._inputEl.setSelectionRange(0,0),this.lastSelected=JSON.stringify(t),this._eventEmitter.emit("result",{result:t}),this.eventManager.select(t,this)}},_requestType:function(t,e){return t.localGeocoderOnly?d:t.reverseGeocode&&/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/.test(e)?g:f},_setupConfig:function(t,e){var n=/[\s,]+/,i=this,r=["bbox","limit","proximity","countries","types","language","reverseMode","mode","autocomplete","fuzzyMatch","routing","worldview"].reduce((function(t,e){if(void 0===i.options[e]||null===i.options[e])return t;["countries","types","language"].indexOf(e)>-1?t[e]=i.options[e].split(n):t[e]=i.options[e];var r="number"==typeof i.options[e].longitude&&"number"==typeof i.options[e].latitude;if("proximity"===e&&r){var o=i.options[e].longitude,s=i.options[e].latitude;t[e]=[o,s]}return t}),{});switch(t){case g:var s=e.split(n).map((function(t){return parseFloat(t,10)})).reverse();!r.types||r.types[0],r=o(r,{query:s,limit:1}),["proximity","autocomplete","fuzzyMatch","bbox"].forEach((function(t){t in r&&delete r[t]}));break;case f:/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)*[ ]*$/.test(e)&&(e=e.replace(/,/g," ")),r=o(r,{query:e})}return r},_geocode:function(t){this.inputString=t,this._loadingEl.style.display="block",this._eventEmitter.emit("loading",{query:t});var e,n=this._requestType(this.options,t),i=this._setupConfig(n,t);switch(n){case d:e=Promise.resolve();break;case f:e=this.geocoderService.forwardGeocode(i).send();break;case g:e=this.geocoderService.reverseGeocode(i).send()}var r=this.options.localGeocoder&&this.options.localGeocoder(t)||[],o=[],s=null;return e.catch(function(t){s=t}.bind(this)).then(function(e){this._loadingEl.style.display="none";var n={};return e?"200"==e.statusCode&&((n=e.body).request=e.request,n.headers=e.headers):n={type:"FeatureCollection",features:[]},n.config=i,this.fresh&&(this.eventManager.start(this),this.fresh=!1),n.features=n.features?r.concat(n.features):r,this.options.externalGeocoder?(o=this.options.externalGeocoder(t,n.features)||[]).then((function(t){return n.features=n.features?t.concat(n.features):t,n}),(function(){return n})):n}.bind(this)).then(function(t){if(s)throw s;this.options.filter&&t.features.length&&(t.features=t.features.filter(this.options.filter)),t.features.length?(this._clearEl.style.display="block",this._eventEmitter.emit("results",t),this._typeahead.update(t.features)):(this._clearEl.style.display="none",this._typeahead.selected=null,this._renderNoResults(),this._eventEmitter.emit("results",t))}.bind(this)).catch(function(t){this._loadingEl.style.display="none",r.length&&this.options.localGeocoder||o.length&&this.options.externalGeocoder?(this._clearEl.style.display="block",this._typeahead.update(r)):(this._clearEl.style.display="none",this._typeahead.selected=null,this._renderError()),this._eventEmitter.emit("results",{features:r}),this._eventEmitter.emit("error",{error:t})}.bind(this)),e},_clear:function(t){t&&t.preventDefault(),this._inputEl.value="",this._typeahead.selected=null,this._typeahead.clear(),this._onChange(),this._clearEl.style.display="none",this._removeMarker(),this.lastSelected=null,this._eventEmitter.emit("clear"),this.fresh=!0},clear:function(t){this._clear(t),this._inputEl.focus()},_clearOnBlur:function(t){t.relatedTarget&&this._clear(t)},_onQueryResult:function(t){var e=t.body;if(e.features.length){var n=e.features[0];this._typeahead.selected=n,this._inputEl.value=n.place_name,this._onChange()}},_updateProximity:function(){if(this._map)if(this._map.getZoom()>9){var t=this._map.getCenter().wrap();this.setProximity({longitude:t.lng,latitude:t.lat})}else this.setProximity(null)},_collapse:function(){this._inputEl.value||this._inputEl===document.activeElement||this.container.classList.add("mapboxgl-ctrl-geocoder--collapsed")},_unCollapse:function(){this.container.classList.remove("mapboxgl-ctrl-geocoder--collapsed")},query:function(t){return this._geocode(t).then(this._onQueryResult),this},_renderError:function(){this._renderMessage("
There was an error reaching the server
")},_renderNoResults:function(){this._renderMessage("
No results found
")},_renderMessage:function(t){this._typeahead.update([]),this._typeahead.selected=null,this._typeahead.clear(),this._typeahead.renderError(t)},_getPlaceholderText:function(){if(this.options.placeholder)return this.options.placeholder;if(this.options.language){var t=this.options.language.split(",")[0],e=p.language(t),n=h.placeholder[e];if(n)return n}return"Search"},setInput:function(t){return this._inputEl.value=t,this._typeahead.selected=null,this._typeahead.clear(),t.length>=this.options.minLength&&this._geocode(t),this},setProximity:function(t){return this.options.proximity=t,this},getProximity:function(){return this.options.proximity},setRenderFunction:function(t){return t&&"function"==typeof t&&(this._typeahead.render=t),this},getRenderFunction:function(){return this._typeahead.render},setLanguage:function(t){var e=navigator.language||navigator.userLanguage||navigator.browserLanguage;return this.options.language=t||this.options.language||e,this},getLanguage:function(){return this.options.language},getZoom:function(){return this.options.zoom},setZoom:function(t){return this.options.zoom=t,this},getFlyTo:function(){return this.options.flyTo},setFlyTo:function(t){return this.options.flyTo=t,this},getPlaceholder:function(){return this.options.placeholder},setPlaceholder:function(t){return this.placeholder=t||this._getPlaceholderText(),this._inputEl.placeholder=this.placeholder,this._inputEl.setAttribute("aria-label",this.placeholder),this},getBbox:function(){return this.options.bbox},setBbox:function(t){return this.options.bbox=t,this},getCountries:function(){return this.options.countries},setCountries:function(t){return this.options.countries=t,this},getTypes:function(){return this.options.types},setTypes:function(t){return this.options.types=t,this},getMinLength:function(){return this.options.minLength},setMinLength:function(t){return this.options.minLength=t,this._typeahead&&(this._typeahead.options.minLength=t),this},getLimit:function(){return this.options.limit},setLimit:function(t){return this.options.limit=t,this._typeahead&&(this._typeahead.options.limit=t),this},getFilter:function(){return this.options.filter},setFilter:function(t){return this.options.filter=t,this},setOrigin:function(t){return this.options.origin=t,this.geocoderService=c(u({accessToken:this.options.accessToken,origin:this.options.origin})),this},getOrigin:function(){return this.options.origin},setAutocomplete:function(t){return this.options.autocomplete=t,this},getAutocomplete:function(){return this.options.autocomplete},setFuzzyMatch:function(t){return this.options.fuzzyMatch=t,this},getFuzzyMatch:function(){return this.options.fuzzyMatch},setRouting:function(t){return this.options.routing=t,this},getRouting:function(){return this.options.routing},setWorldview:function(t){return this.options.worldview=t,this},getWorldview:function(){return this.options.worldview},_handleMarker:function(t){if(this._map){this._removeMarker();var e=o({},{color:"#4668F2"},this.options.marker);return this.mapMarker=new this._mapboxgl.Marker(e),t.center?this.mapMarker.setLngLat(t.center).addTo(this._map):t.geometry&&t.geometry.type&&"Point"===t.geometry.type&&t.geometry.coordinates&&this.mapMarker.setLngLat(t.geometry.coordinates).addTo(this._map),this}},_removeMarker:function(){this.mapMarker&&(this.mapMarker.remove(),this.mapMarker=null)},on:function(t,e){return this._eventEmitter.on(t,e),this},off:function(t,e){return this._eventEmitter.removeListener(t,e),this.eventManager.remove(),this}},t.exports=m},jLWS:function(t,e,n){"use strict";t.exports={API_ORIGIN:"https://api.mapbox.com",EVENT_PROGRESS_DOWNLOAD:"downloadProgress",EVENT_PROGRESS_UPLOAD:"uploadProgress",EVENT_ERROR:"error",EVENT_RESPONSE:"response",ERROR_HTTP:"HttpError",ERROR_REQUEST_ABORTED:"RequestAbortedError"}},ncV3:function(t,e,n){"use strict";var i=n("YI60"),r=n("2+Hy"),o=n("jLWS");function s(t){if(!t||!t.accessToken)throw new Error("Cannot create a client without an access token");i(t.accessToken),this.accessToken=t.accessToken,this.origin=t.origin||o.API_ORIGIN}s.prototype.createRequest=function(t){return new r(this,t)},t.exports=s},oGbY:function(t,e,n){"use strict";var i=n("cRm7"),r=n("73jG"),o=n("jLWS"),s=n("cryX"),a={};function u(t){var e=t.total,n=t.loaded;return{total:e,transferred:n,percent:100*n/e}}function c(t,e){return new Promise((function(n,i){e.onprogress=function(e){t.emitter.emit(o.EVENT_PROGRESS_DOWNLOAD,u(e))};var s=t.file;s&&(e.upload.onprogress=function(e){t.emitter.emit(o.EVENT_PROGRESS_UPLOAD,u(e))}),e.onerror=function(t){i(t)},e.onabort=function(){var e=new r({request:t,type:o.ERROR_REQUEST_ABORTED});i(e)},e.onload=function(){if(delete a[t.id],e.status<200||e.status>=400){var o=new r({request:t,body:e.response,statusCode:e.status});i(o)}else n(e)};var c=t.body;"string"==typeof c?e.send(c):c?e.send(JSON.stringify(c)):s?e.send(s):e.send(),a[t.id]=e})).then((function(e){return function(t,e){return new i(t,{body:e.response,headers:s(e.getAllResponseHeaders()),statusCode:e.status})}(t,e)}))}function l(t,e){var n=t.url(e),i=new window.XMLHttpRequest;return i.open(t.method,n),Object.keys(t.headers).forEach((function(e){i.setRequestHeader(e,t.headers[e])})),i}t.exports={browserAbort:function(t){var e=a[t.id];e&&(e.abort(),delete a[t.id])},sendRequestXhr:c,browserSend:function(t){return Promise.resolve().then((function(){var e=l(t,t.client.accessToken);return c(t,e)}))},createRequestXhr:l}},"pit/":function(t,e,n){"use strict";n("E9XD");var i=n("NkL+"),r=n("U6jy"),o={};function s(t){var e=Array.isArray(t);return function(n){var i,r=a(o.plainArray,n);if(r)return r;if(e&&n.length!==t.length)return"an array with "+t.length+" items";for(var s=0;st.length?e:t}))}},o.equal=function(t){return function(e){if(e!==t)return JSON.stringify(t)}},o.oneOf=function(){var t=Array.isArray(arguments[0])?arguments[0]:Array.prototype.slice.call(arguments),e=t.map((function(t){return o.equal(t)}));return o.oneOfType.apply(this,e)},o.range=function(t){var e=t[0],n=t[1];return function(t){if(a(o.number,t)||tn)return"number between "+e+" & "+n+" (inclusive)"}},o.any=function(){},o.boolean=function(t){if("boolean"!=typeof t)return"boolean"},o.number=function(t){if("number"!=typeof t)return"number"},o.plainArray=function(t){if(!Array.isArray(t))return"array"},o.plainObject=function(t){if(!i(t))return"object"},o.string=function(t){if("string"!=typeof t)return"string"},o.func=function(t){if("function"!=typeof t)return"function"},o.validate=a,o.processMessage=u,t.exports=o},piyq:function(t,e,n){"use strict";var i=Object.prototype.hasOwnProperty,r="~";function o(){}function s(t,e,n){this.fn=t,this.context=e,this.once=n||!1}function a(t,e,n,i,o){if("function"!=typeof n)throw new TypeError("The listener must be a function");var a=new s(n,i||t,o),u=r?r+e:e;return t._events[u]?t._events[u].fn?t._events[u]=[t._events[u],a]:t._events[u].push(a):(t._events[u]=a,t._eventsCount++),t}function u(t,e){0==--t._eventsCount?t._events=new o:delete t._events[e]}function c(){this._events=new o,this._eventsCount=0}Object.create&&(o.prototype=Object.create(null),(new o).__proto__||(r=!1)),c.prototype.eventNames=function(){var t,e,n=[];if(0===this._eventsCount)return n;for(e in t=this._events)i.call(t,e)&&n.push(r?e.slice(1):e);return Object.getOwnPropertySymbols?n.concat(Object.getOwnPropertySymbols(t)):n},c.prototype.listeners=function(t){var e=r?r+t:t,n=this._events[e];if(!n)return[];if(n.fn)return[n.fn];for(var i=0,o=n.length,s=new Array(o);i0&&s.length>r&&!s.warned){s.warned=!0;var u=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(e)+" listeners added. Use emitter.setMaxListeners() to increase limit");u.name="MaxListenersExceededWarning",u.emitter=t,u.type=e,u.count=s.length,a=u,console&&console.warn&&console.warn(a)}return t}function p(){if(!this.fired)return this.target.removeListener(this.type,this.wrapFn),this.fired=!0,0===arguments.length?this.listener.call(this.target):this.listener.apply(this.target,arguments)}function f(t,e,n){var i={fired:!1,wrapFn:void 0,target:t,type:e,listener:n},r=p.bind(i);return r.listener=n,i.wrapFn=r,r}function d(t,e,n){var i=t._events;if(void 0===i)return[];var r=i[e];return void 0===r?[]:"function"==typeof r?n?[r.listener||r]:[r]:n?function(t){for(var e=new Array(t.length),n=0;n0&&(s=e[0]),s instanceof Error)throw s;var a=new Error("Unhandled error."+(s?" ("+s.message+")":""));throw a.context=s,a}var u=r[t];if(void 0===u)return!1;if("function"==typeof u)o(u,this,e);else{var c=u.length,l=m(u,c);for(n=0;n=0;o--)if(n[o]===e||n[o].listener===e){s=n[o].listener,r=o;break}if(r<0)return this;0===r?n.shift():function(t,e){for(;e+1=0;i--)this.removeListener(t,e[i]);return this},a.prototype.listeners=function(t){return d(this,t,!0)},a.prototype.rawListeners=function(t){return d(this,t,!1)},a.listenerCount=function(t,e){return"function"==typeof t.listenerCount?t.listenerCount(e):g.call(t,e)},a.prototype.listenerCount=g,a.prototype.eventNames=function(){return this._eventsCount>0?i(this._events):[]}},"/5w7":function(t,e,n){"use strict";t.exports={placeholder:{de:"Suche",it:"Ricerca",en:"Search",nl:"Zoeken",fr:"Chercher",ca:"Cerca",he:"לחפש",ja:"サーチ",lv:"Meklēt",pt:"Procurar",sr:"Претрага",zh:"搜索",cs:"Vyhledávání",hu:"Keresés",ka:"ძიება",nb:"Søke",sk:"Vyhľadávanie",th:"ค้นหา",fi:"Hae",is:"Leita",ko:"수색",pl:"Szukaj",sl:"Iskanje",fa:"جستجو",ru:"Поиск"}}},"0KjW":function(t,e,n){"use strict";var i=n("KXza");t.exports=i},"2+Hy":function(t,e,n){"use strict";n("E9XD");var i=n("YI60"),r=n("U6jy"),o=n("piyq"),s=n("d0rS"),a=n("jLWS"),u=1;function c(t,e){if(!t)throw new Error("MapiRequest requires a client");if(!e||!e.path||!e.method)throw new Error("MapiRequest requires an options object with path and method properties");var n={};e.body&&(n["content-type"]="application/json");var i=r(n,e.headers),s=Object.keys(i).reduce((function(t,e){return t[e.toLowerCase()]=i[e],t}),{});this.id=u++,this._options=e,this.emitter=new o,this.client=t,this.response=null,this.error=null,this.sent=!1,this.aborted=!1,this.path=e.path,this.method=e.method,this.origin=e.origin||t.origin,this.query=e.query||{},this.params=e.params||{},this.body=e.body||null,this.file=e.file||null,this.encoding=e.encoding||"utf8",this.sendFileAs=e.sendFileAs||null,this.headers=s}c.prototype.url=function(t){var e=s.prependOrigin(this.path,this.origin);e=s.appendQueryObject(e,this.query);var n=this.params,o=null==t?this.client.accessToken:t;if(o){e=s.appendQueryParam(e,"access_token",o);var a=i(o).user;n=r({ownerId:a},n)}return e=s.interpolateRouteParams(e,n),e},c.prototype.send=function(){var t=this;if(t.sent)throw new Error("This request has already been sent. Check the response and error properties. Create a new request with clone().");return t.sent=!0,t.client.sendRequest(t).then((function(e){return t.response=e,t.emitter.emit(a.EVENT_RESPONSE,e),e}),(function(e){throw t.error=e,t.emitter.emit(a.EVENT_ERROR,e),e}))},c.prototype.abort=function(){this._nextPageRequest&&(this._nextPageRequest.abort(),delete this._nextPageRequest),this.response||this.error||this.aborted||(this.aborted=!0,this.client.abortRequest(this))},c.prototype.eachPage=function(t){var e=this;function n(n){t(null,n,(function(){delete e._nextPageRequest;var t=n.nextPage();t&&(e._nextPageRequest=t,r(t))}))}function i(e){t(e,null,(function(){}))}function r(t){t.send().then(n,i)}r(this)},c.prototype.clone=function(){return this._extend()},c.prototype._extend=function(t){var e=r(this._options,t);return new c(this.client,e)},t.exports=c},"4b23":function(t,e,n){for(var i=self.crypto||self.msCrypto,r="-_",o=36;o--;)r+=o.toString(36);for(o=36;o---10;)r+=o.toString(36).toUpperCase();t.exports=function(t){var e="",n=i.getRandomValues(new Uint8Array(t||21));for(o=t||21;o--;)e+=r[63&n[o]];return e}},"5K5J":function(t,e,n){var i,r;i=this,r=function(){var t=/^([a-zA-Z]{2,3})(?:[_-]+([a-zA-Z]{3})(?=$|[_-]+))?(?:[_-]+([a-zA-Z]{4})(?=$|[_-]+))?(?:[_-]+([a-zA-Z]{2}|[0-9]{3})(?=$|[_-]+))?/;function e(e){return e.match(t)||[]}function n(t){return{language:(t=e(t))[1]||"",extlang:t[2]||"",script:t[3]||"",region:t[4]||""}}function i(t,e,n){Object.defineProperty(t,e,{value:n,enumerable:!0})}function r(t,r,o){function s(n){return e(n)[t]||""}i(s,"pattern",r),i(n,o,s)}return r(1,/^[a-zA-Z]{2,3}$/,"language"),r(2,/^[a-zA-Z]{3}$/,"extlang"),r(3,/^[a-zA-Z]{4}$/,"script"),r(4,/^[a-zA-Z]{2}$|^[0-9]{3}$/,"region"),i(n,"split",(function(t){return e(t).filter((function(t,e){return t&&e}))})),n},t.exports?t.exports=r():i.subtag=r()},"73jG":function(t,e,n){"use strict";var i=n("jLWS");t.exports=function(t){var e,n=t.type||i.ERROR_HTTP;if(t.body)try{e=JSON.parse(t.body)}catch(o){e=t.body}else e=null;var r=t.message||null;r||("string"==typeof e?r=e:e&&"string"==typeof e.message?r=e.message:n===i.ERROR_REQUEST_ABORTED&&(r="Request aborted")),this.message=r,this.type=n,this.statusCode=t.statusCode||null,this.request=t.request,this.body=e}},"9/5/":function(t,e,n){(function(e){var n=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,o=/^0o[0-7]+$/i,s=parseInt,a="object"==typeof e&&e&&e.Object===Object&&e,u="object"==typeof self&&self&&self.Object===Object&&self,c=a||u||Function("return this")(),l=Object.prototype.toString,h=Math.max,p=Math.min,f=function(){return c.Date.now()};function d(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function g(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(d(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=d(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var a=r.test(t);return a||o.test(t)?s(t.slice(2),a?2:8):i.test(t)?NaN:+t}t.exports=function(t,e,n){var i,r,o,s,a,u,c=0,l=!1,m=!1,v=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=i,o=r;return i=r=void 0,c=e,s=t.apply(o,n)}function b(t){return c=t,a=setTimeout(x,e),l?y(t):s}function _(t){var n=t-u;return void 0===u||n>=e||n<0||m&&t-c>=o}function x(){var t=f();if(_(t))return E(t);a=setTimeout(x,function(t){var n=e-(t-u);return m?p(n,o-(t-c)):n}(t))}function E(t){return a=void 0,v&&i?y(t):(i=r=void 0,s)}function w(){var t=f(),n=_(t);if(i=arguments,r=this,u=t,n){if(void 0===a)return b(u);if(m)return a=setTimeout(x,e),y(u)}return void 0===a&&(a=setTimeout(x,e)),s}return e=g(e)||0,d(n)&&(l=!!n.leading,o=(m="maxWait"in n)?h(g(n.maxWait)||0,e):o,v="trailing"in n?!!n.trailing:v),w.cancel=function(){void 0!==a&&clearTimeout(a),c=0,i=u=r=a=void 0},w.flush=function(){return void 0===a?s:E(f())},w}}).call(this,n("yLpj"))},AxvH:function(t,e,n){"use strict";n("E9XD"),t.exports=function(t){return t?t.split(/,\s*]*)>(.*)/);if(!e)return null;var n=e[1],i=e[2].split(";"),r=null,o=i.reduce((function(t,e){var n=function(t){var e=t.match(/\s*(.+)\s*=\s*"?([^"]+)"?/);return e?{key:e[1],value:e[2]}:null}(e);return n?"rel"===n.key?(r||(r=n.value),t):(t[n.key]=n.value,t):t}),{});return r?{url:n,rel:r,params:o}:null}(e);return n?(n.rel.split(/\s+/).forEach((function(e){t[e]||(t[e]={url:n.url,params:n.params})})),t):t}),{}):{}}},Bi8L:function(t,e,n){"use strict";var i=n("R/WN");t.exports=i,"undefined"!=typeof window&&(window.Suggestions=i)},Cu2R:function(t,e,n){"use strict";var i=n("ncV3"),r=n("KXza");t.exports=function(t){return function(e){var n;n=i.prototype.isPrototypeOf(e)?e:r(e);var o=Object.create(t);return o.client=n,o}}},KXza:function(t,e,n){"use strict";var i=n("oGbY"),r=n("ncV3");function o(t){r.call(this,t)}o.prototype=Object.create(r.prototype),o.prototype.constructor=o,o.prototype.sendRequest=i.browserSend,o.prototype.abortRequest=i.browserAbort,t.exports=function(t){return new o(t)}},KtRk:function(t,e,n){"use strict";(function(e){var i=n("U6jy"),r=n("pit/");t.exports=i(r,{file:function(t){if("undefined"!=typeof window){if(t instanceof e.Blob||t instanceof e.ArrayBuffer)return;return"Blob or ArrayBuffer"}if("string"!=typeof t&&void 0===t.pipe)return"Filename or Readable stream"},date:function(t){if("boolean"==typeof t)return"date";try{var e=new Date(t);if(e.getTime&&isNaN(e.getTime()))return"date"}catch(n){return"date"}},coordinates:function(t){return r.tuple(r.number,r.number)(t)},assertShape:function(t,e){return r.assert(r.strictShape(t),e)}})}).call(this,n("yLpj"))},LFDd:function(t,e,n){"use strict";var i=n("U6jy"),r=n("KtRk"),o=n("baNz"),s=n("eFQn"),a=n("Cu2R"),u={},c=["country","region","postcode","district","place","locality","neighborhood","address","poi","poi.landmark"];u.forwardGeocode=function(t){r.assertShape({query:r.required(r.string),mode:r.oneOf("mapbox.places","mapbox.places-permanent"),countries:r.arrayOf(r.string),proximity:r.coordinates,types:r.arrayOf(r.oneOf(c)),autocomplete:r.boolean,bbox:r.arrayOf(r.number),limit:r.number,language:r.arrayOf(r.string),routing:r.boolean,fuzzyMatch:r.boolean,worldview:r.string})(t),t.mode=t.mode||"mapbox.places";var e=s(i({country:t.countries},o(t,["proximity","types","autocomplete","bbox","limit","language","routing","fuzzyMatch","worldview"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:o(t,["mode","query"]),query:e})},u.reverseGeocode=function(t){r.assertShape({query:r.required(r.coordinates),mode:r.oneOf("mapbox.places","mapbox.places-permanent"),countries:r.arrayOf(r.string),types:r.arrayOf(r.oneOf(c)),bbox:r.arrayOf(r.number),limit:r.number,language:r.arrayOf(r.string),reverseMode:r.oneOf("distance","score"),routing:r.boolean,worldview:r.string})(t),t.mode=t.mode||"mapbox.places";var e=s(i({country:t.countries},o(t,["country","types","bbox","limit","language","reverseMode","routing","worldview"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:o(t,["mode","query"]),query:e})},t.exports=a(u)},"NkL+":function(t,e,n){"use strict";var i=Object.prototype.toString;t.exports=function(t){var e;return"[object Object]"===i.call(t)&&(null===(e=Object.getPrototypeOf(t))||e===Object.getPrototypeOf({}))}},"P8+q":function(t,e,n){var i;n("E9XD"),i={},t.exports=i,i.simpleFilter=function(t,e){return e.filter((function(e){return i.test(t,e)}))},i.test=function(t,e){return null!==i.match(t,e)},i.match=function(t,e,n){n=n||{};var i,r=0,o=[],s=e.length,a=0,u=0,c=n.pre||"",l=n.post||"",h=n.caseSensitive&&e||e.toLowerCase();t=n.caseSensitive&&t||t.toLowerCase();for(var p=0;p-1},s.prototype.value=function(t){if(this.selected=t,this.el.value=this.getItemValue(t),document.createEvent){var e=document.createEvent("HTMLEvents");e.initEvent("change",!0,!1),this.el.dispatchEvent(e)}else this.el.fireEvent("onchange")},s.prototype.getCandidates=function(t){var e={pre:"",post:"",extract:function(t){return this.getItemValue(t)}.bind(this)};t(this.options.filter?r.filter(this.query,this.data,e).map(function(t){return{original:t.original,string:this.render(t.original,t.string)}}.bind(this)):this.data.map(function(t){return{original:t,string:this.render(t)}}.bind(this)))},s.prototype.getItemValue=function(t){return t},s.prototype.render=function(t,e){if(e)return e;for(var n=t.original?this.getItemValue(t.original):this.getItemValue(t),i=this.normalize(n),r=i.lastIndexOf(this.query);r>-1;){var o=r+this.query.length;n=n.slice(0,r)+""+n.slice(r,o)+""+n.slice(o),r=i.slice(0,r).lastIndexOf(this.query)}return n},s.prototype.renderError=function(t){this.list.drawError(t)},t.exports=s},SX8C:function(t,e,n){"use strict";var i=function(t){return this.component=t,this.items=[],this.active=0,this.wrapper=document.createElement("div"),this.wrapper.className="suggestions-wrapper",this.element=document.createElement("ul"),this.element.className="suggestions",this.wrapper.appendChild(this.element),this.selectingListItem=!1,t.el.parentNode.insertBefore(this.wrapper,t.el.nextSibling),this};i.prototype.show=function(){this.element.style.display="block"},i.prototype.hide=function(){this.element.style.display="none"},i.prototype.add=function(t){this.items.push(t)},i.prototype.clear=function(){this.items=[],this.active=0},i.prototype.isEmpty=function(){return!this.items.length},i.prototype.isVisible=function(){return"block"===this.element.style.display},i.prototype.draw=function(){if(this.element.innerHTML="",0!==this.items.length){for(var t=0;t0&&(this.send(this.eventQueue),this.eventQueue=new Array),this.timer&&clearTimeout(this.timer),this.flushInterval&&(this.timer=setTimeout(this.flush.bind(this),this.flushInterval))},push:function(t,e){this.eventQueue.push(t),(this.eventQueue.length>=this.maxQueueSize||e)&&this.flush()},remove:function(){this.flush()}},t.exports=r},YI60:function(t,e,n){"use strict";var i=n("aqBw"),r={};function o(t,e){return Object.prototype.hasOwnProperty.call(t,e)}t.exports=function(t){if(r[t])return r[t];var e=t.split("."),n=e[0],s=e[1];if(!s)throw new Error("Invalid token");var a=function(t){try{return JSON.parse(i.decode(t))}catch(e){throw new Error("Invalid token")}}(s),u={usage:n,user:a.u};return o(a,"a")&&(u.authorization=a.a),o(a,"exp")&&(u.expires=1e3*a.exp),o(a,"iat")&&(u.created=1e3*a.iat),o(a,"scopes")&&(u.scopes=a.scopes),o(a,"client")&&(u.client=a.client),o(a,"ll")&&(u.lastLogin=a.ll),o(a,"iu")&&(u.impersonator=a.iu),r[t]=u,u}},YuTi:function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),t.webpackPolyfill=1),t}},aqBw:function(t,e,n){(function(t,i){var r;!function(o){var s=e,a=(t&&t.exports,"object"==typeof i&&i);a.global!==a&&a.window;var u=function(t){this.message=t};(u.prototype=new Error).name="InvalidCharacterError";var c=function(t){throw new u(t)},l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",h=/[\t\n\f\r ]/g,p={encode:function(t){t=String(t),/[^\0-\xFF]/.test(t)&&c("The string to be encoded contains characters outside of the Latin1 range.");for(var e,n,i,r,o=t.length%3,s="",a=-1,u=t.length-o;++a>18&63)+l.charAt(r>>12&63)+l.charAt(r>>6&63)+l.charAt(63&r);return 2==o?(e=t.charCodeAt(a)<<8,n=t.charCodeAt(++a),s+=l.charAt((r=e+n)>>10)+l.charAt(r>>4&63)+l.charAt(r<<2&63)+"="):1==o&&(r=t.charCodeAt(a),s+=l.charAt(r>>2)+l.charAt(r<<4&63)+"=="),s},decode:function(t){var e=(t=String(t).replace(h,"")).length;e%4==0&&(e=(t=t.replace(/==?$/,"")).length),(e%4==1||/[^+a-zA-Z0-9/]/.test(t))&&c("Invalid character: the string to be decoded is not correctly encoded.");for(var n,i,r=0,o="",s=-1;++s>(-2*r&6)));return o},version:"0.1.0"};void 0===(r=function(){return p}.call(e,n,e,t))||(t.exports=r)}()}).call(this,n("YuTi")(t),n("yLpj"))},baNz:function(t,e,n){"use strict";n("E9XD"),t.exports=function(t,e){var n=function(t,n){return-1!==e.indexOf(t)&&void 0!==n};return"function"==typeof e&&(n=e),Object.keys(t).filter((function(e){return n(e,t[e])})).reduce((function(e,n){return e[n]=t[n],e}),{})}},cRm7:function(t,e,n){"use strict";var i=n("AxvH");function r(t,e){this.request=t,this.headers=e.headers,this.rawBody=e.body,this.statusCode=e.statusCode;try{this.body=JSON.parse(e.body||"{}")}catch(n){this.body=e.body}this.links=i(this.headers.link)}r.prototype.hasNextPage=function(){return!!this.links.next},r.prototype.nextPage=function(){return this.hasNextPage()?this.request._extend({path:this.links.next.url}):null},t.exports=r},cryX:function(t,e,n){"use strict";t.exports=function(t){var e={};return t?(t.trim().split(/[\r|\n]+/).forEach((function(t){var n=function(t){var e=t.indexOf(":");return{name:t.substring(0,e).trim().toLowerCase(),value:t.substring(e+1).trim()}}(t);e[n.name]=n.value})),e):e}},d0rS:function(t,e,n){"use strict";function i(t){return Array.isArray(t)?t.map(encodeURIComponent).join(","):encodeURIComponent(String(t))}function r(t,e,n){if(!1===n||null===n)return t;var r=/\?/.test(t)?"&":"?",o=encodeURIComponent(e);return void 0!==n&&""!==n&&!0!==n&&(o+="="+i(n)),""+t+r+o}t.exports={appendQueryObject:function(t,e){if(!e)return t;var n=t;return Object.keys(e).forEach((function(t){var i=e[t];void 0!==i&&(Array.isArray(i)&&(i=i.filter((function(t){return null!=t})).join(",")),n=r(n,t,i))})),n},appendQueryParam:r,prependOrigin:function(t,e){if(!e)return t;if("http"===t.slice(0,4))return t;var n="/"===t[0]?"":"/";return""+e.replace(/\/$/,"")+n+t},interpolateRouteParams:function(t,e){return e?t.replace(/\/:([a-zA-Z0-9]+)/g,(function(t,n){var r=e[n];if(void 0===r)throw new Error("Unspecified route parameter "+n);return"/"+i(r)})):t}}},eFQn:function(t,e,n){"use strict";var i=n("Smn/");t.exports=function(t){return i(t,(function(t,e){return"boolean"==typeof e?JSON.stringify(e):e}))}},iFvi:function(t,e,n){"use strict";n("E9XD");var i=n("Bi8L"),r=n("9/5/"),o=n("U6jy"),s=n("+qE3").EventEmitter,a=n("SsYf"),u=n("0KjW"),c=n("LFDd"),l=n("WpKc"),h=n("/5w7"),p=n("5K5J"),f=0,d=1,g=2;function m(t){this._eventEmitter=new s,this.options=o({},this.options,t),this.inputString="",this.fresh=!0,this.lastSelected=null}m.prototype={options:{zoom:16,flyTo:!0,trackProximity:!0,minLength:2,reverseGeocode:!1,limit:5,origin:"https://api.mapbox.com",enableEventLogging:!0,marker:!0,mapboxgl:null,collapsed:!1,clearAndBlurOnEsc:!1,clearOnBlur:!1,getItemValue:function(t){return t.place_name},render:function(t){var e=t.place_name.split(",");return'
'+e[0]+'
'+e.splice(1,e.length).join(",")+"
"}},addTo:function(t){function e(t,e){if(!document.body.contains(e))throw new Error("Element provided to #addTo() exists, but is not in the DOM");var n=t.onAdd();e.appendChild(n)}if(t._controlContainer)t.addControl(this);else if(t instanceof HTMLElement)e(this,t);else{if("string"!=typeof t)throw new Error("Error: addTo must be a mapbox-gl-js map, an html element, or a CSS selector query for a single html element");var n=document.querySelectorAll(t);if(0===n.length)throw new Error("Element ",t,"not found.");if(n.length>1)throw new Error("Geocoder can only be added to a single html element");e(this,n[0])}},onAdd:function(t){if(t&&"string"!=typeof t&&(this._map=t),this.setLanguage(),this.options.localGeocoderOnly||(this.geocoderService=c(u({accessToken:this.options.accessToken,origin:this.options.origin}))),this.options.localGeocoderOnly&&!this.options.localGeocoder)throw new Error("A localGeocoder function must be specified to use localGeocoderOnly mode");this.eventManager=new l(this.options),this._onChange=this._onChange.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPaste=this._onPaste.bind(this),this._onBlur=this._onBlur.bind(this),this._showButton=this._showButton.bind(this),this._hideButton=this._hideButton.bind(this),this._onQueryResult=this._onQueryResult.bind(this),this.clear=this.clear.bind(this),this._updateProximity=this._updateProximity.bind(this),this._collapse=this._collapse.bind(this),this._unCollapse=this._unCollapse.bind(this),this._clear=this._clear.bind(this),this._clearOnBlur=this._clearOnBlur.bind(this);var e=this.container=document.createElement("div");e.className="mapboxgl-ctrl-geocoder mapboxgl-ctrl";var n=this.createIcon("search",'');this._inputEl=document.createElement("input"),this._inputEl.type="text",this._inputEl.className="mapboxgl-ctrl-geocoder--input",this.setPlaceholder(),this.options.collapsed&&(this._collapse(),this.container.addEventListener("mouseenter",this._unCollapse),this.container.addEventListener("mouseleave",this._collapse),this._inputEl.addEventListener("focus",this._unCollapse)),(this.options.collapsed||this.options.clearOnBlur)&&this._inputEl.addEventListener("blur",this._onBlur),this._inputEl.addEventListener("keydown",r(this._onKeyDown,200)),this._inputEl.addEventListener("paste",this._onPaste),this._inputEl.addEventListener("change",this._onChange),this.container.addEventListener("mouseenter",this._showButton),this.container.addEventListener("mouseleave",this._hideButton),this._inputEl.addEventListener("keyup",function(t){this.eventManager.keyevent(t,this)}.bind(this));var o=document.createElement("div");o.classList.add("mapboxgl-ctrl-geocoder--pin-right"),this._clearEl=document.createElement("button"),this._clearEl.setAttribute("aria-label","Clear"),this._clearEl.addEventListener("click",this.clear),this._clearEl.className="mapboxgl-ctrl-geocoder--button";var s=this.createIcon("close",'');return this._clearEl.appendChild(s),this._loadingEl=this.createIcon("loading",''),o.appendChild(this._clearEl),o.appendChild(this._loadingEl),e.appendChild(n),e.appendChild(this._inputEl),e.appendChild(o),this._typeahead=new i(this._inputEl,[],{filter:!1,minLength:this.options.minLength,limit:this.options.limit}),this.setRenderFunction(this.options.render),this._typeahead.getItemValue=this.options.getItemValue,this.mapMarker=null,this._handleMarker=this._handleMarker.bind(this),this._map&&(this.options.trackProximity&&(this._updateProximity(),this._map.on("moveend",this._updateProximity)),this._mapboxgl=this.options.mapboxgl,!this._mapboxgl&&this.options.marker&&(console.error("No mapboxgl detected in options. Map markers are disabled. Please set options.mapboxgl."),this.options.marker=!1)),e},createIcon:function(t,e){var n=document.createElementNS("http://www.w3.org/2000/svg","svg");if(n.setAttribute("class","mapboxgl-ctrl-geocoder--icon mapboxgl-ctrl-geocoder--icon-"+t),n.setAttribute("viewBox","0 0 18 18"),n.setAttribute("xml:space","preserve"),n.setAttribute("width",18),n.setAttribute("height",18),"innerHTML"in n)n.innerHTML=e;else{var i=document.createElement("div");i.innerHTML=""+e.valueOf().toString()+"";var r=i.firstChild.firstChild;n.appendChild(r)}return n},onRemove:function(){return this.container.parentNode.removeChild(this.container),this.options.trackProximity&&this._map&&this._map.off("moveend",this._updateProximity),this._removeMarker(),this._map=null,this},_onPaste:function(t){var e=(t.clipboardData||window.clipboardData).getData("text");e.length>=this.options.minLength&&this._geocode(e)},_onKeyDown:function(t){var e=27,n=9;if(t.keyCode===e&&this.options.clearAndBlurOnEsc)return this._clear(t),this._inputEl.blur();var i=t.target&&t.target.shadowRoot?t.target.shadowRoot.activeElement:t.target;if(!(i?i.value:""))return this.fresh=!0,t.keyCode!==n&&this.clear(t),this._clearEl.style.display="none";t.metaKey||-1!==[n,e,37,39,13,38,40].indexOf(t.keyCode)||i.value.length>=this.options.minLength&&this._geocode(i.value)},_showButton:function(){this._typeahead.selected&&(this._clearEl.style.display="block")},_hideButton:function(){this._typeahead.selected&&(this._clearEl.style.display="none")},_onBlur:function(t){this.options.clearOnBlur&&this._clearOnBlur(t),this.options.collapsed&&this._collapse()},_onChange:function(){var t=this._typeahead.selected;if(t&&JSON.stringify(t)!==this.lastSelected){var e;if(this._clearEl.style.display="none",this.options.flyTo)if(t.properties&&a[t.properties.short_code])e=o({},this.options.flyTo),this._map&&this._map.fitBounds(a[t.properties.short_code].bbox,e);else if(t.bbox){var n=t.bbox;e=o({},this.options.flyTo),this._map&&this._map.fitBounds([[n[0],n[1]],[n[2],n[3]]],e)}else{var i={zoom:this.options.zoom};e=o({},i,this.options.flyTo),t.center?e.center=t.center:t.geometry&&t.geometry.type&&"Point"===t.geometry.type&&t.geometry.coordinates&&(e.center=t.geometry.coordinates),this._map&&this._map.flyTo(e)}this.options.marker&&this._mapboxgl&&this._handleMarker(t),this._inputEl.focus(),this._inputEl.scrollLeft=0,this._inputEl.setSelectionRange(0,0),this.lastSelected=JSON.stringify(t),this._eventEmitter.emit("result",{result:t}),this.eventManager.select(t,this)}},_requestType:function(t,e){return t.localGeocoderOnly?d:t.reverseGeocode&&/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/.test(e)?g:f},_setupConfig:function(t,e){var n=/[\s,]+/,i=this,r=["bbox","limit","proximity","countries","types","language","reverseMode","mode","autocomplete","fuzzyMatch","routing","worldview"].reduce((function(t,e){if(void 0===i.options[e]||null===i.options[e])return t;["countries","types","language"].indexOf(e)>-1?t[e]=i.options[e].split(n):t[e]=i.options[e];var r="number"==typeof i.options[e].longitude&&"number"==typeof i.options[e].latitude;if("proximity"===e&&r){var o=i.options[e].longitude,s=i.options[e].latitude;t[e]=[o,s]}return t}),{});switch(t){case g:var s=e.split(n).map((function(t){return parseFloat(t,10)})).reverse();!r.types||r.types[0],r=o(r,{query:s,limit:1}),["proximity","autocomplete","fuzzyMatch","bbox"].forEach((function(t){t in r&&delete r[t]}));break;case f:/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)*[ ]*$/.test(e)&&(e=e.replace(/,/g," ")),r=o(r,{query:e})}return r},_geocode:function(t){this.inputString=t,this._loadingEl.style.display="block",this._eventEmitter.emit("loading",{query:t});var e,n=this._requestType(this.options,t),i=this._setupConfig(n,t);switch(n){case d:e=Promise.resolve();break;case f:e=this.geocoderService.forwardGeocode(i).send();break;case g:e=this.geocoderService.reverseGeocode(i).send()}var r=this.options.localGeocoder&&this.options.localGeocoder(t)||[],o=[],s=null;return e.catch(function(t){s=t}.bind(this)).then(function(e){this._loadingEl.style.display="none";var n={};return e?"200"==e.statusCode&&((n=e.body).request=e.request,n.headers=e.headers):n={type:"FeatureCollection",features:[]},n.config=i,this.fresh&&(this.eventManager.start(this),this.fresh=!1),n.features=n.features?r.concat(n.features):r,this.options.externalGeocoder?(o=this.options.externalGeocoder(t,n.features)||[]).then((function(t){return n.features=n.features?t.concat(n.features):t,n}),(function(){return n})):n}.bind(this)).then(function(t){if(s)throw s;this.options.filter&&t.features.length&&(t.features=t.features.filter(this.options.filter)),t.features.length?(this._clearEl.style.display="block",this._eventEmitter.emit("results",t),this._typeahead.update(t.features)):(this._clearEl.style.display="none",this._typeahead.selected=null,this._renderNoResults(),this._eventEmitter.emit("results",t))}.bind(this)).catch(function(t){this._loadingEl.style.display="none",r.length&&this.options.localGeocoder||o.length&&this.options.externalGeocoder?(this._clearEl.style.display="block",this._typeahead.update(r)):(this._clearEl.style.display="none",this._typeahead.selected=null,this._renderError()),this._eventEmitter.emit("results",{features:r}),this._eventEmitter.emit("error",{error:t})}.bind(this)),e},_clear:function(t){t&&t.preventDefault(),this._inputEl.value="",this._typeahead.selected=null,this._typeahead.clear(),this._onChange(),this._clearEl.style.display="none",this._removeMarker(),this.lastSelected=null,this._eventEmitter.emit("clear"),this.fresh=!0},clear:function(t){this._clear(t),this._inputEl.focus()},_clearOnBlur:function(t){t.relatedTarget&&this._clear(t)},_onQueryResult:function(t){var e=t.body;if(e.features.length){var n=e.features[0];this._typeahead.selected=n,this._inputEl.value=n.place_name,this._onChange()}},_updateProximity:function(){if(this._map)if(this._map.getZoom()>9){var t=this._map.getCenter().wrap();this.setProximity({longitude:t.lng,latitude:t.lat})}else this.setProximity(null)},_collapse:function(){this._inputEl.value||this._inputEl===document.activeElement||this.container.classList.add("mapboxgl-ctrl-geocoder--collapsed")},_unCollapse:function(){this.container.classList.remove("mapboxgl-ctrl-geocoder--collapsed")},query:function(t){return this._geocode(t).then(this._onQueryResult),this},_renderError:function(){this._renderMessage("
There was an error reaching the server
")},_renderNoResults:function(){this._renderMessage("
No results found
")},_renderMessage:function(t){this._typeahead.update([]),this._typeahead.selected=null,this._typeahead.clear(),this._typeahead.renderError(t)},_getPlaceholderText:function(){if(this.options.placeholder)return this.options.placeholder;if(this.options.language){var t=this.options.language.split(",")[0],e=p.language(t),n=h.placeholder[e];if(n)return n}return"Search"},setInput:function(t){return this._inputEl.value=t,this._typeahead.selected=null,this._typeahead.clear(),t.length>=this.options.minLength&&this._geocode(t),this},setProximity:function(t){return this.options.proximity=t,this},getProximity:function(){return this.options.proximity},setRenderFunction:function(t){return t&&"function"==typeof t&&(this._typeahead.render=t),this},getRenderFunction:function(){return this._typeahead.render},setLanguage:function(t){var e=navigator.language||navigator.userLanguage||navigator.browserLanguage;return this.options.language=t||this.options.language||e,this},getLanguage:function(){return this.options.language},getZoom:function(){return this.options.zoom},setZoom:function(t){return this.options.zoom=t,this},getFlyTo:function(){return this.options.flyTo},setFlyTo:function(t){return this.options.flyTo=t,this},getPlaceholder:function(){return this.options.placeholder},setPlaceholder:function(t){return this.placeholder=t||this._getPlaceholderText(),this._inputEl.placeholder=this.placeholder,this._inputEl.setAttribute("aria-label",this.placeholder),this},getBbox:function(){return this.options.bbox},setBbox:function(t){return this.options.bbox=t,this},getCountries:function(){return this.options.countries},setCountries:function(t){return this.options.countries=t,this},getTypes:function(){return this.options.types},setTypes:function(t){return this.options.types=t,this},getMinLength:function(){return this.options.minLength},setMinLength:function(t){return this.options.minLength=t,this._typeahead&&(this._typeahead.options.minLength=t),this},getLimit:function(){return this.options.limit},setLimit:function(t){return this.options.limit=t,this._typeahead&&(this._typeahead.options.limit=t),this},getFilter:function(){return this.options.filter},setFilter:function(t){return this.options.filter=t,this},setOrigin:function(t){return this.options.origin=t,this.geocoderService=c(u({accessToken:this.options.accessToken,origin:this.options.origin})),this},getOrigin:function(){return this.options.origin},setAutocomplete:function(t){return this.options.autocomplete=t,this},getAutocomplete:function(){return this.options.autocomplete},setFuzzyMatch:function(t){return this.options.fuzzyMatch=t,this},getFuzzyMatch:function(){return this.options.fuzzyMatch},setRouting:function(t){return this.options.routing=t,this},getRouting:function(){return this.options.routing},setWorldview:function(t){return this.options.worldview=t,this},getWorldview:function(){return this.options.worldview},_handleMarker:function(t){if(this._map){this._removeMarker();var e=o({},{color:"#4668F2"},this.options.marker);return this.mapMarker=new this._mapboxgl.Marker(e),t.center?this.mapMarker.setLngLat(t.center).addTo(this._map):t.geometry&&t.geometry.type&&"Point"===t.geometry.type&&t.geometry.coordinates&&this.mapMarker.setLngLat(t.geometry.coordinates).addTo(this._map),this}},_removeMarker:function(){this.mapMarker&&(this.mapMarker.remove(),this.mapMarker=null)},on:function(t,e){return this._eventEmitter.on(t,e),this},off:function(t,e){return this._eventEmitter.removeListener(t,e),this.eventManager.remove(),this}},t.exports=m},jLWS:function(t,e,n){"use strict";t.exports={API_ORIGIN:"https://api.mapbox.com",EVENT_PROGRESS_DOWNLOAD:"downloadProgress",EVENT_PROGRESS_UPLOAD:"uploadProgress",EVENT_ERROR:"error",EVENT_RESPONSE:"response",ERROR_HTTP:"HttpError",ERROR_REQUEST_ABORTED:"RequestAbortedError"}},ncV3:function(t,e,n){"use strict";var i=n("YI60"),r=n("2+Hy"),o=n("jLWS");function s(t){if(!t||!t.accessToken)throw new Error("Cannot create a client without an access token");i(t.accessToken),this.accessToken=t.accessToken,this.origin=t.origin||o.API_ORIGIN}s.prototype.createRequest=function(t){return new r(this,t)},t.exports=s},oGbY:function(t,e,n){"use strict";var i=n("cRm7"),r=n("73jG"),o=n("jLWS"),s=n("cryX"),a={};function u(t){var e=t.total,n=t.loaded;return{total:e,transferred:n,percent:100*n/e}}function c(t,e){return new Promise((function(n,i){e.onprogress=function(e){t.emitter.emit(o.EVENT_PROGRESS_DOWNLOAD,u(e))};var s=t.file;s&&(e.upload.onprogress=function(e){t.emitter.emit(o.EVENT_PROGRESS_UPLOAD,u(e))}),e.onerror=function(t){i(t)},e.onabort=function(){var e=new r({request:t,type:o.ERROR_REQUEST_ABORTED});i(e)},e.onload=function(){if(delete a[t.id],e.status<200||e.status>=400){var o=new r({request:t,body:e.response,statusCode:e.status});i(o)}else n(e)};var c=t.body;"string"==typeof c?e.send(c):c?e.send(JSON.stringify(c)):s?e.send(s):e.send(),a[t.id]=e})).then((function(e){return function(t,e){return new i(t,{body:e.response,headers:s(e.getAllResponseHeaders()),statusCode:e.status})}(t,e)}))}function l(t,e){var n=t.url(e),i=new window.XMLHttpRequest;return i.open(t.method,n),Object.keys(t.headers).forEach((function(e){i.setRequestHeader(e,t.headers[e])})),i}t.exports={browserAbort:function(t){var e=a[t.id];e&&(e.abort(),delete a[t.id])},sendRequestXhr:c,browserSend:function(t){return Promise.resolve().then((function(){var e=l(t,t.client.accessToken);return c(t,e)}))},createRequestXhr:l}},"pit/":function(t,e,n){"use strict";n("E9XD");var i=n("NkL+"),r=n("U6jy"),o={};function s(t){var e=Array.isArray(t);return function(n){var i,r=a(o.plainArray,n);if(r)return r;if(e&&n.length!==t.length)return"an array with "+t.length+" items";for(var s=0;st.length?e:t}))}},o.equal=function(t){return function(e){if(e!==t)return JSON.stringify(t)}},o.oneOf=function(){var t=Array.isArray(arguments[0])?arguments[0]:Array.prototype.slice.call(arguments),e=t.map((function(t){return o.equal(t)}));return o.oneOfType.apply(this,e)},o.range=function(t){var e=t[0],n=t[1];return function(t){if(a(o.number,t)||tn)return"number between "+e+" & "+n+" (inclusive)"}},o.any=function(){},o.boolean=function(t){if("boolean"!=typeof t)return"boolean"},o.number=function(t){if("number"!=typeof t)return"number"},o.plainArray=function(t){if(!Array.isArray(t))return"array"},o.plainObject=function(t){if(!i(t))return"object"},o.string=function(t){if("string"!=typeof t)return"string"},o.func=function(t){if("function"!=typeof t)return"function"},o.validate=a,o.processMessage=u,t.exports=o},piyq:function(t,e,n){"use strict";var i=Object.prototype.hasOwnProperty,r="~";function o(){}function s(t,e,n){this.fn=t,this.context=e,this.once=n||!1}function a(t,e,n,i,o){if("function"!=typeof n)throw new TypeError("The listener must be a function");var a=new s(n,i||t,o),u=r?r+e:e;return t._events[u]?t._events[u].fn?t._events[u]=[t._events[u],a]:t._events[u].push(a):(t._events[u]=a,t._eventsCount++),t}function u(t,e){0==--t._eventsCount?t._events=new o:delete t._events[e]}function c(){this._events=new o,this._eventsCount=0}Object.create&&(o.prototype=Object.create(null),(new o).__proto__||(r=!1)),c.prototype.eventNames=function(){var t,e,n=[];if(0===this._eventsCount)return n;for(e in t=this._events)i.call(t,e)&&n.push(r?e.slice(1):e);return Object.getOwnPropertySymbols?n.concat(Object.getOwnPropertySymbols(t)):n},c.prototype.listeners=function(t){var e=r?r+t:t,n=this._events[e];if(!n)return[];if(n.fn)return[n.fn];for(var i=0,o=n.length,s=new Array(o);i

AttributionControl

React component that wraps AttributionControl.

import * as React from 'react';
+  
AttributionControl
React component that wraps AttributionControl.
import * as React from 'react';
 import Map, {AttributionControl} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
     {
@@ -106,4 +106,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   >
     <AttributionControl customAttribution="Map design by me" />
   </Map>;
-}
Properties
Note that the following properties are not reactive. They are only used when the component first mounts.
compact: boolean | undefined
  • If true , force a compact attribution that shows the full attribution on mouse hover.
  • If false , force the full attribution control.
  • If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide.
Note that your attribution must adhere to Mapbox's guidelines.
customAttribution: string | string[]
String or strings to show in addition to any other attributions.
position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
Default: 'bottom-right'
Placement of the control relative to the map.
style: CSSProperties
CSS style override that applies to the control's container.
Source
attribution-control.ts

\ No newline at end of file
+}

Properties

Note that the following properties are not reactive. They are only used when the component first mounts.

compact: boolean | undefined

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

Note that your attribution must adhere to Mapbox's guidelines.

customAttribution: string | string[]

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

position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'bottom-right'

Placement of the control relative to the map.

style: CSSProperties

CSS style override that applies to the control's container.

Source

attribution-control.ts

\ 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 1a488343..ad9e9f8c 100644 --- a/docs/api-reference/fullscreen-control/index.html +++ b/docs/api-reference/fullscreen-control/index.html @@ -84,18 +84,18 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

FullscreenControl

React component that wraps FullscreenControl.

import * as React from 'react';
+  
FullscreenControl
React component that wraps FullscreenControl.
import * as React from 'react';
 import Map, {FullscreenControl} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
     <FullscreenControl />
   </Map>;
-}
Properties
Note that the following properties are not reactive. They are only used when the component first mounts.
containerId: string
Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.
position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
Default: 'top-right'
Placement of the control relative to the map.
style: CSSProperties
CSS style override that applies to the control's container.
Source
fullscreen-control.ts

\ No newline at end of file
+}

Properties

Note that the following properties are not reactive. They are only used when the component first mounts.

containerId: string

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

position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'top-right'

Placement of the control relative to the map.

style: CSSProperties

CSS style override that applies to the control's container.

Source

fullscreen-control.ts

\ 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 c2332869..ea8d2913 100644 --- a/docs/api-reference/geolocate-control/index.html +++ b/docs/api-reference/geolocate-control/index.html @@ -88,15 +88,15 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

GeolocateControl

React component that wraps GeolocateControl.

import * as React from 'react';
+  
GeolocateControl
React component that wraps GeolocateControl.
import * as React from 'react';
 import Map, {GeolocateControl} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
@@ -116,4 +116,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   return <Map><GeolocateControl ref={geolocateControlRef} /></Map>;
 }
trigger(): boolean
Trigger a geolocation event.
Returns: true if successful.
Properties
Note that the following properties are not reactive. They are only used when the component first mounts.
Tracking options
positionOptions: PositionOptions
A Geolocation API PositionOptions object
trackUserLocation: boolean
Default: false
If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. 
Render options
fitBoundsOptions: FitBoundsOptions
Default: {maxZoom: 15}
A (fitBounds) options object to use when the map is panned and zoomed to the user's location.
position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
Default: 'top-right'
Placement of the control relative to the map.
style: CSSProperties
CSS style override that applies to the control's container.
showAccuracyCircle: boolean
Default: true
Draw 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.
 This only has effect if showUserLocation is true. 
showUserHeading: boolean
Default: false
If true, an arrow will be drawn next to the user location dot indicating the device's heading.
-This only has affect when trackUserLocation is true.
showUserLocation: boolean
Default: true
Show a dot on the map at the user's location. Set to false to disable.
Callbacks
onGeolocate: (evt: GeolocateResultEvent) => void
Called on each Geolocation API position update that returned as success.
onError: (evt: GeolocateErrorEvent) => void
Called on each Geolocation API position update that returned as an error.
onOutOfMaxBounds: (evt: GeolocateResultEvent) => void
Called on each Geolocation API position update that returned as success but user position is out of map maxBounds.
onTrackUserLocationStart: (evt: GeolocateEvent) => void
Called when the GeolocateControl changes to the active lock state.
onTrackUserLocationEnd: (evt: GeolocateEvent) => void
Called when the GeolocateControl changes to the background state.
Source
geolocate-control.ts

\ No newline at end of file
+This only has affect when trackUserLocation is true.
showUserLocation: boolean
Default: true
Show a dot on the map at the user's location. Set to false to disable.
Callbacks
onGeolocate: (evt: GeolocateResultEvent) => void
Called on each Geolocation API position update that returned as success.
onError: (evt: GeolocateErrorEvent) => void
Called on each Geolocation API position update that returned as an error.
onOutOfMaxBounds: (evt: GeolocateResultEvent) => void
Called on each Geolocation API position update that returned as success but user position is out of map maxBounds.
onTrackUserLocationStart: (evt: GeolocateEvent) => void
Called when the GeolocateControl changes to the active lock state.
onTrackUserLocationEnd: (evt: GeolocateEvent) => void
Called when the GeolocateControl changes to the background state.
Source
geolocate-control.ts
\ No newline at end of file diff --git a/docs/api-reference/layer/index.html b/docs/api-reference/layer/index.html index 1a9fa66e..ee3d4933 100644 --- a/docs/api-reference/layer/index.html +++ b/docs/api-reference/layer/index.html @@ -88,29 +88,29 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Layer

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

import * as React from 'react';
+  
Layer
This component allows apps to create a map layer using React.
import * as React from 'react';
 import Map, {Layer} from 'react-map-gl';
 
 const parkLayer = {
-  id: 'landuse_park',
-  type: 'fill',
-  source: 'mapbox',
-  'source-layer': 'landuse',
-  filter: ['==', 'class', 'park'],
-  paint: {
-    'fill-color': '#4E3FC8'
+  id: 'landuse_park',
+  type: 'fill',
+  source: 'mapbox',
+  'source-layer': 'landuse',
+  filter: ['==', 'class', 'park'],
+  paint: {
+    'fill-color': '#4E3FC8'
   }
 };
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -122.4,
-      latitude: 37.8,
-      zoom: 14
+      longitude: -122.4,
+      latitude: 37.8,
+      zoom: 14
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
     <Layer {...parkLayer} />
   </Map>;
-}
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.ts

\ 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.ts

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

MapProvider

A Context.Provider that facilitates map operations outside of the component that directly renders a Map.

The component should wrap all nodes in which you may want to access the maps:

import {MapProvider} from 'react-map-gl';
+  
MapProvider
A Context.Provider that facilitates map operations outside of the component that directly renders a Map.
The component should wrap all nodes in which you may want to access the maps:
import {MapProvider} from 'react-map-gl';
 
 function Root() {
   return (
@@ -94,4 +94,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       }
     </MapProvider>
   );
-}
See useMap for more information.
Source
use-map.tsx

\ No newline at end of file
+}

See useMap for more information.

Source

use-map.tsx

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

default (Map)

React component that wraps Map. This is also the default export from react-map-gl.

import * as React from 'react';
+  
default (Map)
React component that wraps Map. This is also the default export from react-map-gl.
import * as React from 'react';
 import Map from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
-    style={{width: '100vw', height: '100vh'}}
+    style={{width: '100vw', height: '100vh'}}
     mapStyle="mapbox://styles/mapbox/streets-v9"
     mapboxAccessToken="MY_ACCESS_TOKEN"
   />;
@@ -141,4 +141,4 @@ e.g. htt
 The locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs.
 The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).
localFontFamily: string
Default: null
Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily.
localIdeographFontFamily: string
Default: 'sans-serif'
Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See example.
logoPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
Default: 'bottom-left'
A string representing the position of the Mapbox wordmark on the map.
maxParallelImageRequests: number
Default: 16
The maximum number of images (raster tiles, sprites, icons) to load in parallel.
maxTileCacheSize: number
Default: null
The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
optimizeForTerrain: boolean
Default: true
If true, map will prioritize rendering for performance by reordering layers.
 If false, layers will always be drawn in the specified order.
pitchWithRotate: boolean
Default: true
If false, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
preserveDrawingBuffer: boolean
Default: false
If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization.
refreshExpiredTiles: boolean
Default: true
If false, the map won't attempt to re-request tiles once they expire per their HTTP cacheControl/expires headers.
reuseMaps: boolean
Default: false
By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed.
If reuseMaps is set to true, when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid new billable events triggered by initialization.
Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and initialViewState of the new component are respected.
RTLTextPlugin: string
Default: 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
Sets the map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.
Setting this prop is the equivelant of calling mapboxgl.setRTLTextPlugin with lazy: true.
testMode: boolean
Default: false
Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests.
trackResize: boolean
Default: true
If true, the map will automatically resize when the browser window resizes.
transformRequest: TransformRequestFunction
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.
workerClass: object
Default: null
Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
-Takes precedence over workerUrl.
workerCount: number
Default: 2
The number of web workers instantiated on a page with mapbox-gl maps.
workerUrl: string
Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
Source
map.tsx

\ No newline at end of file
+Takes precedence over workerUrl.
workerCount: number
Default: 2
The number of web workers instantiated on a page with mapbox-gl maps.
workerUrl: string
Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
Source
map.tsx
\ No newline at end of file diff --git a/docs/api-reference/marker/index.html b/docs/api-reference/marker/index.html index 014c1a23..733995ee 100644 --- a/docs/api-reference/marker/index.html +++ b/docs/api-reference/marker/index.html @@ -92,15 +92,15 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Marker

React component that wraps Marker.

import * as React from 'react';
+  
Marker
React component that wraps Marker.
import * as React from 'react';
 import Map, {Marker} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     </Marker>
   </Map>;
 }
If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.
Properties
Render options
anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
Default: 'center'
A string indicating the part of the Marker that should be positioned closest to the coordinate set via longitude and latitude.
color: string
Default: '#3FB1CE'
The color to use for the default marker if the component contains no content.
clickTolerance: number
Default: null (inherits Map's clickTolerance)
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag).
draggable: boolean
Default: false
If true, the marker is able to be dragged to a new position on the map.
latitude: number
Required. The latitude of the anchor location.
longitude: number
Required. The longitude of the anchor location.
offset: PointLike
Default: null
The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.
pitchAlignment: 'map' | 'viewport' | 'auto'
Default: 'auto'
  • map aligns the Marker to the plane of the map.
  • viewport aligns the Marker to the plane of the viewport.
  • auto automatically matches the value of rotationAlignment.
rotation: number
Default: 0
The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise.
rotationAlignment: 'map' | 'viewport' | 'auto'
Default: 'auto'
  • map aligns the Marker's rotation relative to the map, maintaining a bearing as the map rotates.
  • viewport aligns the Marker's rotation relative to the viewport, agnostic to map rotations.
  • auto is equivalent to viewport.
scale: number
Default: 1
The scale to use for the default marker if the component contains no content.
-The default scale (1) corresponds to a height of 41px and a width of 27px.
This prop is not reactive (only used when the marker is mounted).
style: CSSProperties
CSS style override that applies to the marker's container.
Callbacks
onClick: (evt: MapEvent) => void
Called when the marker is clicked on.
onDragStart: (evt: MarkerDragEvent) => void
Called when dragging starts, if draggable is true.
onDrag: (evt: MarkerDragEvent) => void
Called while dragging, if draggable is true.
onDragEnd: (evt: MarkerDragEvent) => void
Called when dragging ends, if draggable is true.
Source
marker.ts

\ No newline at end of file
+The default scale (1) corresponds to a height of 41px and a width of 27px.
This prop is not reactive (only used when the marker is mounted).
style: CSSProperties
CSS style override that applies to the marker's container.
Callbacks
onClick: (evt: MapEvent) => void
Called when the marker is clicked on.
onDragStart: (evt: MarkerDragEvent) => void
Called when dragging starts, if draggable is true.
onDrag: (evt: MarkerDragEvent) => void
Called while dragging, if draggable is true.
onDragEnd: (evt: MarkerDragEvent) => void
Called when dragging ends, if draggable is true.
Source
marker.ts
\ 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 833a055f..dee9cab6 100644 --- a/docs/api-reference/navigation-control/index.html +++ b/docs/api-reference/navigation-control/index.html @@ -84,18 +84,18 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

NavigationControl

React component that wraps NavigationControl.

import * as React from 'react';
+  
NavigationControl
React component that wraps NavigationControl.
import * as React from 'react';
 import Map, {NavigationControl} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
     <NavigationControl />
   </Map>;
-}
Properties
Note that the following properties are not reactive. They are only used when the component first mounts.
position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
Default: 'top-right'
Placement of the control relative to the map.
style: CSSProperties
CSS style override that applies to the control's container.
showCompass: boolean
Default: true
If true the compass button is included.
showZoom: boolean
Default: true
If true the zoom-in and zoom-out buttons are included.
visualizePitch: boolean
Default: false
If true the pitch is visualized by rotating X-axis of compass.
Source
navigation-control.ts

\ No newline at end of file
+}

Properties

Note that the following properties are not reactive. They are only used when the component first mounts.

position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'top-right'

Placement of the control relative to the map.

style: CSSProperties

CSS style override that applies to the control's container.

showCompass: boolean

Default: true

If true the compass button is included.

showZoom: boolean

Default: true

If true the zoom-in and zoom-out buttons are included.

visualizePitch: boolean

Default: false

If true the pitch is visualized by rotating X-axis of compass.

Source

navigation-control.ts

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

Popup

Properties

React component that wraps Popup.

import * as React from 'react';
+  
Popup
Properties
React component that wraps Popup.
import * as React from 'react';
 import Map, {Popup} from 'react-map-gl';
 
 function App() {
@@ -100,9 +100,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
@@ -114,4 +114,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       </Popup>)}
   </Map>;
 }
Render options
anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined
A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude.
-If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.
className: string
Space-separated CSS class names to add to popup container.
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 close when the map is clicked.
closeOnMove: boolean
Default: false
If true, the popup will closed when the map moves.
focusAfterOpen: boolean
Default: true
If true, the popup will try to focus the first focusable element inside the popup.
offset: number | PointLike | Record\<string, PointLike>
Default: null
A pixel offset applied to the popup's location specified as:
  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifing an offset for each anchor position.
Negative offsets indicate left and up.
maxWidth: string
Default: 240px
A string that sets the CSS property of the popup's maximum width.
style: CSSProperties
CSS style override that applies to the popup's container.
Callbacks
onOpen: (evt: PopupEvent) => void
Called when the popup is opened manually or programatically.
onClose: (evt: PopupEvent) => void
Called when the popup is closed manually or programatically.
Source
popup.ts

\ No newline at end of file
+If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.
className: string
Space-separated CSS class names to add to popup container.
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 close when the map is clicked.
closeOnMove: boolean
Default: false
If true, the popup will closed when the map moves.
focusAfterOpen: boolean
Default: true
If true, the popup will try to focus the first focusable element inside the popup.
offset: number | PointLike | Record\<string, PointLike>
Default: null
A pixel offset applied to the popup's location specified as:
  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifing an offset for each anchor position.
Negative offsets indicate left and up.
maxWidth: string
Default: 240px
A string that sets the CSS property of the popup's maximum width.
style: CSSProperties
CSS style override that applies to the popup's container.
Callbacks
onOpen: (evt: PopupEvent) => void
Called when the popup is opened.
onClose: (evt: PopupEvent) => void
Called when the popup is closed by the user clicking on the close button or outside (if closeOnClick: true).
Source
popup.ts
\ 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 86f1f13b..b517e941 100644 --- a/docs/api-reference/scale-control/index.html +++ b/docs/api-reference/scale-control/index.html @@ -84,18 +84,18 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

ScaleControl

React component that wraps ScaleControl.

import * as React from 'react';
+  
ScaleControl
React component that wraps ScaleControl.
import * as React from 'react';
 import Map, {ScaleControl} from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
     <ScaleControl />
   </Map>;
-}
Properties
maxWidth: string
Default: 100
The maximum length of the scale control in pixels.
position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
Default: 'bottom-left'
Placement of the control relative to the map. Note that this prop is only used when the component first mounts.
style: CSSProperties
CSS style override that applies to the control's container.
unit: 'imperial' | 'metric' | 'nautical'
Default: 'metric'
Unit of the distance.
Source
scale-control.ts

\ No newline at end of file
+}

Properties

maxWidth: string

Default: 100

The maximum length of the scale control in pixels.

position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'bottom-left'

Placement of the control relative to the map. Note that this prop is only used when the component first mounts.

style: CSSProperties

CSS style override that applies to the control's container.

unit: 'imperial' | 'metric' | 'nautical'

Default: 'metric'

Unit of the distance.

Source

scale-control.ts

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

Source

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

import * as React from 'react';
+  
Source
This component allows apps to create a map source using React. It may contain Layer components as children.
import * as React from 'react';
 import Map, {Source, Layer} from 'react-map-gl';
 
 const geojson = {
-  type: 'FeatureCollection',
-  features: [
-    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
+  type: 'FeatureCollection',
+  features: [
+    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
   ]
 };
 
 const layerStyle = {
-  id: 'point',
-  type: 'circle',
-  paint: {
-    'circle-radius': 10,
-    'circle-color': '#007cbf'
+  id: 'point',
+  type: 'circle',
+  paint: {
+    'circle-radius': 10,
+    'circle-color': '#007cbf'
   }
 };
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -122.4,
-      latitude: 37.8,
-      zoom: 14
+      longitude: -122.4,
+      latitude: 37.8,
+      zoom: 14
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   >
@@ -118,4 +118,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <Layer {...layerStyle} />
     </Source>
   </Map>;
-}
Properties
The props provided to this component should be conforming to the Mapbox source specificationor CanvasSourceOptions.
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.ts

\ No newline at end of file
+}

Properties

The props provided to this component should be conforming to the Mapbox source specificationor CanvasSourceOptions.

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.ts

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

Types

The following types can be imported from react-map-gl when using TypeScript.

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

Instance ref of a Map component. See Map documentation for details.

GeolocateControlRef

Instance ref of a GeolocateControl component. See GeolocateControl documentation for details.

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

  • name (string): projection name, one of Albers ('albers'), Equal Earth ('equalEarth'), Equirectangular/Plate Carrée/WGS84 ('equirectangular'), Lambert ('lambertConformalConic'), Mercator ('mercator'), Natural Earth ('naturalEarth'), and Winkel Tripel ('winkelTripel').
  • center? ([number, number]): longitude and latitude of the projection center
  • parallels? ([number, number]): the two standard parallels of a conic projection such as Albers and Lambert.

BackgroundLayer

A JSON object that defines a background layer according to the Mapbox Style Specification.

CircleLayer

A JSON object that defines a circle layer according to the Mapbox Style Specification.

FillExtrusionLayer

A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification.

FillLayer

A JSON object that defines a fill layer according to the Mapbox Style Specification.

HeatmapLayer

A JSON object that defines a heatmap layer according to the Mapbox Style Specification.

HillshadeLayer

A JSON object that defines a hillshade layer according to the Mapbox Style Specification.

LineLayer

A JSON object that defines a line layer according to the Mapbox Style Specification.

RasterLayer

A JSON object that defines a raster layer according to the Mapbox Style Specification.

SymbolLayer

A JSON object that defines a symbol layer according to the Mapbox Style Specification.

SkyLayer

A JSON object that defines a sky layer according to the Mapbox Style Specification.

GeoJSONSourceRaw

A JSON object that defines a geojson source according to the Mapbox Style Specification.

VideoSourceRaw

A JSON object that defines a video source according to the Mapbox Style Specification.

ImageSourceRaw

A JSON object that defines a image source according to the Mapbox Style Specification.

VectorSourceRaw

A JSON object that defines a vector source according to the Mapbox Style Specification.

RasterSource

A JSON object that defines a raster source according to the Mapbox Style Specification.

RasterDemSource

A JSON object that defines a raster-dem source according to the Mapbox Style Specification.

CanvasSourceRaw

A JSON object that defines a canvas source type. See CanvasSourceOptions.

Configurations

Anchor

One of 'center', 'left', 'right', 'top', 'bottom', 'top-left', 'top-right', 'bottom-left' and 'bottom-right'.

Alignment

One of 'map', 'viewport' and 'auto'.

ControlPosition

One of 'top-right', 'top-left', 'bottom-right' and 'bottom-left'.

DragPanOptions

An object with the following fields:

  • linearity?: number - The rate at which the speed reduces after the pan ends.
  • easing?: (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function.
  • deceleration?: number - Factor used to scale the drag velocity. Default 0.
  • maxSpeed?: number - The maximum value of the drag velocity. Default 1400.

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

  • offset?: PointLike - The center of the given bounds relative to the map's center, measured in pixels.
  • padding?: PaddingOptions - The amount of padding in pixels to add to the given bounds.
  • maxZoom?: number - The maximum zoom level to allow when the map view transitions to the specified bounds.
  • animate?: boolean - When set to false, no animation happens.
  • linear?: boolean - If true, the map transitions using Map#easeTo. If false, the map transitions using Map#flyTo
  • duration?: number - Duration in milliseconds
  • maxDuration?: number - Max duration in milliseconds
  • easing?: (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state.
  • essential?: boolean - If true, then the animation is considered essential and will not be affected by prefers-reduced-motion. Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system.

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

  • around?: 'center' - If "center" is passed, map will zoom around center of map.

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

  • left: number - in pixels.
  • top: number - in pixels.
  • right: number - in pixels.
  • bottom: number - in pixels.

TransformRequestFunction

A function that takes the following arguments:

  • url: string
  • resourceType: 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image';

And returns an object with the following fields:

  • url: string - The URL to be requested.
  • credentials?: 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests.
  • headers?: { [header: string]: any } - The headers to be sent with the request.
  • method?: 'GET' | 'POST' | 'PUT'
  • collectResourceTiming?: boolean

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties.

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

A LngLatBounds object, an array of LngLatLike objects in [sw, ne] order, or an array of numbers in [west, south, east, north] order.

Point

A mapboxgl.Point object.

PointLike

A Point or an array of two numbers representing x and y screen coordinates in pixels.

MapboxGeoJSONFeature

A GeoJSON feature that also contains the following library-specific fields:

  • layer: Layer
  • source: string
  • sourceLayer: string
  • state: { [key: string]: any }

ViewState

An object with the following fields:

  • longitude: number - The longitude of the map center.
  • latitude: number - The latitude of the map center.
  • zoom: number - The zoom level.
  • pitch: number - The pitch (tilt) of the map, in degrees.
  • bearing: number - The bearing (rotation) of the map, in degrees.

Sources

The following are implementations of source types that could be retrieved with Map#getSource.

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

A source containing the contents of an HTML canvas. See CanvasSource.

VectorTileSource

A source containing vector tiles in Mapbox Vector Tile format. See VectorTileSource.

Events

MapboxEvent

An object with the following fields:

  • type: string - Event type
  • target: MapboxMap - The map instance that fired the event
  • originalEvent?: Event

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • originalEvent?: WheelEvent
  • preventDefault: () => void
  • defaultPrevented: boolean

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

  • type: string - Event type
  • target: MapboxMap
  • viewState: ViewState - the next view state that the camera wants to change to based on user input or transition.

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • dataType: 'style'

MapSourceDataEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • dataType: 'source'
  • isSourceLoaded: boolean
  • source: string
  • sourceId: string
  • sourceDataType: 'metadata' | 'content'
  • tile: any
  • coord: Coordinate

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

  • type: string
  • target: mapboxgl.GeolocateControl
  • code: PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError
  • message: string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

\ No newline at end of file +

Types

The following types can be imported from react-map-gl when using TypeScript.

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

Instance ref of a Map component. See Map documentation for details.

GeolocateControlRef

Instance ref of a GeolocateControl component. See GeolocateControl documentation for details.

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

  • name (string): projection name, one of Albers ('albers'), Equal Earth ('equalEarth'), Equirectangular/Plate Carrée/WGS84 ('equirectangular'), Lambert ('lambertConformalConic'), Mercator ('mercator'), Natural Earth ('naturalEarth'), and Winkel Tripel ('winkelTripel').
  • center? ([number, number]): longitude and latitude of the projection center
  • parallels? ([number, number]): the two standard parallels of a conic projection such as Albers and Lambert.

BackgroundLayer

A JSON object that defines a background layer according to the Mapbox Style Specification.

CircleLayer

A JSON object that defines a circle layer according to the Mapbox Style Specification.

FillExtrusionLayer

A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification.

FillLayer

A JSON object that defines a fill layer according to the Mapbox Style Specification.

HeatmapLayer

A JSON object that defines a heatmap layer according to the Mapbox Style Specification.

HillshadeLayer

A JSON object that defines a hillshade layer according to the Mapbox Style Specification.

LineLayer

A JSON object that defines a line layer according to the Mapbox Style Specification.

RasterLayer

A JSON object that defines a raster layer according to the Mapbox Style Specification.

SymbolLayer

A JSON object that defines a symbol layer according to the Mapbox Style Specification.

SkyLayer

A JSON object that defines a sky layer according to the Mapbox Style Specification.

GeoJSONSourceRaw

A JSON object that defines a geojson source according to the Mapbox Style Specification.

VideoSourceRaw

A JSON object that defines a video source according to the Mapbox Style Specification.

ImageSourceRaw

A JSON object that defines a image source according to the Mapbox Style Specification.

VectorSourceRaw

A JSON object that defines a vector source according to the Mapbox Style Specification.

RasterSource

A JSON object that defines a raster source according to the Mapbox Style Specification.

RasterDemSource

A JSON object that defines a raster-dem source according to the Mapbox Style Specification.

CanvasSourceRaw

A JSON object that defines a canvas source type. See CanvasSourceOptions.

Configurations

Anchor

One of 'center', 'left', 'right', 'top', 'bottom', 'top-left', 'top-right', 'bottom-left' and 'bottom-right'.

Alignment

One of 'map', 'viewport' and 'auto'.

ControlPosition

One of 'top-right', 'top-left', 'bottom-right' and 'bottom-left'.

DragPanOptions

An object with the following fields:

  • linearity?: number - The rate at which the speed reduces after the pan ends.
  • easing?: (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function.
  • deceleration?: number - Factor used to scale the drag velocity. Default 0.
  • maxSpeed?: number - The maximum value of the drag velocity. Default 1400.

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

  • offset?: PointLike - The center of the given bounds relative to the map's center, measured in pixels.
  • padding?: PaddingOptions - The amount of padding in pixels to add to the given bounds.
  • maxZoom?: number - The maximum zoom level to allow when the map view transitions to the specified bounds.
  • animate?: boolean - When set to false, no animation happens.
  • linear?: boolean - If true, the map transitions using Map#easeTo. If false, the map transitions using Map#flyTo
  • duration?: number - Duration in milliseconds
  • maxDuration?: number - Max duration in milliseconds
  • easing?: (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state.
  • essential?: boolean - If true, then the animation is considered essential and will not be affected by prefers-reduced-motion. Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system.

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

  • around?: 'center' - If "center" is passed, map will zoom around center of map.

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

  • left: number - in pixels.
  • top: number - in pixels.
  • right: number - in pixels.
  • bottom: number - in pixels.

TransformRequestFunction

A function that takes the following arguments:

  • url: string
  • resourceType: 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image';

And returns an object with the following fields:

  • url: string - The URL to be requested.
  • credentials?: 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests.
  • headers?: { [header: string]: any } - The headers to be sent with the request.
  • method?: 'GET' | 'POST' | 'PUT'
  • collectResourceTiming?: boolean

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties.

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

A LngLatBounds object, an array of LngLatLike objects in [sw, ne] order, or an array of numbers in [west, south, east, north] order.

Point

A mapboxgl.Point object.

PointLike

A Point or an array of two numbers representing x and y screen coordinates in pixels.

MapboxGeoJSONFeature

A GeoJSON feature that also contains the following library-specific fields:

  • layer: Layer
  • source: string
  • sourceLayer: string
  • state: { [key: string]: any }

ViewState

An object with the following fields:

  • longitude: number - The longitude of the map center.
  • latitude: number - The latitude of the map center.
  • zoom: number - The zoom level.
  • pitch: number - The pitch (tilt) of the map, in degrees.
  • bearing: number - The bearing (rotation) of the map, in degrees.

Sources

The following are implementations of source types that could be retrieved with Map#getSource.

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

A source containing the contents of an HTML canvas. See CanvasSource.

VectorTileSource

A source containing vector tiles in Mapbox Vector Tile format. See VectorTileSource.

Events

MapboxEvent

An object with the following fields:

  • type: string - Event type
  • target: MapboxMap - The map instance that fired the event
  • originalEvent?: Event

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • originalEvent?: WheelEvent
  • preventDefault: () => void
  • defaultPrevented: boolean

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

  • type: string - Event type
  • target: MapboxMap
  • viewState: ViewState - the next view state that the camera wants to change to based on user input or transition.

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • dataType: 'style'

MapSourceDataEvent

An object with the following fields:

  • type: string
  • target: MapboxMap
  • dataType: 'source'
  • isSourceLoaded: boolean
  • source: string
  • sourceId: string
  • sourceDataType: 'metadata' | 'content'
  • tile: any
  • coord: Coordinate

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

  • type: string
  • target: mapboxgl.GeolocateControl
  • code: PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError
  • message: string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

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

useControl

The useControl hook is used to create React wrappers for custom map controls.

import MapboxDraw from '@mapbox/mapbox-gl-draw';
+  
useControl
The useControl hook is used to create React wrappers for custom map controls.
import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import Map, {useControl} from 'react-map-gl';
 
-function DrawControl(props: DrawControlProps) {
+function DrawControl(props: DrawControlProps) {
   useControl(() => new MapboxDraw(props), {
-    position: props.position
+    position: props.position
   });
 
   return null;
@@ -103,9 +103,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   return (
     <Map
       initialViewState={{
-        longitude: -122.4,
-        latitude: 37.8,
-        zoom: 14
+        longitude: -122.4,
+        latitude: 37.8,
+        zoom: 14
       }}
       mapStyle="mapbox://styles/mapbox/satellite-v9"
     >
@@ -113,23 +113,23 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         position="top-left"
         displayControlsDefault={false}
         controls={{
-          polygon: true,
-          trash: true
+          polygon: true,
+          trash: true
         }}
       />
     </Map>
   );
 }
See a full example here.
Signature
useControl<T extends IControl>(
-  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
+  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
   options?: {
     position?: ControlPosition;
   }
 ): T
 
 useControl<T extends IControl>(
-  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
-  onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,
+  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
+  onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,
   options?: {
     position?: ControlPosition;
   }
-): T
The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
  • onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl - called to create an instance of the control.
  • onRemove: ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed.
  • options: object
    • position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map
Returns:
IControl - the control instance from onCreate.
Source
use-control.ts

\ No newline at end of file
+): T

The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount.

Parameters:

  • onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl - called to create an instance of the control.
  • onRemove: ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed.
  • options: object
    • position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map

Returns:

IControl - the control instance from onCreate.

Source

use-control.ts

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

useMap

The useMap hook allows a custom component to reference the Map that contains it.

When used with the MapProvider, this hook can also reference maps that are rendered outside of the current component's direct render tree.

/// Example using `useMap` inside a Map
+  
useMap
The useMap hook allows a custom component to reference the Map that contains it.
When used with the MapProvider, this hook can also reference maps that are rendered outside of the current component's direct render tree.
/// Example using `useMap` inside a Map
 import {Map, useMap} from 'react-map-gl';
 
 function Root() {
@@ -96,10 +96,10 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 }
 
 function NavigateButton() {
-  const {current: map} = useMap();
+  const {current: map} = useMap();
 
   const onClick = () => {
-    map.flyTo({center: [-122.4, 37.8]});
+    map.flyTo({center: [-122.4, 37.8]});
   };
 
   return <button onClick={onClick}>Go</button>;
@@ -120,9 +120,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   const {myMapA, myMapB} = useMap();
 
   const onClick = () => {
-    myMapA.flyTo({center: [-122.4, 37.8]});
-    myMapB.flyTo({center: [-74, 40.7]});
+    myMapA.flyTo({center: [-122.4, 37.8]});
+    myMapB.flyTo({center: [-74, 40.7]});
   };
 
   return <button onClick={onClick}>Go</button>;
-}
See a full example here.
Signature
useMap(): {current?: MapRef, [id: string]: MapRef}
The hook returns an object that contains all mounted maps under the closest MapProvider. The keys are each map's id and the values are the MapRef.
If the hook is used inside a decendent of a Map component, the returned object also contains a current field that references the containing map.
Source
use-map.tsx

\ No newline at end of file
+}

See a full example here.

Signature

useMap(): {current?: MapRef, [id: string]: MapRef}

The hook returns an object that contains all mounted maps under the closest MapProvider. The keys are each map's id and the values are the MapRef.

If the hook is used inside a decendent of a Map component, the returned object also contains a current field that references the containing map.

Source

use-map.tsx

\ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index 9457876e..5e49f0f5 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 +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 diff --git a/docs/get-started/adding-custom-data/index.html b/docs/get-started/adding-custom-data/index.html index 34289797..44c6206e 100644 --- a/docs/get-started/adding-custom-data/index.html +++ b/docs/get-started/adding-custom-data/index.html @@ -88,22 +88,22 @@ 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 Map, {Source, Layer} from 'react-map-gl';
 
 const geojson = {
-  type: 'FeatureCollection',
-  features: [
-    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
+  type: 'FeatureCollection',
+  features: [
+    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
   ]
 };
 
 const layerStyle = {
-  id: 'point',
-  type: 'circle',
-  paint: {
-    'circle-radius': 10,
-    'circle-color': '#007cbf'
+  id: 'point',
+  type: 'circle',
+  paint: {
+    'circle-radius': 10,
+    'circle-color': '#007cbf'
   }
 };
 
@@ -111,13 +111,13 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   const [viewport, setViewport] = React.useState();
   return (
     <Map initialViewState={{
-      longitude: -122.45,
-      latitude: 37.78,
-      zoom: 14
+      longitude: -122.45,
+      latitude: 37.78,
+      zoom: 14
     }}>
       <Source id="my-data" type="geojson" data={geojson}>
         <Layer {...layerStyle} />
       </Source>
     </Map>
   );
-}
For details about data sources and layer configuration, check out the Mapbox style specification.
For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples.
Custom Overlays
You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here.
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
+}

For details about data sources and layer configuration, check out the Mapbox style specification.

For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples.

Custom Overlays

You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here.

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/get-started/index.html b/docs/get-started/get-started/index.html index 8b800fb9..bdf97eca 100644 --- a/docs/get-started/get-started/index.html +++ b/docs/get-started/get-started/index.html @@ -82,18 +82,18 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Get Started

Installation

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

npm install --save react-map-gl mapbox-gl

Example

import * as React from 'react';
+  
Get Started
Installation
Using react-map-gl requires node >= v8 and react >= 16.3.
npm install --save react-map-gl mapbox-gl
Example
import * as React from 'react';
 import Map from 'react-map-gl';
 
 function App() {
   return (
     <Map
       initialViewState={{
-        longitude: -122.4,
-        latitude: 37.8,
-        zoom: 14
+        longitude: -122.4,
+        latitude: 37.8,
+        zoom: 14
       }}
-      style={{width: 600, height: 400}}
+      style={{width: 600, height: 400}}
       mapStyle="mapbox://styles/mapbox/streets-v9"
     />
   );
@@ -110,4 +110,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   return <Map mapLib={maplibregl} />;
 }
To use the stylesheet from the fork:
<!-- index.html -->
 <link href='https://unpkg.com/maplibre-gl@<YOUR_MAPLIBRE_VERSION>/dist/maplibre-gl.css' rel='stylesheet' />
Or
/// app.js
-import 'maplibre-gl/dist/maplibre-gl.css';

\ No newline at end of file
+import 'maplibre-gl/dist/maplibre-gl.css';
\ 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 43115a78..1bd1cd43 100644 --- a/docs/get-started/mapbox-tokens/index.html +++ b/docs/get-started/mapbox-tokens/index.html @@ -88,12 +88,12 @@ 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:

  • 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.
  • mapbox-gl@1.x or maplibre-gl - 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 mapboxAccessToken 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

We recommend using an environment variable to minimize leaking risks. See securing Mapbox token for examples.

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 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 Map 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 Map using the transformRequest prop.

An example function:

const transformRequest = (url, resourceType) => {
   if (resourceType === 'Tile' && url.match('yourTileSource.com')) {
     return {
-      url: url,
-      headers: { 'Authorization': 'Bearer ' + yourAuthToken }
+      url: url,
+      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 8430daad..6c3b0e36 100644 --- a/docs/get-started/state-management/index.html +++ b/docs/get-started/state-management/index.html @@ -88,15 +88,15 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

State Management

There are two ways to use a Map:

  • Uncontrolled: The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class.
  • Controlled: The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.

Uncontrolled Map

You may clone a full app configuration for this example here.

import * as React from 'react';
+  
State Management
There are two ways to use a Map:
  • Uncontrolled: The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class.
  • Controlled: The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.
Uncontrolled Map
You may clone a full app configuration for this example here.
import * as React from 'react';
 import Map from 'react-map-gl';
 
 function App() {
   return <Map
     initialViewState={{
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
     }}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   />;
@@ -105,9 +105,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 
 function App() {
   const [viewState, setViewState] = React.useState({
-    longitude: -100,
-    latitude: 40,
-    zoom: 3.5
+    longitude: -100,
+    latitude: 40,
+    zoom: 3.5
   });
 
   return <Map
@@ -122,13 +122,13 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 import * as turf from '@turf/turf';
 
 // A circle of 5 mile radius of the Empire State Building
-const GEOFENCE = turf.circle([-74.0122106, 40.7467898], 5, {units: 'miles'});
+const GEOFENCE = turf.circle([-74.0122106, 40.7467898], 5, {units: 'miles'});
 
 function App() {
   const [viewState, setViewState] = React.useState({
-    longitude: -100,
-    latitude: 40,
-    zoom: 3.5
+    longitude: -100,
+    latitude: 40,
+    zoom: 3.5
   });
 
   const onMove = React.useCallback(({viewState}) => {
@@ -144,4 +144,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     onMove={onMove}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   />;
-}

\ No newline at end of file
+}
\ No newline at end of file diff --git a/docs/get-started/tips-and-tricks/index.html b/docs/get-started/tips-and-tricks/index.html index 64739b34..7283714e 100644 --- a/docs/get-started/tips-and-tricks/index.html +++ b/docs/get-started/tips-and-tricks/index.html @@ -88,14 +88,14 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Tips and Tricks

Securing Mapbox Token

Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.

  • Never commit your token in clear text into GitHub or other source control.

  • In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.

  • Create separate tokens for development (often times on http://localhost), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own.

  • Add the following to your bundler config:

    /// webpack.config.js
+  
    Tips and Tricks
    Securing Mapbox Token
    Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.
    • Never commit your token in clear text into GitHub or other source control.
    • In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.
    • Create separate tokens for development (often times on http://localhost), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own.
    • Add the following to your bundler config:
      /// webpack.config.js
 const {DefinePlugin} = require('webpack');
 
 module.exports = {
   ...
-  plugins: [
+  plugins: [
     new DefinePlugin({
-      'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
+      'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
     })
   ]
 };
      /// rollup.config.js
@@ -103,9 +103,9 @@ module.exports .exports = {
   ...
-  plugins: [
+  plugins: [
     replace({ 
-      'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
+      'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
     })
   ]
 };
      react-map-gl automatically picks up process.env.MapboxAccessToken or process.env.REACT_APP_MAPBOX_ACCESS_TOKEN if they are defined. Alternatively, you can use your own variable name (e.g. __SUPER_SECRET_TOKEN__) and pass it in manually with mapboxAccessToken={__SUPER_SECRET_TOKEN__}.
    Minimize Cost from Frequent Re-mounting
    In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:
    /// Example using Tabs from Material UI
@@ -125,7 +125,7 @@ module.exports {items.map(renderRow)}
     </Table>
   </TabPanel>
-</TabContext>
    Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not idea to get billed for just collapsing and expanding part of the UI.
    In this case, it is recommended that you set the reuseMaps prop to true:
      <TabPanel value="map">
+</TabContext>
    Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI.
    In this case, it is recommended that you set the reuseMaps prop to true:
      <TabPanel value="map">
     <Map reuseMaps
       mapStyle="mapbox://styles/mapbox/streets-v9" >
       {items.map(renderMarker)}
@@ -139,7 +139,7 @@ module.exports const dispatch = useDispatch();
 
   const onMove = useCallback(evt => {
-    dispatch({type: 'setViewState', payload: evt.viewState});
+    dispatch({type: 'setViewState', payload: evt.viewState});
   }, []);
 
   return (
@@ -180,8 +180,8 @@ module.exports );
 }
    This prevents React from rerendering the markers unless they have changed.
    If your application can do without complicated DOM objects and CSS styling, consider switching to a symbol layer. Layers are rendered in WebGL and are much more performant than markers:
      const vehiclesGeoJSON = useMemo(() => {
     return {
-      type: 'FeatureCollection',
-      features: vehicles.map(vehicle => turf.point(vehicle.coordinates, vehicle))
+      type: 'FeatureCollection',
+      features: vehicles.map(vehicle => turf.point(vehicle.coordinates, vehicle))
     };
   }, [vehicles]);
 
@@ -194,10 +194,18 @@ module.exports <Source id="vehicles" type="geojson" data={vehiclesGeoJSON}>
         <Layer type="symbol"
           layout={{
-            'icon-image': 'vehicle-icon',
-            'icon-size': 1,
-            'text-field': ['get', 'id']
+            'icon-image': 'vehicle-icon',
+            'icon-size': 1,
+            'text-field': ['get', 'id']
           }} >
       </Sources>
     </Map>
-  );
    
\ No newline at end of file
+  );

    Finding out if a point is within the current viewport

    There are some situations where you want to know if a point is currently visible on the map.
    +Checking this is simple and can be done like so:

    const mapRef = useRef<MapRef>();
+
+const checkIfPositionInViewport = (lat, lng) => {
+    const bounds = mapRef.current.getMap().getBounds();
+    return (lat >= bounds._sw.lat && lat <= bounds._nw.lat && lng >= bounds._sw.lng && lng <= bounds._nw.lng);
+}
+
+return <Map ref={mapRef} [..]/>
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 98e16d3b..72a4c267 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,7 +94,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

+

These docs are for @@ -107,4 +107,4 @@ 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

react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization. To manage the complexity of these 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. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl. In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. 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.

Ultimately, in the spirit of the reactive programming paradigm, data always flows down. 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 Map component can be fully controlled, that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management.

Limitations

In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants.

It is possible to call the native methods directly from the Map instance obtained via getMap. However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.

\ No newline at end of file +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

react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization. To manage the complexity of these 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. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl. In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. 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.

Ultimately, in the spirit of the reactive programming paradigm, data always flows down. 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 Map component can be fully controlled, that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management.

Limitations

In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants.

It is possible to call the native methods directly from the Map instance obtained via getMap. However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.

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

Upgrade Guide

Upgrading to v7.0

v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.

If you are using react-map-gl controls (Marker, Popup, NavigationControl etc.) with deck.gl's ContextProvider, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.

Dependencies

  • Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.
  • viewport-mercator-project (an alias of @math.gl/web-mercator) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.

Module exports

  • InteractiveMap and StaticMap are removed. Instead, import Map.
  • setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled).
  • MapController is removed. v7.0 has removed its own implementation of user input handling in favor of the native handlers. If you are using a custom implementation of MapController, check if the native handlers offer options to address your application's needs.
  • MapContext and useMapControl are removed. Check out the new API useMap and useControl.
  • The overlay components (HTMLOverlay, CanvasOverlay and SVGOverlay) are removed. Check out this example for implementing similar controls in your own application.
  • LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example.

Map

documentation

  • Renamed props for better consistency with the wrapped library:
    • mapboxApiAccessToken is now mapboxAccessToken
    • mapboxApiUrl is now baseApiUrl
    • preventStyleDiffing (default false) is replaced with styleDiffing (default true)
  • mapStyle should be explicitly specified. The default value has changed from "mapbox://styles/mapbox/light-v9" to an empty style.
  • The following props are removed and apps should use style instead:
    • width
    • height
    • visible
  • onViewportChange, onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management.
  • transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example.
  • mapOptions is removed. Almost all of the options for the native Map class are exposed as props.
  • onHover is removed. Use onMouseMove or onMouseEnter.
  • The event argument is changed for all interaction callbacks. See documentation for details.
  • getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover.
  • touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop.

Other components

  • capture* props are removed.
  • *label props are removed. Use Map's locale prop.
  • All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.

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 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}
+  
Upgrade Guide
Upgrading to v7.0
v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.
If you are using react-map-gl controls (Marker, Popup, NavigationControl etc.) with deck.gl's ContextProvider, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.
Dependencies
  • Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.
  • viewport-mercator-project (an alias of @math.gl/web-mercator) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.
Module exports
  • InteractiveMap and StaticMap are removed. Instead, import Map.
  • setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled).
  • MapController is removed.  v7.0 has removed its own implementation of user input handling in favor of the native handlers. If you are using a custom implementation of MapController, check if the native handlers offer options to address your application's needs.
  • MapContext and useMapControl are removed. Check out the new API useMap and useControl.
  • The overlay components (HTMLOverlay, CanvasOverlay and SVGOverlay) are removed. Check out this example for implementing similar controls in your own application.
  • LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example.
Map
documentation
  • Renamed props for better consistency with the wrapped library:
    • mapboxApiAccessToken is now mapboxAccessToken
    • mapboxApiUrl is now baseApiUrl
    • preventStyleDiffing (default false) is replaced with styleDiffing (default true)
  • mapStyle should be explicitly specified. The default value has changed from "mapbox://styles/mapbox/light-v9" to an empty style.
  • The following props are removed and apps should use style instead:
    • width
    • height
    • visible
  • onViewportChange, onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management.
  • transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example.
  • mapOptions is removed. Almost all of the options for the native Map class are exposed as props. 
  • onHover is removed. Use onMouseMove or onMouseEnter.
  • The event argument is changed for all interaction callbacks. See documentation for details.
  • getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover.
  • touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop.
Other components
  • capture* props are removed.
  • *label props are removed. Use Map's locale prop.
  • All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.
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 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}
 };
 
 <MapGL {...CONTROLLER_OPTS} ... />
  • Source and Layer components no longer expose imperative methods via ref as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.
    • If you used to call sourceRef.getSource(), it can be replaced with mapRef().getMap().getSource(sourceId).
    • If you used to call layerRef.getLayer(), it can be replaced with mapRef().getMap().getLayer(layerId).
Upgrading to v6
  • A valid Mapbox access token is always required.
  • The default value of InteractiveMap's maxPitch prop is changed to 85 from 60.
  • mapbox-gl v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message m is not defined. Find solutions in this thread.
Upgrading to v4
  • onChangeViewport is removed, use onViewportChange instead
  • Immutable.js is no longer a dependency
  • Export experimental.MapControls is removed, use MapController instead
  • InteractiveMap's mapControls prop is renamed to controller
  • Removed support for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable.
Upgrading to v3.2
  • The latest mapbox-gl release requires stylesheet to be included at all times. See Get Started for information about styling.
  • Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.
Upgrading to v3
v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.
Version Requirements
  • The Node Version Requirement for building react-map-gl is now >=v6.4.0. Using prebuilt react-map-gl does NOT has this limitation. This is introduced by Mapbox GL JS v0.38.0
MapGL Component
  • Two Map Components - v3 now splits the Map component into two React components: StaticMap and InteractiveMap. InteractiveMap is the default export, and designed to be as compatible as possible with the v2 default component.
onChangeViewport callback now includes width and height.
The viewport parameter passed to the onChangeViewport callback now includes width and height. Application code that composed the viewport with width and height may have to be updated. Please double check your render code if you relied on this behavior.
// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object
 <ReactMapGL width={500} height={400} {...viewport} />
 // GOOD: 'width' and 'height' below will override the values in 'viewport'
 <ReactMapGL {...viewport} width={500} height={400} />
Overlays
  • Some Overlays Moved to Examples -  Some less frequently used overlays (DraggablePointsOverlay, ChoroplethOverlay, ScatterplotOverlay), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.
  • Overlays must be Children of the Map - Overlays must now be rendered as children of the main react-map-gl component to automatically sync with the map viewport.
fitBounds utility function
The fitBounds utility has been moved to the math.gl library. The function can now be called as follows:
import WebMercatorViewport from 'viewport-mercator-project';
-const viewport = new WebMercatorViewport({width: 600, height: 400});
+const viewport = new WebMercatorViewport({width: 600, height: 400});
 const bound = viewport.fitBounds(
   [[-73.9876, 40.7661], [-72.9876, 41.7661]],
-  {padding: 20, offset: [0, -40]}
+  {padding: 20, offset: [0, -40]}
 );
 // => bounds: instance of WebMercatorViewport
 // {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}
Deprecations
We have started to deprecate a few React props. In all the cases below, the old props will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new props as soon as possible.
Old PropNew Prop
onChangeViewport(<viewport>)onViewportChange(<viewport>)
onHoverFeatures(<features>)onHover(<event>)
onClickFeatures(<features>)onClick(<event>)
perspectiveEnabled [default: false]dragRotate [default: true]
Upgrading to v2
v2 is API compatible with v1, however if you are still using v1 of react-map-gl, make sure that you first upgrade:
  • Your node version to v4 or higher
  • Your react version to 15.4 or higher.
Background: mapbox-gl 0.31.0 introduced a hard dependency on Node >= v4.
Upgrading to v1
(Upgrading from 0.6.x)
  • Importing Overlays - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) are now named exports. They previously had to be imported via their relative source paths:
// v1.0
@@ -121,4 +121,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 8a614ffb..0f50aa35 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 v7.0

Release date: Feb 4, 2022

v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:

  • Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library
  • Lightweight: the ESM build size is reduced from 219k to 57k
  • Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (flyTo, fitBounds etc.) can now be called directly without breaking the React binding.
  • Compatibility: first and third-party plugins! Directly use mapbox-gl-draw, mapbox-gl-geocoder, to name a few.
  • TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported.

Visit the upgrade guide if you are trying to upgrade from v5 and v6.

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 v7.0

    Release date: Feb 4, 2022

    v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:

    • Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library
    • Lightweight: the ESM build size is reduced from 219k to 57k
    • Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (flyTo, fitBounds etc.) can now be called directly without breaking the React binding.
    • Compatibility: first and third-party plugins! Directly use mapbox-gl-draw, mapbox-gl-geocoder, to name a few.
    • TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported.

    Visit the upgrade guide if you are trying to upgrade from v5 and v6.

    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 dd7cd813..17e41f41 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 ce23f9c7..ec4e88bd 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 5581aec4..d6076e3d 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 a6da490d..beb3a26f 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 293e1f6c..6855242d 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 4e8ec7f4..0069950f 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/geocoder/index.html b/examples/geocoder/index.html index 36bd2ca9..5b9e0085 100644 --- a/examples/geocoder/index.html +++ b/examples/geocoder/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 da77ddcc..b1291349 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 450d4843..d7003ec1 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 30ae2d41..59a75969 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 e9e52975..381db541 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 3fa125a9..2188a396 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 78514779..59500294 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/side-by-side/index.html b/examples/side-by-side/index.html index f724cdf0..bc35f186 100644 --- a/examples/side-by-side/index.html +++ b/examples/side-by-side/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/terrain/index.html b/examples/terrain/index.html index 650ef72b..8c2b3342 100644 --- a/examples/terrain/index.html +++ b/examples/terrain/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 4c9e909f..a664cdeb 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 e0e4b24c..240c363d 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 c3289170..ec4078c3 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

Use Mapbox GL JS Map as a fully controlled reactive component.

Extensible

Comes with additional React interfaces such as context and hooks to support custom components.

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

Use Mapbox GL JS Map as a fully controlled reactive component.

Extensible

Comes with additional React interfaces such as context and hooks to support custom components.

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 5b419b2e..4b647a0c 100644 --- a/page-data/app-data.json +++ b/page-data/app-data.json @@ -1 +1 @@ -{"webpackCompilationHash":"22fdd46801f0593a20ca"} +{"webpackCompilationHash":"5cd6341c56fe0fb61494"} diff --git a/page-data/docs/api-reference/attribution-control/page-data.json b/page-data/docs/api-reference/attribution-control/page-data.json index 452320cc..2429e247 100644 --- a/page-data/docs/api-reference/attribution-control/page-data.json +++ b/page-data/docs/api-reference/attribution-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/attribution-control","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\": \"attributioncontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#attributioncontrol\",\n \"aria-label\": \"attributioncontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"AttributionControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol\"\n }, \"AttributionControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"AttributionControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// disable the default attribution\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n attributionControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"AttributionControl customAttribution\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"Map design by me\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcompactcode-boolean--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcompactcode-boolean--undefined\",\n \"aria-label\": \"code classlanguage textcompactcode boolean undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"compact\"), \": boolean | undefined\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \" , force a compact attribution that shows the full attribution on mouse hover.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \" , force the full attribution control.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide.\")), mdx(\"p\", null, \"Note that your attribution must adhere to Mapbox's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/getting-started/attribution/\"\n }, \"guidelines\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcustomattributioncode-string--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcustomattributioncode-string--string\",\n \"aria-label\": \"code classlanguage textcustomattributioncode string string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"customAttribution\"), \": string | string[]\"), mdx(\"p\", null, \"String or strings to show in addition to any other attributions.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/attribution-control.ts\"\n }, \"attribution-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"AttributionControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"AttributionControl","slug":"docs/api-reference/attribution-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/attribution-control","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\": \"attributioncontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#attributioncontrol\",\n \"aria-label\": \"attributioncontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"AttributionControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol\"\n }, \"AttributionControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"AttributionControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// disable the default attribution\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n attributionControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"AttributionControl customAttribution\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"Map design by me\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcompactcode-boolean--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcompactcode-boolean--undefined\",\n \"aria-label\": \"code classlanguage textcompactcode boolean undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"compact\"), \": boolean | undefined\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \" , force a compact attribution that shows the full attribution on mouse hover.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \" , force the full attribution control.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide.\")), mdx(\"p\", null, \"Note that your attribution must adhere to Mapbox's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/getting-started/attribution/\"\n }, \"guidelines\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcustomattributioncode-string--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcustomattributioncode-string--string\",\n \"aria-label\": \"code classlanguage textcustomattributioncode string string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"customAttribution\"), \": string | string[]\"), mdx(\"p\", null, \"String or strings to show in addition to any other attributions.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/attribution-control.ts\"\n }, \"attribution-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"AttributionControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"AttributionControl","slug":"docs/api-reference/attribution-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/fullscreen-control/page-data.json b/page-data/docs/api-reference/fullscreen-control/page-data.json index d4fc4b5b..871ad74d 100644 --- a/page-data/docs/api-reference/fullscreen-control/page-data.json +++ b/page-data/docs/api-reference/fullscreen-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/fullscreen-control","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\": \"fullscreencontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#fullscreencontrol\",\n \"aria-label\": \"fullscreencontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"FullscreenControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol\"\n }, \"FullscreenControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"FullscreenControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"FullscreenControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcontaineridcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcontaineridcode-string\",\n \"aria-label\": \"code classlanguage textcontaineridcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"containerId\"), \": string\"), mdx(\"p\", null, \"Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/fullscreen-control.ts\"\n }, \"fullscreen-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"FullscreenControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"FullscreenControl","slug":"docs/api-reference/fullscreen-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/fullscreen-control","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\": \"fullscreencontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#fullscreencontrol\",\n \"aria-label\": \"fullscreencontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"FullscreenControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol\"\n }, \"FullscreenControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"FullscreenControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"FullscreenControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcontaineridcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcontaineridcode-string\",\n \"aria-label\": \"code classlanguage textcontaineridcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"containerId\"), \": string\"), mdx(\"p\", null, \"Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/fullscreen-control.ts\"\n }, \"fullscreen-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"FullscreenControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"FullscreenControl","slug":"docs/api-reference/fullscreen-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/geolocate-control/page-data.json b/page-data/docs/api-reference/geolocate-control/page-data.json index 2a683ea8..4f2f9b35 100644 --- a/page-data/docs/api-reference/geolocate-control/page-data.json +++ b/page-data/docs/api-reference/geolocate-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/geolocate-control","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\": \"geolocatecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#geolocatecontrol\",\n \"aria-label\": \"geolocatecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"GeolocateControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocateControl\"\n }, \"GeolocateControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"GeolocateControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Methods\"), mdx(\"p\", null, \"Imperative methods are accessible via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs\"\n }, \"React ref\"), \" hook:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geolocateControlRef \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"ref\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Activate as soon as the control is loaded\"), \"\\n ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"trigger\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"GeolocateControl ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geolocateControlRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttriggercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttriggercode-boolean\",\n \"aria-label\": \"code classlanguage texttriggercode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trigger()\"), \": boolean\"), mdx(\"p\", null, \"Trigger a geolocation event.\"), mdx(\"p\", null, \"Returns: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" if successful.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h3\", {\n \"id\": \"tracking-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#tracking-options\",\n \"aria-label\": \"tracking options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Tracking options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositionoptionscode-positionoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositionoptionscode-positionoptions\",\n \"aria-label\": \"code classlanguage textpositionoptionscode positionoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"positionOptions\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n }, \"PositionOptions\")), mdx(\"p\", null, \"A Geolocation API \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n }, \"PositionOptions\"), \" object\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttrackuserlocationcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttrackuserlocationcode-boolean\",\n \"aria-label\": \"code classlanguage texttrackuserlocationcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trackUserLocation\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. \"), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfitboundsoptionscode-fitboundsoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfitboundsoptionscode-fitboundsoptions\",\n \"aria-label\": \"code classlanguage textfitboundsoptionscode fitboundsoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fitBoundsOptions\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fitboundsoptions\"\n }, \"FitBoundsOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"{maxZoom: 15}\")), mdx(\"p\", null, \"A (\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds\"\n }, \"fitBounds\"), \") options object to use when the map is panned and zoomed to the user's location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowaccuracycirclecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowaccuracycirclecode-boolean\",\n \"aria-label\": \"code classlanguage textshowaccuracycirclecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showAccuracyCircle\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" to disable.\\nThis only has effect if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"showUserLocation\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \". \"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowuserheadingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowuserheadingcode-boolean\",\n \"aria-label\": \"code classlanguage textshowuserheadingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showUserHeading\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", an arrow will be drawn next to the user location dot indicating the device's heading.\\nThis only has affect when \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"trackUserLocation\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowuserlocationcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowuserlocationcode-boolean\",\n \"aria-label\": \"code classlanguage textshowuserlocationcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showUserLocation\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Show a dot on the map at the user's location. Set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" to disable.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textongeolocatecode-evt-geolocateresultevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textongeolocatecode-evt-geolocateresultevent--void\",\n \"aria-label\": \"code classlanguage textongeolocatecode evt geolocateresultevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onGeolocate\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateresultevent\"\n }, \"GeolocateResultEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as success.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonerrorcode-evt-geolocateerrorevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonerrorcode-evt-geolocateerrorevent--void\",\n \"aria-label\": \"code classlanguage textonerrorcode evt geolocateerrorevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onError\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateerrorevent\"\n }, \"GeolocateErrorEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as an error.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonoutofmaxboundscode-evt-geolocateresultevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonoutofmaxboundscode-evt-geolocateresultevent--void\",\n \"aria-label\": \"code classlanguage textonoutofmaxboundscode evt geolocateresultevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOutOfMaxBounds\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateresultevent\"\n }, \"GeolocateResultEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as success but user position is out of map \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontrackuserlocationstartcode-evt-geolocateevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontrackuserlocationstartcode-evt-geolocateevent--void\",\n \"aria-label\": \"code classlanguage textontrackuserlocationstartcode evt geolocateevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTrackUserLocationStart\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateevent\"\n }, \"GeolocateEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the GeolocateControl changes to the active lock state.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontrackuserlocationendcode-evt-geolocateevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontrackuserlocationendcode-evt-geolocateevent--void\",\n \"aria-label\": \"code classlanguage textontrackuserlocationendcode evt geolocateevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTrackUserLocationEnd\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateevent\"\n }, \"GeolocateEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the GeolocateControl changes to the background state.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/geolocate-control.ts\"\n }, \"geolocate-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger…","frontmatter":{"title":"GeolocateControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"GeolocateControl","slug":"docs/api-reference/geolocate-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/geolocate-control","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\": \"geolocatecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#geolocatecontrol\",\n \"aria-label\": \"geolocatecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"GeolocateControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocateControl\"\n }, \"GeolocateControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"GeolocateControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Methods\"), mdx(\"p\", null, \"Imperative methods are accessible via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs\"\n }, \"React ref\"), \" hook:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geolocateControlRef \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"ref\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Activate as soon as the control is loaded\"), \"\\n ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"trigger\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"GeolocateControl ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geolocateControlRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttriggercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttriggercode-boolean\",\n \"aria-label\": \"code classlanguage texttriggercode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trigger()\"), \": boolean\"), mdx(\"p\", null, \"Trigger a geolocation event.\"), mdx(\"p\", null, \"Returns: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" if successful.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h3\", {\n \"id\": \"tracking-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#tracking-options\",\n \"aria-label\": \"tracking options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Tracking options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositionoptionscode-positionoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositionoptionscode-positionoptions\",\n \"aria-label\": \"code classlanguage textpositionoptionscode positionoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"positionOptions\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n }, \"PositionOptions\")), mdx(\"p\", null, \"A Geolocation API \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n }, \"PositionOptions\"), \" object\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttrackuserlocationcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttrackuserlocationcode-boolean\",\n \"aria-label\": \"code classlanguage texttrackuserlocationcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trackUserLocation\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. \"), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfitboundsoptionscode-fitboundsoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfitboundsoptionscode-fitboundsoptions\",\n \"aria-label\": \"code classlanguage textfitboundsoptionscode fitboundsoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fitBoundsOptions\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fitboundsoptions\"\n }, \"FitBoundsOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"{maxZoom: 15}\")), mdx(\"p\", null, \"A (\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds\"\n }, \"fitBounds\"), \") options object to use when the map is panned and zoomed to the user's location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowaccuracycirclecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowaccuracycirclecode-boolean\",\n \"aria-label\": \"code classlanguage textshowaccuracycirclecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showAccuracyCircle\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" to disable.\\nThis only has effect if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"showUserLocation\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \". \"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowuserheadingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowuserheadingcode-boolean\",\n \"aria-label\": \"code classlanguage textshowuserheadingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showUserHeading\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", an arrow will be drawn next to the user location dot indicating the device's heading.\\nThis only has affect when \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"trackUserLocation\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowuserlocationcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowuserlocationcode-boolean\",\n \"aria-label\": \"code classlanguage textshowuserlocationcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showUserLocation\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Show a dot on the map at the user's location. Set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" to disable.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textongeolocatecode-evt-geolocateresultevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textongeolocatecode-evt-geolocateresultevent--void\",\n \"aria-label\": \"code classlanguage textongeolocatecode evt geolocateresultevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onGeolocate\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateresultevent\"\n }, \"GeolocateResultEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as success.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonerrorcode-evt-geolocateerrorevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonerrorcode-evt-geolocateerrorevent--void\",\n \"aria-label\": \"code classlanguage textonerrorcode evt geolocateerrorevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onError\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateerrorevent\"\n }, \"GeolocateErrorEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as an error.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonoutofmaxboundscode-evt-geolocateresultevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonoutofmaxboundscode-evt-geolocateresultevent--void\",\n \"aria-label\": \"code classlanguage textonoutofmaxboundscode evt geolocateresultevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOutOfMaxBounds\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateresultevent\"\n }, \"GeolocateResultEvent\"), \") => void\"), mdx(\"p\", null, \"Called on each Geolocation API position update that returned as success but user position is out of map \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontrackuserlocationstartcode-evt-geolocateevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontrackuserlocationstartcode-evt-geolocateevent--void\",\n \"aria-label\": \"code classlanguage textontrackuserlocationstartcode evt geolocateevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTrackUserLocationStart\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateevent\"\n }, \"GeolocateEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the GeolocateControl changes to the active lock state.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontrackuserlocationendcode-evt-geolocateevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontrackuserlocationendcode-evt-geolocateevent--void\",\n \"aria-label\": \"code classlanguage textontrackuserlocationendcode evt geolocateevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTrackUserLocationEnd\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#geolocateevent\"\n }, \"GeolocateEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the GeolocateControl changes to the background state.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/geolocate-control.ts\"\n }, \"geolocate-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger…","frontmatter":{"title":"GeolocateControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"GeolocateControl","slug":"docs/api-reference/geolocate-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/layer/page-data.json b/page-data/docs/api-reference/layer/page-data.json index 4d8aadf0..35b617a6 100644 --- a/page-data/docs/api-reference/layer/page-data.json +++ b/page-data/docs/api-reference/layer/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/layer","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\": \"layer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#layer\",\n \"aria-label\": \"layer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Layer\"), mdx(\"p\", null, \"This component allows apps to create a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"map layer\"), \" using React.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" parkLayer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse_park'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'fill'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'source-layer'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n filter\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'=='\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'class'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'park'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n paint\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'fill-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#4E3FC8'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"parkLayer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"The props provided to this component should be conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"Mapbox layer specification\"), \".\"), mdx(\"p\", null, \"When props change \", mdx(\"em\", {\n parentName: \"p\"\n }, \"shallowly\"), \", the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.\"), mdx(\"h3\", {\n \"id\": \"identity-properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#identity-properties\",\n \"aria-label\": \"identity properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Identity Properties\"), mdx(\"p\", null, \"Once a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/lists-and-keys.html#keys\"\n }, \"key prop\"), \" to give each element a stable identity.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Unique identifier of the layer. If not provided, a default id will be assigned.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttypecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttypecode-string\",\n \"aria-label\": \"code classlanguage texttypecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"p\", null, \"Required. Type of the layer.\"), mdx(\"h3\", {\n \"id\": \"options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#options\",\n \"aria-label\": \"options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbeforeidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbeforeidcode-string\",\n \"aria-label\": \"code classlanguage textbeforeidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \": string\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"Note that layers are added by the order that they mount. They are \", mdx(\"em\", {\n parentName: \"p\"\n }, \"NOT\"), \" reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \" for consistent behavior.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textsourcecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textsourcecode-string\",\n \"aria-label\": \"code classlanguage textsourcecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"source\"), \" is required by some layer types in the Mapbox style specification. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is used as the child of a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, \"Source\"), \" component, this prop will be overwritten by the id of the parent source.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/layer.ts\"\n }, \"layer.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Layer This component allows apps to create a map layer using React. Properties The props provided to this component should be conforming…","frontmatter":{"title":"Layer"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Layer","slug":"docs/api-reference/layer","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/layer","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\": \"layer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#layer\",\n \"aria-label\": \"layer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Layer\"), mdx(\"p\", null, \"This component allows apps to create a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"map layer\"), \" using React.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" parkLayer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"id\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse_park'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'fill'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"source\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'source-layer'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"filter\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'=='\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'class'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'park'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"paint\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'fill-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#4E3FC8'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"parkLayer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"The props provided to this component should be conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"Mapbox layer specification\"), \".\"), mdx(\"p\", null, \"When props change \", mdx(\"em\", {\n parentName: \"p\"\n }, \"shallowly\"), \", the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.\"), mdx(\"h3\", {\n \"id\": \"identity-properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#identity-properties\",\n \"aria-label\": \"identity properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Identity Properties\"), mdx(\"p\", null, \"Once a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/lists-and-keys.html#keys\"\n }, \"key prop\"), \" to give each element a stable identity.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Unique identifier of the layer. If not provided, a default id will be assigned.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttypecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttypecode-string\",\n \"aria-label\": \"code classlanguage texttypecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"p\", null, \"Required. Type of the layer.\"), mdx(\"h3\", {\n \"id\": \"options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#options\",\n \"aria-label\": \"options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbeforeidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbeforeidcode-string\",\n \"aria-label\": \"code classlanguage textbeforeidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \": string\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"Note that layers are added by the order that they mount. They are \", mdx(\"em\", {\n parentName: \"p\"\n }, \"NOT\"), \" reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \" for consistent behavior.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textsourcecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textsourcecode-string\",\n \"aria-label\": \"code classlanguage textsourcecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"source\"), \" is required by some layer types in the Mapbox style specification. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is used as the child of a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, \"Source\"), \" component, this prop will be overwritten by the id of the parent source.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/layer.ts\"\n }, \"layer.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Layer This component allows apps to create a map layer using React. Properties The props provided to this component should be conforming…","frontmatter":{"title":"Layer"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Layer","slug":"docs/api-reference/layer","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/map/page-data.json b/page-data/docs/api-reference/map/page-data.json index 80524d88..f8223e9c 100644 --- a/page-data/docs/api-reference/map/page-data.json +++ b/page-data/docs/api-reference/map/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/map","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\": \"default-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#default-map\",\n \"aria-label\": \"default map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"default (Map)\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"Map\"), \". This is also the default export from react-map-gl.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n style\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'100vw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'100vh'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n mapboxAccessToken\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"MY_ACCESS_TOKEN\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Methods\"), mdx(\"p\", null, \"Imperative methods are accessible via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs\"\n }, \"React ref\"), \" or the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" hook.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" mapRef \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useRef\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMapLoad \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n mapRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"current\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"on\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'move'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// do something\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"mapRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" onLoad\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMapLoad\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapref\"\n }, \"MapRef\"), \" object exposes \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members\"\n }, \"Map methods\"), \" that \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"are safe to call without breaaking the React bindings\"), \". For example, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"setStyle()\"), \" is hidden from the ref object, because the style is supposed to be changed by updating the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.\"), mdx(\"p\", null, \"You can still access the hidden members via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"getMap()\"), \":\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textgetmapcode-mapboxmap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textgetmapcode-mapboxmap\",\n \"aria-label\": \"code classlanguage textgetmapcode mapboxmap permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"getMap()\"), \": MapboxMap\"), mdx(\"p\", null, \"Returns the native \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"Map\"), \" instance associated with this component.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h3\", {\n \"id\": \"layout-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#layout-options\",\n \"aria-label\": \"layout options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Layout options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Map container id.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"{position: 'relative', width: '100%', height: '100%'}\")), mdx(\"p\", null, \"Map container CSS.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcursorcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcursorcode-string\",\n \"aria-label\": \"code classlanguage textcursorcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"cursor\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"p\", null, \"The current cursor \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\"\n }, \"type\"), \".\"), mdx(\"h3\", {\n \"id\": \"styling-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#styling-options\",\n \"aria-label\": \"styling options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Styling options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfogcode-fog--null\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfogcode-fog--null\",\n \"aria-label\": \"code classlanguage textfogcode fog null permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fog\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fog\"\n }, \"Fog\"), \" | null\"), mdx(\"p\", null, \"The fog property of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/\"\n }, \"Fog Style Specification\"), \".\\nIf \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" is provided, removes the fog from the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlightcode-light\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlightcode-light\",\n \"aria-label\": \"code classlanguage textlightcode light permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"light\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#light\"\n }, \"Light\")), mdx(\"p\", null, \"Light properties of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-style-spec/#light\"\n }, \"Light Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmapstylecode-mapboxstyle--string--immutable\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmapstylecode-mapboxstyle--string--immutable\",\n \"aria-label\": \"code classlanguage textmapstylecode mapboxstyle string immutable permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxstyle\"\n }, \"MapboxStyle\"), \" | string | Immutable\"), mdx(\"p\", null, \"Default: (empty style)\"), mdx(\"p\", null, \"The map's Mapbox style. This must be an a JSON object conforming to the schema described in the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://mapbox.com/mapbox-gl-style-spec/\"\n }, \"Mapbox Style Specification\"), \", or a URL to such JSON.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textprojectioncode-string--projectionspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textprojectioncode-string--projectionspecification\",\n \"aria-label\": \"code classlanguage textprojectioncode string projectionspecification permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"projection\"), \": string | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#projectionspecification\"\n }, \"ProjectionSpecification\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'mercator'\")), mdx(\"p\", null, \"The projection the map should be rendered in. Available projections are Albers (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'albers'\"), \"), Equal Earth (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'equalEarth'\"), \"), Equirectangular/Plate Carr\\xE9e/WGS84 (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'equirectangular'\"), \"), Lambert (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'lambertConformalConic'\"), \"), Mercator (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'mercator'\"), \"), Natural Earth (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'naturalEarth'\"), \"), and Winkel Tripel (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'winkelTripel'\"), \"). Conic projections such as Albers and Lambert have configurable \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"center\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"parallels\"), \" properties that allow developers to define the region in which the projection has minimal distortion; see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection\"\n }, \"example\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrenderworldcopiescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrenderworldcopiescode-boolean\",\n \"aria-label\": \"code classlanguage textrenderworldcopiescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"renderWorldCopies\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", multiple copies of the world will be rendered, when zoomed out.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylediffingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylediffingcode-boolean\",\n \"aria-label\": \"code classlanguage textstylediffingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"styleDiffing\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Enable diffing when \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" changes. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textterraincode-terrainspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textterraincode-terrainspecification\",\n \"aria-label\": \"code classlanguage textterraincode terrainspecification permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"terrain\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#terrainspecification\"\n }, \"TerrainSpecification\")), mdx(\"p\", null, \"Terrain property of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/\"\n }, \"Terrain Style Specification\"), \".\\nIf \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" is provided, removes terrain from the map.\"), mdx(\"h3\", {\n \"id\": \"camera-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#camera-options\",\n \"aria-label\": \"camera options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Camera options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinitialviewstatecode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinitialviewstatecode-object\",\n \"aria-label\": \"code classlanguage textinitialviewstatecode object permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \": object\"), mdx(\"p\", null, \"The initial view state of the map. If specified, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" etc. in props are ignored when constructing the map. Only specify \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is being used as an \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"uncontrolled component\"), \". See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \" for examples.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bounds?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#lnglatboundslike\"\n }, \"LngLatBoundsLike\"), \" - The initial bounds of the map. If specified, it overrides the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" options. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"null\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBoundsOptions\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fitboundsoptions\"\n }, \"FitBoundsOptions\"), \" - A \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" options object to use only when setting the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bounds\"), \" option. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"null\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number - The initial longitude of the map center. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number - The initial latitude of the map center. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number - The initial zoom level. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number - The initial pitch (tilt) of the map. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number - The initial bearing (rotation) of the map. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlongitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlongitudecode-number\",\n \"aria-label\": \"code classlanguage textlongitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number\"), mdx(\"p\", null, \"The longitude of the map center.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlatitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlatitudecode-number\",\n \"aria-label\": \"code classlanguage textlatitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number\"), mdx(\"p\", null, \"The latitude of the map center.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textzoomcode-number\",\n \"aria-label\": \"code classlanguage textzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#zoom-level\"\n }, \"zoom level\"), \" of the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchcode-number\",\n \"aria-label\": \"code classlanguage textpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number\"), mdx(\"p\", null, \"The initial \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#pitch\"\n }, \"pitch\"), \" (tilt) of the map, measured in degrees away from the plane of the screen (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbearingcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbearingcode-number\",\n \"aria-label\": \"code classlanguage textbearingcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number\"), mdx(\"p\", null, \"The initial \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#bearing\"\n }, \"bearing\"), \" (rotation) of the map, measured in degrees counter-clockwise from north.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpaddingcode-paddingoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpaddingcode-paddingoptions\",\n \"aria-label\": \"code classlanguage textpaddingcode paddingoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"padding\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#paddingoptions\"\n }, \"PaddingOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The padding in pixels around the viewport.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textminzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textminzoomcode-number\",\n \"aria-label\": \"code classlanguage textminzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"minZoom\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The minimum zoom level of the map (0-24).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxzoomcode-number\",\n \"aria-label\": \"code classlanguage textmaxzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxZoom\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"22\")), mdx(\"p\", null, \"The maximum zoom level of the map (0-24).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textminpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textminpitchcode-number\",\n \"aria-label\": \"code classlanguage textminpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"minPitch\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The minimum pitch of the map (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxpitchcode-number\",\n \"aria-label\": \"code classlanguage textmaxpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"60\")), mdx(\"p\", null, \"The maximum pitch of the map (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxboundscode-lnglatboundslike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxboundscode-lnglatboundslike\",\n \"aria-label\": \"code classlanguage textmaxboundscode lnglatboundslike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#lnglatboundslike\"\n }, \"LngLatBoundsLike\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"If set, the map is constrained to the given bounds.\"), mdx(\"h3\", {\n \"id\": \"input-handler-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#input-handler-options\",\n \"aria-label\": \"input handler options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Input handler options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textboxzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textboxzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textboxzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"boxZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"box zoom\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler\"\n }, \"BoxZoomHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdoubleclickzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdoubleclickzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textdoubleclickzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"doubleClickZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"double click to zoom\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler\"\n }, \"DoubleClickZoomHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdragrotatecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdragrotatecode-boolean\",\n \"aria-label\": \"code classlanguage textdragrotatecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"dragRotate\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to rotate\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler\"\n }, \"DragRotateHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdragpancode-boolean--dragpanoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdragpancode-boolean--dragpanoptions\",\n \"aria-label\": \"code classlanguage textdragpancode boolean dragpanoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"dragPan\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#dragpanoptions\"\n }, \"DragPanOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to pan\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler\"\n }, \"DragPanHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textkeyboardcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textkeyboardcode-boolean\",\n \"aria-label\": \"code classlanguage textkeyboardcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"keyboard\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", keyboard shortcuts are enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler\"\n }, \"KeyboardHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textscrollzoomcode-boolean--zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textscrollzoomcode-boolean--zoomrotateoptions\",\n \"aria-label\": \"code classlanguage textscrollzoomcode boolean zoomrotateoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#zoomrotateoptions\"\n }, \"ZoomRotateOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"scroll to zoom\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler\"\n }, \"ScrollZoomHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttouchpitchcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttouchpitchcode-boolean\",\n \"aria-label\": \"code classlanguage texttouchpitchcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"touchPitch\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to pitch\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler\"\n }, \"TouchPitchHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttouchzoomrotatecode-boolean--zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttouchzoomrotatecode-boolean--zoomrotateoptions\",\n \"aria-label\": \"code classlanguage texttouchzoomrotatecode boolean zoomrotateoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"touchZoomRotate\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#zoomrotateoptions\"\n }, \"ZoomRotateOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"pinch to rotate and zoom\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler\"\n }, \"TouchZoomRotateHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinteractivelayeridscode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinteractivelayeridscode-string\",\n \"aria-label\": \"code classlanguage textinteractivelayeridscode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \": string[]\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The id(s) of style layer(s).\"), mdx(\"p\", null, \"If specified, pointer event (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mousemove\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"click\"), \" etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"features\"), \" property containing an array of the matching features.\"), mdx(\"p\", null, \"If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"features\"), \" property.\"), mdx(\"p\", null, \"See the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#callbacks\"\n }, \"Callbacks\"), \" section for affected events.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonresizecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonresizecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonresizecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onResize\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map has been resized.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonloadcode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonloadcode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonloadcode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onLoad\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrendercode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrendercode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonrendercode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRender\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called whenever the map is drawn to the screen.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonidlecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonidlecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonidlecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onIdle\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called after the last frame rendered before the map enters an \\\"idle\\\" state:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"No camera transitions are in progress\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All currently requested tiles have loaded\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All fade/transition animations have completed\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonremovecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonremovecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonremovecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRemove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map has been removed.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonerrorcode-event-errorevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonerrorcode-event-errorevent--void\",\n \"aria-label\": \"code classlanguage textonerrorcode event errorevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onError\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#errorevent\"\n }, \"ErrorEvent\"), \") => void\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"evt => console.error(evt.error)\")), mdx(\"p\", null, \"Called when an error occurs.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmousedowncode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmousedowncode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmousedowncode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseDown\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseupcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseupcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseupcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseUp\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is released within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseovercode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseovercode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseovercode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseOver\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseentercode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseentercode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseentercode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" from outside that layer or outside the map canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmousemovecode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmousemovecode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmousemovecode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseleavecode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseleavecode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseleavecode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseLeave\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" or moves from the layer to outside the map canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseoutcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseoutcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseoutcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseOut\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a point device (usually a mouse) leaves the map's canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclickcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclickcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonclickcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClick\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondblclickcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondblclickcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textondblclickcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDblClick\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoncontextmenucode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoncontextmenucode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textoncontextmenucode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onContextMenu\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the right button of the mouse is clicked or the context menu key is pressed within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonwheelcode-event-mapwheelevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonwheelcode-event-mapwheelevent--void\",\n \"aria-label\": \"code classlanguage textonwheelcode event mapwheelevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onWheel\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapwheelevent\"\n }, \"MapWheelEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a wheel event occurs within the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchstartcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchstartcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchstartcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchstart\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchendcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchendcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchendcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchend\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchmovecode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchmovecode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchmovecode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchmove\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchcancelcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchcancelcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchcancelcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchCancel\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchcancel\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmovestartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmovestartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmovestartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMoveStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one view to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmovecode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmovecode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmovecode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one view to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState\"), \" reflects the view state that the camera \\\"proposes\\\" to move to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the view state props (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" etc.).\\nSee \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \" for examples.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmoveendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmoveendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmoveendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMoveEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one view to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"drag to pan\\\" interaction starts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during a \\\"drag to pan\\\" interaction.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"drag to pan\\\" interaction ends.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoomStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one zoom level to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoom\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one zoom level to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.zoom\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoomEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one zoom level to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotatestartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotatestartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotatestartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotateStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one bearing (rotation) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotatecode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotatecode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotatecode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotate\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one bearing (rotation) to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.bearing\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotateendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotateendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotateendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotateEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one bearing (rotation) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitchStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one pitch (tilt) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitch\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one pitch (tilt) to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.pitch\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"pitch\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitchEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one pitch (tilt) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomstartcode-event-mapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomstartcode-event-mapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomstartcode event mapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"box zoom\\\" interaction starts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomendcode-event-mapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomendcode-event-mapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomendcode event mapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"box zoom\\\" interaction ends.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomcancelcode-eventmapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomcancelcode-eventmapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomcancelcode eventmapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomCancel\"), \": (event:\", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the user cancels a \\\"box zoom\\\" interaction, or when the bounding box does not meet the minimum size threshold.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondatacode-event-mapstyledataevent--mapsourcedataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondatacode-event-mapstyledataevent--mapsourcedataevent--void\",\n \"aria-label\": \"code classlanguage textondatacode event mapstyledataevent mapsourcedataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapstyledataevent\"\n }, \"MapStyleDataEvent\"), \" | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapsourcedataevent\"\n }, \"MapSourceDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when any map data loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonstyledatacode-event-mapstyledataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonstyledatacode-event-mapstyledataevent--void\",\n \"aria-label\": \"code classlanguage textonstyledatacode event mapstyledataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onStyleData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapstyledataevent\"\n }, \"MapStyleDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map's style loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonsourcedatacode-event-mapsourcedataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonsourcedatacode-event-mapsourcedataevent--void\",\n \"aria-label\": \"code classlanguage textonsourcedatacode event mapsourcedataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onSourceData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapsourcedataevent\"\n }, \"MapSourceDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h3\", {\n \"id\": \"other-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-options\",\n \"aria-label\": \"other options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other options\"), mdx(\"p\", null, \"Props in this section are not reactive. They are only used once when the Map instance is constructed.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaplibcode-any\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaplibcode-any\",\n \"aria-label\": \"code classlanguage textmaplibcode any permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapLib\"), \": any\"), mdx(\"p\", null, \"Override the map library. By default, it loads the mapbox-gl module using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\"\n }, \"dynamic import\"), \". This can be used to replace mapbox-gl with a compatible fork:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" maplibregl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"maplibregl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"Or to load a pre-bundled version of the library:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"src\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token script\"\n }), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"window\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"mapboxgl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"import('mapbox-gl')\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmapboxaccesstokencode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmapboxaccesstokencode-string\",\n \"aria-label\": \"code classlanguage textmapboxaccesstokencode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\"), \": string\"), mdx(\"p\", null, \"Token used to access the Mapbox data service. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/mapbox-tokens.md\"\n }, \"about map tokens\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textantialiascode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textantialiascode-boolean\",\n \"aria-label\": \"code classlanguage textantialiascode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"antialias\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" , the gl context will be created with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Multisample_anti-aliasing\"\n }, \"MSAA antialiasing\"), \", which can be useful for antialiasing custom layers.\\nThis is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" by default as a performance optimization.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textattributioncontrolcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textattributioncontrolcode-boolean\",\n \"aria-label\": \"code classlanguage textattributioncontrolcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"attributionControl\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", an attribution control will be added to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbaseapiurlcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbaseapiurlcode-string\",\n \"aria-label\": \"code classlanguage textbaseapiurlcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"baseApiUrl\"), \": string\"), mdx(\"p\", null, \"The map's default API URL for requesting tiles, styles, sprites, and glyphs.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbearingsnapcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbearingsnapcode-number\",\n \"aria-label\": \"code classlanguage textbearingsnapcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"bearingSnap\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"7\")), mdx(\"p\", null, \"Snap to north threshold in degrees.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclicktolerancecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclicktolerancecode-number\",\n \"aria-label\": \"code classlanguage textclicktolerancecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"3\")), mdx(\"p\", null, \"The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcollectresourcetimingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcollectresourcetimingcode-boolean\",\n \"aria-label\": \"code classlanguage textcollectresourcetimingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"collectResourceTiming\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"resourceTiming\"), \" property of relevant \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"data\"), \" events.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcooperativegesturescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcooperativegesturescode-boolean\",\n \"aria-label\": \"code classlanguage textcooperativegesturescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"cooperativeGestures\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" , scroll zoom will require pressing the ctrl or \\u2318 key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcrosssourcecollisionscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcrosssourcecollisionscode-boolean\",\n \"aria-label\": \"code classlanguage textcrosssourcecollisionscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"crossSourceCollisions\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", symbols from multiple sources can collide with each other during collision detection. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", collision detection is run separately for the symbols in each source.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcustomattributioncode-string--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcustomattributioncode-string--string\",\n \"aria-label\": \"code classlanguage textcustomattributioncode string string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"customAttribution\"), \": string | string[]\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"String or strings to show in an AttributionControl.\\nOnly applicable if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"attributionControl\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfadedurationcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfadedurationcode-number\",\n \"aria-label\": \"code classlanguage textfadedurationcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fadeDuration\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"300\")), mdx(\"p\", null, \"Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfailifmajorperformancecaveatcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfailifmajorperformancecaveatcode-boolean\",\n \"aria-label\": \"code classlanguage textfailifmajorperformancecaveatcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"failIfMajorPerformanceCaveat\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texthashcode-boolean--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texthashcode-boolean--string\",\n \"aria-label\": \"code classlanguage texthashcode boolean string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"hash\"), \": boolean | string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\\nFor example, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60\"), \".\"), mdx(\"p\", null, \"An additional string may optionally be provided to indicate a parameter-styled hash,\\ne.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar\"), \", where \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"foo\"), \" is a custom parameter and bar is an arbitrary hash distinct from the map hash.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinteractivecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinteractivecode-boolean\",\n \"aria-label\": \"code classlanguage textinteractivecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"interactive\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalecode-recordstring-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalecode-recordstring-string\",\n \"aria-label\": \"code classlanguage textlocalecode recordstring string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"locale\"), \": Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A patch to apply to the default localization table for UI strings, e.g. control tooltips.\\nThe \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"locale\"), \" object maps namespaced UI string IDs to translated strings in the target language; see \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"src/ui/default_locale.js\"), \" for an example with all supported string IDs.\\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalfontfamilycode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalfontfamilycode-string\",\n \"aria-label\": \"code classlanguage textlocalfontfamilycode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"localFontFamily\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalideographfontfamilycode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalideographfontfamilycode-string\",\n \"aria-label\": \"code classlanguage textlocalideographfontfamilycode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"localIdeographFontFamily\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'sans-serif'\")), mdx(\"p\", null, \"Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/example/local-ideographs\"\n }, \"example\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlogopositioncode-top-left--top-right--bottom-left--bottom-right\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlogopositioncode-top-left--top-right--bottom-left--bottom-right\",\n \"aria-label\": \"code classlanguage textlogopositioncode top left top right bottom left bottom right permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"logoPosition\"), \": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\")), mdx(\"p\", null, \"A string representing the position of the Mapbox wordmark on the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxparallelimagerequestscode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxparallelimagerequestscode-number\",\n \"aria-label\": \"code classlanguage textmaxparallelimagerequestscode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxParallelImageRequests\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"16\")), mdx(\"p\", null, \"The maximum number of images (raster tiles, sprites, icons) to load in parallel.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxtilecachesizecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxtilecachesizecode-number\",\n \"aria-label\": \"code classlanguage textmaxtilecachesizecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxTileCacheSize\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoptimizeforterraincode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoptimizeforterraincode-boolean\",\n \"aria-label\": \"code classlanguage textoptimizeforterraincode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"optimizeForTerrain\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If true, map will prioritize rendering for performance by reordering layers.\\nIf false, layers will always be drawn in the specified order.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchwithrotatecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchwithrotatecode-boolean\",\n \"aria-label\": \"code classlanguage textpitchwithrotatecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitchWithRotate\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map's pitch (tilt) control with \\\"drag to rotate\\\" interaction will be disabled.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"aria-label\": \"code classlanguage textpreservedrawingbuffercode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"preserveDrawingBuffer\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", The maps canvas can be exported to a PNG using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.getCanvas().toDataURL()\"), \";. This is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" by default as a performance optimization.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrefreshexpiredtilescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrefreshexpiredtilescode-boolean\",\n \"aria-label\": \"code classlanguage textrefreshexpiredtilescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"refreshExpiredTiles\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map won't attempt to re-request tiles once they expire per their HTTP \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"cacheControl\"), \"/\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"expires\"), \" headers.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textreusemapscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textreusemapscode-boolean\",\n \"aria-label\": \"code classlanguage textreusemapscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"reuseMaps\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"By default, every time a map component is unmounted, all internal resources associated with the underlying \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance are released. If the map gets mounted again, a new \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance is constructed.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"reuseMaps\"), \" is set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", when a map component is unmounted, the underlying \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"new billable events\"), \" triggered by initialization.\"), mdx(\"p\", null, \"Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" of the new component are respected.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrtltextplugincode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrtltextplugincode-string\",\n \"aria-label\": \"code classlanguage textrtltextplugincode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"RTLTextPlugin\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'\")), mdx(\"p\", null, \"Sets the map's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text\"\n }, \"RTL text plugin\"), \". Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.\"), mdx(\"p\", null, \"Setting this prop is the equivelant of calling \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin\"\n }, \"mapboxgl.setRTLTextPlugin\"), \" with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lazy: true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttestmodecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttestmodecode-boolean\",\n \"aria-label\": \"code classlanguage texttestmodecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"testMode\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttrackresizecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttrackresizecode-boolean\",\n \"aria-label\": \"code classlanguage texttrackresizecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trackResize\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map will automatically resize when the browser window resizes.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttransformrequestcode-transformrequestfunction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttransformrequestcode-transformrequestfunction\",\n \"aria-label\": \"code classlanguage texttransformrequestcode transformrequestfunction permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#transformrequestfunction\"\n }, \"TransformRequestFunction\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", 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.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkerclasscode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkerclasscode-object\",\n \"aria-label\": \"code classlanguage textworkerclasscode object permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerClass\"), \": object\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\\nTakes precedence over \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"workerUrl\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkercountcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkercountcode-number\",\n \"aria-label\": \"code classlanguage textworkercountcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerCount\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"2\")), mdx(\"p\", null, \"The number of web workers instantiated on a page with mapbox-gl maps.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkerurlcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkerurlcode-string\",\n \"aria-label\": \"code classlanguage textworkerurlcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerUrl\"), \": string\"), mdx(\"p\", null, \"Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/map.tsx\"\n }, \"map.tsx\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":11,"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible…","frontmatter":{"title":"default (Map)"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"default (Map)","slug":"docs/api-reference/map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/map","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\": \"default-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#default-map\",\n \"aria-label\": \"default map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"default (Map)\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"Map\"), \". This is also the default export from react-map-gl.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n style\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"width\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'100vw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"height\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'100vh'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n mapboxAccessToken\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"MY_ACCESS_TOKEN\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Methods\"), mdx(\"p\", null, \"Imperative methods are accessible via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs\"\n }, \"React ref\"), \" or the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" hook.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" mapRef \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useRef\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMapLoad \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n mapRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"current\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"on\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'move'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// do something\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map ref\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"mapRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" onLoad\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMapLoad\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapref\"\n }, \"MapRef\"), \" object exposes \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members\"\n }, \"Map methods\"), \" that \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"are safe to call without breaaking the React bindings\"), \". For example, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"setStyle()\"), \" is hidden from the ref object, because the style is supposed to be changed by updating the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.\"), mdx(\"p\", null, \"You can still access the hidden members via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"getMap()\"), \":\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textgetmapcode-mapboxmap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textgetmapcode-mapboxmap\",\n \"aria-label\": \"code classlanguage textgetmapcode mapboxmap permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"getMap()\"), \": MapboxMap\"), mdx(\"p\", null, \"Returns the native \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"Map\"), \" instance associated with this component.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h3\", {\n \"id\": \"layout-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#layout-options\",\n \"aria-label\": \"layout options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Layout options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Map container id.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"{position: 'relative', width: '100%', height: '100%'}\")), mdx(\"p\", null, \"Map container CSS.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcursorcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcursorcode-string\",\n \"aria-label\": \"code classlanguage textcursorcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"cursor\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"p\", null, \"The current cursor \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\"\n }, \"type\"), \".\"), mdx(\"h3\", {\n \"id\": \"styling-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#styling-options\",\n \"aria-label\": \"styling options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Styling options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfogcode-fog--null\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfogcode-fog--null\",\n \"aria-label\": \"code classlanguage textfogcode fog null permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fog\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fog\"\n }, \"Fog\"), \" | null\"), mdx(\"p\", null, \"The fog property of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/\"\n }, \"Fog Style Specification\"), \".\\nIf \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" is provided, removes the fog from the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlightcode-light\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlightcode-light\",\n \"aria-label\": \"code classlanguage textlightcode light permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"light\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#light\"\n }, \"Light\")), mdx(\"p\", null, \"Light properties of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-style-spec/#light\"\n }, \"Light Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmapstylecode-mapboxstyle--string--immutable\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmapstylecode-mapboxstyle--string--immutable\",\n \"aria-label\": \"code classlanguage textmapstylecode mapboxstyle string immutable permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxstyle\"\n }, \"MapboxStyle\"), \" | string | Immutable\"), mdx(\"p\", null, \"Default: (empty style)\"), mdx(\"p\", null, \"The map's Mapbox style. This must be an a JSON object conforming to the schema described in the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://mapbox.com/mapbox-gl-style-spec/\"\n }, \"Mapbox Style Specification\"), \", or a URL to such JSON.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textprojectioncode-string--projectionspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textprojectioncode-string--projectionspecification\",\n \"aria-label\": \"code classlanguage textprojectioncode string projectionspecification permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"projection\"), \": string | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#projectionspecification\"\n }, \"ProjectionSpecification\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'mercator'\")), mdx(\"p\", null, \"The projection the map should be rendered in. Available projections are Albers (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'albers'\"), \"), Equal Earth (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'equalEarth'\"), \"), Equirectangular/Plate Carr\\xE9e/WGS84 (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'equirectangular'\"), \"), Lambert (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'lambertConformalConic'\"), \"), Mercator (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'mercator'\"), \"), Natural Earth (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'naturalEarth'\"), \"), and Winkel Tripel (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'winkelTripel'\"), \"). Conic projections such as Albers and Lambert have configurable \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"center\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"parallels\"), \" properties that allow developers to define the region in which the projection has minimal distortion; see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection\"\n }, \"example\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrenderworldcopiescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrenderworldcopiescode-boolean\",\n \"aria-label\": \"code classlanguage textrenderworldcopiescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"renderWorldCopies\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", multiple copies of the world will be rendered, when zoomed out.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylediffingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylediffingcode-boolean\",\n \"aria-label\": \"code classlanguage textstylediffingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"styleDiffing\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"Enable diffing when \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" changes. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textterraincode-terrainspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textterraincode-terrainspecification\",\n \"aria-label\": \"code classlanguage textterraincode terrainspecification permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"terrain\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#terrainspecification\"\n }, \"TerrainSpecification\")), mdx(\"p\", null, \"Terrain property of the style. Must conform to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/\"\n }, \"Terrain Style Specification\"), \".\\nIf \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" is provided, removes terrain from the map.\"), mdx(\"h3\", {\n \"id\": \"camera-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#camera-options\",\n \"aria-label\": \"camera options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Camera options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinitialviewstatecode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinitialviewstatecode-object\",\n \"aria-label\": \"code classlanguage textinitialviewstatecode object permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \": object\"), mdx(\"p\", null, \"The initial view state of the map. If specified, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" etc. in props are ignored when constructing the map. Only specify \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is being used as an \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"uncontrolled component\"), \". See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \" for examples.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bounds?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#lnglatboundslike\"\n }, \"LngLatBoundsLike\"), \" - The initial bounds of the map. If specified, it overrides the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" options. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"null\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBoundsOptions\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#fitboundsoptions\"\n }, \"FitBoundsOptions\"), \" - A \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" options object to use only when setting the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bounds\"), \" option. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"null\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number - The initial longitude of the map center. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number - The initial latitude of the map center. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number - The initial zoom level. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number - The initial pitch (tilt) of the map. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number - The initial bearing (rotation) of the map. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"0\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlongitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlongitudecode-number\",\n \"aria-label\": \"code classlanguage textlongitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number\"), mdx(\"p\", null, \"The longitude of the map center.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlatitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlatitudecode-number\",\n \"aria-label\": \"code classlanguage textlatitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number\"), mdx(\"p\", null, \"The latitude of the map center.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textzoomcode-number\",\n \"aria-label\": \"code classlanguage textzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#zoom-level\"\n }, \"zoom level\"), \" of the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchcode-number\",\n \"aria-label\": \"code classlanguage textpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number\"), mdx(\"p\", null, \"The initial \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#pitch\"\n }, \"pitch\"), \" (tilt) of the map, measured in degrees away from the plane of the screen (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbearingcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbearingcode-number\",\n \"aria-label\": \"code classlanguage textbearingcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number\"), mdx(\"p\", null, \"The initial \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/glossary/camera/#bearing\"\n }, \"bearing\"), \" (rotation) of the map, measured in degrees counter-clockwise from north.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpaddingcode-paddingoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpaddingcode-paddingoptions\",\n \"aria-label\": \"code classlanguage textpaddingcode paddingoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"padding\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#paddingoptions\"\n }, \"PaddingOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The padding in pixels around the viewport.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textminzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textminzoomcode-number\",\n \"aria-label\": \"code classlanguage textminzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"minZoom\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The minimum zoom level of the map (0-24).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxzoomcode-number\",\n \"aria-label\": \"code classlanguage textmaxzoomcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxZoom\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"22\")), mdx(\"p\", null, \"The maximum zoom level of the map (0-24).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textminpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textminpitchcode-number\",\n \"aria-label\": \"code classlanguage textminpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"minPitch\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The minimum pitch of the map (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxpitchcode-number\",\n \"aria-label\": \"code classlanguage textmaxpitchcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"60\")), mdx(\"p\", null, \"The maximum pitch of the map (0-85).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxboundscode-lnglatboundslike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxboundscode-lnglatboundslike\",\n \"aria-label\": \"code classlanguage textmaxboundscode lnglatboundslike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#lnglatboundslike\"\n }, \"LngLatBoundsLike\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"If set, the map is constrained to the given bounds.\"), mdx(\"h3\", {\n \"id\": \"input-handler-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#input-handler-options\",\n \"aria-label\": \"input handler options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Input handler options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textboxzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textboxzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textboxzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"boxZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"box zoom\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler\"\n }, \"BoxZoomHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdoubleclickzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdoubleclickzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textdoubleclickzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"doubleClickZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"double click to zoom\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler\"\n }, \"DoubleClickZoomHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdragrotatecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdragrotatecode-boolean\",\n \"aria-label\": \"code classlanguage textdragrotatecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"dragRotate\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to rotate\\\" interaction is enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler\"\n }, \"DragRotateHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdragpancode-boolean--dragpanoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdragpancode-boolean--dragpanoptions\",\n \"aria-label\": \"code classlanguage textdragpancode boolean dragpanoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"dragPan\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#dragpanoptions\"\n }, \"DragPanOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to pan\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler\"\n }, \"DragPanHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textkeyboardcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textkeyboardcode-boolean\",\n \"aria-label\": \"code classlanguage textkeyboardcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"keyboard\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", keyboard shortcuts are enabled (see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler\"\n }, \"KeyboardHandler\"), \").\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textscrollzoomcode-boolean--zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textscrollzoomcode-boolean--zoomrotateoptions\",\n \"aria-label\": \"code classlanguage textscrollzoomcode boolean zoomrotateoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#zoomrotateoptions\"\n }, \"ZoomRotateOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"scroll to zoom\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler\"\n }, \"ScrollZoomHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttouchpitchcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttouchpitchcode-boolean\",\n \"aria-label\": \"code classlanguage texttouchpitchcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"touchPitch\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"drag to pitch\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler\"\n }, \"TouchPitchHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttouchzoomrotatecode-boolean--zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttouchzoomrotatecode-boolean--zoomrotateoptions\",\n \"aria-label\": \"code classlanguage texttouchzoomrotatecode boolean zoomrotateoptions permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"touchZoomRotate\"), \": boolean | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#zoomrotateoptions\"\n }, \"ZoomRotateOptions\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the \\\"pinch to rotate and zoom\\\" interaction is enabled. Optionally accpt an object value that is the options to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler\"\n }, \"TouchZoomRotateHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinteractivelayeridscode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinteractivelayeridscode-string\",\n \"aria-label\": \"code classlanguage textinteractivelayeridscode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \": string[]\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The id(s) of style layer(s).\"), mdx(\"p\", null, \"If specified, pointer event (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mousemove\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"click\"), \" etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"features\"), \" property containing an array of the matching features.\"), mdx(\"p\", null, \"If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"features\"), \" property.\"), mdx(\"p\", null, \"See the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#callbacks\"\n }, \"Callbacks\"), \" section for affected events.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonresizecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonresizecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonresizecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onResize\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map has been resized.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonloadcode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonloadcode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonloadcode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onLoad\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrendercode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrendercode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonrendercode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRender\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called whenever the map is drawn to the screen.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonidlecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonidlecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonidlecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onIdle\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called after the last frame rendered before the map enters an \\\"idle\\\" state:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"No camera transitions are in progress\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All currently requested tiles have loaded\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All fade/transition animations have completed\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonremovecode-event-mapboxevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonremovecode-event-mapboxevent--void\",\n \"aria-label\": \"code classlanguage textonremovecode event mapboxevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRemove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxevent\"\n }, \"MapboxEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map has been removed.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonerrorcode-event-errorevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonerrorcode-event-errorevent--void\",\n \"aria-label\": \"code classlanguage textonerrorcode event errorevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onError\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#errorevent\"\n }, \"ErrorEvent\"), \") => void\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"evt => console.error(evt.error)\")), mdx(\"p\", null, \"Called when an error occurs.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmousedowncode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmousedowncode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmousedowncode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseDown\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseupcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseupcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseupcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseUp\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is released within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseovercode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseovercode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseovercode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseOver\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseentercode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseentercode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseentercode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" from outside that layer or outside the map canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmousemovecode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmousemovecode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmousemovecode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseleavecode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseleavecode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseleavecode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseLeave\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" or moves from the layer to outside the map canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmouseoutcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmouseoutcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonmouseoutcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMouseOut\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a point device (usually a mouse) leaves the map's canvas.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclickcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclickcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textonclickcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClick\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondblclickcode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondblclickcode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textondblclickcode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDblClick\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoncontextmenucode-event-maplayermouseevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoncontextmenucode-event-maplayermouseevent--void\",\n \"aria-label\": \"code classlanguage textoncontextmenucode event maplayermouseevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onContextMenu\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayermouseevent\"\n }, \"MapLayerMouseEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the right button of the mouse is clicked or the context menu key is pressed within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonwheelcode-event-mapwheelevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonwheelcode-event-mapwheelevent--void\",\n \"aria-label\": \"code classlanguage textonwheelcode event mapwheelevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onWheel\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapwheelevent\"\n }, \"MapWheelEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a wheel event occurs within the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchstartcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchstartcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchstartcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchstart\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchendcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchendcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchendcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchend\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchmovecode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchmovecode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchmovecode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchmove\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textontouchcancelcode-event-maplayertouchevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textontouchcancelcode-event-maplayertouchevent--void\",\n \"aria-label\": \"code classlanguage textontouchcancelcode event maplayertouchevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onTouchCancel\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#maplayertouchevent\"\n }, \"MapLayerTouchEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"touchcancel\"), \" event occurs within the map.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" is specified, the event will fire only when the point is inside a visible portion of the specifed layer.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmovestartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmovestartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmovestartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMoveStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one view to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmovecode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmovecode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmovecode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMove\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one view to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState\"), \" reflects the view state that the camera \\\"proposes\\\" to move to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the view state props (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" etc.).\\nSee \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \" for examples.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonmoveendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonmoveendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonmoveendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onMoveEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one view to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"drag to pan\\\" interaction starts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during a \\\"drag to pan\\\" interaction.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textondragendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"drag to pan\\\" interaction ends.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoomStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one zoom level to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoom\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one zoom level to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.zoom\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonzoomendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonzoomendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonzoomendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onZoomEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one zoom level to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotatestartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotatestartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotatestartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotateStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one bearing (rotation) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotatecode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotatecode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotatecode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotate\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one bearing (rotation) to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.bearing\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonrotateendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonrotateendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonrotateendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onRotateEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one bearing (rotation) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchstartcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchstartcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchstartcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitchStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just before the map begins a transition from one pitch (tilt) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitch\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called repeatedly during an animated transition from one pitch (tilt) to another.\"), mdx(\"p\", null, \"When \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" is used as a controlled component, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"event.viewState.pitch\"), \" reflects the zoom that the camera \\\"proposes\\\" to change to, as a result of either user interaction or methods such as \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"flyTo\"), \". The camera does not actually change until the application updates the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"pitch\"), \" prop.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonpitchendcode-event-viewstatechangeevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonpitchendcode-event-viewstatechangeevent--void\",\n \"aria-label\": \"code classlanguage textonpitchendcode event viewstatechangeevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onPitchEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#viewstatechangeevent\"\n }, \"ViewStateChangeEvent\"), \") => void\"), mdx(\"p\", null, \"Called just after the map completes a transition from one pitch (tilt) to another.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomstartcode-event-mapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomstartcode-event-mapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomstartcode event mapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomStart\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"box zoom\\\" interaction starts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomendcode-event-mapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomendcode-event-mapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomendcode event mapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomEnd\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when a \\\"box zoom\\\" interaction ends.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonboxzoomcancelcode-eventmapboxzoomevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonboxzoomcancelcode-eventmapboxzoomevent--void\",\n \"aria-label\": \"code classlanguage textonboxzoomcancelcode eventmapboxzoomevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onBoxZoomCancel\"), \": (event:\", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapboxzoomevent\"\n }, \"MapBoxZoomEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the user cancels a \\\"box zoom\\\" interaction, or when the bounding box does not meet the minimum size threshold.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondatacode-event-mapstyledataevent--mapsourcedataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondatacode-event-mapstyledataevent--mapsourcedataevent--void\",\n \"aria-label\": \"code classlanguage textondatacode event mapstyledataevent mapsourcedataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapstyledataevent\"\n }, \"MapStyleDataEvent\"), \" | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapsourcedataevent\"\n }, \"MapSourceDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when any map data loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonstyledatacode-event-mapstyledataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonstyledatacode-event-mapstyledataevent--void\",\n \"aria-label\": \"code classlanguage textonstyledatacode event mapstyledataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onStyleData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapstyledataevent\"\n }, \"MapStyleDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the map's style loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonsourcedatacode-event-mapsourcedataevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonsourcedatacode-event-mapsourcedataevent--void\",\n \"aria-label\": \"code classlanguage textonsourcedatacode event mapsourcedataevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onSourceData\"), \": (event: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapsourcedataevent\"\n }, \"MapSourceDataEvent\"), \") => void\"), mdx(\"p\", null, \"Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \" for more information.\"), mdx(\"h3\", {\n \"id\": \"other-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-options\",\n \"aria-label\": \"other options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other options\"), mdx(\"p\", null, \"Props in this section are not reactive. They are only used once when the Map instance is constructed.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaplibcode-any\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaplibcode-any\",\n \"aria-label\": \"code classlanguage textmaplibcode any permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapLib\"), \": any\"), mdx(\"p\", null, \"Override the map library. By default, it loads the mapbox-gl module using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports\"\n }, \"dynamic import\"), \". This can be used to replace mapbox-gl with a compatible fork:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" maplibregl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"maplibregl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"Or to load a pre-bundled version of the library:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"src\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token script\"\n }), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"window\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"mapboxgl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"import('mapbox-gl')\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmapboxaccesstokencode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmapboxaccesstokencode-string\",\n \"aria-label\": \"code classlanguage textmapboxaccesstokencode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\"), \": string\"), mdx(\"p\", null, \"Token used to access the Mapbox data service. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/mapbox-tokens.md\"\n }, \"about map tokens\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textantialiascode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textantialiascode-boolean\",\n \"aria-label\": \"code classlanguage textantialiascode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"antialias\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" , the gl context will be created with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Multisample_anti-aliasing\"\n }, \"MSAA antialiasing\"), \", which can be useful for antialiasing custom layers.\\nThis is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" by default as a performance optimization.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textattributioncontrolcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textattributioncontrolcode-boolean\",\n \"aria-label\": \"code classlanguage textattributioncontrolcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"attributionControl\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", an attribution control will be added to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbaseapiurlcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbaseapiurlcode-string\",\n \"aria-label\": \"code classlanguage textbaseapiurlcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"baseApiUrl\"), \": string\"), mdx(\"p\", null, \"The map's default API URL for requesting tiles, styles, sprites, and glyphs.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textbearingsnapcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textbearingsnapcode-number\",\n \"aria-label\": \"code classlanguage textbearingsnapcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"bearingSnap\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"7\")), mdx(\"p\", null, \"Snap to north threshold in degrees.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclicktolerancecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclicktolerancecode-number\",\n \"aria-label\": \"code classlanguage textclicktolerancecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"3\")), mdx(\"p\", null, \"The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcollectresourcetimingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcollectresourcetimingcode-boolean\",\n \"aria-label\": \"code classlanguage textcollectresourcetimingcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"collectResourceTiming\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"resourceTiming\"), \" property of relevant \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"data\"), \" events.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcooperativegesturescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcooperativegesturescode-boolean\",\n \"aria-label\": \"code classlanguage textcooperativegesturescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"cooperativeGestures\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" , scroll zoom will require pressing the ctrl or \\u2318 key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcrosssourcecollisionscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcrosssourcecollisionscode-boolean\",\n \"aria-label\": \"code classlanguage textcrosssourcecollisionscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"crossSourceCollisions\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", symbols from multiple sources can collide with each other during collision detection. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", collision detection is run separately for the symbols in each source.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcustomattributioncode-string--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcustomattributioncode-string--string\",\n \"aria-label\": \"code classlanguage textcustomattributioncode string string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"customAttribution\"), \": string | string[]\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"String or strings to show in an AttributionControl.\\nOnly applicable if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"attributionControl\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfadedurationcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfadedurationcode-number\",\n \"aria-label\": \"code classlanguage textfadedurationcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"fadeDuration\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"300\")), mdx(\"p\", null, \"Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfailifmajorperformancecaveatcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfailifmajorperformancecaveatcode-boolean\",\n \"aria-label\": \"code classlanguage textfailifmajorperformancecaveatcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"failIfMajorPerformanceCaveat\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texthashcode-boolean--string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texthashcode-boolean--string\",\n \"aria-label\": \"code classlanguage texthashcode boolean string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"hash\"), \": boolean | string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\\nFor example, \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60\"), \".\"), mdx(\"p\", null, \"An additional string may optionally be provided to indicate a parameter-styled hash,\\ne.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar\"), \", where \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"foo\"), \" is a custom parameter and bar is an arbitrary hash distinct from the map hash.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textinteractivecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textinteractivecode-boolean\",\n \"aria-label\": \"code classlanguage textinteractivecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"interactive\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalecode-recordstring-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalecode-recordstring-string\",\n \"aria-label\": \"code classlanguage textlocalecode recordstring string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"locale\"), \": Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A patch to apply to the default localization table for UI strings, e.g. control tooltips.\\nThe \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"locale\"), \" object maps namespaced UI string IDs to translated strings in the target language; see \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"src/ui/default_locale.js\"), \" for an example with all supported string IDs.\\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalfontfamilycode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalfontfamilycode-string\",\n \"aria-label\": \"code classlanguage textlocalfontfamilycode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"localFontFamily\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlocalideographfontfamilycode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlocalideographfontfamilycode-string\",\n \"aria-label\": \"code classlanguage textlocalideographfontfamilycode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"localIdeographFontFamily\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'sans-serif'\")), mdx(\"p\", null, \"Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/example/local-ideographs\"\n }, \"example\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlogopositioncode-top-left--top-right--bottom-left--bottom-right\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlogopositioncode-top-left--top-right--bottom-left--bottom-right\",\n \"aria-label\": \"code classlanguage textlogopositioncode top left top right bottom left bottom right permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"logoPosition\"), \": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\")), mdx(\"p\", null, \"A string representing the position of the Mapbox wordmark on the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxparallelimagerequestscode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxparallelimagerequestscode-number\",\n \"aria-label\": \"code classlanguage textmaxparallelimagerequestscode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxParallelImageRequests\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"16\")), mdx(\"p\", null, \"The maximum number of images (raster tiles, sprites, icons) to load in parallel.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxtilecachesizecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxtilecachesizecode-number\",\n \"aria-label\": \"code classlanguage textmaxtilecachesizecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxTileCacheSize\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoptimizeforterraincode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoptimizeforterraincode-boolean\",\n \"aria-label\": \"code classlanguage textoptimizeforterraincode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"optimizeForTerrain\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If true, map will prioritize rendering for performance by reordering layers.\\nIf false, layers will always be drawn in the specified order.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchwithrotatecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchwithrotatecode-boolean\",\n \"aria-label\": \"code classlanguage textpitchwithrotatecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitchWithRotate\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map's pitch (tilt) control with \\\"drag to rotate\\\" interaction will be disabled.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"aria-label\": \"code classlanguage textpreservedrawingbuffercode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"preserveDrawingBuffer\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", The maps canvas can be exported to a PNG using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.getCanvas().toDataURL()\"), \";. This is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \" by default as a performance optimization.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrefreshexpiredtilescode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrefreshexpiredtilescode-boolean\",\n \"aria-label\": \"code classlanguage textrefreshexpiredtilescode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"refreshExpiredTiles\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map won't attempt to re-request tiles once they expire per their HTTP \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"cacheControl\"), \"/\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"expires\"), \" headers.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textreusemapscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textreusemapscode-boolean\",\n \"aria-label\": \"code classlanguage textreusemapscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"reuseMaps\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"By default, every time a map component is unmounted, all internal resources associated with the underlying \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance are released. If the map gets mounted again, a new \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance is constructed.\"), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"reuseMaps\"), \" is set to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", when a map component is unmounted, the underlying \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"new billable events\"), \" triggered by initialization.\"), mdx(\"p\", null, \"Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" of the new component are respected.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrtltextplugincode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrtltextplugincode-string\",\n \"aria-label\": \"code classlanguage textrtltextplugincode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"RTLTextPlugin\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'\")), mdx(\"p\", null, \"Sets the map's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text\"\n }, \"RTL text plugin\"), \". Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.\"), mdx(\"p\", null, \"Setting this prop is the equivelant of calling \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin\"\n }, \"mapboxgl.setRTLTextPlugin\"), \" with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lazy: true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttestmodecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttestmodecode-boolean\",\n \"aria-label\": \"code classlanguage texttestmodecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"testMode\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttrackresizecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttrackresizecode-boolean\",\n \"aria-label\": \"code classlanguage texttrackresizecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"trackResize\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map will automatically resize when the browser window resizes.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttransformrequestcode-transformrequestfunction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttransformrequestcode-transformrequestfunction\",\n \"aria-label\": \"code classlanguage texttransformrequestcode transformrequestfunction permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#transformrequestfunction\"\n }, \"TransformRequestFunction\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", 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.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkerclasscode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkerclasscode-object\",\n \"aria-label\": \"code classlanguage textworkerclasscode object permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerClass\"), \": object\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\\nTakes precedence over \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"workerUrl\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkercountcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkercountcode-number\",\n \"aria-label\": \"code classlanguage textworkercountcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerCount\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"2\")), mdx(\"p\", null, \"The number of web workers instantiated on a page with mapbox-gl maps.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textworkerurlcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textworkerurlcode-string\",\n \"aria-label\": \"code classlanguage textworkerurlcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"workerUrl\"), \": string\"), mdx(\"p\", null, \"Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/map.tsx\"\n }, \"map.tsx\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":11,"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible…","frontmatter":{"title":"default (Map)"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"default (Map)","slug":"docs/api-reference/map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/marker/page-data.json b/page-data/docs/api-reference/marker/page-data.json index 63d5243b..f1dfd354 100644 --- a/page-data/docs/api-reference/marker/page-data.json +++ b/page-data/docs/api-reference/marker/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/marker","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\": \"marker\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#marker\",\n \"aria-label\": \"marker permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Marker\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker\"\n }, \"Marker\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Marker longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"img src\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"./pin.png\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'center'\")), mdx(\"p\", null, \"A string indicating the part of the Marker that should be positioned closest to the coordinate set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcolorcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcolorcode-string\",\n \"aria-label\": \"code classlanguage textcolorcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"color\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'#3FB1CE'\")), mdx(\"p\", null, \"The color to use for the default marker if the component contains no content.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclicktolerancecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclicktolerancecode-number\",\n \"aria-label\": \"code classlanguage textclicktolerancecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" (inherits \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \"'s \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \")\"), mdx(\"p\", null, \"The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdraggablecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdraggablecode-boolean\",\n \"aria-label\": \"code classlanguage textdraggablecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"draggable\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the marker is able to be dragged to a new position on the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlatitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlatitudecode-number\",\n \"aria-label\": \"code classlanguage textlatitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number\"), mdx(\"p\", null, \"Required. The latitude of the anchor location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlongitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlongitudecode-number\",\n \"aria-label\": \"code classlanguage textlongitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number\"), mdx(\"p\", null, \"Required. The longitude of the anchor location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The offset in pixels as a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike\"\n }, \"PointLike\"), \" object to apply relative to the element's center. Negatives indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchalignmentcode-map--viewport--auto\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchalignmentcode-map--viewport--auto\",\n \"aria-label\": \"code classlanguage textpitchalignmentcode map viewport auto permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitchAlignment\"), \": 'map' | 'viewport' | 'auto'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" to the plane of the map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" to the plane of the viewport.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" automatically matches the value of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrotationcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrotationcode-number\",\n \"aria-label\": \"code classlanguage textrotationcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"rotation\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The rotation angle of the marker in degrees, relative to its \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \" setting. A positive value will rotate the marker clockwise.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrotationalignmentcode-map--viewport--auto\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrotationalignmentcode-map--viewport--auto\",\n \"aria-label\": \"code classlanguage textrotationalignmentcode map viewport auto permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \": 'map' | 'viewport' | 'auto'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \"'s rotation relative to the map, maintaining a bearing as the map rotates.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \"'s rotation relative to the viewport, agnostic to map rotations.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" is equivalent to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textscalecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textscalecode-number\",\n \"aria-label\": \"code classlanguage textscalecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"scale\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"1\")), mdx(\"p\", null, \"The scale to use for the default marker if the component contains no content.\\nThe default scale (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"1\"), \") corresponds to a height of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"41px\"), \" and a width of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"27px\"), \".\"), mdx(\"p\", null, \"This prop is not reactive (only used when the marker is mounted).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the marker's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclickcode-evt-mapevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclickcode-evt-mapevent--void\",\n \"aria-label\": \"code classlanguage textonclickcode evt mapevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClick\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapevent\"\n }, \"MapEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the marker is clicked on.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragstartcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragstartcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragstartcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called when dragging starts, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called while dragging, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragendcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragendcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragendcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called when dragging ends, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/marker.ts\"\n }, \"marker.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified…","frontmatter":{"title":"Marker"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Marker","slug":"docs/api-reference/marker","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/marker","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\": \"marker\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#marker\",\n \"aria-label\": \"marker permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Marker\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker\"\n }, \"Marker\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Marker longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"img src\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"./pin.png\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'center'\")), mdx(\"p\", null, \"A string indicating the part of the Marker that should be positioned closest to the coordinate set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcolorcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcolorcode-string\",\n \"aria-label\": \"code classlanguage textcolorcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"color\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'#3FB1CE'\")), mdx(\"p\", null, \"The color to use for the default marker if the component contains no content.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclicktolerancecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclicktolerancecode-number\",\n \"aria-label\": \"code classlanguage textclicktolerancecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\"), \" (inherits \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \"'s \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"clickTolerance\"), \")\"), mdx(\"p\", null, \"The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textdraggablecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textdraggablecode-boolean\",\n \"aria-label\": \"code classlanguage textdraggablecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"draggable\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the marker is able to be dragged to a new position on the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlatitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlatitudecode-number\",\n \"aria-label\": \"code classlanguage textlatitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number\"), mdx(\"p\", null, \"Required. The latitude of the anchor location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textlongitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textlongitudecode-number\",\n \"aria-label\": \"code classlanguage textlongitudecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number\"), mdx(\"p\", null, \"Required. The longitude of the anchor location.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\")), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"The offset in pixels as a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike\"\n }, \"PointLike\"), \" object to apply relative to the element's center. Negatives indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpitchalignmentcode-map--viewport--auto\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpitchalignmentcode-map--viewport--auto\",\n \"aria-label\": \"code classlanguage textpitchalignmentcode map viewport auto permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"pitchAlignment\"), \": 'map' | 'viewport' | 'auto'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" to the plane of the map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" to the plane of the viewport.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" automatically matches the value of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrotationcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrotationcode-number\",\n \"aria-label\": \"code classlanguage textrotationcode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"rotation\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"0\")), mdx(\"p\", null, \"The rotation angle of the marker in degrees, relative to its \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \" setting. A positive value will rotate the marker clockwise.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textrotationalignmentcode-map--viewport--auto\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textrotationalignmentcode-map--viewport--auto\",\n \"aria-label\": \"code classlanguage textrotationalignmentcode map viewport auto permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"rotationAlignment\"), \": 'map' | 'viewport' | 'auto'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \"'s rotation relative to the map, maintaining a bearing as the map rotates.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" aligns the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \"'s rotation relative to the viewport, agnostic to map rotations.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" is equivalent to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport\"), \".\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textscalecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textscalecode-number\",\n \"aria-label\": \"code classlanguage textscalecode number permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"scale\"), \": number\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"1\")), mdx(\"p\", null, \"The scale to use for the default marker if the component contains no content.\\nThe default scale (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"1\"), \") corresponds to a height of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"41px\"), \" and a width of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"27px\"), \".\"), mdx(\"p\", null, \"This prop is not reactive (only used when the marker is mounted).\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the marker's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclickcode-evt-mapevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclickcode-evt-mapevent--void\",\n \"aria-label\": \"code classlanguage textonclickcode evt mapevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClick\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapevent\"\n }, \"MapEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the marker is clicked on.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragstartcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragstartcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragstartcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called when dragging starts, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called while dragging, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textondragendcode-evt-markerdragevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textondragendcode-evt-markerdragevent--void\",\n \"aria-label\": \"code classlanguage textondragendcode evt markerdragevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#markerdragevent\"\n }, \"MarkerDragEvent\"), \") => void\"), mdx(\"p\", null, \"Called when dragging ends, if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"draggable\"), \" is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \".\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/marker.ts\"\n }, \"marker.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified…","frontmatter":{"title":"Marker"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Marker","slug":"docs/api-reference/marker","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/navigation-control/page-data.json b/page-data/docs/api-reference/navigation-control/page-data.json index c04d3b75..23133750 100644 --- a/page-data/docs/api-reference/navigation-control/page-data.json +++ b/page-data/docs/api-reference/navigation-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/navigation-control","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\": \"navigationcontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#navigationcontrol\",\n \"aria-label\": \"navigationcontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"NavigationControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol\"\n }, \"NavigationControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"NavigationControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigationControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowcompasscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowcompasscode-boolean\",\n \"aria-label\": \"code classlanguage textshowcompasscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showCompass\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the compass button is included.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textshowzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If true the zoom-in and zoom-out buttons are included.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textvisualizepitchcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textvisualizepitchcode-boolean\",\n \"aria-label\": \"code classlanguage textvisualizepitchcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"visualizePitch\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the pitch is visualized by rotating X-axis of compass.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/navigation-control.ts\"\n }, \"navigation-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"NavigationControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"NavigationControl","slug":"docs/api-reference/navigation-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/navigation-control","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\": \"navigationcontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#navigationcontrol\",\n \"aria-label\": \"navigationcontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"NavigationControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol\"\n }, \"NavigationControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"NavigationControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigationControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"Note that the following properties are not reactive. They are only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\")), mdx(\"p\", null, \"Placement of the control relative to the map.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowcompasscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowcompasscode-boolean\",\n \"aria-label\": \"code classlanguage textshowcompasscode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showCompass\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the compass button is included.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textshowzoomcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textshowzoomcode-boolean\",\n \"aria-label\": \"code classlanguage textshowzoomcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"showZoom\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If true the zoom-in and zoom-out buttons are included.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textvisualizepitchcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textvisualizepitchcode-boolean\",\n \"aria-label\": \"code classlanguage textvisualizepitchcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"visualizePitch\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \" the pitch is visualized by rotating X-axis of compass.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/navigation-control.ts\"\n }, \"navigation-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are…","frontmatter":{"title":"NavigationControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"NavigationControl","slug":"docs/api-reference/navigation-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/popup/page-data.json b/page-data/docs/api-reference/popup/page-data.json index 4da8ca56..3ad15976 100644 --- a/page-data/docs/api-reference/popup/page-data.json +++ b/page-data/docs/api-reference/popup/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/popup","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\": \"popup\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#popup\",\n \"aria-label\": \"popup permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Popup\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"Popup\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"showPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setShowPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"showPopup \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Popup longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \"\\n onClose\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setShowPopup\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n You are here\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined\"), mdx(\"p\", null, \"A string indicating the part of the popup that should be positioned closest to the coordinate, set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclassnamecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclassnamecode-string\",\n \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"className\"), \": string\"), mdx(\"p\", null, \"Space-separated CSS class names to add to popup container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclosebuttoncode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclosebuttoncode-boolean\",\n \"aria-label\": \"code classlanguage textclosebuttoncode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeButton\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", a close button will appear in the top right corner of the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonclickcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonclickcode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonclickcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnClick\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will close when the map is clicked.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonmovecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonmovecode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonmovecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnMove\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will closed when the map moves.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfocusafteropencode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfocusafteropencode-boolean\",\n \"aria-label\": \"code classlanguage textfocusafteropencode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"focusAfterOpen\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will try to focus the first focusable element inside the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode number pointlike recordstring pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": number | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\"), \" | Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A pixel offset applied to the popup's location specified as:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"a single number specifying a distance from the popup's location\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"a PointLike specifying a constant offset\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"an object of Points specifing an offset for each anchor position.\")), mdx(\"p\", null, \"Negative offsets indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"240px\")), mdx(\"p\", null, \"A string that sets the CSS property of the popup's maximum width.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the popup's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonopencode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonopencode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonopencode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOpen\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is opened manually or programatically.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonclosecode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClose\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is closed manually or programatically.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/popup.ts\"\n }, \"popup.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left…","frontmatter":{"title":"Popup"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Popup","slug":"docs/api-reference/popup","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/popup","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\": \"popup\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#popup\",\n \"aria-label\": \"popup permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Popup\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"Popup\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"showPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setShowPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"showPopup \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Popup longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \"\\n onClose\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setShowPopup\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n You are here\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined\"), mdx(\"p\", null, \"A string indicating the part of the popup that should be positioned closest to the coordinate, set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclassnamecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclassnamecode-string\",\n \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"className\"), \": string\"), mdx(\"p\", null, \"Space-separated CSS class names to add to popup container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclosebuttoncode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclosebuttoncode-boolean\",\n \"aria-label\": \"code classlanguage textclosebuttoncode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeButton\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", a close button will appear in the top right corner of the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonclickcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonclickcode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonclickcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnClick\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will close when the map is clicked.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonmovecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonmovecode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonmovecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnMove\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will closed when the map moves.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfocusafteropencode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfocusafteropencode-boolean\",\n \"aria-label\": \"code classlanguage textfocusafteropencode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"focusAfterOpen\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will try to focus the first focusable element inside the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode number pointlike recordstring pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": number | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\"), \" | Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A pixel offset applied to the popup's location specified as:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"a single number specifying a distance from the popup's location\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"a PointLike specifying a constant offset\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"an object of Points specifing an offset for each anchor position.\")), mdx(\"p\", null, \"Negative offsets indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"240px\")), mdx(\"p\", null, \"A string that sets the CSS property of the popup's maximum width.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the popup's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonopencode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonopencode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonopencode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOpen\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is opened.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonclosecode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClose\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is closed by the user clicking on the close button or outside (if \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"closeOnClick: true\"), \").\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/popup.ts\"\n }, \"popup.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left…","frontmatter":{"title":"Popup"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Popup","slug":"docs/api-reference/popup","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/scale-control/page-data.json b/page-data/docs/api-reference/scale-control/page-data.json index 06d5cd92..e724ed23 100644 --- a/page-data/docs/api-reference/scale-control/page-data.json +++ b/page-data/docs/api-reference/scale-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/scale-control","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\": \"scalecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#scalecontrol\",\n \"aria-label\": \"scalecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"ScaleControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#scalecontrol\"\n }, \"ScaleControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"ScaleControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ScaleControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"100\")), mdx(\"p\", null, \"The maximum length of the scale control in pixels.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\")), mdx(\"p\", null, \"Placement of the control relative to the map. Note that this prop is only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textunitcode-imperial--metric--nautical\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textunitcode-imperial--metric--nautical\",\n \"aria-label\": \"code classlanguage textunitcode imperial metric nautical permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"unit\"), \": 'imperial' | 'metric' | 'nautical'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'metric'\")), mdx(\"p\", null, \"Unit of the distance.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/scale-control.ts\"\n }, \"scale-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control…","frontmatter":{"title":"ScaleControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"ScaleControl","slug":"docs/api-reference/scale-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/scale-control","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\": \"scalecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#scalecontrol\",\n \"aria-label\": \"scalecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"ScaleControl\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#scalecontrol\"\n }, \"ScaleControl\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"ScaleControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ScaleControl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"100\")), mdx(\"p\", null, \"The maximum length of the scale control in pixels.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textpositioncode-top-right--top-left--bottom-right--bottom-left\",\n \"aria-label\": \"code classlanguage textpositioncode top right top left bottom right bottom left permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\")), mdx(\"p\", null, \"Placement of the control relative to the map. Note that this prop is only used when the component first mounts.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the control's container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textunitcode-imperial--metric--nautical\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textunitcode-imperial--metric--nautical\",\n \"aria-label\": \"code classlanguage textunitcode imperial metric nautical permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"unit\"), \": 'imperial' | 'metric' | 'nautical'\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'metric'\")), mdx(\"p\", null, \"Unit of the distance.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/scale-control.ts\"\n }, \"scale-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control…","frontmatter":{"title":"ScaleControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"ScaleControl","slug":"docs/api-reference/scale-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/source/page-data.json b/page-data/docs/api-reference/source/page-data.json index 8ea221ae..e6aa9d16 100644 --- a/page-data/docs/api-reference/source/page-data.json +++ b/page-data/docs/api-reference/source/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/source","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\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, \"This component allows apps to create a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources\"\n }, \"map source\"), \" using React. It may contain \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, \"Layer\"), \" components as children.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geojson \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n features\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Feature'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" geometry\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" coordinates\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" layerStyle \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n paint\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle-radius'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"10\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#007cbf'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Source id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"my-data\\\"\"), \" type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"geojson\\\"\"), \" data\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geojson\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"layerStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"The props provided to this component should be conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources\"\n }, \"Mapbox source specification\"), \"or \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#canvassourceoptions\"\n }, \"CanvasSourceOptions\"), \".\"), mdx(\"p\", null, \"When props change \", mdx(\"em\", {\n parentName: \"p\"\n }, \"shallowly\"), \", the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.\"), mdx(\"p\", null, \"Once a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/lists-and-keys.html#keys\"\n }, \"key prop\"), \" to give each element a stable identity.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Unique identifier of the source. If not provided, a default id will be assigned.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttypecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttypecode-string\",\n \"aria-label\": \"code classlanguage texttypecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"p\", null, \"Required. Type of the source.\"), mdx(\"h2\", {\n \"id\": \"source-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source-1\",\n \"aria-label\": \"source 1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/source.ts\"\n }, \"source.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props…","frontmatter":{"title":"Source"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Source","slug":"docs/api-reference/source","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/source","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\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, \"This component allows apps to create a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources\"\n }, \"map source\"), \" using React. It may contain \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, \"Layer\"), \" components as children.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geojson \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"features\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Feature'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"geometry\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"coordinates\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" layerStyle \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"id\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"paint\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'circle-radius'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"10\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'circle-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#007cbf'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Source id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"my-data\\\"\"), \" type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"geojson\\\"\"), \" data\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geojson\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"layerStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Properties\"), mdx(\"p\", null, \"The props provided to this component should be conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources\"\n }, \"Mapbox source specification\"), \"or \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#canvassourceoptions\"\n }, \"CanvasSourceOptions\"), \".\"), mdx(\"p\", null, \"When props change \", mdx(\"em\", {\n parentName: \"p\"\n }, \"shallowly\"), \", the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.\"), mdx(\"p\", null, \"Once a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"\"), \" is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/lists-and-keys.html#keys\"\n }, \"key prop\"), \" to give each element a stable identity.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"id\"), \": string\"), mdx(\"p\", null, \"Unique identifier of the source. If not provided, a default id will be assigned.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-texttypecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-texttypecode-string\",\n \"aria-label\": \"code classlanguage texttypecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"p\", null, \"Required. Type of the source.\"), mdx(\"h2\", {\n \"id\": \"source-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source-1\",\n \"aria-label\": \"source 1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/source.ts\"\n }, \"source.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props…","frontmatter":{"title":"Source"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Source","slug":"docs/api-reference/source","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/use-control/page-data.json b/page-data/docs/api-reference/use-control/page-data.json index a55a6071..30639503 100644 --- a/page-data/docs/api-reference/use-control/page-data.json +++ b/page-data/docs/api-reference/use-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-control","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\": \"usecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usecontrol\",\n \"aria-label\": \"usecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"useControl\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useControl\"), \" hook is used to create React wrappers for custom map controls.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapboxDraw \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@mapbox/mapbox-gl-draw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"DrawControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"props\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" DrawControlProps\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"MapboxDraw\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"position\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"null\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/satellite-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"DrawControl\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"top-left\\\"\"), \"\\n displayControlsDefault\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n controls\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n polygon\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n trash\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/examples/draw-polygon\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Signature\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \"\\n\\nuseControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onRemove\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"void\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\")))), mdx(\"p\", null, \"The hook creates an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"IControl\"), \" instance, adds it to the map when it's available, and removes it upon unmount.\"), mdx(\"p\", null, \"Parameters:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \": ({map: MapRef, mapLib: mapboxgl}) => \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - called to create an instance of the control.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onRemove\"), \": ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"options\"), \": object\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map\")))), mdx(\"p\", null, \"Returns:\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - the control instance from \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \".\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-control.ts\"\n }, \"use-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook…","frontmatter":{"title":"useControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useControl","slug":"docs/api-reference/use-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-control","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\": \"usecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usecontrol\",\n \"aria-label\": \"usecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"useControl\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useControl\"), \" hook is used to create React wrappers for custom map controls.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapboxDraw \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@mapbox/mapbox-gl-draw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"DrawControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"props\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" DrawControlProps\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"MapboxDraw\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"position\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"position\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"null\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/satellite-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"DrawControl\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"top-left\\\"\"), \"\\n displayControlsDefault\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n controls\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"polygon\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"trash\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/examples/draw-polygon\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Signature\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"mapLib\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \"\\n\\nuseControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"mapLib\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onRemove\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token literal-property property\"\n }, \"mapLib\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"void\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\")))), mdx(\"p\", null, \"The hook creates an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"IControl\"), \" instance, adds it to the map when it's available, and removes it upon unmount.\"), mdx(\"p\", null, \"Parameters:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \": ({map: MapRef, mapLib: mapboxgl}) => \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - called to create an instance of the control.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onRemove\"), \": ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"options\"), \": object\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map\")))), mdx(\"p\", null, \"Returns:\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - the control instance from \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \".\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-control.ts\"\n }, \"use-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook…","frontmatter":{"title":"useControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useControl","slug":"docs/api-reference/use-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/api-reference/use-map/page-data.json b/page-data/docs/api-reference/use-map/page-data.json index 765c0496..e562e459 100644 --- a/page-data/docs/api-reference/use-map/page-data.json +++ b/page-data/docs/api-reference/use-map/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-map","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\": \"usemap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usemap\",\n \"aria-label\": \"usemap permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"useMap\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap\"), \" hook allows a custom component to reference the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \" that contains it.\"), mdx(\"p\", null, \"When used with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map-provider.md\"\n }, \"MapProvider\"), \", this hook can also reference maps that are rendered outside of the current component's direct render tree.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` inside a Map\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigationButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"current\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` with `MapProvider`\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapA\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapB\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigateButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"74\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/hook\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Signature\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap(): {current?: MapRef, [id: string]: MapRef}\")), mdx(\"p\", null, \"The hook returns an object that contains all mounted maps under the closest \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapProvider\"), \". The keys are each map's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#id\"\n }, \"id\"), \" and the values are the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapref\"\n }, \"MapRef\"), \".\"), mdx(\"p\", null, \"If the hook is used inside a decendent of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component, the returned object also contains a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"current\"), \" field that references the containing map.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-map.tsx\"\n }, \"use-map.tsx\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can…","frontmatter":{"title":"useMap"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useMap","slug":"docs/api-reference/use-map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-map","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\": \"usemap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usemap\",\n \"aria-label\": \"usemap permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"useMap\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap\"), \" hook allows a custom component to reference the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \" that contains it.\"), mdx(\"p\", null, \"When used with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map-provider.md\"\n }, \"MapProvider\"), \", this hook can also reference maps that are rendered outside of the current component's direct render tree.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` inside a Map\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigationButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"current\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"center\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` with `MapProvider`\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapA\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapB\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigateButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"center\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"center\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"74\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/hook\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Signature\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap(): {current?: MapRef, [id: string]: MapRef}\")), mdx(\"p\", null, \"The hook returns an object that contains all mounted maps under the closest \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapProvider\"), \". The keys are each map's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#id\"\n }, \"id\"), \" and the values are the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapref\"\n }, \"MapRef\"), \".\"), mdx(\"p\", null, \"If the hook is used inside a decendent of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component, the returned object also contains a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"current\"), \" field that references the containing map.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-map.tsx\"\n }, \"use-map.tsx\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can…","frontmatter":{"title":"useMap"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","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","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useMap","slug":"docs/api-reference/use-map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/contributing/page-data.json b/page-data/docs/contributing/page-data.json index 3d0095d4..c09907b2 100644 --- a/page-data/docs/contributing/page-data.json +++ b/page-data/docs/contributing/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/contributing","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\": \"contributing-to-react-map-gl\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#contributing-to-react-map-gl\",\n \"aria-label\": \"contributing to react map gl permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Contributing to react-map-gl\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Thanks for taking the time to contribute!\")), mdx(\"p\", null, \"PRs and bug reports are welcome, and we are actively looking for new maintainers.\"), mdx(\"h2\", {\n \"id\": \"setting-up-dev-environment\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#setting-up-dev-environment\",\n \"aria-label\": \"setting up dev environment permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Setting Up Dev Environment\"), mdx(\"p\", null, \"The \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"master\"), \" branch is the active development branch.\"), mdx(\"p\", null, \"Building react-map-gl locally from the source requires node.js \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \">=8\"), \".\\nWe use \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://yarnpkg.com/en/docs/install\"\n }, \"yarn\"), \" to manage the dependencies.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"git\"), \" checkout master\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"yarn\"), \" bootstrap\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"yarn\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\")))), mdx(\"p\", null, \"Test:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\")))), mdx(\"p\", null, \"Test in Node:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\"), \" node\"))), mdx(\"p\", null, \"Test in browser (can use Chrome dev tools for debugging):\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\"), \" browser\"))), mdx(\"h2\", {\n \"id\": \"pull-requests\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#pull-requests\",\n \"aria-label\": \"pull requests permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Pull Requests\"), mdx(\"p\", null, \"Any intended change to the code base must open a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://help.github.com/articles/creating-a-pull-request/\"\n }, \"pull request\"), \" and be approved. \"), mdx(\"p\", null, \"Generally speaking, all PRs are open against the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"master\"), \" branch, unless the feature being affected no longer exists on master.\"), mdx(\"h3\", {\n \"id\": \"pr-checklist\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#pr-checklist\",\n \"aria-label\": \"pr checklist permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"PR Checklist\"), mdx(\"ul\", {\n \"className\": \"contains-task-list\"\n }, mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Tests\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"npm run test\"), \" must be successful.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"New code should be covered by unit tests whenever possible.\"))), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Documentation\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If public APIs are added/modified, update component documentation in \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/api-reference\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Breaking changes and deprecations must be added to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/upgrade-guide.md\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Noteworthy new features should be added to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/whats-new.md\"), \".\"))), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Description on GitHub\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Link to relevant issue.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Label with a milestone (latest release or vNext).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If public APIs are added/modified, describe the intended behavior.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If visual/interaction is affected, consider attaching a screenshot/GIF.\")))), mdx(\"h2\", {\n \"id\": \"release\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#release\",\n \"aria-label\": \"release permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Release\"), mdx(\"p\", null, \"react-map-gl follows the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://semver.org/\"\n }, \"Semantic Versioning\"), \" guidelines. Steps for publishing releases can be found \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.github.com/visgl/tsc/tree/master/developer-process\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"community-governance\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#community-governance\",\n \"aria-label\": \"community governance permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Community Governance\"), mdx(\"p\", null, \"vis.gl is part of the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://uc.foundation/\"\n }, \"Urban Computing Foundation\"), \". See the organization's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/tsc/blob/master/Technical%20Charter.md\"\n }, \"Technical Charter\"), \".\"), mdx(\"h3\", {\n \"id\": \"technical-steering-committee\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#technical-steering-committee\",\n \"aria-label\": \"technical steering committee permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Technical Steering Committee\"), mdx(\"p\", null, \"react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).\"), mdx(\"h3\", {\n \"id\": \"maintainers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#maintainers\",\n \"aria-label\": \"maintainers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Maintainers\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/Pessimistress\"\n }, \"Xiaoji Chen\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/xintongxia\"\n }, \"Xintong Xia\"))), mdx(\"p\", null, \"Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.\"), mdx(\"p\", null, \"If you are interested in becoming a maintainer, read the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/tsc/blob/master/governance.md\"\n }, \"governance guidelines\"), \".\"), mdx(\"p\", null, \"The vis.gl TSC meets monthly and publishes meeting notes via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lists.uc.foundation/g/visgl\"\n }, \"mailing list\"), \".\\nThis mailing list can also be utilized to reach out to the TSC.\"), mdx(\"h2\", {\n \"id\": \"code-of-conduct\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#code-of-conduct\",\n \"aria-label\": \"code of conduct permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Code of Conduct\"), mdx(\"p\", null, \"Please be mindful of and adhere to the Linux Foundation's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lfprojects.org/policies/code-of-conduct/\"\n }, \"Code of Conduct\"), \" when contributing to react-map-gl.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"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…","frontmatter":{"title":"Contributing to react-map-gl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../api-reference/use-map":"/docs/api-reference/use-map","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","../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Contributing to react-map-gl","slug":"docs/contributing","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/contributing","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\": \"contributing-to-react-map-gl\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#contributing-to-react-map-gl\",\n \"aria-label\": \"contributing to react map gl permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Contributing to react-map-gl\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Thanks for taking the time to contribute!\")), mdx(\"p\", null, \"PRs and bug reports are welcome, and we are actively looking for new maintainers.\"), mdx(\"h2\", {\n \"id\": \"setting-up-dev-environment\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#setting-up-dev-environment\",\n \"aria-label\": \"setting up dev environment permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Setting Up Dev Environment\"), mdx(\"p\", null, \"The \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"master\"), \" branch is the active development branch.\"), mdx(\"p\", null, \"Building react-map-gl locally from the source requires node.js \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \">=8\"), \".\\nWe use \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://yarnpkg.com/en/docs/install\"\n }, \"yarn\"), \" to manage the dependencies.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"git\"), \" checkout master\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"yarn\"), \" bootstrap\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"yarn\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\")))), mdx(\"p\", null, \"Test:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\")))), mdx(\"p\", null, \"Test in Node:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"node\")))), mdx(\"p\", null, \"Test in browser (can use Chrome dev tools for debugging):\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"$ \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" run \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token builtin class-name\"\n }, \"test\"), \" browser\"))), mdx(\"h2\", {\n \"id\": \"pull-requests\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#pull-requests\",\n \"aria-label\": \"pull requests permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Pull Requests\"), mdx(\"p\", null, \"Any intended change to the code base must open a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://help.github.com/articles/creating-a-pull-request/\"\n }, \"pull request\"), \" and be approved. \"), mdx(\"p\", null, \"Generally speaking, all PRs are open against the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"master\"), \" branch, unless the feature being affected no longer exists on master.\"), mdx(\"h3\", {\n \"id\": \"pr-checklist\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#pr-checklist\",\n \"aria-label\": \"pr checklist permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"PR Checklist\"), mdx(\"ul\", {\n \"className\": \"contains-task-list\"\n }, mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Tests\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"npm run test\"), \" must be successful.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"New code should be covered by unit tests whenever possible.\"))), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Documentation\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If public APIs are added/modified, update component documentation in \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/api-reference\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Breaking changes and deprecations must be added to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/upgrade-guide.md\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Noteworthy new features should be added to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"docs/whats-new.md\"), \".\"))), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Description on GitHub\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Link to relevant issue.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Label with a milestone (latest release or vNext).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If public APIs are added/modified, describe the intended behavior.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If visual/interaction is affected, consider attaching a screenshot/GIF.\")))), mdx(\"h2\", {\n \"id\": \"release\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#release\",\n \"aria-label\": \"release permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Release\"), mdx(\"p\", null, \"react-map-gl follows the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://semver.org/\"\n }, \"Semantic Versioning\"), \" guidelines. Steps for publishing releases can be found \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.github.com/visgl/tsc/tree/master/developer-process\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"community-governance\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#community-governance\",\n \"aria-label\": \"community governance permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Community Governance\"), mdx(\"p\", null, \"vis.gl is part of the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://uc.foundation/\"\n }, \"Urban Computing Foundation\"), \". See the organization's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/tsc/blob/master/Technical%20Charter.md\"\n }, \"Technical Charter\"), \".\"), mdx(\"h3\", {\n \"id\": \"technical-steering-committee\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#technical-steering-committee\",\n \"aria-label\": \"technical steering committee permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Technical Steering Committee\"), mdx(\"p\", null, \"react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).\"), mdx(\"h3\", {\n \"id\": \"maintainers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#maintainers\",\n \"aria-label\": \"maintainers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Maintainers\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/Pessimistress\"\n }, \"Xiaoji Chen\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/xintongxia\"\n }, \"Xintong Xia\"))), mdx(\"p\", null, \"Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.\"), mdx(\"p\", null, \"If you are interested in becoming a maintainer, read the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/tsc/blob/master/governance.md\"\n }, \"governance guidelines\"), \".\"), mdx(\"p\", null, \"The vis.gl TSC meets monthly and publishes meeting notes via a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lists.uc.foundation/g/visgl\"\n }, \"mailing list\"), \".\\nThis mailing list can also be utilized to reach out to the TSC.\"), mdx(\"h2\", {\n \"id\": \"code-of-conduct\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#code-of-conduct\",\n \"aria-label\": \"code of conduct permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Code of Conduct\"), mdx(\"p\", null, \"Please be mindful of and adhere to the Linux Foundation's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lfprojects.org/policies/code-of-conduct/\"\n }, \"Code of Conduct\"), \" when contributing to react-map-gl.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"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…","frontmatter":{"title":"Contributing to react-map-gl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../api-reference/use-map":"/docs/api-reference/use-map","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","../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Contributing to react-map-gl","slug":"docs/contributing","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/get-started/adding-custom-data/page-data.json b/page-data/docs/get-started/adding-custom-data/page-data.json index 24e1371b..e17dc1da 100644 --- a/page-data/docs/get-started/adding-custom-data/page-data.json +++ b/page-data/docs/get-started/adding-custom-data/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/adding-custom-data","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\": \"adding-custom-data\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#adding-custom-data\",\n \"aria-label\": \"adding custom data permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Adding Custom Data\"), mdx(\"h2\", {\n \"id\": \"native-mapbox-layers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#native-mapbox-layers\",\n \"aria-label\": \"native mapbox layers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Native Mapbox Layers\"), mdx(\"p\", null, \"You can inject data and mapbox native layers using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, \"Source\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, \"Layer\"), \" components:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geojson \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n features\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Feature'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" geometry\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" coordinates\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" layerStyle \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n paint\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle-radius'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"10\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#007cbf'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.45\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.78\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Source id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"my-data\\\"\"), \" type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"geojson\\\"\"), \" data\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geojson\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"layerStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"For details about data sources and layer configuration, check out the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/style-spec\"\n }, \"Mapbox style specification\"), \".\"), mdx(\"p\", null, \"For dynamically updating data sources and layers, check out the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://visgl.github.io/react-map-gl/examples/geojson\"\n }, \"GeoJSON\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://visgl.github.io/react-map-gl/examples/geojson-animation\"\n }, \"GeoJSON animation\"), \" examples.\"), mdx(\"h2\", {\n \"id\": \"custom-overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#custom-overlays\",\n \"aria-label\": \"custom overlays permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Custom Overlays\"), mdx(\"p\", null, \"You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.project()\"), \" you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"other-visgl-libraries\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#other-visgl-libraries\",\n \"aria-label\": \"other visgl libraries permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other vis.gl Libraries\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.github.com/visgl\"\n }, \"vis.gl\"), \" ecosystem, a suite of high-performance data visualization tools for the Web.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://deck.gl\"\n }, \"deck.gl\"), \" - WebGL-powered framework for the visualization of large datasets.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://loaders.gl\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://nebula.gl\"\n }, \"nebula.gl\"), \" - 3D-enabled GeoJSON editing based on deck.gl and React.\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details…","frontmatter":{"title":"Adding Custom Data"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Adding Custom Data","slug":"docs/get-started/adding-custom-data","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/adding-custom-data","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\": \"adding-custom-data\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#adding-custom-data\",\n \"aria-label\": \"adding custom data permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Adding Custom Data\"), mdx(\"h2\", {\n \"id\": \"native-mapbox-layers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#native-mapbox-layers\",\n \"aria-label\": \"native mapbox layers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Native Mapbox Layers\"), mdx(\"p\", null, \"You can inject data and mapbox native layers using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, \"Source\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, \"Layer\"), \" components:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Layer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" geojson \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"features\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Feature'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"geometry\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"coordinates\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" layerStyle \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"id\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'point'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'circle'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"paint\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'circle-radius'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"10\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'circle-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#007cbf'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.45\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.78\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Source id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"my-data\\\"\"), \" type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"geojson\\\"\"), \" data\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"geojson\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"layerStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"For details about data sources and layer configuration, check out the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/style-spec\"\n }, \"Mapbox style specification\"), \".\"), mdx(\"p\", null, \"For dynamically updating data sources and layers, check out the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://visgl.github.io/react-map-gl/examples/geojson\"\n }, \"GeoJSON\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://visgl.github.io/react-map-gl/examples/geojson-animation\"\n }, \"GeoJSON animation\"), \" examples.\"), mdx(\"h2\", {\n \"id\": \"custom-overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#custom-overlays\",\n \"aria-label\": \"custom overlays permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Custom Overlays\"), mdx(\"p\", null, \"You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.project()\"), \" you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"other-visgl-libraries\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#other-visgl-libraries\",\n \"aria-label\": \"other visgl libraries permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other vis.gl Libraries\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.github.com/visgl\"\n }, \"vis.gl\"), \" ecosystem, a suite of high-performance data visualization tools for the Web.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://deck.gl\"\n }, \"deck.gl\"), \" - WebGL-powered framework for the visualization of large datasets.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://loaders.gl\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://nebula.gl\"\n }, \"nebula.gl\"), \" - 3D-enabled GeoJSON editing based on deck.gl and React.\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details…","frontmatter":{"title":"Adding Custom Data"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Adding Custom Data","slug":"docs/get-started/adding-custom-data","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/get-started/get-started/page-data.json b/page-data/docs/get-started/get-started/page-data.json index 5cd84805..94d95d0d 100644 --- a/page-data/docs/get-started/get-started/page-data.json +++ b/page-data/docs/get-started/get-started/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/get-started","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\": \"get-started\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#get-started\",\n \"aria-label\": \"get started permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Get Started\"), mdx(\"h2\", {\n \"id\": \"installation\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#installation\",\n \"aria-label\": \"installation permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Installation\"), mdx(\"p\", null, \"Using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" requires \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"node >= v8\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react >= 16.3\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"sh\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-sh\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-sh\"\n }, \"npm install --save react-map-gl mapbox-gl\"))), mdx(\"h2\", {\n \"id\": \"example\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#example\",\n \"aria-label\": \"example permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Example\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n style\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"600\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See full project setup in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started\"\n }, \"get-started examples\"), \".\"), mdx(\"h2\", {\n \"id\": \"styling\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#styling\",\n \"aria-label\": \"styling permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Styling\"), mdx(\"p\", null, \"The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.\"), mdx(\"p\", null, \"You may add the stylesheet to the head of your page:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"href\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"rel\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"stylesheet\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\"))))), mdx(\"p\", null, \"Find out your mapbox version by running \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"yarn list mapbox-gl\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"npm ls mapbox-gl\"), \".\"), mdx(\"p\", null, \"Or embed it in your app by using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webpack.github.io/docs/stylesheets.html\"\n }, \"css-loader\"), \" with Webpack or \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.npmjs.com/package/rollup-plugin-postcss\"\n }, \"postcss\"), \" with rollup:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// app.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl/dist/mapbox-gl.css'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"h2\", {\n \"id\": \"using-with-a-mapbox-gl-fork\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#using-with-a-mapbox-gl-fork\",\n \"aria-label\": \"using with a mapbox gl fork permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Using with a mapbox-gl Fork\"), mdx(\"p\", null, \"Install your choice of fork along with react-map-gl, for example:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"install\"), \" --save react-map-gl maplibre-gl\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"# Add an empty placeholder for mapbox-gl to satisfy the peer dependency\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"install\"), \" --save mapbox-gl@npm:empty-npm-package@1.0.0\"))), mdx(\"p\", null, \"Then override the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapLib\"), \" prop of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" maplibregl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"maplibregl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"To use the stylesheet from the fork:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"href\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"https://unpkg.com/maplibre-gl@/dist/maplibre-gl.css\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"rel\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"stylesheet\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\"))))), mdx(\"p\", null, \"Or\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// app.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl/dist/maplibre-gl.css'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started…","frontmatter":{"title":"Get Started"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Get Started","slug":"docs/get-started/get-started","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/get-started","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\": \"get-started\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#get-started\",\n \"aria-label\": \"get started permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Get Started\"), mdx(\"h2\", {\n \"id\": \"installation\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#installation\",\n \"aria-label\": \"installation permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Installation\"), mdx(\"p\", null, \"Using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" requires \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"node >= v8\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react >= 16.3\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"sh\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-sh\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-sh\"\n }, \"npm install --save react-map-gl mapbox-gl\"))), mdx(\"h2\", {\n \"id\": \"example\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#example\",\n \"aria-label\": \"example permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Example\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n style\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"width\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"600\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"height\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See full project setup in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started\"\n }, \"get-started examples\"), \".\"), mdx(\"h2\", {\n \"id\": \"styling\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#styling\",\n \"aria-label\": \"styling permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Styling\"), mdx(\"p\", null, \"The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.\"), mdx(\"p\", null, \"You may add the stylesheet to the head of your page:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"href\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"rel\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"stylesheet\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\"))))), mdx(\"p\", null, \"Find out your mapbox version by running \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"yarn list mapbox-gl\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"npm ls mapbox-gl\"), \".\"), mdx(\"p\", null, \"Or embed it in your app by using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webpack.github.io/docs/stylesheets.html\"\n }, \"css-loader\"), \" with Webpack or \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.npmjs.com/package/rollup-plugin-postcss\"\n }, \"postcss\"), \" with rollup:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// app.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl/dist/mapbox-gl.css'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"h2\", {\n \"id\": \"using-with-a-mapbox-gl-fork\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#using-with-a-mapbox-gl-fork\",\n \"aria-label\": \"using with a mapbox gl fork permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Using with a mapbox-gl Fork\"), mdx(\"p\", null, \"Install your choice of fork along with react-map-gl, for example:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"install\"), \" --save react-map-gl maplibre-gl\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"# Add an empty placeholder for mapbox-gl to satisfy the peer dependency\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"install\"), \" --save mapbox-gl@npm:empty-npm-package@1.0.0\"))), mdx(\"p\", null, \"Then override the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapLib\"), \" prop of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" maplibregl \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map mapLib\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"maplibregl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"To use the stylesheet from the fork:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"href\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"https://unpkg.com/maplibre-gl@/dist/maplibre-gl.css\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"rel\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"stylesheet\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\"))))), mdx(\"p\", null, \"Or\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// app.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl/dist/maplibre-gl.css'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started…","frontmatter":{"title":"Get Started"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Get Started","slug":"docs/get-started/get-started","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/get-started/mapbox-tokens/page-data.json b/page-data/docs/get-started/mapbox-tokens/page-data.json index 7fe23926..dda000d3 100644 --- a/page-data/docs/get-started/mapbox-tokens/page-data.json +++ b/page-data/docs/get-started/mapbox-tokens/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/mapbox-tokens","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\": \"about-mapbox-tokens\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#about-mapbox-tokens\",\n \"aria-label\": \"about mapbox tokens permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"About Mapbox Tokens\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" itself is open source and free. It provides a React wrapper for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" or derived projects.\\nDepending 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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl@1.x\"), \" or \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/maplibre/maplibre-gl-js\"\n }, \"maplibre-gl\"), \" - 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.\")), mdx(\"p\", null, \"To get a Mapbox token, you will need to register on \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com\"\n }, \"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.\"), mdx(\"p\", null, \"There are several ways to provide a token to your app, as showcased in some of the example folders:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Provide a \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\"), \" prop to the map component\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Set the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapboxAccessToken\"), \" environment variable (or set \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"REACT_APP_MAPBOX_ACCESS_TOKEN\"), \" if you are using Create React App)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Provide it in the URL, e.g \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"?access_token=TOKEN\"))), mdx(\"p\", null, \"We recommend using an environment variable to minimize leaking risks. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/tips-and-tricks.md#securing-mapbox-token\"\n }, \"securing Mapbox token\"), \" for examples.\"), mdx(\"h2\", {\n \"id\": \"display-maps-without-a-mapbox-token\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#display-maps-without-a-mapbox-token\",\n \"aria-label\": \"display maps without a mapbox token permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Display Maps Without A Mapbox Token\"), mdx(\"p\", null, \"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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Stay on \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use a community fork of mapbox-gl, for example \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.npmjs.com/package/maplibre-gl\"\n }, \"maplibre-gl\"), \". See \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md#using-with-a-mapbox-gl-fork\"\n }, \"using with a mapbox-gl fork\"), \" for how to configure your project.\")), mdx(\"p\", null, \"To use your own map service, you will need a custom Mapbox GL style that points to your own \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/style-spec/\"\n }, \"vector tile source\"), \", and pass it to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" using the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" prop. This custom style must match the schema of your tile source.\"), mdx(\"p\", null, \"Open source tile schemas include:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tilezen.readthedocs.io/en/latest/layers/\"\n }, \"TileZen schema\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://openmaptiles.org/schema/\"\n }, \"OpenMapTiles schema \"))), mdx(\"p\", null, \"Some useful resources for creating your own map service:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.mapbox.com/developers/vector-tiles/\"\n }, \"Mapbox Vector Tile Spec\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/awesome-vector-tiles\"\n }, \"Open source tools\"))), mdx(\"p\", null, \"If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" using the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \" prop.\"), mdx(\"p\", null, \"An example function:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"transformRequest\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"url\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" resourceType\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"resourceType \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"===\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Tile'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" url\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"match\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'yourTileSource.com'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n url\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" url\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n headers\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Authorization'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Bearer '\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"+\"), \" yourAuthToken \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending…","frontmatter":{"title":"About Mapbox Tokens"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"About Mapbox Tokens","slug":"docs/get-started/mapbox-tokens","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/mapbox-tokens","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\": \"about-mapbox-tokens\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#about-mapbox-tokens\",\n \"aria-label\": \"about mapbox tokens permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"About Mapbox Tokens\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" itself is open source and free. It provides a React wrapper for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" or derived projects.\\nDepending 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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl@1.x\"), \" or \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/maplibre/maplibre-gl-js\"\n }, \"maplibre-gl\"), \" - 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.\")), mdx(\"p\", null, \"To get a Mapbox token, you will need to register on \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com\"\n }, \"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.\"), mdx(\"p\", null, \"There are several ways to provide a token to your app, as showcased in some of the example folders:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Provide a \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\"), \" prop to the map component\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Set the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapboxAccessToken\"), \" environment variable (or set \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"REACT_APP_MAPBOX_ACCESS_TOKEN\"), \" if you are using Create React App)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Provide it in the URL, e.g \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"?access_token=TOKEN\"))), mdx(\"p\", null, \"We recommend using an environment variable to minimize leaking risks. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/tips-and-tricks.md#securing-mapbox-token\"\n }, \"securing Mapbox token\"), \" for examples.\"), mdx(\"h2\", {\n \"id\": \"display-maps-without-a-mapbox-token\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#display-maps-without-a-mapbox-token\",\n \"aria-label\": \"display maps without a mapbox token permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Display Maps Without A Mapbox Token\"), mdx(\"p\", null, \"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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Stay on \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use a community fork of mapbox-gl, for example \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.npmjs.com/package/maplibre-gl\"\n }, \"maplibre-gl\"), \". See \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md#using-with-a-mapbox-gl-fork\"\n }, \"using with a mapbox-gl fork\"), \" for how to configure your project.\")), mdx(\"p\", null, \"To use your own map service, you will need a custom Mapbox GL style that points to your own \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/style-spec/\"\n }, \"vector tile source\"), \", and pass it to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" using the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" prop. This custom style must match the schema of your tile source.\"), mdx(\"p\", null, \"Open source tile schemas include:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tilezen.readthedocs.io/en/latest/layers/\"\n }, \"TileZen schema\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://openmaptiles.org/schema/\"\n }, \"OpenMapTiles schema \"))), mdx(\"p\", null, \"Some useful resources for creating your own map service:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.mapbox.com/developers/vector-tiles/\"\n }, \"Mapbox Vector Tile Spec\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/awesome-vector-tiles\"\n }, \"Open source tools\"))), mdx(\"p\", null, \"If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" using the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \" prop.\"), mdx(\"p\", null, \"An example function:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"transformRequest\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"url\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" resourceType\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"resourceType \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"===\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Tile'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" url\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"match\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'yourTileSource.com'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"url\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" url\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"headers\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'Authorization'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Bearer '\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"+\"), \" yourAuthToken \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending…","frontmatter":{"title":"About Mapbox Tokens"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"About Mapbox Tokens","slug":"docs/get-started/mapbox-tokens","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/get-started/state-management/page-data.json b/page-data/docs/get-started/state-management/page-data.json index e06ba859..e3014b74 100644 --- a/page-data/docs/get-started/state-management/page-data.json +++ b/page-data/docs/get-started/state-management/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/state-management","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\": \"state-management\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#state-management\",\n \"aria-label\": \"state management permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"State Management\"), mdx(\"p\", null, \"There are two ways to use a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \":\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://reactjs.org/docs/uncontrolled-components.html\"\n }, \"Uncontrolled\"), \": The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" class.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://reactjs.org/docs/forms.html#controlled-components\"\n }, \"Controlled\"), \": The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.\")), mdx(\"h2\", {\n \"id\": \"uncontrolled-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#uncontrolled-map\",\n \"aria-label\": \"uncontrolled map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Uncontrolled Map\"), mdx(\"p\", null, \"You may clone a full app configuration for this example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/basic\"\n }, \"here\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"controlled-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#controlled-map\",\n \"aria-label\": \"controlled map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Controlled Map\"), mdx(\"p\", null, \"You may clone a full app configuration for this example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/controlled\"\n }, \"here\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"evt\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setViewState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"evt\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"A real-world application likely uses more complicated state flows:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Using map with a state store (Redux) \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/redux\"\n }, \"example\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Using map with SSR (Next.js) \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/nextjs\"\n }, \"example\"))), mdx(\"h2\", {\n \"id\": \"custom-camera-constraints\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#custom-camera-constraints\",\n \"aria-label\": \"custom camera constraints permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Custom Camera Constraints\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" offers props that set basic constraints for the camera, e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"minZoom\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \". If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// npm install @turf/turf\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" turf \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@turf/turf'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// A circle of 5 mile radius of the Empire State Building\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"GEOFENCE\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"circle\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"74.0122106\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7467898\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"5\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"units\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'miles'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMove \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" newCenter \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Only update the view state if the center is inside the geofence\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"booleanPointInPolygon\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"newCenter\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"GEOFENCE\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setViewState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"newCenter\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map…","frontmatter":{"title":"State Management"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"State Management","slug":"docs/get-started/state-management","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/state-management","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\": \"state-management\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#state-management\",\n \"aria-label\": \"state management permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"State Management\"), mdx(\"p\", null, \"There are two ways to use a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \":\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://reactjs.org/docs/uncontrolled-components.html\"\n }, \"Uncontrolled\"), \": The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" class.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://reactjs.org/docs/forms.html#controlled-components\"\n }, \"Controlled\"), \": The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.\")), mdx(\"h2\", {\n \"id\": \"uncontrolled-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#uncontrolled-map\",\n \"aria-label\": \"uncontrolled map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Uncontrolled Map\"), mdx(\"p\", null, \"You may clone a full app configuration for this example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/basic\"\n }, \"here\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"controlled-map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#controlled-map\",\n \"aria-label\": \"controlled map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Controlled Map\"), mdx(\"p\", null, \"You may clone a full app configuration for this example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/controlled\"\n }, \"here\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"evt\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setViewState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"evt\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"A real-world application likely uses more complicated state flows:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Using map with a state store (Redux) \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/redux\"\n }, \"example\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Using map with SSR (Next.js) \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/nextjs\"\n }, \"example\"))), mdx(\"h2\", {\n \"id\": \"custom-camera-constraints\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#custom-camera-constraints\",\n \"aria-label\": \"custom camera constraints permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Custom Camera Constraints\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" offers props that set basic constraints for the camera, e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxBounds\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"minZoom\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \". If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// npm install @turf/turf\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" turf \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@turf/turf'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// A circle of 5 mile radius of the Empire State Building\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"GEOFENCE\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"circle\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"74.0122106\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7467898\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"5\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"units\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'miles'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"zoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMove \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" newCenter \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Only update the view state if the center is inside the geofence\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"booleanPointInPolygon\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"newCenter\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"GEOFENCE\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setViewState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"newCenter\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map…","frontmatter":{"title":"State Management"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"State Management","slug":"docs/get-started/state-management","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/get-started/tips-and-tricks/page-data.json b/page-data/docs/get-started/tips-and-tricks/page-data.json index 0513b8d5..8d6950f3 100644 --- a/page-data/docs/get-started/tips-and-tricks/page-data.json +++ b/page-data/docs/get-started/tips-and-tricks/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/tips-and-tricks","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\": \"tips-and-tricks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#tips-and-tricks\",\n \"aria-label\": \"tips and tricks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Tips and Tricks\"), mdx(\"h2\", {\n \"id\": \"securing-mapbox-token\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#securing-mapbox-token\",\n \"aria-label\": \"securing mapbox token permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Securing Mapbox Token\"), mdx(\"p\", null, \"Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Never commit your token in clear text into GitHub or other source control.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"In your local dev environment, define the token in an environment variable e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapboxAccessTokenDev=...\"), \" in the command line, or use something like \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/motdotla/dotenv\"\n }, \"dotenv\"), \" and put \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapboxAccessTokenDev=...\"), \" in a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".env\"), \" file. Add \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".env\"), \" to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".gitignore\"), \" so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Create separate tokens for development (often times on \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://localhost\"), \"), public code snippet (Gist, Codepen etc.) and production (deployed to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"https://mycompany.com\"), \"). The public token should be rotated regularly. The production token should have strict \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens\"\n }, \"scope and URL restrictions\"), \" that only allows it to be used on a domain that you own.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Add the following to your bundler config:\"), mdx(\"div\", {\n parentName: \"li\",\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// webpack.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"DefinePlugin\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"require\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'webpack'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"exports \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"\\n plugins\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"DefinePlugin\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'process.env.MapboxAccessToken'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"JSON\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"stringify\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"NODE_ENV\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'production'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenProd \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenDev\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"div\", {\n parentName: \"li\",\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// rollup.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" replace \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"require\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@rollup/plugin-replace'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"default\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"exports \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"\\n plugins\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"replace\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'process.env.MapboxAccessToken'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"JSON\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"stringify\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"NODE_ENV\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'production'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenProd \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenDev\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"p\", {\n parentName: \"li\"\n }, \"react-map-gl automatically picks up \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"process.env.MapboxAccessToken\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"process.env.REACT_APP_MAPBOX_ACCESS_TOKEN\"), \" if they are defined. Alternatively, you can use your own variable name (e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"__SUPER_SECRET_TOKEN__\"), \") and pass it in manually with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken={__SUPER_SECRET_TOKEN__}\"), \".\"))), mdx(\"h2\", {\n \"id\": \"minimize-cost-from-frequent-re-mounting\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#minimize-cost-from-frequent-re-mounting\",\n \"aria-label\": \"minimize cost from frequent re mounting permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Minimize Cost from Frequent Re-mounting\"), mdx(\"p\", null, \"In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using Tabs from Material UI\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabContext\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"selectedTab\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabList\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onChange\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"handleTabChange\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Tab\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"label\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"Map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Tab\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"label\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"List\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"table\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderMarker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"table\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Table\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderRow\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"p\", null, \"Every time the user clicks the \\\"table\\\" tab, the map is unmounted. When they click the \\\"map\\\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/pricing#maploads\"\n }, \"billable event\"), \" every time a Map object is initialized. It is obviously not idea to get billed for just collapsing and expanding part of the UI.\"), mdx(\"p\", null, \"In this case, it is recommended that you set the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#reuseMaps\"\n }, \"reuseMaps\"), \" prop to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"reuseMaps\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderMarker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"p\", null, \"This bypasses the initialization when a map is removed then added back.\"), mdx(\"h2\", {\n \"id\": \"performance-with-many-markers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#performance-with-many-markers\",\n \"aria-label\": \"performance with many markers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Performance with Many Markers\"), mdx(\"p\", null, \"If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useSelector\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useDispatch\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-redux'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"MapView\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" viewState \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useSelector\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"s\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" s\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" vehicles \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useSelector\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"s\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" s\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" dispatch \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useDispatch\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMove \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"evt\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"dispatch\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'setViewState'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" payload\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" evt\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Marker\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"key\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"id\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"svg\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n // vehicle icon\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible.\"), mdx(\"p\", null, \"One way to improve the performance is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMemo\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" markers \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMemo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Marker\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"key\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"id\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"svg\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n // vehicle icon\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"markers\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"This prevents React from rerendering the markers unless they have changed.\"), mdx(\"p\", null, \"If your application can do without complicated DOM objects and CSS styling, consider switching to a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol\"\n }, \"symbol layer\"), \". Layers are rendered in WebGL and are much more performant than markers:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" vehiclesGeoJSON \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMemo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n features\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"point\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"vehicle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" vehicle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Source\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"id\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"vehicles\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"geojson\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"data\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehiclesGeoJSON\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Layer\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"symbol\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"layout\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'icon-image'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'vehicle-icon'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'icon-size'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'text-field'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'get'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'id'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n );\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you…","frontmatter":{"title":"Tips and Tricks"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Tips and Tricks","slug":"docs/get-started/tips-and-tricks","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/tips-and-tricks","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\": \"tips-and-tricks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#tips-and-tricks\",\n \"aria-label\": \"tips and tricks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Tips and Tricks\"), mdx(\"h2\", {\n \"id\": \"securing-mapbox-token\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#securing-mapbox-token\",\n \"aria-label\": \"securing mapbox token permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Securing Mapbox Token\"), mdx(\"p\", null, \"Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Never commit your token in clear text into GitHub or other source control.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"In your local dev environment, define the token in an environment variable e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapboxAccessTokenDev=...\"), \" in the command line, or use something like \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/motdotla/dotenv\"\n }, \"dotenv\"), \" and put \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapboxAccessTokenDev=...\"), \" in a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".env\"), \" file. Add \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".env\"), \" to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".gitignore\"), \" so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Create separate tokens for development (often times on \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"http://localhost\"), \"), public code snippet (Gist, Codepen etc.) and production (deployed to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"https://mycompany.com\"), \"). The public token should be rotated regularly. The production token should have strict \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens\"\n }, \"scope and URL restrictions\"), \" that only allows it to be used on a domain that you own.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Add the following to your bundler config:\"), mdx(\"div\", {\n parentName: \"li\",\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// webpack.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"DefinePlugin\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"require\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'webpack'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"exports \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"plugins\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"DefinePlugin\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'process.env.MapboxAccessToken'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"JSON\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"stringify\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"NODE_ENV\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'production'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenProd \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenDev\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"div\", {\n parentName: \"li\",\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// rollup.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" replace \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"require\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@rollup/plugin-replace'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"default\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"exports \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"plugins\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"replace\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string-property property\"\n }, \"'process.env.MapboxAccessToken'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"JSON\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"stringify\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"NODE_ENV\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'production'\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenProd \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" process\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"env\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"MapboxAccessTokenDev\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"p\", {\n parentName: \"li\"\n }, \"react-map-gl automatically picks up \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"process.env.MapboxAccessToken\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"process.env.REACT_APP_MAPBOX_ACCESS_TOKEN\"), \" if they are defined. Alternatively, you can use your own variable name (e.g. \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"__SUPER_SECRET_TOKEN__\"), \") and pass it in manually with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken={__SUPER_SECRET_TOKEN__}\"), \".\"))), mdx(\"h2\", {\n \"id\": \"minimize-cost-from-frequent-re-mounting\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#minimize-cost-from-frequent-re-mounting\",\n \"aria-label\": \"minimize cost from frequent re mounting permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Minimize Cost from Frequent Re-mounting\"), mdx(\"p\", null, \"In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using Tabs from Material UI\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabContext\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"selectedTab\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabList\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onChange\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"handleTabChange\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Tab\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"label\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"Map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Tab\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"label\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"List\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"table\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderMarker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"table\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Table\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderRow\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"p\", null, \"Every time the user clicks the \\\"table\\\" tab, the map is unmounted. When they click the \\\"map\\\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.mapbox.com/pricing#maploads\"\n }, \"billable event\"), \" every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI.\"), mdx(\"p\", null, \"In this case, it is recommended that you set the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#reuseMaps\"\n }, \"reuseMaps\"), \" prop to \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"TabPanel\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"value\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"reuseMaps\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"items\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"renderMarker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\"))))), mdx(\"p\", null, \"This bypasses the initialization when a map is removed then added back.\"), mdx(\"h2\", {\n \"id\": \"performance-with-many-markers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#performance-with-many-markers\",\n \"aria-label\": \"performance with many markers permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Performance with Many Markers\"), mdx(\"p\", null, \"If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useSelector\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useDispatch\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-redux'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Marker\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"MapView\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" viewState \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useSelector\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"s\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" s\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" vehicles \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useSelector\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"s\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" s\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" dispatch \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useDispatch\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" onMove \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useCallback\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"evt\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"dispatch\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'setViewState'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"payload\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" evt\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"viewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Marker\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"key\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"id\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"svg\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n // vehicle icon\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible.\"), mdx(\"p\", null, \"One way to improve the performance is \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMemo\"), \":\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" markers \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMemo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Marker\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"key\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"id\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"longitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"latitude\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehicle\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"svg\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n // vehicle icon\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"markers\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"This prevents React from rerendering the markers unless they have changed.\"), mdx(\"p\", null, \"If your application can do without complicated DOM objects and CSS styling, consider switching to a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol\"\n }, \"symbol layer\"), \". Layers are rendered in WebGL and are much more performant than markers:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" vehiclesGeoJSON \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMemo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'FeatureCollection'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"features\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"map\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"vehicle\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" turf\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"point\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"vehicle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"coordinates\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" vehicle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"vehicles\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Map\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token spread\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewState\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onMove\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onMove\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"mapStyle\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"mapbox://styles/mapbox/streets-v9\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n >\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Source\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"id\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"vehicles\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"geojson\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"data\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"vehiclesGeoJSON\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Layer\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"type\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"symbol\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"layout\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string-property property\"\n }, \"'icon-image'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'vehicle-icon'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string-property property\"\n }, \"'icon-size'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string-property property\"\n }, \"'text-field'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'get'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token string\"\n }, \"'id'\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"]\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n );\")))), mdx(\"h2\", {\n \"id\": \"finding-out-if-a-point-is-within-the-current-viewport\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#finding-out-if-a-point-is-within-the-current-viewport\",\n \"aria-label\": \"finding out if a point is within the current viewport permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Finding out if a point is within the current viewport\"), mdx(\"p\", null, \"There are some situations where you want to know if a point is currently visible on the map.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Checking this is simple and can be done like so:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" mapRef \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" useRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"MapRef\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"();\\n\\nconst checkIfPositionInViewport = (lat, lng) => \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" bounds \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" mapRef\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"current\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"getMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"getBounds\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"lat \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">=\"), \" bounds\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"_sw\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"lat \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" lat \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<=\"), \" bounds\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"_nw\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"lat \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" lng \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">=\"), \" bounds\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"_sw\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"lng \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" lng \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<=\"), \" bounds\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"_nw\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"lng\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n\\nreturn \")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you…","frontmatter":{"title":"Tips and Tricks"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../../api-reference/use-map":"/docs/api-reference/use-map","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/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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Tips and Tricks","slug":"docs/get-started/tips-and-tricks","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/docs/upgrade-guide/page-data.json b/page-data/docs/upgrade-guide/page-data.json index 93214c2e..6dd01b1d 100644 --- a/page-data/docs/upgrade-guide/page-data.json +++ b/page-data/docs/upgrade-guide/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/upgrade-guide","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\": \"upgrade-guide\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#upgrade-guide\",\n \"aria-label\": \"upgrade guide permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrade Guide\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v70\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v70\",\n \"aria-label\": \"upgrading to v70 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v7.0\"), mdx(\"p\", null, \"v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"If you are using react-map-gl controls (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Marker\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Popup\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"NavigationControl\"), \" etc.) with deck.gl's \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"ContextProvider\"), \", do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.\")), mdx(\"h3\", {\n \"id\": \"dependencies\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#dependencies\",\n \"aria-label\": \"dependencies permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Dependencies\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" (or a compatible fork) to your package.json. \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport-mercator-project\"), \" (an alias of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"@math.gl/web-mercator\"), \") is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.\")), mdx(\"h3\", {\n \"id\": \"module-exports\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#module-exports\",\n \"aria-label\": \"module exports permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Module exports\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" are removed. Instead, import \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"setRTLTextPlugin\"), \" is removed. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component's \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"RTLTextPlugin\"), \" prop (default enabled).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" is removed. v7.0 has removed its own implementation of user input handling in favor of the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/\"\n }, \"native handlers\"), \". If you are using a custom implementation of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \", check if the native handlers offer options to address your application's needs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"useMapControl\"), \" are removed. Check out the new API \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-control.md\"\n }, \"useControl\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \") are removed. Check out \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay\"\n }, \"this example\"), \" for implementing similar controls in your own application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"LinearInterpolator\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"FlyToInterpolator\"), \" are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\")), mdx(\"h3\", {\n \"id\": \"map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#map\",\n \"aria-label\": \"map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Map\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"documentation\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Renamed props for better consistency with the wrapped library:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiAccessToken\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiUrl\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"baseApiUrl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventStyleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \") is replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"styleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \")\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" should be explicitly specified. The default value has changed from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"\\\"mapbox://styles/mapbox/light-v9\\\"\"), \" to an empty style.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The following props are removed and apps should use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"style\"), \" instead:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"visible\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewStateChange\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onInteractionStateChange\"), \" are removed. You can either use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" as an uncontrolled component with the new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" prop, or if you need to manage the camera state externally (e.g. in Redux), use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMove\"), \" callback instead. See examples in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transition*\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapOptions\"), \" is removed. Almost all of the options for the native \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" class are exposed as props. \"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onHover\"), \" is removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseMove\"), \" or \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The event argument is changed for all interaction callbacks. See documentation for details.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"getCursor\"), \" is removed as part of the effort to get \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" behave the same as the native component. To set the cursor, use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cursor\"), \" prop. Follow \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-cursor\"\n }, \"this example\"), \" to change cursor on hover.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchAction\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"eventRecognizerOptions\"), \" are removed. Check out the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cooperativeGestures\"), \" prop.\")), mdx(\"h3\", {\n \"id\": \"other-components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-components\",\n \"aria-label\": \"other components permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other components\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"capture*\"), \" props are removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"*label\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"locale\"), \" prop.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/discussions\"\n }, \"Discussion\"), \" so we can review on a case-by-case basis.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v53v61\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v53v61\",\n \"aria-label\": \"upgrading to v53v61 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v5.3/v6.1\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" is now an official API. The experimental \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"_MapContext\"), \" export will be removed in a future release.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-virtualized-auto-sizer\"), \" is no longer a dependency.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#interaction-options\"\n }, \"interaction options\"), \":\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n dragPan\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"inertia\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n dragRotate\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"inertia\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n touchZoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"inertia\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Source\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Layer\"), \" components no longer expose imperative methods via \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ref\"), \" as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceRef.getSource()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getSource(sourceId)\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"layerRef.getLayer()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getLayer(layerId)\"), \".\")))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v6\",\n \"aria-label\": \"upgrading to v6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v6\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"A valid Mapbox access token is always required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The default value of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \" prop is changed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"85\"), \" from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"60\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"m is not defined\"), \". Find solutions in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/10173\"\n }, \"this thread\"), \".\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v4\",\n \"aria-label\": \"upgrading to v4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v4\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Immutable.js\"), \" is no longer a dependency\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Export \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"experimental.MapControls\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapControls\"), \" prop is renamed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"controller\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Removed support for the deprecated \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactive\"), \" property on the layer styles. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" prop to specify which layers are clickable.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v32\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v32\",\n \"aria-label\": \"upgrading to v32 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v3.2\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The latest mapbox-gl release requires stylesheet to be included at all times. See \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md\"\n }, \"Get Started\"), \" for information about styling.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v3\",\n \"aria-label\": \"upgrading to v3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v3\"), mdx(\"p\", null, \"v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.\"), mdx(\"h3\", {\n \"id\": \"version-requirements\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#version-requirements\",\n \"aria-label\": \"version requirements permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Version Requirements\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"Node Version Requirement\"), \" for \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"building\"), \" react-map-gl is now \", mdx(\"strong\", {\n parentName: \"li\"\n }, \">=v6.4.0\"), \". Using prebuilt react-map-gl does \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"NOT\"), \" has this limitation. This is introduced by \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.38.0\"\n }, \"Mapbox GL JS v0.38.0\"))), mdx(\"h3\", {\n \"id\": \"mapgl-component\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#mapgl-component\",\n \"aria-label\": \"mapgl component permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"MapGL Component\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Two Map Components\"), \" - v3 now splits the Map component into two React components: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \". \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" is the default export, and designed to be as compatible as possible with the v2 default component.\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"aria-label\": \"code classlanguage textonchangeviewportcode callback now includes code classlanguage textwidthcode and code classlanguage textheightcode permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"height\"), \".\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" parameter passed to the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \". Application code that composed the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \" may have to be updated. Please double check your render code if you relied on this behavior.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// GOOD: 'width' and 'height' below will override the values in 'viewport'\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"h3\", {\n \"id\": \"overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#overlays\",\n \"aria-label\": \"overlays permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Overlays\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Some Overlays Moved to Examples\"), \" - Some less frequently used overlays (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"DraggablePointsOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ChoroplethOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ScatterplotOverlay\"), \"), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Overlays must be Children of the Map\"), \" - Overlays \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"must\"), \" now be rendered as children of the main \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" component to automatically sync with the map viewport.\")), mdx(\"h3\", {\n \"id\": \"code-classlanguage-textfitboundscode-utility-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#code-classlanguage-textfitboundscode-utility-function\",\n \"aria-label\": \"code classlanguage textfitboundscode utility function permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h3\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility function\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility has been moved to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/uber-web/math.gl\"\n }, \"math.gl\"), \" library. The function can now be called as follows:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" WebMercatorViewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'viewport-mercator-project'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" viewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"WebMercatorViewport\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"600\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" bound \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"fitBounds\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"73.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"72.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"41.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"padding\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"20\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" offset\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// => bounds: instance of WebMercatorViewport\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}\")))), mdx(\"h3\", {\n \"id\": \"deprecations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#deprecations\",\n \"aria-label\": \"deprecations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Deprecations\"), mdx(\"p\", null, \"We have started to deprecate a few React props. In all the cases below, the old \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" as soon as possible.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Old Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"New Prop\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onChangeViewport()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onViewportChange()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHoverFeatures()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHover()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClickFeatures()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClick()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"perspectiveEnabled [default: false]\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"dragRotate [default: true]\"))))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v2\",\n \"aria-label\": \"upgrading to v2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v2\"), mdx(\"p\", null, \"v2 is API compatible with v1, however if you are still using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"v1\"), \" of react-map-gl, make sure that you first upgrade:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"node\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"v4\"), \" or higher\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"15.4\"), \" or higher.\")), mdx(\"p\", null, \"Background: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" 0.31.0 introduced a hard dependency on Node >= v4.\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v1\",\n \"aria-label\": \"upgrading to v1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v1\"), mdx(\"p\", null, \"(Upgrading from 0.6.x)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Importing Overlays\"), \" - The map overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \" etc) are now named exports. They previously had to be imported via their relative source paths:\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v1.0\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"SVGOverlay\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v0.6\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" SVGOverlay \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl/src/api-reference/svg-overlay'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Map State\"), \" - The map state reported by \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChanged\"), \" will now contain additional state fields (tracking not only \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" needed for perspective mode, but also transient information about how the projection is being changed by the user).\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"This information must be passed back to the react-map-gl component in the next render.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"To simplify and future proof applications, it is recommended to simply save the entire \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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 \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \").\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave…","frontmatter":{"title":"Upgrade Guide"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../api-reference/use-map":"/docs/api-reference/use-map","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","../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Upgrade Guide","slug":"docs/upgrade-guide","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/upgrade-guide","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\": \"upgrade-guide\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#upgrade-guide\",\n \"aria-label\": \"upgrade guide permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrade Guide\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v70\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v70\",\n \"aria-label\": \"upgrading to v70 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v7.0\"), mdx(\"p\", null, \"v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"If you are using react-map-gl controls (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Marker\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Popup\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"NavigationControl\"), \" etc.) with deck.gl's \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"ContextProvider\"), \", do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.\")), mdx(\"h3\", {\n \"id\": \"dependencies\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#dependencies\",\n \"aria-label\": \"dependencies permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Dependencies\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" (or a compatible fork) to your package.json. \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport-mercator-project\"), \" (an alias of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"@math.gl/web-mercator\"), \") is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.\")), mdx(\"h3\", {\n \"id\": \"module-exports\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#module-exports\",\n \"aria-label\": \"module exports permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Module exports\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" are removed. Instead, import \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"setRTLTextPlugin\"), \" is removed. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component's \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"RTLTextPlugin\"), \" prop (default enabled).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" is removed. v7.0 has removed its own implementation of user input handling in favor of the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/\"\n }, \"native handlers\"), \". If you are using a custom implementation of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \", check if the native handlers offer options to address your application's needs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"useMapControl\"), \" are removed. Check out the new API \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-control.md\"\n }, \"useControl\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \") are removed. Check out \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay\"\n }, \"this example\"), \" for implementing similar controls in your own application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"LinearInterpolator\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"FlyToInterpolator\"), \" are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\")), mdx(\"h3\", {\n \"id\": \"map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#map\",\n \"aria-label\": \"map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Map\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"documentation\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Renamed props for better consistency with the wrapped library:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiAccessToken\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiUrl\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"baseApiUrl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventStyleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \") is replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"styleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \")\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" should be explicitly specified. The default value has changed from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"\\\"mapbox://styles/mapbox/light-v9\\\"\"), \" to an empty style.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The following props are removed and apps should use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"style\"), \" instead:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"visible\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewStateChange\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onInteractionStateChange\"), \" are removed. You can either use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" as an uncontrolled component with the new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" prop, or if you need to manage the camera state externally (e.g. in Redux), use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMove\"), \" callback instead. See examples in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transition*\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapOptions\"), \" is removed. Almost all of the options for the native \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" class are exposed as props. \"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onHover\"), \" is removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseMove\"), \" or \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The event argument is changed for all interaction callbacks. See documentation for details.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"getCursor\"), \" is removed as part of the effort to get \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" behave the same as the native component. To set the cursor, use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cursor\"), \" prop. Follow \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-cursor\"\n }, \"this example\"), \" to change cursor on hover.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchAction\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"eventRecognizerOptions\"), \" are removed. Check out the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cooperativeGestures\"), \" prop.\")), mdx(\"h3\", {\n \"id\": \"other-components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-components\",\n \"aria-label\": \"other components permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Other components\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"capture*\"), \" props are removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"*label\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"locale\"), \" prop.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/discussions\"\n }, \"Discussion\"), \" so we can review on a case-by-case basis.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v53v61\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v53v61\",\n \"aria-label\": \"upgrading to v53v61 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v5.3/v6.1\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" is now an official API. The experimental \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"_MapContext\"), \" export will be removed in a future release.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-virtualized-auto-sizer\"), \" is no longer a dependency.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#interaction-options\"\n }, \"interaction options\"), \":\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"dragPan\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"dragRotate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"touchZoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Source\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Layer\"), \" components no longer expose imperative methods via \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ref\"), \" as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceRef.getSource()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getSource(sourceId)\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"layerRef.getLayer()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getLayer(layerId)\"), \".\")))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v6\",\n \"aria-label\": \"upgrading to v6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v6\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"A valid Mapbox access token is always required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The default value of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \" prop is changed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"85\"), \" from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"60\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"m is not defined\"), \". Find solutions in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/10173\"\n }, \"this thread\"), \".\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v4\",\n \"aria-label\": \"upgrading to v4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v4\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Immutable.js\"), \" is no longer a dependency\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Export \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"experimental.MapControls\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapControls\"), \" prop is renamed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"controller\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Removed support for the deprecated \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactive\"), \" property on the layer styles. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" prop to specify which layers are clickable.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v32\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v32\",\n \"aria-label\": \"upgrading to v32 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v3.2\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The latest mapbox-gl release requires stylesheet to be included at all times. See \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md\"\n }, \"Get Started\"), \" for information about styling.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v3\",\n \"aria-label\": \"upgrading to v3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v3\"), mdx(\"p\", null, \"v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.\"), mdx(\"h3\", {\n \"id\": \"version-requirements\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#version-requirements\",\n \"aria-label\": \"version requirements permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Version Requirements\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"Node Version Requirement\"), \" for \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"building\"), \" react-map-gl is now \", mdx(\"strong\", {\n parentName: \"li\"\n }, \">=v6.4.0\"), \". Using prebuilt react-map-gl does \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"NOT\"), \" has this limitation. This is introduced by \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.38.0\"\n }, \"Mapbox GL JS v0.38.0\"))), mdx(\"h3\", {\n \"id\": \"mapgl-component\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#mapgl-component\",\n \"aria-label\": \"mapgl component permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"MapGL Component\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Two Map Components\"), \" - v3 now splits the Map component into two React components: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \". \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" is the default export, and designed to be as compatible as possible with the v2 default component.\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"aria-label\": \"code classlanguage textonchangeviewportcode callback now includes code classlanguage textwidthcode and code classlanguage textheightcode permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"height\"), \".\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" parameter passed to the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \". Application code that composed the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \" may have to be updated. Please double check your render code if you relied on this behavior.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// GOOD: 'width' and 'height' below will override the values in 'viewport'\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"h3\", {\n \"id\": \"overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#overlays\",\n \"aria-label\": \"overlays permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Overlays\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Some Overlays Moved to Examples\"), \" - Some less frequently used overlays (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"DraggablePointsOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ChoroplethOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ScatterplotOverlay\"), \"), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Overlays must be Children of the Map\"), \" - Overlays \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"must\"), \" now be rendered as children of the main \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" component to automatically sync with the map viewport.\")), mdx(\"h3\", {\n \"id\": \"code-classlanguage-textfitboundscode-utility-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#code-classlanguage-textfitboundscode-utility-function\",\n \"aria-label\": \"code classlanguage textfitboundscode utility function permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), mdx(\"code\", {\n parentName: \"h3\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility function\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility has been moved to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/uber-web/math.gl\"\n }, \"math.gl\"), \" library. The function can now be called as follows:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" WebMercatorViewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'viewport-mercator-project'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" viewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"WebMercatorViewport\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"width\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"600\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"height\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" bound \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"fitBounds\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"73.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"72.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"41.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"padding\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"20\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"offset\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// => bounds: instance of WebMercatorViewport\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}\")))), mdx(\"h3\", {\n \"id\": \"deprecations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#deprecations\",\n \"aria-label\": \"deprecations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Deprecations\"), mdx(\"p\", null, \"We have started to deprecate a few React props. In all the cases below, the old \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" as soon as possible.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Old Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"New Prop\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onChangeViewport()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onViewportChange()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHoverFeatures()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHover()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClickFeatures()\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClick()\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"perspectiveEnabled [default: false]\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"dragRotate [default: true]\"))))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v2\",\n \"aria-label\": \"upgrading to v2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v2\"), mdx(\"p\", null, \"v2 is API compatible with v1, however if you are still using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"v1\"), \" of react-map-gl, make sure that you first upgrade:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"node\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"v4\"), \" or higher\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"15.4\"), \" or higher.\")), mdx(\"p\", null, \"Background: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" 0.31.0 introduced a hard dependency on Node >= v4.\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v1\",\n \"aria-label\": \"upgrading to v1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\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\", {\n parentName: \"svg\",\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 }))), \"Upgrading to v1\"), mdx(\"p\", null, \"(Upgrading from 0.6.x)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Importing Overlays\"), \" - The map overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \" etc) are now named exports. They previously had to be imported via their relative source paths:\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v1.0\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"SVGOverlay\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v0.6\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" SVGOverlay \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl/src/api-reference/svg-overlay'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Map State\"), \" - The map state reported by \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChanged\"), \" will now contain additional state fields (tracking not only \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" needed for perspective mode, but also transient information about how the projection is being changed by the user).\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"This information must be passed back to the react-map-gl component in the next render.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"To simplify and future proof applications, it is recommended to simply save the entire \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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 \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \").\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave…","frontmatter":{"title":"Upgrade Guide"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../api-reference/attribution-control":"/docs/api-reference/attribution-control","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/layer":"/docs/api-reference/layer","../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../api-reference/map":"/docs/api-reference/map","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/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/types":"/docs/api-reference/types","../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../api-reference/use-map":"/docs/api-reference/use-map","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","../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Upgrade Guide","slug":"docs/upgrade-guide","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/search/page-data.json b/page-data/search/page-data.json index db9ee110..8e4546a6 100644 --- a/page-data/search/page-data.json +++ b/page-data/search/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The 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 v2 The 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 forks It 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 react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization . To manage the complexity of these 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. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl . In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. 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. Ultimately, in the spirit of the reactive programming paradigm , data always flows down . 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 Map component can be fully controlled , that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management . Limitations In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants. It is possible to call the native methods directly from the Map instance obtained via getMap . However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. compact : boolean | undefined If true , force a compact attribution that shows the full attribution on mouse hover. If false , force the full attribution control. If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide. Note that your attribution must adhere to Mapbox's guidelines . customAttribution : string | string[] String or strings to show in addition to any other attributions. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source attribution-control.ts","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"compact: boolean | undefined","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. containerId : string Id of the DOM element which should be made full screen. By default, the map container element will be made full screen. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source fullscreen-control.ts","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"containerId: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger() : boolean Trigger a geolocation event. Returns: true if successful. Properties Note that the following properties are not reactive. They are only used when the component first mounts. Tracking options positionOptions : PositionOptions A Geolocation API PositionOptions object trackUserLocation : boolean Default: false If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. Render options fitBoundsOptions : FitBoundsOptions Default: {maxZoom: 15} A ( fitBounds ) options object to use when the map is panned and zoomed to the user's location. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showAccuracyCircle : boolean Default: true Draw 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. \nThis only has effect if showUserLocation is true . showUserHeading : boolean Default: false If true , an arrow will be drawn next to the user location dot indicating the device's heading.\nThis only has affect when trackUserLocation is true . showUserLocation : boolean Default: true Show a dot on the map at the user's location. Set to false to disable. Callbacks onGeolocate : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success. onError : (evt: GeolocateErrorEvent ) => void Called on each Geolocation API position update that returned as an error. onOutOfMaxBounds : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success but user position is out of map maxBounds . onTrackUserLocationStart : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the active lock state. onTrackUserLocationEnd : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the background state. Source geolocate-control.ts","headings":[{"value":"GeolocateControl","depth":1},{"value":"Methods","depth":2},{"value":"trigger(): boolean","depth":4},{"value":"Properties","depth":2},{"value":"Tracking options","depth":3},{"value":"positionOptions: PositionOptions","depth":4},{"value":"trackUserLocation: boolean","depth":4},{"value":"Render options","depth":3},{"value":"fitBoundsOptions: FitBoundsOptions","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showAccuracyCircle: boolean","depth":4},{"value":"showUserHeading: boolean","depth":4},{"value":"showUserLocation: boolean","depth":4},{"value":"Callbacks","depth":3},{"value":"onGeolocate: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onError: (evt: GeolocateErrorEvent) => void","depth":4},{"value":"onOutOfMaxBounds: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onTrackUserLocationStart: (evt: GeolocateEvent) => void","depth":4},{"value":"onTrackUserLocationEnd: (evt: GeolocateEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"Layer This component allows apps to create a map layer using React. 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 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 is used as the child of a Source component, this prop will be overwritten by the id of the parent source. Source layer.ts","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Options","depth":3},{"value":"beforeId: string","depth":4},{"value":"source: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component should wrap all nodes in which you may want to access the maps: See useMap for more information. Source use-map.tsx","headings":[{"value":"MapProvider","depth":1},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-provider","title":"MapProvider"},{"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible via a React ref or the useMap hook. The MapRef object exposes Map methods that are safe to call without breaaking the React bindings . For example, setStyle() is hidden from the ref object, because the style is supposed to be changed by updating the mapStyle prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors. You can still access the hidden members via getMap() : getMap() : MapboxMap Returns the native Map instance associated with this component. Properties Layout options id : string Map container id. style : CSSProperties Default: {position: 'relative', width: '100%', height: '100%'} Map container CSS. cursor : string Default: 'auto' The current cursor type . Styling options fog : Fog | null The fog property of the style. Must conform to the Fog Style Specification .\nIf null is provided, removes the fog from the map. light : Light Light properties of the style. Must conform to the Light Style Specification . mapStyle : MapboxStyle | string | Immutable Default: (empty style) The map's Mapbox style. This must be an a JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. projection : string | ProjectionSpecification Default: 'mercator' The projection the map should be rendered in. Available projections are Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). Conic projections such as Albers and Lambert have configurable center and parallels properties that allow developers to define the region in which the projection has minimal distortion; see example . renderWorldCopies : boolean Default: true If true , multiple copies of the world will be rendered, when zoomed out. styleDiffing : boolean Default: true Enable diffing when mapStyle changes. If false , force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update. terrain : TerrainSpecification Terrain property of the style. Must conform to the Terrain Style Specification .\nIf null is provided, removes terrain from the map. Camera options initialViewState : object The initial view state of the map. If specified, longitude , latitude , zoom etc. in props are ignored when constructing the map. Only specify initialViewState if Map is being used as an uncontrolled component . See state management for examples. bounds? : LngLatBoundsLike - The initial bounds of the map. If specified, it overrides the longitude , latitude and zoom options. Default null . fitBoundsOptions : FitBoundsOptions - A fitBounds options object to use only when setting the bounds option. Default null . longitude : number - The initial longitude of the map center. Default 0 . latitude : number - The initial latitude of the map center. Default 0 . zoom : number - The initial zoom level. Default 0 . pitch : number - The initial pitch (tilt) of the map. Default 0 . bearing : number - The initial bearing (rotation) of the map. Default 0 . longitude : number The longitude of the map center. latitude : number The latitude of the map center. zoom : number The zoom level of the map. pitch : number The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). bearing : number The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. padding : PaddingOptions Default: null The padding in pixels around the viewport. minZoom : number Default: 0 The minimum zoom level of the map (0-24). maxZoom : number Default: 22 The maximum zoom level of the map (0-24). minPitch : number Default: 0 The minimum pitch of the map (0-85). maxPitch : number Default: 60 The maximum pitch of the map (0-85). maxBounds : LngLatBoundsLike Default: null If set, the map is constrained to the given bounds. Input handler options boxZoom : boolean Default: true If true , the \"box zoom\" interaction is enabled (see BoxZoomHandler ). doubleClickZoom : boolean Default: true If true , the \"double click to zoom\" interaction is enabled (see DoubleClickZoomHandler ). dragRotate : boolean Default: true If true , the \"drag to rotate\" interaction is enabled (see DragRotateHandler ). dragPan : boolean | DragPanOptions Default: true If true , the \"drag to pan\" interaction is enabled. Optionally accpt an object value that is the options to DragPanHandler#enable . keyboard : boolean Default: true If true , keyboard shortcuts are enabled (see KeyboardHandler ). scrollZoom : boolean | ZoomRotateOptions Default: true If true , the \"scroll to zoom\" interaction is enabled. Optionally accpt an object value that is the options to ScrollZoomHandler#enable . touchPitch : boolean Default: true If true , the \"drag to pitch\" interaction is enabled. Optionally accpt an object value that is the options to TouchPitchHandler#enable . touchZoomRotate : boolean | ZoomRotateOptions Default: true If true , the \"pinch to rotate and zoom\" interaction is enabled. Optionally accpt an object value that is the options to TouchZoomRotateHandler#enable . interactiveLayerIds : string[] Default: null The id(s) of style layer(s). If specified, pointer event ( mousemove , click etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a features property containing an array of the matching features. If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a features property. See the Callbacks section for affected events. Callbacks onResize : (event: MapboxEvent ) => void Called when the map has been resized. onLoad : (event: MapboxEvent ) => void Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. onRender : (event: MapboxEvent ) => void Called whenever the map is drawn to the screen. onIdle : (event: MapboxEvent ) => void Called after the last frame rendered before the map enters an \"idle\" state: No camera transitions are in progress All currently requested tiles have loaded All fade/transition animations have completed onRemove : (event: MapboxEvent ) => void Called when the map has been removed. onError : (event: ErrorEvent ) => void Default: evt => console.error(evt.error) Called when an error occurs. onMouseDown : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s). onMouseUp : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is released within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s). onMouseOver : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. onMouseEnter : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by interactiveLayerIds from outside that layer or outside the map canvas. onMouseMove : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s). onMouseLeave : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by interactiveLayerIds or moves from the layer to outside the map canvas. onMouseOut : (event: MapLayerMouseEvent ) => void Called when a point device (usually a mouse) leaves the map's canvas. onClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released at the same point on the map. If interactiveLayerIds is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer. onDblClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. If interactiveLayerIds is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer. onContextMenu : (event: MapLayerMouseEvent ) => void Called when the right button of the mouse is clicked or the context menu key is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer. onWheel : (event: MapWheelEvent ) => void Called when a wheel event occurs within the map. onTouchStart : (event: MapLayerTouchEvent ) => void Called when a touchstart event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchEnd : (event: MapLayerTouchEvent ) => void Called when a touchend event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchMove : (event: MapLayerTouchEvent ) => void Called when a touchmove event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchCancel : (event: MapLayerTouchEvent ) => void Called when a touchcancel event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onMoveStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one view to another. onMove : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one view to another. When Map is used as a controlled component, event.viewState reflects the view state that the camera \"proposes\" to move to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the view state props ( longitude , latitude , zoom etc.).\nSee state management for examples. onMoveEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one view to another. onDragStart : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction starts. onDrag : (event: ViewStateChangeEvent ) => void Called repeatedly during a \"drag to pan\" interaction. onDragEnd : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction ends. onZoomStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one zoom level to another. onZoom : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one zoom level to another. When Map is used as a controlled component, event.viewState.zoom reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the zoom prop. onZoomEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one zoom level to another. onRotateStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one bearing (rotation) to another. onRotate : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one bearing (rotation) to another. When Map is used as a controlled component, event.viewState.bearing reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the bearing prop. onRotateEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one bearing (rotation) to another. onPitchStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one pitch (tilt) to another. onPitch : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one pitch (tilt) to another. When Map is used as a controlled component, event.viewState.pitch reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the pitch prop. onPitchEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one pitch (tilt) to another. onBoxZoomStart : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction starts. onBoxZoomEnd : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction ends. onBoxZoomCancel : (event: MapBoxZoomEvent ) => void Called when the user cancels a \"box zoom\" interaction, or when the bounding box does not meet the minimum size threshold. onData : (event: MapStyleDataEvent | MapSourceDataEvent ) => void Called when any map data loads or changes. See MapDataEvent for more information. onStyleData : (event: MapStyleDataEvent ) => void Called when the map's style loads or changes. See MapDataEvent for more information. onSourceData : (event: MapSourceDataEvent ) => void Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information. Other options Props in this section are not reactive. They are only used once when the Map instance is constructed. mapLib : any Override the map library. By default, it loads the mapbox-gl module using dynamic import . This can be used to replace mapbox-gl with a compatible fork: Or to load a pre-bundled version of the library: Default: import('mapbox-gl') mapboxAccessToken : string Token used to access the Mapbox data service. See about map tokens . antialias : boolean Default: false If true , the gl context will be created with MSAA antialiasing , which can be useful for antialiasing custom layers.\nThis is false by default as a performance optimization. attributionControl : boolean Default: true If true , an attribution control will be added to the map. baseApiUrl : string The map's default API URL for requesting tiles, styles, sprites, and glyphs. bearingSnap : number Default: 7 Snap to north threshold in degrees. clickTolerance : number Default: 3 The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag). collectResourceTiming : boolean Default: false If true , Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a resourceTiming property of relevant data events. cooperativeGestures : boolean Default: false If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled. crossSourceCollisions : boolean Default: true If true , symbols from multiple sources can collide with each other during collision detection. If false , collision detection is run separately for the symbols in each source. customAttribution : string | string[] Default: null String or strings to show in an AttributionControl.\nOnly applicable if attributionControl is true . fadeDuration : number Default: 300 Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading. failIfMajorPerformanceCaveat : boolean Default: false If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. hash : boolean | string Default: false If true , the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\nFor example, http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60 . An additional string may optionally be provided to indicate a parameter-styled hash,\ne.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar , where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash. interactive : boolean Default: true If false , no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input. locale : Record\\ Default: null A patch to apply to the default localization table for UI strings, e.g. control tooltips.\nThe locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs.\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table). localFontFamily : string Default: null Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily. localIdeographFontFamily : string Default: 'sans-serif' Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See example . logoPosition : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'bottom-left' A string representing the position of the Mapbox wordmark on the map. maxParallelImageRequests : number Default: 16 The maximum number of images (raster tiles, sprites, icons) to load in parallel. maxTileCacheSize : number Default: null The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. optimizeForTerrain : boolean Default: true If true, map will prioritize rendering for performance by reordering layers.\nIf false, layers will always be drawn in the specified order. pitchWithRotate : boolean Default: true If false , the map's pitch (tilt) control with \"drag to rotate\" interaction will be disabled. preserveDrawingBuffer : boolean Default: false If true , The maps canvas can be exported to a PNG using map.getCanvas().toDataURL() ;. This is false by default as a performance optimization. refreshExpiredTiles : boolean Default: true If false , the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers. reuseMaps : boolean Default: false By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed. If reuseMaps is set to true , when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid new billable events triggered by initialization. Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and initialViewState of the new component are respected. RTLTextPlugin : string Default: 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js' Sets the map's RTL text plugin . Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Setting this prop is the equivelant of calling mapboxgl.setRTLTextPlugin with lazy: true . testMode : boolean Default: false Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests. trackResize : boolean Default: true If true , the map will automatically resize when the browser window resizes. transformRequest : TransformRequestFunction 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. workerClass : object Default: null Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\nTakes precedence over workerUrl . workerCount : number Default: 2 The number of web workers instantiated on a page with mapbox-gl maps. workerUrl : string Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. Source map.tsx","headings":[{"value":"default (Map)","depth":1},{"value":"Methods","depth":2},{"value":"getMap(): MapboxMap","depth":4},{"value":"Properties","depth":2},{"value":"Layout options","depth":3},{"value":"id: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"cursor: string","depth":4},{"value":"Styling options","depth":3},{"value":"fog: Fog | null","depth":4},{"value":"light: Light","depth":4},{"value":"mapStyle: MapboxStyle | string | Immutable","depth":4},{"value":"projection: string | ProjectionSpecification","depth":4},{"value":"renderWorldCopies: boolean","depth":4},{"value":"styleDiffing: boolean","depth":4},{"value":"terrain: TerrainSpecification","depth":4},{"value":"Camera options","depth":3},{"value":"initialViewState: object","depth":4},{"value":"longitude: number","depth":4},{"value":"latitude: number","depth":4},{"value":"zoom: number","depth":4},{"value":"pitch: number","depth":4},{"value":"bearing: number","depth":4},{"value":"padding: PaddingOptions","depth":4},{"value":"minZoom: number","depth":4},{"value":"maxZoom: number","depth":4},{"value":"minPitch: number","depth":4},{"value":"maxPitch: number","depth":4},{"value":"maxBounds: LngLatBoundsLike","depth":4},{"value":"Input handler options","depth":3},{"value":"boxZoom: boolean","depth":4},{"value":"doubleClickZoom: boolean","depth":4},{"value":"dragRotate: boolean","depth":4},{"value":"dragPan: boolean | DragPanOptions","depth":4},{"value":"keyboard: boolean","depth":4},{"value":"scrollZoom: boolean | ZoomRotateOptions","depth":4},{"value":"touchPitch: boolean","depth":4},{"value":"touchZoomRotate: boolean | ZoomRotateOptions","depth":4},{"value":"interactiveLayerIds: string[]","depth":4},{"value":"Callbacks","depth":3},{"value":"onResize: (event: MapboxEvent) => void","depth":4},{"value":"onLoad: (event: MapboxEvent) => void","depth":4},{"value":"onRender: (event: MapboxEvent) => void","depth":4},{"value":"onIdle: (event: MapboxEvent) => void","depth":4},{"value":"onRemove: (event: MapboxEvent) => void","depth":4},{"value":"onError: (event: ErrorEvent) => void","depth":4},{"value":"onMouseDown: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseUp: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOver: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseEnter: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseMove: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseLeave: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOut: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onDblClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onContextMenu: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onWheel: (event: MapWheelEvent) => void","depth":4},{"value":"onTouchStart: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchEnd: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchMove: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchCancel: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onMoveStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMove: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMoveEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDrag: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoom: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotate: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitch: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onBoxZoomStart: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomEnd: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomCancel: (event:MapBoxZoomEvent) => void","depth":4},{"value":"onData: (event: MapStyleDataEvent | MapSourceDataEvent) => void","depth":4},{"value":"onStyleData: (event: MapStyleDataEvent) => void","depth":4},{"value":"onSourceData: (event: MapSourceDataEvent) => void","depth":4},{"value":"Other options","depth":3},{"value":"mapLib: any","depth":4},{"value":"mapboxAccessToken: string","depth":4},{"value":"antialias: boolean","depth":4},{"value":"attributionControl: boolean","depth":4},{"value":"baseApiUrl: string","depth":4},{"value":"bearingSnap: number","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"collectResourceTiming: boolean","depth":4},{"value":"cooperativeGestures: boolean","depth":4},{"value":"crossSourceCollisions: boolean","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"fadeDuration: number","depth":4},{"value":"failIfMajorPerformanceCaveat: boolean","depth":4},{"value":"hash: boolean | string","depth":4},{"value":"interactive: boolean","depth":4},{"value":"locale: Record\\","depth":4},{"value":"localFontFamily: string","depth":4},{"value":"localIdeographFontFamily: string","depth":4},{"value":"logoPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"maxParallelImageRequests: number","depth":4},{"value":"maxTileCacheSize: number","depth":4},{"value":"optimizeForTerrain: boolean","depth":4},{"value":"pitchWithRotate: boolean","depth":4},{"value":"preserveDrawingBuffer: boolean","depth":4},{"value":"refreshExpiredTiles: boolean","depth":4},{"value":"reuseMaps: boolean","depth":4},{"value":"RTLTextPlugin: string","depth":4},{"value":"testMode: boolean","depth":4},{"value":"trackResize: boolean","depth":4},{"value":"transformRequest: TransformRequestFunction","depth":4},{"value":"workerClass: object","depth":4},{"value":"workerCount: number","depth":4},{"value":"workerUrl: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/map","title":"default (Map)"},{"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used. Properties Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'center' A string indicating the part of the Marker that should be positioned closest to the coordinate set via longitude and latitude . color : string Default: '#3FB1CE' The color to use for the default marker if the component contains no content. clickTolerance : number Default: null (inherits Map 's clickTolerance ) The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). draggable : boolean Default: false If true , the marker is able to be dragged to a new position on the map. latitude : number Required. The latitude of the anchor location. longitude : number Required. The longitude of the anchor location. offset : PointLike Default: null The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. pitchAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment . rotation : number Default: 0 The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. rotationAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport . scale : number Default: 1 The scale to use for the default marker if the component contains no content.\nThe default scale ( 1 ) corresponds to a height of 41px and a width of 27px . This prop is not reactive (only used when the marker is mounted). style : CSSProperties CSS style override that applies to the marker's container. Callbacks onClick : (evt: MapEvent ) => void Called when the marker is clicked on. onDragStart : (evt: MarkerDragEvent ) => void Called when dragging starts, if draggable is true . onDrag : (evt: MarkerDragEvent ) => void Called while dragging, if draggable is true . onDragEnd : (evt: MarkerDragEvent ) => void Called when dragging ends, if draggable is true . Source marker.ts","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"color: string","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"draggable: boolean","depth":4},{"value":"latitude: number","depth":4},{"value":"longitude: number","depth":4},{"value":"offset: PointLike","depth":4},{"value":"pitchAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"rotation: number","depth":4},{"value":"rotationAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"scale: number","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onClick: (evt: MapEvent) => void","depth":4},{"value":"onDragStart: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDrag: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDragEnd: (evt: MarkerDragEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showCompass : boolean Default: true If true the compass button is included. showZoom : boolean Default: true If true the zoom-in and zoom-out buttons are included. visualizePitch : boolean Default: false If true the pitch is visualized by rotating X-axis of compass. Source navigation-control.ts","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showCompass: boolean","depth":4},{"value":"showZoom: boolean","depth":4},{"value":"visualizePitch: boolean","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude . \nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' . className : string Space-separated CSS class names to add to popup container. 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 close when the map is clicked. closeOnMove : boolean Default: false If true , the popup will closed when the map moves. focusAfterOpen : boolean Default: true If true , the popup will try to focus the first focusable element inside the popup. offset : number | PointLike | Record\\ Default: null A pixel offset applied to the popup's location specified as: a single number specifying a distance from the popup's location a PointLike specifying a constant offset an object of Points specifing an offset for each anchor position. Negative offsets indicate left and up. maxWidth : string Default: 240px A string that sets the CSS property of the popup's maximum width. style : CSSProperties CSS style override that applies to the popup's container. Callbacks onOpen : (evt: PopupEvent ) => void Called when the popup is opened manually or programatically. onClose : (evt: PopupEvent ) => void Called when the popup is closed manually or programatically. Source popup.ts","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined","depth":4},{"value":"className: string","depth":4},{"value":"closeButton: boolean","depth":4},{"value":"closeOnClick: boolean","depth":4},{"value":"closeOnMove: boolean","depth":4},{"value":"focusAfterOpen: boolean","depth":4},{"value":"offset: number | PointLike | Record\\","depth":4},{"value":"maxWidth: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onOpen: (evt: PopupEvent) => void","depth":4},{"value":"onClose: (evt: PopupEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control in pixels. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-left' Placement of the control relative to the map. Note that this prop is only used when the component first mounts. style : CSSProperties CSS style override that applies to the control's container. unit : 'imperial' | 'metric' | 'nautical' Default: 'metric' Unit of the distance. Source scale-control.ts","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"unit: 'imperial' | 'metric' | 'nautical'","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props provided to this component should be conforming to the Mapbox source specification or CanvasSourceOptions . When props change shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a 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.ts","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance. IControl A mapboxgl.IControl implementation. CustomLayerInterface A custom layer implementation . MapRef Instance ref of a Map component. See Map documentation for details. GeolocateControlRef Instance ref of a GeolocateControl component. See GeolocateControl documentation for details. Styling MapboxStyle An object conforming to the Mapbox Style Specification . Fog An object conforming to the Fog Style Specification . Light An object conforming to the Light Style Specification . TerrainSpecification An object conforming to the Terrain Style Specification . ProjectionSpecification An object with the following fields: name (string): projection name, one of Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). center? ( number, number ): longitude and latitude of the projection center parallels? ( number, number ): the two standard parallels of a conic projection such as Albers and Lambert. BackgroundLayer A JSON object that defines a background layer according to the Mapbox Style Specification . CircleLayer A JSON object that defines a circle layer according to the Mapbox Style Specification . FillExtrusionLayer A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification . FillLayer A JSON object that defines a fill layer according to the Mapbox Style Specification . HeatmapLayer A JSON object that defines a heatmap layer according to the Mapbox Style Specification . HillshadeLayer A JSON object that defines a hillshade layer according to the Mapbox Style Specification . LineLayer A JSON object that defines a line layer according to the Mapbox Style Specification . RasterLayer A JSON object that defines a raster layer according to the Mapbox Style Specification . SymbolLayer A JSON object that defines a symbol layer according to the Mapbox Style Specification . SkyLayer A JSON object that defines a sky layer according to the Mapbox Style Specification . GeoJSONSourceRaw A JSON object that defines a geojson source according to the Mapbox Style Specification . VideoSourceRaw A JSON object that defines a video source according to the Mapbox Style Specification . ImageSourceRaw A JSON object that defines a image source according to the Mapbox Style Specification . VectorSourceRaw A JSON object that defines a vector source according to the Mapbox Style Specification . RasterSource A JSON object that defines a raster source according to the Mapbox Style Specification . RasterDemSource A JSON object that defines a raster-dem source according to the Mapbox Style Specification . CanvasSourceRaw A JSON object that defines a canvas source type. See CanvasSourceOptions . Configurations Anchor One of 'center' , 'left' , 'right' , 'top' , 'bottom' , 'top-left' , 'top-right' , 'bottom-left' and 'bottom-right' . Alignment One of 'map' , 'viewport' and 'auto' . ControlPosition One of 'top-right' , 'top-left' , 'bottom-right' and 'bottom-left' . DragPanOptions An object with the following fields: linearity? : number - The rate at which the speed reduces after the pan ends. easing? : (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function. deceleration? : number - Factor used to scale the drag velocity. Default 0 . maxSpeed? : number - The maximum value of the drag velocity. Default 1400 . See DragPanHandler#enable . FitBoundsOptions An object with the following fields: offset? : PointLike - The center of the given bounds relative to the map's center, measured in pixels. padding? : PaddingOptions - The amount of padding in pixels to add to the given bounds. maxZoom? : number - The maximum zoom level to allow when the map view transitions to the specified bounds. animate? : boolean - When set to false , no animation happens. linear? : boolean - If true , the map transitions using Map#easeTo . If false , the map transitions using Map#flyTo duration? : number - Duration in milliseconds maxDuration? : number - Max duration in milliseconds easing? : (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state. essential? : boolean - If true , then the animation is considered essential and will not be affected by prefers-reduced-motion . Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system. See Map#fitBounds ZoomRotateOptions An object with the following fields: around? : 'center' - If \"center\" is passed, map will zoom around center of map. See ScrollZoomHandler#enable , TouchZoomRotateHandler#enable PaddingOptions An object with the following fields: left : number - in pixels. top : number - in pixels. right : number - in pixels. bottom : number - in pixels. TransformRequestFunction A function that takes the following arguments: url : string resourceType : 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image'; And returns an object with the following fields: url : string - The URL to be requested. credentials? : 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests. headers? : { header: string : any } - The headers to be sent with the request. method? : 'GET' | 'POST' | 'PUT' collectResourceTiming? : boolean See RequestParameters . Data Types LngLat A mapboxgl.LngLat object. LngLatLike A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties. LngLatBounds A mapboxgl.LngLatBounds object. LngLatBoundsLike A LngLatBounds object, an array of LngLatLike objects in sw, ne order, or an array of numbers in west, south, east, north order. Point A mapboxgl.Point object. PointLike A Point or an array of two numbers representing x and y screen coordinates in pixels. MapboxGeoJSONFeature A GeoJSON feature that also contains the following library-specific fields: layer : Layer source : string sourceLayer : string state : { key: string : any } ViewState An object with the following fields: longitude : number - The longitude of the map center. latitude : number - The latitude of the map center. zoom : number - The zoom level. pitch : number - The pitch (tilt) of the map, in degrees. bearing : number - The bearing (rotation) of the map, in degrees. Sources The following are implementations of source types that could be retrieved with Map#getSource . GeoJSONSource A source containing GeoJSON. See GeoJSONSource . VideoSource A source containing video. See VideoSource . ImageSource A source containing image. See ImageSource . CanvasSource A source containing the contents of an HTML canvas. See CanvasSource . VectorTileSource A source containing vector tiles in Mapbox Vector Tile format . See VectorTileSource . Events MapboxEvent An object with the following fields: type : string - Event type target : MapboxMap - The map instance that fired the event originalEvent? : Event MapLayerMouseEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent point : Point lngLat : LngLat preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] MapWheelEvent An object with the following fields: type : string target : MapboxMap originalEvent? : WheelEvent preventDefault : () => void defaultPrevented : boolean MapLayerTouchEvent An object with the following fields: type : string target : MapboxMap originalEvent? : TouchEvent point : Point lngLat : LngLat points : Point [] lngLats : LngLat [] preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] ViewStateChangeEvent An object with the following fields: type : string - Event type target : MapboxMap viewState : ViewState - the next view state that the camera wants to change to based on user input or transition. MapBoxZoomEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent boxZoomBounds : LngLatBounds MapStyleDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'style' MapSourceDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'source' isSourceLoaded : boolean source : string sourceId : string sourceDataType : 'metadata' | 'content' tile : any coord : Coordinate See MapDataEvent . ErrorEvent An object with the following fields: type : 'error' error : Error GeolocateEvent An object with the following fields: type : string target : MapboxMap target : mapboxgl.GeolocateControl GeolocateResultEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl coords : GeolocationCoordinates - the current location. timestamp : number - the time at which the location was retrieved. GeolocateErrorEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl code : PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError message : string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface. MarkerDragEvent An object with the following fields: type : string target : mapboxgl.Marker lngLat : LngLat - the new location of the marker PopupEvent An object with the following fields: type : string target : mapboxgl.Popup","headings":[{"value":"Types","depth":1},{"value":"Components","depth":2},{"value":"MapboxMap","depth":4},{"value":"IControl","depth":4},{"value":"CustomLayerInterface","depth":4},{"value":"MapRef","depth":4},{"value":"GeolocateControlRef","depth":4},{"value":"Styling","depth":2},{"value":"MapboxStyle","depth":4},{"value":"Fog","depth":4},{"value":"Light","depth":4},{"value":"TerrainSpecification","depth":4},{"value":"ProjectionSpecification","depth":4},{"value":"BackgroundLayer","depth":4},{"value":"CircleLayer","depth":4},{"value":"FillExtrusionLayer","depth":4},{"value":"FillLayer","depth":4},{"value":"HeatmapLayer","depth":4},{"value":"HillshadeLayer","depth":4},{"value":"LineLayer","depth":4},{"value":"RasterLayer","depth":4},{"value":"SymbolLayer","depth":4},{"value":"SkyLayer","depth":4},{"value":"GeoJSONSourceRaw","depth":4},{"value":"VideoSourceRaw","depth":4},{"value":"ImageSourceRaw","depth":4},{"value":"VectorSourceRaw","depth":4},{"value":"RasterSource","depth":4},{"value":"RasterDemSource","depth":4},{"value":"CanvasSourceRaw","depth":4},{"value":"Configurations","depth":2},{"value":"Anchor","depth":4},{"value":"Alignment","depth":4},{"value":"ControlPosition","depth":4},{"value":"DragPanOptions","depth":4},{"value":"FitBoundsOptions","depth":4},{"value":"ZoomRotateOptions","depth":4},{"value":"PaddingOptions","depth":4},{"value":"TransformRequestFunction","depth":4},{"value":"Data Types","depth":2},{"value":"LngLat","depth":4},{"value":"LngLatLike","depth":4},{"value":"LngLatBounds","depth":4},{"value":"LngLatBoundsLike","depth":4},{"value":"Point","depth":4},{"value":"PointLike","depth":4},{"value":"MapboxGeoJSONFeature","depth":4},{"value":"ViewState","depth":4},{"value":"Sources","depth":2},{"value":"GeoJSONSource","depth":4},{"value":"VideoSource","depth":4},{"value":"ImageSource","depth":4},{"value":"CanvasSource","depth":4},{"value":"VectorTileSource","depth":4},{"value":"Events","depth":2},{"value":"MapboxEvent","depth":4},{"value":"MapLayerMouseEvent","depth":4},{"value":"MapWheelEvent","depth":4},{"value":"MapLayerTouchEvent","depth":4},{"value":"ViewStateChangeEvent","depth":4},{"value":"MapBoxZoomEvent","depth":4},{"value":"MapStyleDataEvent","depth":4},{"value":"MapSourceDataEvent","depth":4},{"value":"ErrorEvent","depth":4},{"value":"GeolocateEvent","depth":4},{"value":"GeolocateResultEvent","depth":4},{"value":"GeolocateErrorEvent","depth":4},{"value":"MarkerDragEvent","depth":4},{"value":"PopupEvent","depth":4}],"slug":"docs/api-reference/types","title":"Types"},{"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount. Parameters: onCreate : ({map: MapRef, mapLib: mapboxgl}) => IControl - called to create an instance of the control. onRemove : ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed. options : object position : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map Returns: IControl - the control instance from onCreate . Source use-control.ts","headings":[{"value":"useControl","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-control","title":"useControl"},{"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can also reference maps that are rendered outside of the current component's direct render tree. See a full example here . Signature useMap(): {current?: MapRef, [id: string]: MapRef} The hook returns an object that contains all mounted maps under the closest MapProvider . The keys are each map's id and the values are the MapRef . If the hook is used inside a decendent of a Map component, the returned object also contains a current field that references the containing map. Source use-map.tsx","headings":[{"value":"useMap","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-map","title":"useMap"},{"excerpt":"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 .\nWe use yarn to manage the dependencies. Test: Test in Node: Test in browser (can use Chrome dev tools for debugging): 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 Xiaoji Chen Xintong Xia 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 .\nThis 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.","headings":[{"value":"Contributing to react-map-gl","depth":1},{"value":"Setting Up Dev Environment","depth":2},{"value":"Pull Requests","depth":2},{"value":"PR Checklist","depth":3},{"value":"Release","depth":2},{"value":"Community Governance","depth":2},{"value":"Technical Steering Committee","depth":3},{"value":"Maintainers","depth":3},{"value":"Code of Conduct","depth":2}],"slug":"docs/contributing","title":"Contributing to react-map-gl"},{"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6. If you are using react-map-gl controls ( Marker , Popup , NavigationControl etc.) with deck.gl's ContextProvider , do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox. Dependencies Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre. viewport-mercator-project (an alias of @math.gl/web-mercator ) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required. Module exports InteractiveMap and StaticMap are removed. Instead, import Map . setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled). MapController is removed. v7.0 has removed its own implementation of user input handling in favor of the native handlers . If you are using a custom implementation of MapController , check if the native handlers offer options to address your application's needs. MapContext and useMapControl are removed. Check out the new API useMap and useControl . The overlay components ( HTMLOverlay , CanvasOverlay and SVGOverlay ) are removed. Check out this example for implementing similar controls in your own application. LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example . Map documentation Renamed props for better consistency with the wrapped library: mapboxApiAccessToken is now mapboxAccessToken mapboxApiUrl is now baseApiUrl preventStyleDiffing (default false ) is replaced with styleDiffing (default true ) mapStyle should be explicitly specified. The default value has changed from \"mapbox://styles/mapbox/light-v9\" to an empty style. The following props are removed and apps should use style instead: width height visible onViewportChange , onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management . transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example . mapOptions is removed. Almost all of the options for the native Map class are exposed as props. onHover is removed. Use onMouseMove or onMouseEnter . The event argument is changed for all interaction callbacks. See documentation for details. getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover. touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop. Other components capture* props are removed. *label props are removed. Use Map 's locale prop. All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis. 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 has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options : Source and Layer components no longer expose imperative methods via ref as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call sourceRef.getSource() , it can be replaced with mapRef().getMap().getSource(sourceId) . If you used to call layerRef.getLayer() , it can be replaced with mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of InteractiveMap 's maxPitch prop is changed to 85 from 60 . mapbox-gl v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message m is not defined . Find solutions in this thread . Upgrading to v4 onChangeViewport is removed, use onViewportChange instead Immutable.js is no longer a dependency Export experimental.MapControls is removed, use MapController instead InteractiveMap 's mapControls prop is renamed to controller Removed support for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See Get Started for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The Node Version Requirement for building react-map-gl is now >=v6.4.0 . Using prebuilt react-map-gl does NOT has this limitation. This is introduced by Mapbox GL JS v0.38.0 MapGL Component Two Map Components - v3 now splits the Map component into two React components: StaticMap and InteractiveMap . InteractiveMap is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport callback now includes width and height . The viewport parameter passed to the onChangeViewport callback now includes width and height . Application code that composed the viewport with width and height may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples - Some less frequently used overlays ( DraggablePointsOverlay , ChoroplethOverlay , ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map - Overlays must now be rendered as children of the main react-map-gl component to automatically sync with the map viewport. fitBounds utility function The fitBounds utility has been moved to the math.gl library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old props will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new props as soon as possible. Old Prop New Prop onChangeViewport() onViewportChange() onHoverFeatures() onHover() onClickFeatures() onClick() perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using v1 of react-map-gl, make sure that you first upgrade: Your node version to v4 or higher Your react version to 15.4 or higher. Background: mapbox-gl 0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays - The map overlay components ( HTMLOverlay , CanvasOverlay , SVGOverlay etc) are now named exports. They previously had to be imported via their relative source paths: 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 ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v7.0","depth":2},{"value":"Dependencies","depth":3},{"value":"Module exports","depth":3},{"value":"Map","depth":3},{"value":"Other components","depth":3},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v7.0 Release date: Feb 4, 2022 v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are: Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library Lightweight: the ESM build size is reduced from 219k to 57k Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs ( flyTo , fitBounds etc.) can now be called directly without breaking the React binding. Compatibility: first and third-party plugins! Directly use mapbox-gl-draw , mapbox-gl-geocoder , to name a few. TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported . Visit the upgrade guide if you are trying to upgrade from v5 and v6. 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 ,\n 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.\nThese 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","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v7.0","depth":2},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details about data sources and layer configuration, check out the Mapbox style specification . For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples. Custom Overlays You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here . 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.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Custom Overlays","depth":2},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started examples . Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl . Or embed it in your app by using css-loader with Webpack or postcss with rollup: Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: Then override the mapLib prop of Map : To use the stylesheet from the fork: Or","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending 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: 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. mapbox-gl@1.x or maplibre-gl - 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 mapboxAccessToken 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 We recommend using an environment variable to minimize leaking risks. See securing Mapbox token for examples. 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 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 Map using the mapStyle prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to Map using the transformRequest prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class. Controlled : The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic. Uncontrolled Map You may clone a full app configuration for this example here . Controlled Map You may clone a full app configuration for this example here . A real-world application likely uses more complicated state flows: Using map with a state store (Redux) example Using map with SSR (Next.js) example Custom Camera Constraints Map offers props that set basic constraints for the camera, e.g. maxBounds , minZoom , maxPitch . If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:","headings":[{"value":"State Management","depth":1},{"value":"Uncontrolled Map","depth":2},{"value":"Controlled Map","depth":2},{"value":"Custom Camera Constraints","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"},{"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused. Never commit your token in clear text into GitHub or other source control. In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable. Create separate tokens for development (often times on http://localhost ), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com ). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own. Add the following to your bundler config: react-map-gl automatically picks up process.env.MapboxAccessToken or process.env.REACT_APP_MAPBOX_ACCESS_TOKEN if they are defined. Alternatively, you can use your own variable name (e.g. __SUPER_SECRET_TOKEN__ ) and pass it in manually with mapboxAccessToken={__SUPER_SECRET_TOKEN__} . Minimize Cost from Frequent Re-mounting In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout: Every time the user clicks the \"table\" tab, the map is unmounted. When they click the \"map\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not idea to get billed for just collapsing and expanding part of the UI. In this case, it is recommended that you set the reuseMaps prop to true : This bypasses the initialization when a map is removed then added back. Performance with Many Markers If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup: This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible. One way to improve the performance is useMemo : This prevents React from rerendering the markers unless they have changed. If your application can do without complicated DOM objects and CSS styling, consider switching to a symbol layer . Layers are rendered in WebGL and are much more performant than markers:","headings":[{"value":"Tips and Tricks","depth":1},{"value":"Securing Mapbox Token","depth":2},{"value":"Minimize Cost from Frequent Re-mounting","depth":2},{"value":"Performance with Many Markers","depth":2}],"slug":"docs/get-started/tips-and-tricks","title":"Tips and Tricks"}]}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The 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 v2 The 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 forks It 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 react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization . To manage the complexity of these 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. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl . In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. 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. Ultimately, in the spirit of the reactive programming paradigm , data always flows down . 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 Map component can be fully controlled , that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management . Limitations In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants. It is possible to call the native methods directly from the Map instance obtained via getMap . However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. compact : boolean | undefined If true , force a compact attribution that shows the full attribution on mouse hover. If false , force the full attribution control. If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide. Note that your attribution must adhere to Mapbox's guidelines . customAttribution : string | string[] String or strings to show in addition to any other attributions. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source attribution-control.ts","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"compact: boolean | undefined","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. containerId : string Id of the DOM element which should be made full screen. By default, the map container element will be made full screen. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source fullscreen-control.ts","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"containerId: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger() : boolean Trigger a geolocation event. Returns: true if successful. Properties Note that the following properties are not reactive. They are only used when the component first mounts. Tracking options positionOptions : PositionOptions A Geolocation API PositionOptions object trackUserLocation : boolean Default: false If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. Render options fitBoundsOptions : FitBoundsOptions Default: {maxZoom: 15} A ( fitBounds ) options object to use when the map is panned and zoomed to the user's location. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showAccuracyCircle : boolean Default: true Draw 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. \nThis only has effect if showUserLocation is true . showUserHeading : boolean Default: false If true , an arrow will be drawn next to the user location dot indicating the device's heading.\nThis only has affect when trackUserLocation is true . showUserLocation : boolean Default: true Show a dot on the map at the user's location. Set to false to disable. Callbacks onGeolocate : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success. onError : (evt: GeolocateErrorEvent ) => void Called on each Geolocation API position update that returned as an error. onOutOfMaxBounds : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success but user position is out of map maxBounds . onTrackUserLocationStart : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the active lock state. onTrackUserLocationEnd : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the background state. Source geolocate-control.ts","headings":[{"value":"GeolocateControl","depth":1},{"value":"Methods","depth":2},{"value":"trigger(): boolean","depth":4},{"value":"Properties","depth":2},{"value":"Tracking options","depth":3},{"value":"positionOptions: PositionOptions","depth":4},{"value":"trackUserLocation: boolean","depth":4},{"value":"Render options","depth":3},{"value":"fitBoundsOptions: FitBoundsOptions","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showAccuracyCircle: boolean","depth":4},{"value":"showUserHeading: boolean","depth":4},{"value":"showUserLocation: boolean","depth":4},{"value":"Callbacks","depth":3},{"value":"onGeolocate: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onError: (evt: GeolocateErrorEvent) => void","depth":4},{"value":"onOutOfMaxBounds: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onTrackUserLocationStart: (evt: GeolocateEvent) => void","depth":4},{"value":"onTrackUserLocationEnd: (evt: GeolocateEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"Layer This component allows apps to create a map layer using React. 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 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 is used as the child of a Source component, this prop will be overwritten by the id of the parent source. Source layer.ts","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Options","depth":3},{"value":"beforeId: string","depth":4},{"value":"source: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component should wrap all nodes in which you may want to access the maps: See useMap for more information. Source use-map.tsx","headings":[{"value":"MapProvider","depth":1},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-provider","title":"MapProvider"},{"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible via a React ref or the useMap hook. The MapRef object exposes Map methods that are safe to call without breaaking the React bindings . For example, setStyle() is hidden from the ref object, because the style is supposed to be changed by updating the mapStyle prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors. You can still access the hidden members via getMap() : getMap() : MapboxMap Returns the native Map instance associated with this component. Properties Layout options id : string Map container id. style : CSSProperties Default: {position: 'relative', width: '100%', height: '100%'} Map container CSS. cursor : string Default: 'auto' The current cursor type . Styling options fog : Fog | null The fog property of the style. Must conform to the Fog Style Specification .\nIf null is provided, removes the fog from the map. light : Light Light properties of the style. Must conform to the Light Style Specification . mapStyle : MapboxStyle | string | Immutable Default: (empty style) The map's Mapbox style. This must be an a JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. projection : string | ProjectionSpecification Default: 'mercator' The projection the map should be rendered in. Available projections are Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). Conic projections such as Albers and Lambert have configurable center and parallels properties that allow developers to define the region in which the projection has minimal distortion; see example . renderWorldCopies : boolean Default: true If true , multiple copies of the world will be rendered, when zoomed out. styleDiffing : boolean Default: true Enable diffing when mapStyle changes. If false , force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update. terrain : TerrainSpecification Terrain property of the style. Must conform to the Terrain Style Specification .\nIf null is provided, removes terrain from the map. Camera options initialViewState : object The initial view state of the map. If specified, longitude , latitude , zoom etc. in props are ignored when constructing the map. Only specify initialViewState if Map is being used as an uncontrolled component . See state management for examples. bounds? : LngLatBoundsLike - The initial bounds of the map. If specified, it overrides the longitude , latitude and zoom options. Default null . fitBoundsOptions : FitBoundsOptions - A fitBounds options object to use only when setting the bounds option. Default null . longitude : number - The initial longitude of the map center. Default 0 . latitude : number - The initial latitude of the map center. Default 0 . zoom : number - The initial zoom level. Default 0 . pitch : number - The initial pitch (tilt) of the map. Default 0 . bearing : number - The initial bearing (rotation) of the map. Default 0 . longitude : number The longitude of the map center. latitude : number The latitude of the map center. zoom : number The zoom level of the map. pitch : number The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). bearing : number The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. padding : PaddingOptions Default: null The padding in pixels around the viewport. minZoom : number Default: 0 The minimum zoom level of the map (0-24). maxZoom : number Default: 22 The maximum zoom level of the map (0-24). minPitch : number Default: 0 The minimum pitch of the map (0-85). maxPitch : number Default: 60 The maximum pitch of the map (0-85). maxBounds : LngLatBoundsLike Default: null If set, the map is constrained to the given bounds. Input handler options boxZoom : boolean Default: true If true , the \"box zoom\" interaction is enabled (see BoxZoomHandler ). doubleClickZoom : boolean Default: true If true , the \"double click to zoom\" interaction is enabled (see DoubleClickZoomHandler ). dragRotate : boolean Default: true If true , the \"drag to rotate\" interaction is enabled (see DragRotateHandler ). dragPan : boolean | DragPanOptions Default: true If true , the \"drag to pan\" interaction is enabled. Optionally accpt an object value that is the options to DragPanHandler#enable . keyboard : boolean Default: true If true , keyboard shortcuts are enabled (see KeyboardHandler ). scrollZoom : boolean | ZoomRotateOptions Default: true If true , the \"scroll to zoom\" interaction is enabled. Optionally accpt an object value that is the options to ScrollZoomHandler#enable . touchPitch : boolean Default: true If true , the \"drag to pitch\" interaction is enabled. Optionally accpt an object value that is the options to TouchPitchHandler#enable . touchZoomRotate : boolean | ZoomRotateOptions Default: true If true , the \"pinch to rotate and zoom\" interaction is enabled. Optionally accpt an object value that is the options to TouchZoomRotateHandler#enable . interactiveLayerIds : string[] Default: null The id(s) of style layer(s). If specified, pointer event ( mousemove , click etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a features property containing an array of the matching features. If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a features property. See the Callbacks section for affected events. Callbacks onResize : (event: MapboxEvent ) => void Called when the map has been resized. onLoad : (event: MapboxEvent ) => void Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. onRender : (event: MapboxEvent ) => void Called whenever the map is drawn to the screen. onIdle : (event: MapboxEvent ) => void Called after the last frame rendered before the map enters an \"idle\" state: No camera transitions are in progress All currently requested tiles have loaded All fade/transition animations have completed onRemove : (event: MapboxEvent ) => void Called when the map has been removed. onError : (event: ErrorEvent ) => void Default: evt => console.error(evt.error) Called when an error occurs. onMouseDown : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s). onMouseUp : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is released within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s). onMouseOver : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. onMouseEnter : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by interactiveLayerIds from outside that layer or outside the map canvas. onMouseMove : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s). onMouseLeave : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by interactiveLayerIds or moves from the layer to outside the map canvas. onMouseOut : (event: MapLayerMouseEvent ) => void Called when a point device (usually a mouse) leaves the map's canvas. onClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released at the same point on the map. If interactiveLayerIds is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer. onDblClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. If interactiveLayerIds is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer. onContextMenu : (event: MapLayerMouseEvent ) => void Called when the right button of the mouse is clicked or the context menu key is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer. onWheel : (event: MapWheelEvent ) => void Called when a wheel event occurs within the map. onTouchStart : (event: MapLayerTouchEvent ) => void Called when a touchstart event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchEnd : (event: MapLayerTouchEvent ) => void Called when a touchend event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchMove : (event: MapLayerTouchEvent ) => void Called when a touchmove event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchCancel : (event: MapLayerTouchEvent ) => void Called when a touchcancel event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onMoveStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one view to another. onMove : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one view to another. When Map is used as a controlled component, event.viewState reflects the view state that the camera \"proposes\" to move to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the view state props ( longitude , latitude , zoom etc.).\nSee state management for examples. onMoveEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one view to another. onDragStart : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction starts. onDrag : (event: ViewStateChangeEvent ) => void Called repeatedly during a \"drag to pan\" interaction. onDragEnd : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction ends. onZoomStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one zoom level to another. onZoom : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one zoom level to another. When Map is used as a controlled component, event.viewState.zoom reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the zoom prop. onZoomEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one zoom level to another. onRotateStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one bearing (rotation) to another. onRotate : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one bearing (rotation) to another. When Map is used as a controlled component, event.viewState.bearing reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the bearing prop. onRotateEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one bearing (rotation) to another. onPitchStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one pitch (tilt) to another. onPitch : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one pitch (tilt) to another. When Map is used as a controlled component, event.viewState.pitch reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the pitch prop. onPitchEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one pitch (tilt) to another. onBoxZoomStart : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction starts. onBoxZoomEnd : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction ends. onBoxZoomCancel : (event: MapBoxZoomEvent ) => void Called when the user cancels a \"box zoom\" interaction, or when the bounding box does not meet the minimum size threshold. onData : (event: MapStyleDataEvent | MapSourceDataEvent ) => void Called when any map data loads or changes. See MapDataEvent for more information. onStyleData : (event: MapStyleDataEvent ) => void Called when the map's style loads or changes. See MapDataEvent for more information. onSourceData : (event: MapSourceDataEvent ) => void Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information. Other options Props in this section are not reactive. They are only used once when the Map instance is constructed. mapLib : any Override the map library. By default, it loads the mapbox-gl module using dynamic import . This can be used to replace mapbox-gl with a compatible fork: Or to load a pre-bundled version of the library: Default: import('mapbox-gl') mapboxAccessToken : string Token used to access the Mapbox data service. See about map tokens . antialias : boolean Default: false If true , the gl context will be created with MSAA antialiasing , which can be useful for antialiasing custom layers.\nThis is false by default as a performance optimization. attributionControl : boolean Default: true If true , an attribution control will be added to the map. baseApiUrl : string The map's default API URL for requesting tiles, styles, sprites, and glyphs. bearingSnap : number Default: 7 Snap to north threshold in degrees. clickTolerance : number Default: 3 The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag). collectResourceTiming : boolean Default: false If true , Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a resourceTiming property of relevant data events. cooperativeGestures : boolean Default: false If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled. crossSourceCollisions : boolean Default: true If true , symbols from multiple sources can collide with each other during collision detection. If false , collision detection is run separately for the symbols in each source. customAttribution : string | string[] Default: null String or strings to show in an AttributionControl.\nOnly applicable if attributionControl is true . fadeDuration : number Default: 300 Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading. failIfMajorPerformanceCaveat : boolean Default: false If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. hash : boolean | string Default: false If true , the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\nFor example, http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60 . An additional string may optionally be provided to indicate a parameter-styled hash,\ne.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar , where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash. interactive : boolean Default: true If false , no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input. locale : Record\\ Default: null A patch to apply to the default localization table for UI strings, e.g. control tooltips.\nThe locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs.\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table). localFontFamily : string Default: null Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily. localIdeographFontFamily : string Default: 'sans-serif' Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See example . logoPosition : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'bottom-left' A string representing the position of the Mapbox wordmark on the map. maxParallelImageRequests : number Default: 16 The maximum number of images (raster tiles, sprites, icons) to load in parallel. maxTileCacheSize : number Default: null The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. optimizeForTerrain : boolean Default: true If true, map will prioritize rendering for performance by reordering layers.\nIf false, layers will always be drawn in the specified order. pitchWithRotate : boolean Default: true If false , the map's pitch (tilt) control with \"drag to rotate\" interaction will be disabled. preserveDrawingBuffer : boolean Default: false If true , The maps canvas can be exported to a PNG using map.getCanvas().toDataURL() ;. This is false by default as a performance optimization. refreshExpiredTiles : boolean Default: true If false , the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers. reuseMaps : boolean Default: false By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed. If reuseMaps is set to true , when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid new billable events triggered by initialization. Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and initialViewState of the new component are respected. RTLTextPlugin : string Default: 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js' Sets the map's RTL text plugin . Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Setting this prop is the equivelant of calling mapboxgl.setRTLTextPlugin with lazy: true . testMode : boolean Default: false Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests. trackResize : boolean Default: true If true , the map will automatically resize when the browser window resizes. transformRequest : TransformRequestFunction 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. workerClass : object Default: null Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\nTakes precedence over workerUrl . workerCount : number Default: 2 The number of web workers instantiated on a page with mapbox-gl maps. workerUrl : string Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. Source map.tsx","headings":[{"value":"default (Map)","depth":1},{"value":"Methods","depth":2},{"value":"getMap(): MapboxMap","depth":4},{"value":"Properties","depth":2},{"value":"Layout options","depth":3},{"value":"id: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"cursor: string","depth":4},{"value":"Styling options","depth":3},{"value":"fog: Fog | null","depth":4},{"value":"light: Light","depth":4},{"value":"mapStyle: MapboxStyle | string | Immutable","depth":4},{"value":"projection: string | ProjectionSpecification","depth":4},{"value":"renderWorldCopies: boolean","depth":4},{"value":"styleDiffing: boolean","depth":4},{"value":"terrain: TerrainSpecification","depth":4},{"value":"Camera options","depth":3},{"value":"initialViewState: object","depth":4},{"value":"longitude: number","depth":4},{"value":"latitude: number","depth":4},{"value":"zoom: number","depth":4},{"value":"pitch: number","depth":4},{"value":"bearing: number","depth":4},{"value":"padding: PaddingOptions","depth":4},{"value":"minZoom: number","depth":4},{"value":"maxZoom: number","depth":4},{"value":"minPitch: number","depth":4},{"value":"maxPitch: number","depth":4},{"value":"maxBounds: LngLatBoundsLike","depth":4},{"value":"Input handler options","depth":3},{"value":"boxZoom: boolean","depth":4},{"value":"doubleClickZoom: boolean","depth":4},{"value":"dragRotate: boolean","depth":4},{"value":"dragPan: boolean | DragPanOptions","depth":4},{"value":"keyboard: boolean","depth":4},{"value":"scrollZoom: boolean | ZoomRotateOptions","depth":4},{"value":"touchPitch: boolean","depth":4},{"value":"touchZoomRotate: boolean | ZoomRotateOptions","depth":4},{"value":"interactiveLayerIds: string[]","depth":4},{"value":"Callbacks","depth":3},{"value":"onResize: (event: MapboxEvent) => void","depth":4},{"value":"onLoad: (event: MapboxEvent) => void","depth":4},{"value":"onRender: (event: MapboxEvent) => void","depth":4},{"value":"onIdle: (event: MapboxEvent) => void","depth":4},{"value":"onRemove: (event: MapboxEvent) => void","depth":4},{"value":"onError: (event: ErrorEvent) => void","depth":4},{"value":"onMouseDown: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseUp: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOver: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseEnter: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseMove: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseLeave: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOut: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onDblClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onContextMenu: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onWheel: (event: MapWheelEvent) => void","depth":4},{"value":"onTouchStart: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchEnd: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchMove: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchCancel: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onMoveStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMove: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMoveEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDrag: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoom: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotate: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitch: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onBoxZoomStart: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomEnd: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomCancel: (event:MapBoxZoomEvent) => void","depth":4},{"value":"onData: (event: MapStyleDataEvent | MapSourceDataEvent) => void","depth":4},{"value":"onStyleData: (event: MapStyleDataEvent) => void","depth":4},{"value":"onSourceData: (event: MapSourceDataEvent) => void","depth":4},{"value":"Other options","depth":3},{"value":"mapLib: any","depth":4},{"value":"mapboxAccessToken: string","depth":4},{"value":"antialias: boolean","depth":4},{"value":"attributionControl: boolean","depth":4},{"value":"baseApiUrl: string","depth":4},{"value":"bearingSnap: number","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"collectResourceTiming: boolean","depth":4},{"value":"cooperativeGestures: boolean","depth":4},{"value":"crossSourceCollisions: boolean","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"fadeDuration: number","depth":4},{"value":"failIfMajorPerformanceCaveat: boolean","depth":4},{"value":"hash: boolean | string","depth":4},{"value":"interactive: boolean","depth":4},{"value":"locale: Record\\","depth":4},{"value":"localFontFamily: string","depth":4},{"value":"localIdeographFontFamily: string","depth":4},{"value":"logoPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"maxParallelImageRequests: number","depth":4},{"value":"maxTileCacheSize: number","depth":4},{"value":"optimizeForTerrain: boolean","depth":4},{"value":"pitchWithRotate: boolean","depth":4},{"value":"preserveDrawingBuffer: boolean","depth":4},{"value":"refreshExpiredTiles: boolean","depth":4},{"value":"reuseMaps: boolean","depth":4},{"value":"RTLTextPlugin: string","depth":4},{"value":"testMode: boolean","depth":4},{"value":"trackResize: boolean","depth":4},{"value":"transformRequest: TransformRequestFunction","depth":4},{"value":"workerClass: object","depth":4},{"value":"workerCount: number","depth":4},{"value":"workerUrl: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/map","title":"default (Map)"},{"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used. Properties Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'center' A string indicating the part of the Marker that should be positioned closest to the coordinate set via longitude and latitude . color : string Default: '#3FB1CE' The color to use for the default marker if the component contains no content. clickTolerance : number Default: null (inherits Map 's clickTolerance ) The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). draggable : boolean Default: false If true , the marker is able to be dragged to a new position on the map. latitude : number Required. The latitude of the anchor location. longitude : number Required. The longitude of the anchor location. offset : PointLike Default: null The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. pitchAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment . rotation : number Default: 0 The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. rotationAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport . scale : number Default: 1 The scale to use for the default marker if the component contains no content.\nThe default scale ( 1 ) corresponds to a height of 41px and a width of 27px . This prop is not reactive (only used when the marker is mounted). style : CSSProperties CSS style override that applies to the marker's container. Callbacks onClick : (evt: MapEvent ) => void Called when the marker is clicked on. onDragStart : (evt: MarkerDragEvent ) => void Called when dragging starts, if draggable is true . onDrag : (evt: MarkerDragEvent ) => void Called while dragging, if draggable is true . onDragEnd : (evt: MarkerDragEvent ) => void Called when dragging ends, if draggable is true . Source marker.ts","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"color: string","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"draggable: boolean","depth":4},{"value":"latitude: number","depth":4},{"value":"longitude: number","depth":4},{"value":"offset: PointLike","depth":4},{"value":"pitchAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"rotation: number","depth":4},{"value":"rotationAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"scale: number","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onClick: (evt: MapEvent) => void","depth":4},{"value":"onDragStart: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDrag: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDragEnd: (evt: MarkerDragEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showCompass : boolean Default: true If true the compass button is included. showZoom : boolean Default: true If true the zoom-in and zoom-out buttons are included. visualizePitch : boolean Default: false If true the pitch is visualized by rotating X-axis of compass. Source navigation-control.ts","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showCompass: boolean","depth":4},{"value":"showZoom: boolean","depth":4},{"value":"visualizePitch: boolean","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude . \nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' . className : string Space-separated CSS class names to add to popup container. 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 close when the map is clicked. closeOnMove : boolean Default: false If true , the popup will closed when the map moves. focusAfterOpen : boolean Default: true If true , the popup will try to focus the first focusable element inside the popup. offset : number | PointLike | Record\\ Default: null A pixel offset applied to the popup's location specified as: a single number specifying a distance from the popup's location a PointLike specifying a constant offset an object of Points specifing an offset for each anchor position. Negative offsets indicate left and up. maxWidth : string Default: 240px A string that sets the CSS property of the popup's maximum width. style : CSSProperties CSS style override that applies to the popup's container. Callbacks onOpen : (evt: PopupEvent ) => void Called when the popup is opened. onClose : (evt: PopupEvent ) => void Called when the popup is closed by the user clicking on the close button or outside (if closeOnClick: true ). Source popup.ts","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined","depth":4},{"value":"className: string","depth":4},{"value":"closeButton: boolean","depth":4},{"value":"closeOnClick: boolean","depth":4},{"value":"closeOnMove: boolean","depth":4},{"value":"focusAfterOpen: boolean","depth":4},{"value":"offset: number | PointLike | Record\\","depth":4},{"value":"maxWidth: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onOpen: (evt: PopupEvent) => void","depth":4},{"value":"onClose: (evt: PopupEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control in pixels. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-left' Placement of the control relative to the map. Note that this prop is only used when the component first mounts. style : CSSProperties CSS style override that applies to the control's container. unit : 'imperial' | 'metric' | 'nautical' Default: 'metric' Unit of the distance. Source scale-control.ts","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"unit: 'imperial' | 'metric' | 'nautical'","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props provided to this component should be conforming to the Mapbox source specification or CanvasSourceOptions . When props change shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a 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.ts","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance. IControl A mapboxgl.IControl implementation. CustomLayerInterface A custom layer implementation . MapRef Instance ref of a Map component. See Map documentation for details. GeolocateControlRef Instance ref of a GeolocateControl component. See GeolocateControl documentation for details. Styling MapboxStyle An object conforming to the Mapbox Style Specification . Fog An object conforming to the Fog Style Specification . Light An object conforming to the Light Style Specification . TerrainSpecification An object conforming to the Terrain Style Specification . ProjectionSpecification An object with the following fields: name (string): projection name, one of Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). center? ( number, number ): longitude and latitude of the projection center parallels? ( number, number ): the two standard parallels of a conic projection such as Albers and Lambert. BackgroundLayer A JSON object that defines a background layer according to the Mapbox Style Specification . CircleLayer A JSON object that defines a circle layer according to the Mapbox Style Specification . FillExtrusionLayer A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification . FillLayer A JSON object that defines a fill layer according to the Mapbox Style Specification . HeatmapLayer A JSON object that defines a heatmap layer according to the Mapbox Style Specification . HillshadeLayer A JSON object that defines a hillshade layer according to the Mapbox Style Specification . LineLayer A JSON object that defines a line layer according to the Mapbox Style Specification . RasterLayer A JSON object that defines a raster layer according to the Mapbox Style Specification . SymbolLayer A JSON object that defines a symbol layer according to the Mapbox Style Specification . SkyLayer A JSON object that defines a sky layer according to the Mapbox Style Specification . GeoJSONSourceRaw A JSON object that defines a geojson source according to the Mapbox Style Specification . VideoSourceRaw A JSON object that defines a video source according to the Mapbox Style Specification . ImageSourceRaw A JSON object that defines a image source according to the Mapbox Style Specification . VectorSourceRaw A JSON object that defines a vector source according to the Mapbox Style Specification . RasterSource A JSON object that defines a raster source according to the Mapbox Style Specification . RasterDemSource A JSON object that defines a raster-dem source according to the Mapbox Style Specification . CanvasSourceRaw A JSON object that defines a canvas source type. See CanvasSourceOptions . Configurations Anchor One of 'center' , 'left' , 'right' , 'top' , 'bottom' , 'top-left' , 'top-right' , 'bottom-left' and 'bottom-right' . Alignment One of 'map' , 'viewport' and 'auto' . ControlPosition One of 'top-right' , 'top-left' , 'bottom-right' and 'bottom-left' . DragPanOptions An object with the following fields: linearity? : number - The rate at which the speed reduces after the pan ends. easing? : (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function. deceleration? : number - Factor used to scale the drag velocity. Default 0 . maxSpeed? : number - The maximum value of the drag velocity. Default 1400 . See DragPanHandler#enable . FitBoundsOptions An object with the following fields: offset? : PointLike - The center of the given bounds relative to the map's center, measured in pixels. padding? : PaddingOptions - The amount of padding in pixels to add to the given bounds. maxZoom? : number - The maximum zoom level to allow when the map view transitions to the specified bounds. animate? : boolean - When set to false , no animation happens. linear? : boolean - If true , the map transitions using Map#easeTo . If false , the map transitions using Map#flyTo duration? : number - Duration in milliseconds maxDuration? : number - Max duration in milliseconds easing? : (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state. essential? : boolean - If true , then the animation is considered essential and will not be affected by prefers-reduced-motion . Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system. See Map#fitBounds ZoomRotateOptions An object with the following fields: around? : 'center' - If \"center\" is passed, map will zoom around center of map. See ScrollZoomHandler#enable , TouchZoomRotateHandler#enable PaddingOptions An object with the following fields: left : number - in pixels. top : number - in pixels. right : number - in pixels. bottom : number - in pixels. TransformRequestFunction A function that takes the following arguments: url : string resourceType : 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image'; And returns an object with the following fields: url : string - The URL to be requested. credentials? : 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests. headers? : { header: string : any } - The headers to be sent with the request. method? : 'GET' | 'POST' | 'PUT' collectResourceTiming? : boolean See RequestParameters . Data Types LngLat A mapboxgl.LngLat object. LngLatLike A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties. LngLatBounds A mapboxgl.LngLatBounds object. LngLatBoundsLike A LngLatBounds object, an array of LngLatLike objects in sw, ne order, or an array of numbers in west, south, east, north order. Point A mapboxgl.Point object. PointLike A Point or an array of two numbers representing x and y screen coordinates in pixels. MapboxGeoJSONFeature A GeoJSON feature that also contains the following library-specific fields: layer : Layer source : string sourceLayer : string state : { key: string : any } ViewState An object with the following fields: longitude : number - The longitude of the map center. latitude : number - The latitude of the map center. zoom : number - The zoom level. pitch : number - The pitch (tilt) of the map, in degrees. bearing : number - The bearing (rotation) of the map, in degrees. Sources The following are implementations of source types that could be retrieved with Map#getSource . GeoJSONSource A source containing GeoJSON. See GeoJSONSource . VideoSource A source containing video. See VideoSource . ImageSource A source containing image. See ImageSource . CanvasSource A source containing the contents of an HTML canvas. See CanvasSource . VectorTileSource A source containing vector tiles in Mapbox Vector Tile format . See VectorTileSource . Events MapboxEvent An object with the following fields: type : string - Event type target : MapboxMap - The map instance that fired the event originalEvent? : Event MapLayerMouseEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent point : Point lngLat : LngLat preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] MapWheelEvent An object with the following fields: type : string target : MapboxMap originalEvent? : WheelEvent preventDefault : () => void defaultPrevented : boolean MapLayerTouchEvent An object with the following fields: type : string target : MapboxMap originalEvent? : TouchEvent point : Point lngLat : LngLat points : Point [] lngLats : LngLat [] preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] ViewStateChangeEvent An object with the following fields: type : string - Event type target : MapboxMap viewState : ViewState - the next view state that the camera wants to change to based on user input or transition. MapBoxZoomEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent boxZoomBounds : LngLatBounds MapStyleDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'style' MapSourceDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'source' isSourceLoaded : boolean source : string sourceId : string sourceDataType : 'metadata' | 'content' tile : any coord : Coordinate See MapDataEvent . ErrorEvent An object with the following fields: type : 'error' error : Error GeolocateEvent An object with the following fields: type : string target : MapboxMap target : mapboxgl.GeolocateControl GeolocateResultEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl coords : GeolocationCoordinates - the current location. timestamp : number - the time at which the location was retrieved. GeolocateErrorEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl code : PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError message : string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface. MarkerDragEvent An object with the following fields: type : string target : mapboxgl.Marker lngLat : LngLat - the new location of the marker PopupEvent An object with the following fields: type : string target : mapboxgl.Popup","headings":[{"value":"Types","depth":1},{"value":"Components","depth":2},{"value":"MapboxMap","depth":4},{"value":"IControl","depth":4},{"value":"CustomLayerInterface","depth":4},{"value":"MapRef","depth":4},{"value":"GeolocateControlRef","depth":4},{"value":"Styling","depth":2},{"value":"MapboxStyle","depth":4},{"value":"Fog","depth":4},{"value":"Light","depth":4},{"value":"TerrainSpecification","depth":4},{"value":"ProjectionSpecification","depth":4},{"value":"BackgroundLayer","depth":4},{"value":"CircleLayer","depth":4},{"value":"FillExtrusionLayer","depth":4},{"value":"FillLayer","depth":4},{"value":"HeatmapLayer","depth":4},{"value":"HillshadeLayer","depth":4},{"value":"LineLayer","depth":4},{"value":"RasterLayer","depth":4},{"value":"SymbolLayer","depth":4},{"value":"SkyLayer","depth":4},{"value":"GeoJSONSourceRaw","depth":4},{"value":"VideoSourceRaw","depth":4},{"value":"ImageSourceRaw","depth":4},{"value":"VectorSourceRaw","depth":4},{"value":"RasterSource","depth":4},{"value":"RasterDemSource","depth":4},{"value":"CanvasSourceRaw","depth":4},{"value":"Configurations","depth":2},{"value":"Anchor","depth":4},{"value":"Alignment","depth":4},{"value":"ControlPosition","depth":4},{"value":"DragPanOptions","depth":4},{"value":"FitBoundsOptions","depth":4},{"value":"ZoomRotateOptions","depth":4},{"value":"PaddingOptions","depth":4},{"value":"TransformRequestFunction","depth":4},{"value":"Data Types","depth":2},{"value":"LngLat","depth":4},{"value":"LngLatLike","depth":4},{"value":"LngLatBounds","depth":4},{"value":"LngLatBoundsLike","depth":4},{"value":"Point","depth":4},{"value":"PointLike","depth":4},{"value":"MapboxGeoJSONFeature","depth":4},{"value":"ViewState","depth":4},{"value":"Sources","depth":2},{"value":"GeoJSONSource","depth":4},{"value":"VideoSource","depth":4},{"value":"ImageSource","depth":4},{"value":"CanvasSource","depth":4},{"value":"VectorTileSource","depth":4},{"value":"Events","depth":2},{"value":"MapboxEvent","depth":4},{"value":"MapLayerMouseEvent","depth":4},{"value":"MapWheelEvent","depth":4},{"value":"MapLayerTouchEvent","depth":4},{"value":"ViewStateChangeEvent","depth":4},{"value":"MapBoxZoomEvent","depth":4},{"value":"MapStyleDataEvent","depth":4},{"value":"MapSourceDataEvent","depth":4},{"value":"ErrorEvent","depth":4},{"value":"GeolocateEvent","depth":4},{"value":"GeolocateResultEvent","depth":4},{"value":"GeolocateErrorEvent","depth":4},{"value":"MarkerDragEvent","depth":4},{"value":"PopupEvent","depth":4}],"slug":"docs/api-reference/types","title":"Types"},{"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount. Parameters: onCreate : ({map: MapRef, mapLib: mapboxgl}) => IControl - called to create an instance of the control. onRemove : ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed. options : object position : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map Returns: IControl - the control instance from onCreate . Source use-control.ts","headings":[{"value":"useControl","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-control","title":"useControl"},{"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can also reference maps that are rendered outside of the current component's direct render tree. See a full example here . Signature useMap(): {current?: MapRef, [id: string]: MapRef} The hook returns an object that contains all mounted maps under the closest MapProvider . The keys are each map's id and the values are the MapRef . If the hook is used inside a decendent of a Map component, the returned object also contains a current field that references the containing map. Source use-map.tsx","headings":[{"value":"useMap","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-map","title":"useMap"},{"excerpt":"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 .\nWe use yarn to manage the dependencies. Test: Test in Node: Test in browser (can use Chrome dev tools for debugging): 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 Xiaoji Chen Xintong Xia 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 .\nThis 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.","headings":[{"value":"Contributing to react-map-gl","depth":1},{"value":"Setting Up Dev Environment","depth":2},{"value":"Pull Requests","depth":2},{"value":"PR Checklist","depth":3},{"value":"Release","depth":2},{"value":"Community Governance","depth":2},{"value":"Technical Steering Committee","depth":3},{"value":"Maintainers","depth":3},{"value":"Code of Conduct","depth":2}],"slug":"docs/contributing","title":"Contributing to react-map-gl"},{"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6. If you are using react-map-gl controls ( Marker , Popup , NavigationControl etc.) with deck.gl's ContextProvider , do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox. Dependencies Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre. viewport-mercator-project (an alias of @math.gl/web-mercator ) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required. Module exports InteractiveMap and StaticMap are removed. Instead, import Map . setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled). MapController is removed. v7.0 has removed its own implementation of user input handling in favor of the native handlers . If you are using a custom implementation of MapController , check if the native handlers offer options to address your application's needs. MapContext and useMapControl are removed. Check out the new API useMap and useControl . The overlay components ( HTMLOverlay , CanvasOverlay and SVGOverlay ) are removed. Check out this example for implementing similar controls in your own application. LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example . Map documentation Renamed props for better consistency with the wrapped library: mapboxApiAccessToken is now mapboxAccessToken mapboxApiUrl is now baseApiUrl preventStyleDiffing (default false ) is replaced with styleDiffing (default true ) mapStyle should be explicitly specified. The default value has changed from \"mapbox://styles/mapbox/light-v9\" to an empty style. The following props are removed and apps should use style instead: width height visible onViewportChange , onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management . transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example . mapOptions is removed. Almost all of the options for the native Map class are exposed as props. onHover is removed. Use onMouseMove or onMouseEnter . The event argument is changed for all interaction callbacks. See documentation for details. getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover. touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop. Other components capture* props are removed. *label props are removed. Use Map 's locale prop. All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis. 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 has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options : Source and Layer components no longer expose imperative methods via ref as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call sourceRef.getSource() , it can be replaced with mapRef().getMap().getSource(sourceId) . If you used to call layerRef.getLayer() , it can be replaced with mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of InteractiveMap 's maxPitch prop is changed to 85 from 60 . mapbox-gl v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message m is not defined . Find solutions in this thread . Upgrading to v4 onChangeViewport is removed, use onViewportChange instead Immutable.js is no longer a dependency Export experimental.MapControls is removed, use MapController instead InteractiveMap 's mapControls prop is renamed to controller Removed support for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See Get Started for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The Node Version Requirement for building react-map-gl is now >=v6.4.0 . Using prebuilt react-map-gl does NOT has this limitation. This is introduced by Mapbox GL JS v0.38.0 MapGL Component Two Map Components - v3 now splits the Map component into two React components: StaticMap and InteractiveMap . InteractiveMap is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport callback now includes width and height . The viewport parameter passed to the onChangeViewport callback now includes width and height . Application code that composed the viewport with width and height may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples - Some less frequently used overlays ( DraggablePointsOverlay , ChoroplethOverlay , ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map - Overlays must now be rendered as children of the main react-map-gl component to automatically sync with the map viewport. fitBounds utility function The fitBounds utility has been moved to the math.gl library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old props will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new props as soon as possible. Old Prop New Prop onChangeViewport() onViewportChange() onHoverFeatures() onHover() onClickFeatures() onClick() perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using v1 of react-map-gl, make sure that you first upgrade: Your node version to v4 or higher Your react version to 15.4 or higher. Background: mapbox-gl 0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays - The map overlay components ( HTMLOverlay , CanvasOverlay , SVGOverlay etc) are now named exports. They previously had to be imported via their relative source paths: 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 ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v7.0","depth":2},{"value":"Dependencies","depth":3},{"value":"Module exports","depth":3},{"value":"Map","depth":3},{"value":"Other components","depth":3},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v7.0 Release date: Feb 4, 2022 v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are: Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library Lightweight: the ESM build size is reduced from 219k to 57k Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs ( flyTo , fitBounds etc.) can now be called directly without breaking the React binding. Compatibility: first and third-party plugins! Directly use mapbox-gl-draw , mapbox-gl-geocoder , to name a few. TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported . Visit the upgrade guide if you are trying to upgrade from v5 and v6. 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 ,\n 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.\nThese 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","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v7.0","depth":2},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details about data sources and layer configuration, check out the Mapbox style specification . For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples. Custom Overlays You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here . 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.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Custom Overlays","depth":2},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started examples . Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl . Or embed it in your app by using css-loader with Webpack or postcss with rollup: Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: Then override the mapLib prop of Map : To use the stylesheet from the fork: Or","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending 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: 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. mapbox-gl@1.x or maplibre-gl - 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 mapboxAccessToken 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 We recommend using an environment variable to minimize leaking risks. See securing Mapbox token for examples. 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 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 Map using the mapStyle prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to Map using the transformRequest prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class. Controlled : The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic. Uncontrolled Map You may clone a full app configuration for this example here . Controlled Map You may clone a full app configuration for this example here . A real-world application likely uses more complicated state flows: Using map with a state store (Redux) example Using map with SSR (Next.js) example Custom Camera Constraints Map offers props that set basic constraints for the camera, e.g. maxBounds , minZoom , maxPitch . If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:","headings":[{"value":"State Management","depth":1},{"value":"Uncontrolled Map","depth":2},{"value":"Controlled Map","depth":2},{"value":"Custom Camera Constraints","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"},{"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused. Never commit your token in clear text into GitHub or other source control. In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable. Create separate tokens for development (often times on http://localhost ), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com ). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own. Add the following to your bundler config: react-map-gl automatically picks up process.env.MapboxAccessToken or process.env.REACT_APP_MAPBOX_ACCESS_TOKEN if they are defined. Alternatively, you can use your own variable name (e.g. __SUPER_SECRET_TOKEN__ ) and pass it in manually with mapboxAccessToken={__SUPER_SECRET_TOKEN__} . Minimize Cost from Frequent Re-mounting In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout: Every time the user clicks the \"table\" tab, the map is unmounted. When they click the \"map\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI. In this case, it is recommended that you set the reuseMaps prop to true : This bypasses the initialization when a map is removed then added back. Performance with Many Markers If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup: This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible. One way to improve the performance is useMemo : This prevents React from rerendering the markers unless they have changed. If your application can do without complicated DOM objects and CSS styling, consider switching to a symbol layer . Layers are rendered in WebGL and are much more performant than markers: Finding out if a point is within the current viewport There are some situations where you want to know if a point is currently visible on the map. Checking this is simple and can be done like so:","headings":[{"value":"Tips and Tricks","depth":1},{"value":"Securing Mapbox Token","depth":2},{"value":"Minimize Cost from Frequent Re-mounting","depth":2},{"value":"Performance with Many Markers","depth":2},{"value":"Finding out if a point is within the current viewport","depth":2}],"slug":"docs/get-started/tips-and-tricks","title":"Tips and Tricks"}]}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/search/index.html b/search/index.html index 64aca58f..0aef0ad4 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
23 articles indexed.
\ No newline at end of file +
Search
23 articles indexed.
\ No newline at end of file diff --git a/webpack-runtime-90ed2a39a8a927f3d2d9.js b/webpack-runtime-53e1d5786ef6c6593773.js similarity index 84% rename from webpack-runtime-90ed2a39a8a927f3d2d9.js rename to webpack-runtime-53e1d5786ef6c6593773.js index 1b58f559..a9985c12 100644 --- a/webpack-runtime-90ed2a39a8a927f3d2d9.js +++ b/webpack-runtime-53e1d5786ef6c6593773.js @@ -1 +1 @@ -!function(e){function t(t){for(var o,c,p=t[0],s=t[1],l=t[2],u=0,f=[];u