From 6b41cd1b2b2eced55fda757bdb5e6cd755f1c731 Mon Sep 17 00:00:00 2001 From: Pessimistress Date: Tue, 8 Feb 2022 01:01:24 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=20dd35d?= =?UTF-8?q?0eeccc2af7b4a03c9366e821a7c8346a292=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2aef29032efb222d04-5c03025532d02b573d86.js | 1 + ...2aef29032efb222d04-76bce8f76910ce322b51.js | 1 - app-74206dce61110b4a5815.js | 2 - app-c33704d3a1abd6ea3046.js | 2 + ...=> app-c33704d3a1abd6ea3046.js.LICENSE.txt | 0 chunk-map.json | 2 +- ...ocoder-src-app-tsx-72ced1d3ef228c75c4a2.js | 4 +- ...pp-tsx-72ced1d3ef228c75c4a2.js.LICENSE.txt | 0 ...eojson-src-app-tsx-96c6855ca732a70078ab.js | 2 +- ...eatmap-src-app-tsx-c7a35aaf435bc075107c.js | 2 +- .../attribution-control/index.html | 4 +- .../fullscreen-control/index.html | 4 +- .../geolocate-control/index.html | 4 +- docs/api-reference/layer/index.html | 4 +- docs/api-reference/map-provider/index.html | 4 +- docs/api-reference/map/index.html | 6 +- docs/api-reference/marker/index.html | 4 +- .../navigation-control/index.html | 4 +- docs/api-reference/popup/index.html | 4 +- docs/api-reference/scale-control/index.html | 4 +- docs/api-reference/source/index.html | 4 +- docs/api-reference/types/index.html | 2 +- docs/api-reference/use-control/index.html | 4 +- docs/api-reference/use-map/index.html | 4 +- docs/contributing/index.html | 4 +- .../get-started/adding-custom-data/index.html | 8 +- docs/get-started/get-started/index.html | 8 +- docs/get-started/mapbox-tokens/index.html | 10 +- docs/get-started/state-management/index.html | 8 +- docs/get-started/tips-and-tricks/index.html | 203 ++++++++++++++++++ docs/index.html | 4 +- docs/upgrade-guide/index.html | 4 +- docs/whats-new/index.html | 4 +- examples/clusters/index.html | 2 +- examples/controls/index.html | 2 +- examples/custom-cursor/index.html | 2 +- examples/draggable-markers/index.html | 2 +- examples/draw-polygon/index.html | 2 +- examples/filter/index.html | 2 +- examples/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 +- .../api-reference/map-provider/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 +- .../docs/api-reference/types/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 | 1 + page-data/docs/page-data.json | 2 +- page-data/docs/upgrade-guide/page-data.json | 2 +- page-data/docs/whats-new/page-data.json | 2 +- page-data/search/page-data.json | 2 +- page-data/sq/d/484347790.json | 2 +- search/index.html | 2 +- ...=> webpack-runtime-b299849377ee80f100b6.js | 2 +- webpack.stats.json | 2 +- 80 files changed, 311 insertions(+), 107 deletions(-) create mode 100644 834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.js delete mode 100644 834b8338ea35f2c3d17eb82aef29032efb222d04-76bce8f76910ce322b51.js delete mode 100644 app-74206dce61110b4a5815.js create mode 100644 app-c33704d3a1abd6ea3046.js rename app-74206dce61110b4a5815.js.LICENSE.txt => app-c33704d3a1abd6ea3046.js.LICENSE.txt (100%) rename component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js => component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js (98%) rename component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js.LICENSE.txt => component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js.LICENSE.txt (100%) rename component---examples-geojson-src-app-tsx-41c34d99e192325220b0.js => component---examples-geojson-src-app-tsx-96c6855ca732a70078ab.js (97%) rename component---examples-heatmap-src-app-tsx-0b3732d7c7d5211df4e2.js => component---examples-heatmap-src-app-tsx-c7a35aaf435bc075107c.js (63%) create mode 100644 docs/get-started/tips-and-tricks/index.html create mode 100644 page-data/docs/get-started/tips-and-tricks/page-data.json rename webpack-runtime-ad40530292517ad7aca7.js => webpack-runtime-b299849377ee80f100b6.js (93%) diff --git a/834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.js b/834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.js new file mode 100644 index 00000000..2b680a20 --- /dev/null +++ b/834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.js @@ -0,0 +1 @@ +(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),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(w);!(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)))),n},t._updateHandlers=function(e,t){for(var r,n=this._map,o=!1,a=y(S);!(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 t.setCoordinates(e.coordinates)}}(f,t,r.current):f=l(e,c,t),r.current=t,f&&o.Children.map(t.children,(function(t){return t&&Object(o.cloneElement)(t,{source:c})}))||null}},OSzm:function(t,e,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(t){var e=Object(a.a)((function(e){return new e.mapLib.NavigationControl(t)}),{position:t.position});return Object(n.useEffect)((function(){Object(o.a)(e._container,t.style)}),[t.style]),null}e.a=n.memo(i)},SA6Z:function(t,e,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[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=t[Symbol.iterator]()).next.bind(r)}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[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=t[Symbol.iterator]()).next.bind(r)}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[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=t[Symbol.iterator]()).next.bind(r)}function b(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(t.point,{layers:e.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(t.type="mouseleave",this._onPointerEvent(t)),this._hoveredFeatures=n,i&&!a&&(t.type="mouseenter",this._onPointerEvent(t)),t.type=o}else this._hoveredFeatures=null},e._fireEvent=function(t,e,r){var n=this._map,o=n.transform,a="string"==typeof e?e:e.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof e&&(e.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,t.call(n,e,r),n.transform=o,n):(t.call(n,e,r),n)},e._onBeforeRepaint=function(){var t=this,e=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&e.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){t._map.transform=n}},Object(i.a)(t,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),t}();function E(){var t=null;if("undefined"!=typeof location){var e=/access_token=([^&\/]*)/.exec(location.search);t=e&&e[1]}try{t=t||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{t=t||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return t}function C(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return L(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[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=t[Symbol.iterator]()).next.bind(r)}function L(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[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=t[Symbol.iterator]()).next.bind(r)}function I(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0)&&(r.unobserve(t),r.disconnect(),n())}))}))).observe(t),{instance:r,el:t}))},n.render=function(){var e=this,t=this.props,n=t.to,r=t.getProps,a=void 0===r?this.defaultGetProps:r,i=t.onClick,s=t.onMouseEnter,p=(t.activeClassName,t.activeStyle,t.innerRef,t.partiallyActive,t.state),d=t.replace,h=t._location,m=(0,o.default)(t,["to","getProps","onClick","onMouseEnter","activeClassName","activeStyle","innerRef","partiallyActive","state","replace","_location"]);var g=y(n,h.pathname);return v(g)?u.default.createElement(l.Link,(0,c.default)({to:g,state:p,getProps:a,innerRef:this.handleRef,onMouseEnter:function(e){s&&s(e),___loader.hovering((0,f.parsePath)(g).pathname)},onClick:function(t){if(i&&i(t),!(0!==t.button||e.props.target||t.defaultPrevented||t.metaKey||t.altKey||t.ctrlKey||t.shiftKey)){t.preventDefault();var n=d,r=encodeURI(g)===h.pathname;"boolean"!=typeof d&&r&&(n=!0),window.___navigate(g,{state:p,replace:n})}return!0}},m)):u.default.createElement("a",(0,c.default)({href:g},m))},t}(u.default.Component);O.propTypes=(0,c.default)({},b,{onClick:s.default.func,to:s.default.string.isRequired,replace:s.default.bool,state:s.default.object});var E=function(e,t,n){return console.warn('The "'+e+'" method is now deprecated and will be removed in Gatsby v'+n+'. Please use "'+t+'" instead.')},x=u.default.forwardRef((function(e,t){return u.default.createElement(w,(0,c.default)({innerRef:t},e))}));t.default=x;t.navigate=function(e,t){window.___navigate(y(e,window.location.pathname),t)};var S=function(e){E("push","navigate",3),window.___push(y(e,window.location.pathname))};t.push=S;t.replace=function(e){E("replace","navigate",3),window.___replace(y(e,window.location.pathname))};t.navigateTo=function(e){return E("navigateTo","navigate",3),S(e)}},"/GqU":function(e,t,n){var r=n("RK3t"),o=n("HYAF");e.exports=function(e){return r(o(e))}},"/hTd":function(e,t,n){"use strict";t.__esModule=!0,t.SessionStorage=void 0;var r=function(){function e(){}var t=e.prototype;return t.read=function(e,t){var n=this.getStateKey(e,t);try{var r=window.sessionStorage.getItem(n);return r?JSON.parse(r):0}catch(o){return window&&window.___GATSBY_REACT_ROUTER_SCROLL&&window.___GATSBY_REACT_ROUTER_SCROLL[n]?window.___GATSBY_REACT_ROUTER_SCROLL[n]:0}},t.save=function(e,t,n){var r=this.getStateKey(e,t),o=JSON.stringify(n);try{window.sessionStorage.setItem(r,o)}catch(a){window&&window.___GATSBY_REACT_ROUTER_SCROLL||(window.___GATSBY_REACT_ROUTER_SCROLL={}),window.___GATSBY_REACT_ROUTER_SCROLL[r]=JSON.parse(o)}},t.getStateKey=function(e,t){var n="@@scroll|"+e.pathname;return null==t?n:n+"|"+t},e}();t.SessionStorage=r},0:function(e,t){},"0BK2":function(e,t){e.exports={}},"0Dky":function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},"0GbY":function(e,t,n){var r=n("Qo9l"),o=n("2oRo"),a=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?a(r[e])||a(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},"0eef":function(e,t,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,a=o&&!r.call({1:2},1);t.f=a?function(e){var t=o(this,e);return!!t&&t.enumerable}:r},"1Y/n":function(e,t,n){var r=n("HAuM"),o=n("ewvW"),a=n("RK3t"),i=n("UMSQ"),c=function(e){return function(t,n,c,s){r(n);var u=o(t),l=a(u),p=i(u.length),f=e?p-1:0,d=e?-1:1;if(c<2)for(;;){if(f in l){s=l[f],f+=d;break}if(f+=d,e?f<0:p<=f)throw TypeError("Reduce of empty array with no initial value")}for(;e?f>=0:p>f;f+=d)f in l&&(s=n(s,l[f],f,u));return s}};e.exports={left:c(!1),right:c(!0)}},"284h":function(e,t,n){var r=n("cDf5");function o(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return o=function(){return e},e}e.exports=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=o();if(t&&t.has(e))return t.get(e);var n={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var c=a?Object.getOwnPropertyDescriptor(e,i):null;c&&(c.get||c.set)?Object.defineProperty(n,i,c):n[i]=e[i]}return n.default=e,t&&t.set(e,n),n}},"2oRo":function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||function(){return this}()||Function("return this")()}).call(this,n("yLpj"))},"30RF":function(e,t,n){"use strict";n.d(t,"d",(function(){return l})),n.d(t,"a",(function(){return p})),n.d(t,"c",(function(){return f})),n.d(t,"b",(function(){return d}));var r=n("LYrO"),o=n("cSJ8"),a=function(e){return void 0===e?e:"/"===e?"/":"/"===e.charAt(e.length-1)?e.slice(0,-1):e},i=new Map,c=[],s=function(e){var t=decodeURIComponent(e);return Object(o.a)(t,"/react-map-gl").split("#")[0].split("?")[0]};function u(e){return e.startsWith("/")||e.startsWith("https://")||e.startsWith("http://")?e:new URL(e,window.location.href+(window.location.href.endsWith("/")?"":"/")).pathname}var l=function(e){c=e},p=function(e){var t=h(e),n=c.map((function(e){var t=e.path;return{path:e.matchPath,originalPath:t}})),o=Object(r.pick)(n,t);return o?a(o.route.originalPath):null},f=function(e){var t=h(e),n=c.map((function(e){var t=e.path;return{path:e.matchPath,originalPath:t}})),o=Object(r.pick)(n,t);return o?o.params:{}},d=function(e){var t=s(u(e));if(i.has(t))return i.get(t);var n=p(t);return n||(n=h(e)),i.set(t,n),n},h=function(e){var t=s(u(e));return"/index.html"===t&&(t="/"),t=a(t)}},"33yf":function(e,t,n){(function(e){function n(e,t){for(var n=0,r=e.length-1;r>=0;r--){var o=e[r];"."===o?e.splice(r,1):".."===o?(e.splice(r,1),n++):n&&(e.splice(r,1),n--)}if(t)for(;n--;n)e.unshift("..");return e}function r(e,t){if(e.filter)return e.filter(t);for(var n=[],r=0;r=-1&&!o;a--){var i=a>=0?arguments[a]:e.cwd();if("string"!=typeof i)throw new TypeError("Arguments to path.resolve must be strings");i&&(t=i+"/"+t,o="/"===i.charAt(0))}return(o?"/":"")+(t=n(r(t.split("/"),(function(e){return!!e})),!o).join("/"))||"."},t.normalize=function(e){var a=t.isAbsolute(e),i="/"===o(e,-1);return(e=n(r(e.split("/"),(function(e){return!!e})),!a).join("/"))||a||(e="."),e&&i&&(e+="/"),(a?"/":"")+e},t.isAbsolute=function(e){return"/"===e.charAt(0)},t.join=function(){var e=Array.prototype.slice.call(arguments,0);return t.normalize(r(e,(function(e,t){if("string"!=typeof e)throw new TypeError("Arguments to path.join must be strings");return e})).join("/"))},t.relative=function(e,n){function r(e){for(var t=0;t=0&&""===e[n];n--);return t>n?[]:e.slice(t,n-t+1)}e=t.resolve(e).substr(1),n=t.resolve(n).substr(1);for(var o=r(e.split("/")),a=r(n.split("/")),i=Math.min(o.length,a.length),c=i,s=0;s=1;--a)if(47===(t=e.charCodeAt(a))){if(!o){r=a;break}}else o=!1;return-1===r?n?"/":".":n&&1===r?"/":e.slice(0,r)},t.basename=function(e,t){var n=function(e){"string"!=typeof e&&(e+="");var t,n=0,r=-1,o=!0;for(t=e.length-1;t>=0;--t)if(47===e.charCodeAt(t)){if(!o){n=t+1;break}}else-1===r&&(o=!1,r=t+1);return-1===r?"":e.slice(n,r)}(e);return t&&n.substr(-1*t.length)===t&&(n=n.substr(0,n.length-t.length)),n},t.extname=function(e){"string"!=typeof e&&(e+="");for(var t=-1,n=0,r=-1,o=!0,a=0,i=e.length-1;i>=0;--i){var c=e.charCodeAt(i);if(47!==c)-1===r&&(o=!1,r=i+1),46===c?-1===t?t=i:1!==a&&(a=1):-1!==t&&(a=-1);else if(!o){n=i+1;break}}return-1===t||-1===r||0===a||1===a&&t===r-1&&t===n+1?"":e.slice(t,r)};var o="b"==="ab".substr(-1)?function(e,t,n){return e.substr(t,n)}:function(e,t,n){return t<0&&(t=e.length+t),e.substr(t,n)}}).call(this,n("8oxB"))},"3uz+":function(e,t,n){"use strict";t.__esModule=!0,t.useScrollRestoration=function(e){var t=(0,a.useLocation)(),n=(0,o.useContext)(r.ScrollContext),i=(0,o.useRef)();return(0,o.useLayoutEffect)((function(){if(i.current){var r=n.read(t,e);i.current.scrollTo(0,r||0)}}),[]),{ref:i,onScroll:function(){i.current&&n.save(t,e,i.current.scrollTop)}}};var r=n("Enzk"),o=n("q1tI"),a=n("YwZP")},"5ku3":function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return a})),n.d(t,"b",(function(){return i}));var r=n("U8pU"),o=n("I0ug");function a(){return!("object"===(void 0===e?"undefined":Object(r.a)(e))&&"[object process]"===String(e)&&!e.browser)||Object(o.a)()}function i(){return a()&&"undefined"!=typeof document}}).call(this,n("8oxB"))},"5yr3":function(e,t,n){"use strict";var r=function(e){return e=e||Object.create(null),{on:function(t,n){(e[t]||(e[t]=[])).push(n)},off:function(t,n){e[t]&&e[t].splice(e[t].indexOf(n)>>>0,1)},emit:function(t,n){(e[t]||[]).slice().map((function(e){e(n)})),(e["*"]||[]).slice().map((function(e){e(t,n)}))}}}();t.a=r},"6JNq":function(e,t,n){var r=n("UTVS"),o=n("Vu81"),a=n("Bs8V"),i=n("m/L8");e.exports=function(e,t){for(var n=o(t),c=i.f,s=a.f,u=0;u=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),p=function(e){return function(t){var n=f(t.components);return o.a.createElement(e,i({},t,{components:n}))}},f=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=f(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),l=f(n),p=r,d=l["".concat(i,".").concat(p)]||l[p]||h[p]||a;return n?o.a.createElement(d,s(s({ref:t},c),{},{components:n})):o.a.createElement(d,s({ref:t},c))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(o[n]=e[n]);return o}},"8oxB":function(e,t){var n,r,o=e.exports={};function a(){throw new Error("setTimeout has not been defined")}function i(){throw new Error("clearTimeout has not been defined")}function c(e){if(n===setTimeout)return setTimeout(e,0);if((n===a||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:a}catch(e){n=a}try{r="function"==typeof clearTimeout?clearTimeout:i}catch(e){r=i}}();var s,u=[],l=!1,p=-1;function f(){l&&s&&(l=!1,s.length?u=s.concat(u):p=-1,u.length&&d())}function d(){if(!l){var e=c(f);l=!0;for(var t=u.length;t;){for(s=u,u=[];++p1)for(var n=1;n1&&void 0!==arguments[1]?arguments[1]:{},u=s.state,l=s.replace,p=void 0!==l&&l;if("number"==typeof t)e.history.go(t);else{u=r({},u,{key:Date.now()+""});try{i||p?e.history.replaceState(u,null,t):e.history.pushState(u,null,t)}catch(d){e.location[p?"replace":"assign"](t)}}a=o(e),i=!0;var f=new Promise((function(e){return c=e}));return n.forEach((function(e){return e({location:a,action:"PUSH"})})),f}}},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=e.indexOf("?"),n={pathname:t>-1?e.substr(0,t):e,search:t>-1?e.substr(t):""},r=0,o=[n],a=[null];return{get location(){return o[r]},addEventListener:function(e,t){},removeEventListener:function(e,t){},history:{get entries(){return o},get index(){return r},get state(){return a[r]},pushState:function(e,t,n){var i=n.split("?"),c=i[0],s=i[1],u=void 0===s?"":s;r++,o.push({pathname:c,search:u.length?"?"+u:u}),a.push(e)},replaceState:function(e,t,n){var i=n.split("?"),c=i[0],s=i[1],u=void 0===s?"":s;o[r]={pathname:c,search:u},a[r]=e},go:function(e){var t=r+e;t<0||t>a.length-1||(r=t)}}}},c=!("undefined"==typeof window||!window.document||!window.document.createElement),s=a(c?window:i()),u=s.navigate},"9uj6":function(e,t,n){"use strict";var r=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,o=function(e){var t={};return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}((function(e){return r.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}));t.a=o},B5uF:function(e,t,n){"use strict";n.d(t,"a",(function(){return h}));var r=n("rePB"),o=n("JX7q"),a=n("dI71"),i=n("q1tI"),c=n.n(i);function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t79&&c<83},{reduce:function(e){return o(this,e,arguments.length,arguments.length>1?arguments[1]:void 0)}})},ECyS:function(e,t,n){"use strict";n("E9XD");function r(e){return Object.prototype.toString.call(e).slice(8,-1)}function o(e){return"Object"===r(e)&&(e.constructor===Object&&Object.getPrototypeOf(e)===Object.prototype)}function a(e){return"Array"===r(e)}function i(e){return"Symbol"===r(e)}function c(){for(var e=0,t=0,n=arguments.length;t=0)}}).call(this,n("8oxB"))},I8vh:function(e,t,n){var r=n("ppGB"),o=Math.max,a=Math.min;e.exports=function(e,t){var n=r(e);return n<0?o(n+t,0):a(n,t)}},IOVJ:function(e,t,n){"use strict";var r=n("rePB"),o=n("dI71"),a=n("q1tI"),i=n.n(a),c=n("emEt"),s=n("xtsi"),u=n("30RF");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=74)&&(r=i.match(/Chrome\/(\d+)/))&&(o=r[1]),e.exports=o&&+o},LYrO:function(e,t,n){"use strict";n.r(t),n.d(t,"startsWith",(function(){return a})),n.d(t,"pick",(function(){return i})),n.d(t,"match",(function(){return c})),n.d(t,"resolve",(function(){return s})),n.d(t,"insertParams",(function(){return u})),n.d(t,"validateRedirect",(function(){return l})),n.d(t,"shallowCompare",(function(){return b}));var r=n("QLaP"),o=n.n(r),a=function(e,t){return e.substr(0,t.length)===t},i=function(e,t){for(var n=void 0,r=void 0,a=t.split("?")[0],i=g(a),c=""===i[0],s=m(e),u=0,l=s.length;ut.score?-1:e.index-t.index}))},g=function(e){return e.replace(/(^\/+|\/+$)/g,"").split("/")},v=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r0})))&&n.length>0?"?"+n.join("&"):"")},y=["uri","path"],b=function(e,t){var n=Object.keys(e);return n.length===Object.keys(t).length&&n.every((function(n){return t.hasOwnProperty(n)&&e[n]===t[n]}))}},LeKB:function(e,t,n){e.exports=[{plugin:n("q9nr"),options:{plugins:[],maxWidth:690,linkImagesToOriginal:!0,showCaptions:!1,markdownCaptions:!1,sizeByPixelDensity:!1,backgroundColor:"white",quality:50,withWebp:!1,tracedSVG:!1,loading:"lazy",disableBgImageOnAlpha:!1,disableBgImage:!1}},{plugin:n("hUyl"),options:{plugins:[],offsetY:64,removeAccents:!0,enableCustomId:!0,className:"anchor"}},{plugin:n("flL/"),options:{plugins:[],extensions:[".md",".mdx"],gatsbyRemarkPlugins:[{resolve:"gatsby-remark-images",options:{maxWidth:690}},"gatsby-remark-responsive-iframe","gatsby-remark-prismjs","gatsby-remark-copy-linked-files",{resolve:"gatsby-remark-autolink-headers",options:{offsetY:64,removeAccents:!0,enableCustomId:!0}},{resolve:"gatsby-remark-embedded-codesandbox",options:{directory:"./",protocol:"embedded-codesandbox://",embedOptions:{codemirror:1,fontsize:12,hidenavigation:1,view:"split"}}}],defaultLayouts:{},lessBabel:!1,remarkPlugins:[],rehypePlugins:[],mediaTypes:["text/markdown","text/x-markdown"],root:"/home/runner/work/react-map-gl/react-map-gl/website"}},{plugin:n("EvL4"),options:{plugins:[],logLevel:1,DIR_NAME:"/home/runner/work/react-map-gl/react-map-gl/website",ROOT_FOLDER:"/home/runner/work/react-map-gl/react-map-gl",DOCS:{id:"table-of-contents",chapters:[{title:"Introduction",entries:[{entry:"docs"},{entry:"docs/whats-new"},{entry:"docs/upgrade-guide"},{entry:"docs/contributing"}]},{title:"Developer Guide",entries:[{entry:"docs/get-started/get-started"},{entry:"docs/get-started/mapbox-tokens"},{entry:"docs/get-started/state-management"},{entry:"docs/get-started/adding-custom-data"}]},{title:"API Reference",entries:[{entry:"docs/api-reference/map"},{entry:"docs/api-reference/attribution-control"},{entry:"docs/api-reference/fullscreen-control"},{entry:"docs/api-reference/geolocate-control"},{entry:"docs/api-reference/layer"},{entry:"docs/api-reference/map-provider"},{entry:"docs/api-reference/marker"},{entry:"docs/api-reference/navigation-control"},{entry:"docs/api-reference/popup"},{entry:"docs/api-reference/scale-control"},{entry:"docs/api-reference/source"},{entry:"docs/api-reference/use-control"},{entry:"docs/api-reference/use-map"},{entry:"docs/api-reference/types"}]}]},DOC_FOLDERS:["/home/runner/work/react-map-gl/react-map-gl/docs"],SOURCE:["/home/runner/work/react-map-gl/react-map-gl/website/static","/home/runner/work/react-map-gl/react-map-gl/website/src"],PROJECT_TYPE:"github",PROJECT_NAME:"react-map-gl",PROJECT_ORG:"visgl",PROJECT_ORG_LOGO:"images/visgl-logo.png",PROJECT_URL:"https://github.com/visgl/",PROJECT_DESC:"React wrapper for Mapbox GL JS",PROJECT_IMAGE:"images/hero-sm.jpg",PATH_PREFIX:"/react-map-gl",GA_TRACKING_ID:"UA-74374017-2",GITHUB_KEY:null,HOME_PATH:"",PROJECTS:[{name:"deck.gl",url:"https://deck.gl"},{name:"luma.gl",url:"https://luma.gl"},{name:"loaders.gl",url:"https://loaders.gl"},{name:"nebula.gl",url:"https://nebula.gl/"}],LINK_TO_GET_STARTED:"/docs/get-started/get-started",ADDITIONAL_LINKS:[{name:"Blog",href:"http://medium.com/vis-gl",index:4}],INDEX_PAGE_URL:"/home/runner/work/react-map-gl/react-map-gl/website/src/home.js",EXAMPLES:[{title:"Dynamic Styling",image:"images/example-layers.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/layers/src/app.tsx",path:"examples/layers",category:"Examples"},{title:"Markers & Popups",image:"images/example-controls.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/controls/src/app.tsx",path:"examples/controls",category:"Examples"},{title:"Custom Cursor",image:"images/example-custom-cursor.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/custom-cursor/src/app.tsx",path:"examples/custom-cursor",category:"Examples"},{title:"Draggable Marker",image:"images/example-draggable-markers.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/draggable-markers/src/app.tsx",path:"examples/draggable-markers",category:"Examples"},{title:"GeoJSON",image:"images/example-geojson.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geojson/src/app.tsx",path:"examples/geojson",category:"Examples"},{title:"GeoJSON Animation",image:"images/example-geojson-animation.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geojson-animation/src/app.tsx",path:"examples/geojson-animation",category:"Examples"},{title:"Clusters",image:"images/example-clusters.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/clusters/src/app.tsx",path:"examples/clusters",category:"Examples"},{title:"Limit Map Interaction",image:"images/example-interaction.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/interaction/src/app.tsx",path:"examples/interaction",category:"Examples"},{title:"Camera Transition",image:"images/example-viewport-animation.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/viewport-animation/src/app.tsx",path:"examples/viewport-animation",category:"Examples"},{title:"Highlight By Filter",image:"images/example-filter.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/filter/src/app.tsx",path:"examples/filter",category:"Examples"},{title:"Zoom To Bounds",image:"images/example-zoom-to-bounds.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/zoom-to-bounds/src/app.tsx",path:"examples/zoom-to-bounds",category:"Examples"},{title:"Heatmap",image:"images/example-heatmap.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/heatmap/src/app.tsx",path:"examples/heatmap",category:"Examples"},{title:"Draw Polygon",image:"images/example-draw-polygon.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/draw-polygon/src/app.tsx",path:"examples/draw-polygon",category:"Examples"},{title:"Terrain",image:"images/example-terrain.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/terrain/src/app.tsx",path:"examples/terrain",category:"Examples"},{title:"Geocoder",image:"images/example-geocoder.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geocoder/src/app.tsx",path:"examples/geocoder",category:"Examples"},{title:"Side by Side",image:"images/example-side-by-side.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/side-by-side/src/app.tsx",path:"examples/side-by-side",category:"Examples"}],THEME_OVERRIDES:{primary400:"#00ADE6",mono100:"#FFFFFF",mono200:"#f7fcfb",mono300:"#ecf7f5",mono400:"#e1f0ee",mono500:"#cae0dc",mono600:"#9ec0bb",mono700:"#6f9691",mono800:"#486865",mono900:"#2b4845",mono1000:"#101918"},STYLESHEETS:["https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css","/style.css"]}}]},Ljh3:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var r=n("JX7q"),o=n("dI71"),a=n("q1tI"),i=n.n(a),c=n("O7rn"),s=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={collapsed:!0,links:Object(c.b)(t)},n.handleClick=n.handleClick.bind(Object(r.a)(n)),n}Object(o.a)(t,e);var n=t.prototype;return n.handleClick=function(){this.setState({collapsed:!this.state.collapsed})},n.render=function(){var e=this.state,t=e.links,n=e.collapsed;return i.a.createElement(c.a,Object.assign({},this.props,{links:t,isLinksMenuOpen:!1,isProjectsMenuOpen:!n,toggleProjectsMenu:this.handleClick,toggleLinksMenu:function(){}}))},t}(a.Component)},ME5O:function(e,t,n){"use strict";t.a={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1}},MMVs:function(e,t,n){e.exports=function(){var e=!1;-1!==navigator.appVersion.indexOf("MSIE 10")&&(e=!0);var t,n=[],r="object"==typeof document&&document,o=e?r.documentElement.doScroll("left"):r.documentElement.doScroll,a=r&&(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);return!a&&r&&r.addEventListener("DOMContentLoaded",t=function(){for(r.removeEventListener("DOMContentLoaded",t),a=1;t=n.shift();)t()}),function(e){a?setTimeout(e,0):n.push(e)}}()},"NC/Y":function(e,t,n){var r=n("0GbY");e.exports=r("navigator","userAgent")||""},NSX3:function(e,t,n){"use strict";n.r(t);var r=n("xtsi");"https:"!==window.location.protocol&&"localhost"!==window.location.hostname?console.error("Service workers can only be used over HTTPS, or on localhost for development"):"serviceWorker"in navigator&&navigator.serviceWorker.register("/react-map-gl/sw.js").then((function(e){e.addEventListener("updatefound",(function(){Object(r.apiRunner)("onServiceWorkerUpdateFound",{serviceWorker:e});var t=e.installing;console.log("installingWorker",t),t.addEventListener("statechange",(function(){switch(t.state){case"installed":navigator.serviceWorker.controller?(window.___swUpdated=!0,Object(r.apiRunner)("onServiceWorkerUpdateReady",{serviceWorker:e}),window.___failedResources&&(console.log("resources failed, SW updated - reloading"),window.location.reload())):(console.log("Content is now available offline!"),Object(r.apiRunner)("onServiceWorkerInstalled",{serviceWorker:e}));break;case"redundant":console.error("The installing service worker became redundant."),Object(r.apiRunner)("onServiceWorkerRedundant",{serviceWorker:e});break;case"activated":Object(r.apiRunner)("onServiceWorkerActive",{serviceWorker:e})}}))}))})).catch((function(e){console.error("Error during service worker registration:",e)}))},NsGk:function(e,t,n){t.components={"component---examples-clusters-src-app-tsx":function(){return Promise.all([n.e(0),n.e(5)]).then(n.bind(null,"h3ZS"))},"component---examples-controls-src-app-tsx":function(){return Promise.all([n.e(0),n.e(6)]).then(n.bind(null,"hLkE"))},"component---examples-custom-cursor-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(7)]).then(n.bind(null,"D5EJ"))},"component---examples-draggable-markers-src-app-tsx":function(){return Promise.all([n.e(0),n.e(8)]).then(n.bind(null,"XiBU"))},"component---examples-draw-polygon-src-app-tsx":function(){return Promise.all([n.e(0),n.e(2),n.e(9)]).then(n.bind(null,"Iug2"))},"component---examples-filter-src-app-tsx":function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,"LBzf"))},"component---examples-geocoder-src-app-tsx":function(){return Promise.all([n.e(0),n.e(11)]).then(n.bind(null,"rSgj"))},"component---examples-geojson-animation-src-app-tsx":function(){return Promise.all([n.e(0),n.e(12)]).then(n.bind(null,"qGxt"))},"component---examples-geojson-src-app-tsx":function(){return Promise.all([n.e(0),n.e(13)]).then(n.bind(null,"TPXO"))},"component---examples-heatmap-src-app-tsx":function(){return Promise.all([n.e(0),n.e(14)]).then(n.bind(null,"M+zY"))},"component---examples-interaction-src-app-tsx":function(){return Promise.all([n.e(0),n.e(15)]).then(n.bind(null,"AVzd"))},"component---examples-layers-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(16)]).then(n.bind(null,"keqU"))},"component---examples-side-by-side-src-app-tsx":function(){return Promise.all([n.e(0),n.e(17)]).then(n.bind(null,"HEEo"))},"component---examples-terrain-src-app-tsx":function(){return Promise.all([n.e(0),n.e(18)]).then(n.bind(null,"IOtm"))},"component---examples-viewport-animation-src-app-tsx":function(){return Promise.all([n.e(0),n.e(19)]).then(n.bind(null,"3F3y"))},"component---examples-zoom-to-bounds-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(20)]).then(n.bind(null,"jUl1"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":function(){return n.e(21).then(n.bind(null,"bzNg"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":function(){return n.e(22).then(n.bind(null,"2flm"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":function(){return n.e(23).then(n.bind(null,"H/ma"))},"component---src-home-js":function(){return n.e(24).then(n.bind(null,"e0Gm"))}}},O7rn:function(e,t,n){"use strict";n.d(t,"b",(function(){return v}));var r=n("rePB"),o=n("q1tI"),a=n.n(o),i=n("17x9"),c=n.n(i),s=n("K/gy"),u=n.n(s),l=n("vOJQ"),p=n("ivKS");function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t0&&{label:"Examples",to:"/examples"},o="github"===n.PROJECT_TYPE&&{href:"https://github.com/"+n.PROJECT_ORG+"/"+n.PROJECT_NAME,label:a.a.createElement(h,null)},i=[r,{label:"Documentation",to:n.HOME_PATH?"/":"/docs"},{label:"Search",to:"/search"}];return n.ADDITIONAL_LINKS&&n.ADDITIONAL_LINKS.length>0&&n.ADDITIONAL_LINKS.map((function(e){return d(d({},e),{},{label:e.name})})).forEach((function(e){Number.isFinite(e.index)?i.splice(e.index,0,e):i.push(e)})),i.push(o),i.filter(Boolean)}var y=function(e){var t=e.links;return a.a.createElement(p.g,null,t.map((function(e,t){return a.a.createElement(p.e,{key:"link-"+t},a.a.createElement(m,e))})))};t.a=function(e){var t=e.links,n=e.config,r=void 0===n?{}:n,o=e.toggleMenu,i=e.toggleToc,c=e.isTocOpen,s=e.isMenuOpen,u=e.isSmallScreen,l=r.PROJECT_NAME,f=r.PROJECTS,d=void 0===f?[]:f,h=r.HEADER_LINK_URL,m=void 0===h?"/":h,v=d.map((function(e){var t=e.name,n=e.url;return a.a.createElement(p.m,{key:"menulink-"+t,href:n},t)})),b=function(e){o(!s),e.stopPropagation()};return u?a.a.createElement(p.b,{onClick:function(){return o(!1)}},a.a.createElement(p.l,null,a.a.createElement(g,{to:m,label:l}),a.a.createElement(p.j,{$collapsed:!s,$nbItems:t.length+1},a.a.createElement(y,{links:t}))),i&&a.a.createElement(p.n,{onClick:function(){o(!1),i(!c)}},"Table of Contents"),a.a.createElement(p.a,{onClick:b}),s&&a.a.createElement(p.k,null)):a.a.createElement(p.b,{onClick:function(){return o(!1)}},a.a.createElement(p.l,null,a.a.createElement(p.a,{onClick:b}),a.a.createElement(g,{to:m,label:l}),a.a.createElement(p.j,{$collapsed:!s,$nbItems:d.length},v)),a.a.createElement(y,{links:t}),s&&a.a.createElement(p.k,null))}},PJYZ:function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},QLaP:function(e,t,n){"use strict";e.exports=function(e,t,n,r,o,a,i,c){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,a,i,c],l=0;(s=new Error(t.replace(/%s/g,(function(){return u[l++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},Qo9l:function(e,t,n){var r=n("2oRo");e.exports=r},RK3t:function(e,t,n){var r=n("0Dky"),o=n("xrYK"),a="".split;e.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?a.call(e,""):Object(e)}:Object},SksO:function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},TAZq:function(e,t,n){e.exports=function(){"use strict";return function(e){function t(t){if(t)try{e(t+"}")}catch(n){}}return function(n,r,o,a,i,c,s,u,l,p){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===p?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}}()},TJpk:function(e,t,n){t.__esModule=!0,t.Helmet=void 0;var r=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var m,g,v,y=(0,c.default)(u.reducePropsToState,u.handleClientStateChange,u.mapStateOnServer)((function(){return null})),b=(m=y,v=g=function(e){function t(){return d(this,t),h(this,e.apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.shouldComponentUpdate=function(e){return!(0,s.default)(this.props,e)},t.prototype.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case l.TAG_NAMES.SCRIPT:case l.TAG_NAMES.NOSCRIPT:return{innerHTML:t};case l.TAG_NAMES.STYLE:return{cssText:t}}throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},t.prototype.flattenArrayTypeChildren=function(e){var t,n=e.child,o=e.arrayTypeChildren,a=e.newChildProps,i=e.nestedChildren;return r({},o,((t={})[n.type]=[].concat(o[n.type]||[],[r({},a,this.mapNestedChildrenToProps(n,i))]),t))},t.prototype.mapObjectTypeChildren=function(e){var t,n,o=e.child,a=e.newProps,i=e.newChildProps,c=e.nestedChildren;switch(o.type){case l.TAG_NAMES.TITLE:return r({},a,((t={})[o.type]=c,t.titleAttributes=r({},i),t));case l.TAG_NAMES.BODY:return r({},a,{bodyAttributes:r({},i)});case l.TAG_NAMES.HTML:return r({},a,{htmlAttributes:r({},i)})}return r({},a,((n={})[o.type]=r({},i),n))},t.prototype.mapArrayTypeChildrenToProps=function(e,t){var n=r({},t);return Object.keys(e).forEach((function(t){var o;n=r({},n,((o={})[t]=e[t],o))})),n},t.prototype.warnOnInvalidChildren=function(e,t){return!0},t.prototype.mapChildrenToProps=function(e,t){var n=this,r={};return a.default.Children.forEach(e,(function(e){if(e&&e.props){var o=e.props,a=o.children,i=f(o,["children"]),c=(0,u.convertReactPropstoHtmlAttributes)(i);switch(n.warnOnInvalidChildren(e,a),e.type){case l.TAG_NAMES.LINK:case l.TAG_NAMES.META:case l.TAG_NAMES.NOSCRIPT:case l.TAG_NAMES.SCRIPT:case l.TAG_NAMES.STYLE:r=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:r,newChildProps:c,nestedChildren:a});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:c,nestedChildren:a})}}})),t=this.mapArrayTypeChildrenToProps(r,t)},t.prototype.render=function(){var e=this.props,t=e.children,n=f(e,["children"]),o=r({},n);return t&&(o=this.mapChildrenToProps(t,o)),a.default.createElement(m,o)},o(t,null,[{key:"canUseDOM",set:function(e){m.canUseDOM=e}}]),t}(a.default.Component),g.propTypes={base:i.default.object,bodyAttributes:i.default.object,children:i.default.oneOfType([i.default.arrayOf(i.default.node),i.default.node]),defaultTitle:i.default.string,defer:i.default.bool,encodeSpecialCharacters:i.default.bool,htmlAttributes:i.default.object,link:i.default.arrayOf(i.default.object),meta:i.default.arrayOf(i.default.object),noscript:i.default.arrayOf(i.default.object),onChangeClientState:i.default.func,script:i.default.arrayOf(i.default.object),style:i.default.arrayOf(i.default.object),title:i.default.string,titleAttributes:i.default.object,titleTemplate:i.default.string},g.defaultProps={defer:!0,encodeSpecialCharacters:!0},g.peek=m.peek,g.rewind=function(){var e=m.rewind();return e||(e=(0,u.mapStateOnServer)({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),e},v);b.renderStatic=b.rewind,t.Helmet=b,t.default=b},TOwV:function(e,t,n){"use strict";e.exports=n("qT12")},TR4N:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["children","color","size","style","width","height"]),p=t.reactIconBase,f=void 0===p?{}:p,d=i||f.size||"1em";return o.default.createElement("svg",r({children:n,fill:"currentColor",preserveAspectRatio:"xMidYMid meet",height:u||d,width:s||d},f,l,{style:r({verticalAlign:"middle",color:a||f.color},f.style||{},c)}))};c.propTypes={color:a.default.string,size:a.default.oneOfType([a.default.string,a.default.number]),width:a.default.oneOfType([a.default.string,a.default.number]),height:a.default.oneOfType([a.default.string,a.default.number]),style:a.default.object},c.contextTypes={reactIconBase:a.default.shape(c.propTypes)},t.default=c,e.exports=t.default},TWQb:function(e,t,n){var r=n("/GqU"),o=n("UMSQ"),a=n("I8vh"),i=function(e){return function(t,n,i){var c,s=r(t),u=o(s.length),l=a(i,u);if(e&&n!=n){for(;u>l;)if((c=s[l++])!=c)return!0}else for(;u>l;l++)if((e||l in s)&&s[l]===n)return e||l||0;return!e&&-1}};e.exports={includes:i(!0),indexOf:i(!1)}},TqRt:function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},U8pU:function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"a",(function(){return r}))},UMSQ:function(e,t,n){var r=n("ppGB"),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},UTVS:function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},UxWs:function(e,t,n){"use strict";n.r(t);var r=n("dI71"),o=n("xtsi"),a=n("q1tI"),i=n.n(a),c=n("i8i4"),s=n.n(c),u=n("YwZP"),l=n("7hJ6"),p=n("MMVs"),f=n.n(p),d=n("Wbzz"),h=(n("E9XD"),n("emEt")),m=n("YLt+"),g=n("5yr3"),v={id:"gatsby-announcer",style:{position:"absolute",top:0,width:1,height:1,padding:0,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0},"aria-live":"assertive","aria-atomic":"true"},y=n("9Xx/"),b=n("+ZDr"),w=m.reduce((function(e,t){return e[t.fromPath]=t,e}),{});function O(e){var t=w[e];return null!=t&&(window.___replace(t.toPath),!0)}var E=function(e,t){O(e.pathname)||Object(o.apiRunner)("onPreRouteUpdate",{location:e,prevLocation:t})},x=function(e,t){O(e.pathname)||Object(o.apiRunner)("onRouteUpdate",{location:e,prevLocation:t})},S=function(e,t){if(void 0===t&&(t={}),"number"!=typeof e){var n=Object(b.parsePath)(e).pathname,r=w[n];if(r&&(e=r.toPath,n=Object(b.parsePath)(e).pathname),window.___swUpdated)window.location=n;else{var a=setTimeout((function(){g.a.emit("onDelayedLoadPageResources",{pathname:n}),Object(o.apiRunner)("onRouteUpdateDelayed",{location:window.location})}),1e3);h.default.loadPage(n).then((function(r){if(!r||r.status===h.PageResourceStatus.Error)return window.history.replaceState({},"",location.href),window.location=n,void clearTimeout(a);r&&r.page.webpackCompilationHash!==window.___webpackCompilationHash&&("serviceWorker"in navigator&&null!==navigator.serviceWorker.controller&&"activated"===navigator.serviceWorker.controller.state&&navigator.serviceWorker.controller.postMessage({gatsbyApi:"clearPathResources"}),window.location=n),Object(u.navigate)(e,t),clearTimeout(a)}))}}else y.c.navigate(e)};function T(e,t){var n=this,r=t.location,a=r.pathname,i=r.hash,c=Object(o.apiRunner)("shouldUpdateScroll",{prevRouterProps:e,pathname:a,routerProps:{location:r},getSavedScrollPosition:function(e){return[0,n._stateStorage.read(e,e.key)]}});if(c.length>0)return c[c.length-1];if(e&&e.location.pathname===a)return i?decodeURI(i.slice(1)):[0,0];return!0}var C=function(e){function t(t){var n;return(n=e.call(this,t)||this).announcementRef=i.a.createRef(),n}Object(r.a)(t,e);var n=t.prototype;return n.componentDidUpdate=function(e,t){var n=this;requestAnimationFrame((function(){var e="new page at "+n.props.location.pathname;document.title&&(e=document.title);var t=document.querySelectorAll("#gatsby-focus-wrapper h1");t&&t.length&&(e=t[0].textContent);var r="Navigated to "+e;n.announcementRef.current&&(n.announcementRef.current.innerText!==r&&(n.announcementRef.current.innerText=r))}))},n.render=function(){return i.a.createElement("div",Object.assign({},v,{ref:this.announcementRef}))},t}(i.a.Component),j=function(e,t){var n,r;return e.href!==t.href||(null==e||null===(n=e.state)||void 0===n?void 0:n.key)!==(null==t||null===(r=t.state)||void 0===r?void 0:r.key)},P=function(e){function t(t){var n;return n=e.call(this,t)||this,E(t.location,null),n}Object(r.a)(t,e);var n=t.prototype;return n.componentDidMount=function(){x(this.props.location,null)},n.shouldComponentUpdate=function(e){return!!j(e.location,this.props.location)&&(E(this.props.location,e.location),!0)},n.componentDidUpdate=function(e){j(e.location,this.props.location)&&x(this.props.location,e.location)},n.render=function(){return i.a.createElement(i.a.Fragment,null,this.props.children,i.a.createElement(C,{location:location}))},t}(i.a.Component),k=n("IOVJ"),A=n("NsGk"),_=n.n(A),R=n("rePB");function I(e,t){for(var n in e)if(!(n in t))return!0;for(var r in t)if(e[r]!==t[r])return!0;return!1}function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function M(e){for(var t=1;t0&&n("NSX3");var e=function(e){return i.a.createElement(u.BaseContext.Provider,{value:{baseuri:"/",basepath:"/"}},i.a.createElement(k.a,e))},t=i.a.createContext({}),a=function(e){function n(){return e.apply(this,arguments)||this}return Object(r.a)(n,e),n.prototype.render=function(){var e=this.props.children;return i.a.createElement(u.Location,null,(function(n){var r=n.location;return i.a.createElement(D,{location:r},(function(n){var r=n.pageResources,o=n.location,a=Object(h.getStaticQueryResults)();return i.a.createElement(d.c.Provider,{value:a},i.a.createElement(t.Provider,{value:{pageResources:r,location:o}},e))}))}))},n}(i.a.Component),c=function(n){function o(){return n.apply(this,arguments)||this}return Object(r.a)(o,n),o.prototype.render=function(){var n=this;return i.a.createElement(t.Consumer,null,(function(t){var r=t.pageResources,o=t.location;return i.a.createElement(P,{location:o},i.a.createElement(l.ScrollContext,{location:o,shouldUpdateScroll:T},i.a.createElement(u.Router,{basepath:"/react-map-gl",location:o,id:"gatsby-focus-wrapper"},i.a.createElement(e,Object.assign({path:"/404.html"===r.page.path?Object(N.a)(o.pathname,"/react-map-gl"):encodeURI(r.page.matchPath||r.page.path)},n.props,{location:o,pageResources:r},r.json)))))}))},o}(i.a.Component),p=window,m=p.pagePath,g=p.location;m&&"/react-map-gl"+m!==g.pathname&&!(U.findMatchPath(Object(N.a)(g.pathname,"/react-map-gl"))||"/404.html"===m||m.match(/^\/404\/?$/)||m.match(/^\/offline-plugin-app-shell-fallback\/?$/))&&Object(u.navigate)("/react-map-gl"+m+g.search+g.hash,{replace:!0}),h.publicLoader.loadPage(g.pathname).then((function(e){if(!e||e.status===h.PageResourceStatus.Error)throw new Error("page resources for "+g.pathname+" not found. Not rendering React");window.___webpackCompilationHash=e.page.webpackCompilationHash;var t=Object(o.apiRunner)("wrapRootElement",{element:i.a.createElement(c,null)},i.a.createElement(c,null),(function(e){return{element:e.result}})).pop(),n=function(){return i.a.createElement(a,null,t)},r=Object(o.apiRunner)("replaceHydrateFunction",void 0,s.a.hydrate)[0];f()((function(){r(i.a.createElement(n,null),"undefined"!=typeof window?document.getElementById("___gatsby"):void 0,(function(){Object(o.apiRunner)("onInitialClientRender")}))}))}))}))},VbXa:function(e,t,n){var r=n("SksO");e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}},VpIT:function(e,t,n){var r=n("xDBR"),o=n("xs3f");(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.8.3",mode:r?"pure":"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})},Vu81:function(e,t,n){var r=n("0GbY"),o=n("JBy8"),a=n("dBg+"),i=n("glrk");e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(i(e)),n=a.f;return n?t.concat(n(e)):t}},Wbzz:function(e,t,n){"use strict";n.d(t,"c",(function(){return c})),n.d(t,"b",(function(){return u}));var r=n("q1tI"),o=n.n(r),a=n("+ZDr"),i=n.n(a);n.d(t,"a",(function(){return i.a})),n.d(t,"d",(function(){return a.withPrefix}));n("7hJ6"),n("lw3w"),n("emEt").default.enqueue;var c=o.a.createContext({});function s(e){var t=e.staticQueryData,n=e.data,r=e.query,a=e.render,i=n?n.data:t[r]&&t[r].data;return o.a.createElement(o.a.Fragment,null,i&&a(i),!i&&o.a.createElement("div",null,"Loading (StaticQuery)"))}var u=function(e){var t=e.data,n=e.query,r=e.render,a=e.children;return o.a.createElement(c.Consumer,null,(function(e){return o.a.createElement(s,{data:t,query:n,render:r||a,staticQueryData:e})}))}},Wwog:function(e,t,n){"use strict";function r(e,t){if(e.length!==t.length)return!1;for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function m(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function g(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var v=function(e,t){var n=s()(t);return n.displayName=e,n},y=v("Location"),b=function(e){var t=e.children;return o.a.createElement(y.Consumer,null,(function(e){return e?t(e):o.a.createElement(w,null,t)}))},w=function(e){function t(){var n,r;h(this,t);for(var o=arguments.length,a=Array(o),i=0;i-1?(a=t.substring(0,r),i=t.substring(r)):a=t,o.a.createElement(y.Provider,{value:{location:{pathname:a,search:i,hash:""},navigate:function(){throw new Error("You can't call navigate on the server.")}}},n)},E=v("Base",{baseuri:"/",basepath:"/"}),x=function(e){return o.a.createElement(E.Consumer,null,(function(t){return o.a.createElement(b,null,(function(n){return o.a.createElement(S,f({},t,n,e))}))}))},S=function(e){function t(){return h(this,t),m(this,e.apply(this,arguments))}return g(t,e),t.prototype.render=function(){var e=this.props,t=e.location,n=e.navigate,r=e.basepath,a=e.primary,i=e.children,c=(e.baseuri,e.component),s=void 0===c?"div":c,u=d(e,["location","navigate","basepath","primary","children","baseuri","component"]),p=o.a.Children.toArray(i).reduce((function(e,t){var n=z(r)(t);return e.concat(n)}),[]),h=t.pathname,m=Object(l.pick)(p,h);if(m){var g=m.params,v=m.uri,y=m.route,b=m.route.value;r=y.default?r:y.path.replace(/\*$/,"");var w=f({},g,{uri:v,location:t,navigate:function(e,t){return n(Object(l.resolve)(e,v),t)}}),O=o.a.cloneElement(b,w,b.props.children?o.a.createElement(x,{location:t,primary:a},b.props.children):void 0),S=a?C:s,T=a?f({uri:v,location:t,component:s},u):u;return o.a.createElement(E.Provider,{value:{baseuri:v,basepath:r}},o.a.createElement(S,T,O))}return null},t}(o.a.PureComponent);S.defaultProps={primary:!0};var T=v("Focus"),C=function(e){var t=e.uri,n=e.location,r=e.component,a=d(e,["uri","location","component"]);return o.a.createElement(T.Consumer,null,(function(e){return o.a.createElement(k,f({},a,{component:r,requestFocus:e,uri:t,location:n}))}))},j=!0,P=0,k=function(e){function t(){var n,r;h(this,t);for(var o=arguments.length,a=Array(o),i=0;i2&&void 0!==arguments[2]?arguments[2]:"sessionStorage";i(this,e),this.storage=p(r),this.id=t,this.config={},Object.assign(this.config,n),this._loadConfiguration()}return Object(c.a)(e,[{key:"getConfiguration",value:function(){return this.config}},{key:"setConfiguration",value:function(e){return this.config={},this.updateConfiguration(e)}},{key:"updateConfiguration",value:function(e){if(Object.assign(this.config,e),this.storage){var t=JSON.stringify(this.config);this.storage.setItem(this.id,t)}return this}},{key:"_loadConfiguration",value:function(){var e={};if(this.storage){var t=this.storage.getItem(this.id);e=t?JSON.parse(t):{}}return Object.assign(this.config,e),this}}]),e}();function d(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:8,n=Math.max(t-e.length,0);return"".concat(" ".repeat(n)).concat(e)}function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:8,n=Math.max(t-e.length,0);return"".concat(e).concat(" ".repeat(n))}function m(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:600,o=e.src.replace(/\(/g,"%28").replace(/\)/g,"%29");e.width>r&&(n=Math.min(n,r/e.width));var a=e.width*n,i=e.height*n,c=["font-size:1px;","padding:".concat(Math.floor(i/2),"px ").concat(Math.floor(a/2),"px;"),"line-height:".concat(i,"px;"),"background:url(".concat(o,");"),"background-size:".concat(a,"px ").concat(i,"px;"),"color:transparent;"].join("");return["".concat(t," %c+"),c]}var g={BLACK:30,RED:31,GREEN:32,YELLOW:33,BLUE:34,MAGENTA:35,CYAN:36,WHITE:37,BRIGHT_BLACK:90,BRIGHT_RED:91,BRIGHT_GREEN:92,BRIGHT_YELLOW:93,BRIGHT_BLUE:94,BRIGHT_MAGENTA:95,BRIGHT_CYAN:96,BRIGHT_WHITE:97};function v(e){return"string"==typeof e?g[e.toUpperCase()]||g.WHITE:e}function y(e,t,n){return l||"string"!=typeof e||(t&&(t=v(t),e="[".concat(t,"m").concat(e,"")),n&&(t=v(n),e="[".concat(n+10,"m").concat(e,""))),e}function b(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(!e)return;if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return w(e,t)}(e))){var t=0,n=function(){};return{s:n,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f: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.")}var r,o,a=!0,i=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){i=!0,o=e},f:function(){try{a||null==r.return||r.return()}finally{if(i)throw o}}}}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:["constructor"],r=Object.getPrototypeOf(e),o=Object.getOwnPropertyNames(r),a=b(o);try{var i=function(){var r=t.value;"function"==typeof e[r]&&(n.find((function(e){return r===e}))||(e[r]=e[r].bind(e)))};for(a.s();!(t=a.n()).done;)i()}catch(c){a.e(c)}finally{a.f()}}function E(e,t){if(!e)throw new Error(t||"Assertion failed")}var x=n("K9nA");function S(){var e;if(l&&x.f.performance)e=x.f.performance.now();else if(x.d.hrtime){var t=x.d.hrtime();e=1e3*t[0]+t[1]/1e6}else e=Date.now();return e}var T={debug:l&&console.debug||console.log,log:console.log,info:console.info,warn:console.warn,error:console.error},C={enabled:!0,level:0};function j(){}var P={},k={once:!0};function A(e){for(var t in e)for(var n in e[t])return n||"untitled";return"empty"}var _=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.id;i(this,e),this.id=n,this.VERSION=u,this._startTs=S(),this._deltaTs=S(),this.LOG_THROTTLE_TIMEOUT=0,this._storage=new f("__probe-".concat(this.id,"__"),C),this.userData={},this.timeStamp("".concat(this.id," started")),O(this),Object.seal(this)}return Object(c.a)(e,[{key:"isEnabled",value:function(){return this._storage.config.enabled}},{key:"getLevel",value:function(){return this._storage.config.level}},{key:"getTotal",value:function(){return Number((S()-this._startTs).toPrecision(10))}},{key:"getDelta",value:function(){return Number((S()-this._deltaTs).toPrecision(10))}},{key:"getPriority",value:function(){return this.level}},{key:"enable",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return this._storage.updateConfiguration({enabled:e}),this}},{key:"setLevel",value:function(e){return this._storage.updateConfiguration({level:e}),this}},{key:"assert",value:function(e,t){E(e,t)}},{key:"warn",value:function(e){return this._getLogFunction(0,e,T.warn,arguments,k)}},{key:"error",value:function(e){return this._getLogFunction(0,e,T.error,arguments)}},{key:"deprecated",value:function(e,t){return this.warn("`".concat(e,"` is deprecated and will be removed in a later version. Use `").concat(t,"` instead"))}},{key:"removed",value:function(e,t){return this.error("`".concat(e,"` has been removed. Use `").concat(t,"` instead"))}},{key:"probe",value:function(e,t){return this._getLogFunction(e,t,T.log,arguments,{time:!0,once:!0})}},{key:"log",value:function(e,t){return this._getLogFunction(e,t,T.debug,arguments)}},{key:"info",value:function(e,t){return this._getLogFunction(e,t,console.info,arguments)}},{key:"once",value:function(e,t){return this._getLogFunction(e,t,T.debug||T.info,arguments,k)}},{key:"table",value:function(e,t,n){return t?this._getLogFunction(e,t,console.table||j,n&&[n],{tag:A(t)}):j}},{key:"image",value:function(e){var t=e.logLevel,r=e.priority,a=e.image,i=e.message,c=void 0===i?"":i,s=e.scale,u=void 0===s?1:s;return this._shouldLog(t||r)?l?function(e){var t=e.image,n=e.message,r=void 0===n?"":n,a=e.scale,i=void 0===a?1:a;if("string"==typeof t){var c=new Image;return c.onload=function(){var e,t=m(c,r,i);(e=console).log.apply(e,Object(o.a)(t))},c.src=t,j}var s=t.nodeName||"";if("img"===s.toLowerCase()){var u;return(u=console).log.apply(u,Object(o.a)(m(t,r,i))),j}if("canvas"===s.toLowerCase()){var l=new Image;return l.onload=function(){var e;return(e=console).log.apply(e,Object(o.a)(m(l,r,i)))},l.src=t.toDataURL(),j}return j}({image:a,message:c,scale:u}):function(e){var t=e.image,r=(e.message,e.scale),o=void 0===r?1:r,a=null;try{a=n(0)}catch(i){}if(a)return function(){return a(t,{fit:"box",width:"".concat(Math.round(80*o),"%")}).then((function(e){return console.log(e)}))};return j}({image:a,message:c,scale:u}):j}},{key:"settings",value:function(){console.table?console.table(this._storage.config):console.log(this._storage.config)}},{key:"get",value:function(e){return this._storage.config[e]}},{key:"set",value:function(e,t){this._storage.updateConfiguration(Object(a.a)({},e,t))}},{key:"time",value:function(e,t){return this._getLogFunction(e,t,console.time?console.time:console.info)}},{key:"timeEnd",value:function(e,t){return this._getLogFunction(e,t,console.timeEnd?console.timeEnd:console.info)}},{key:"timeStamp",value:function(e,t){return this._getLogFunction(e,t,console.timeStamp||j)}},{key:"group",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{collapsed:!1},r=n=I({logLevel:e,message:t,opts:n}),o=r.collapsed;return n.method=(o?console.groupCollapsed:console.group)||console.info,this._getLogFunction(n)}},{key:"groupCollapsed",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return this.group(e,t,Object.assign({},n,{collapsed:!0}))}},{key:"groupEnd",value:function(e){return this._getLogFunction(e,"",console.groupEnd||j)}},{key:"withGroup",value:function(e,t,n){this.group(e,t)();try{n()}finally{this.groupEnd(e)()}}},{key:"trace",value:function(){console.trace&&console.trace()}},{key:"_shouldLog",value:function(e){return this.isEnabled()&&this.getLevel()>=R(e)}},{key:"_getLogFunction",value:function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],a=arguments.length>4?arguments[4]:void 0;if(this._shouldLog(e)){var i;a=I({logLevel:e,message:t,args:r,opts:a}),E(n=n||a.method),a.total=this.getTotal(),a.delta=this.getDelta(),this._deltaTs=S();var c=a.tag||a.message;if(a.once){if(P[c])return j;P[c]=S()}return t=L(this.id,a.message,a),(i=n).bind.apply(i,[console,t].concat(Object(o.a)(a.args)))}return j}},{key:"level",set:function(e){this.setLevel(e)},get:function(){return this.getLevel()}},{key:"priority",set:function(e){this.level=e},get:function(){return this.level}}]),e}();function R(e){if(!e)return 0;var t;switch(Object(r.a)(e)){case"number":t=e;break;case"object":t=e.logLevel||e.priority||0;break;default:return 0}return E(Number.isFinite(t)&&t>=0),t}function I(e){var t=e.logLevel,n=e.message;e.logLevel=R(t);for(var o=e.args?Array.from(e.args):[];o.length&&o.shift()!==n;);switch(e.args=o,Object(r.a)(t)){case"string":case"function":void 0!==n&&o.unshift(n),e.message=t;break;case"object":Object.assign(e,t)}"function"==typeof e.message&&(e.message=e.message());var a=Object(r.a)(e.message);return E("string"===a||"object"===a),Object.assign(e,e.opts)}function L(e,t,n){if("string"==typeof t){var r=n.time?d((o=n.total)<10?"".concat(o.toFixed(2),"ms"):o<100?"".concat(o.toFixed(1),"ms"):o<1e3?"".concat(o.toFixed(0),"ms"):"".concat((o/1e3).toFixed(2),"s")):"";t=y(t=n.time?"".concat(e,": ").concat(r," ").concat(t):"".concat(e,": ").concat(t),n.color,n.background)}var o;return t}_.VERSION=u;var M=n("I0ug");function D(){return void 0!==x.f.orientation}function N(e){if(!e&&!Object(s.a)())return"Node";if(Object(M.a)(e))return"Electron";var t="undefined"!=typeof navigator?navigator:{},n=e||t.userAgent||"";if(n.indexOf("Edge")>-1)return"Edge";var r=-1!==n.indexOf("MSIE "),o=-1!==n.indexOf("Trident/");return r||o?"IE":x.f.chrome?"Chrome":x.f.safari?"Safari":x.f.mozInnerScreenX?"Firefox":"Unknown"}var F=n("GawU"),U=function(){function e(t,n){i(this,e),this.name=t,this.type=n,this.sampleSize=1,this.reset()}return Object(c.a)(e,[{key:"setSampleSize",value:function(e){return this.sampleSize=e,this}},{key:"incrementCount",value:function(){return this.addCount(1),this}},{key:"decrementCount",value:function(){return this.subtractCount(1),this}},{key:"addCount",value:function(e){return this._count+=e,this._samples++,this._checkSampling(),this}},{key:"subtractCount",value:function(e){return this._count-=e,this._samples++,this._checkSampling(),this}},{key:"addTime",value:function(e){return this._time+=e,this.lastTiming=e,this._samples++,this._checkSampling(),this}},{key:"timeStart",value:function(){return this._startTime=Object(F.a)(),this._timerPending=!0,this}},{key:"timeEnd",value:function(){return this._timerPending?(this.addTime(Object(F.a)()-this._startTime),this._timerPending=!1,this._checkSampling(),this):this}},{key:"getSampleAverageCount",value:function(){return this.sampleSize>0?this.lastSampleCount/this.sampleSize:0}},{key:"getSampleAverageTime",value:function(){return this.sampleSize>0?this.lastSampleTime/this.sampleSize:0}},{key:"getSampleHz",value:function(){return this.lastSampleTime>0?this.sampleSize/(this.lastSampleTime/1e3):0}},{key:"getAverageCount",value:function(){return this.samples>0?this.count/this.samples:0}},{key:"getAverageTime",value:function(){return this.samples>0?this.time/this.samples:0}},{key:"getHz",value:function(){return this.time>0?this.samples/(this.time/1e3):0}},{key:"reset",value:function(){return this.time=0,this.count=0,this.samples=0,this.lastTiming=0,this.lastSampleTime=0,this.lastSampleCount=0,this._count=0,this._time=0,this._samples=0,this._startTime=0,this._timerPending=!1,this}},{key:"_checkSampling",value:function(){this._samples===this.sampleSize&&(this.lastSampleTime=this._time,this.lastSampleCount=this._count,this.count+=this._count,this.time+=this._time,this.samples+=this._samples,this._time=0,this._count=0,this._samples=0)}}]),e}(),H=function(){function e(t){var n=t.id,r=t.stats;i(this,e),this.id=n,this.stats={},this._initializeStats(r),Object.seal(this)}return Object(c.a)(e,[{key:"get",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"count";return this._getOrCreate({name:e,type:t})}},{key:"reset",value:function(){for(var e in this.stats)this.stats[e].reset();return this}},{key:"forEach",value:function(e){for(var t in this.stats)e(this.stats[t])}},{key:"getTable",value:function(){var e={};return this.forEach((function(t){e[t.name]={time:t.time||0,count:t.count||0,average:t.getAverageTime()||0,hz:t.getHz()||0}})),e}},{key:"_initializeStats",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];t.forEach((function(t){return e._getOrCreate(t)}))}},{key:"_getOrCreate",value:function(e){if(!e||!e.name)return null;var t=e.name,n=e.type;return this.stats[t]||(this.stats[t]=e instanceof U?e:new U(t,n)),this.stats[t]}},{key:"size",get:function(){return Object.keys(this.stats).length}}]),e}();t.default=new _({id:"probe.gl"})},aJjT:function(e,t,n){e.exports=function e(t){"use strict";var n=/^\0+/g,r=/[\0\r\f]/g,o=/: */g,a=/zoo|gra/,i=/([,: ])(transform)/g,c=/,+\s*(?![^(]*[)])/g,s=/ +\s*(?![^(]*[)])/g,u=/ *[\0] */g,l=/,\r+?/g,p=/([\t\r\n ])*\f?&/g,f=/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,d=/\W+/g,h=/@(k\w+)\s*(\S*)\s*/,m=/::(place)/g,g=/:(read-only)/g,v=/\s+(?=[{\];=:>])/g,y=/([[}=:>])\s+/g,b=/(\{[^{]+?);(?=\})/g,w=/\s{2,}/g,O=/([^\(])(:+) */g,E=/[svh]\w+-[tblr]{2}/,x=/\(\s*(.*)\s*\)/g,S=/([\s\S]*?);/g,T=/-self|flex-/g,C=/[^]*?(:[rp][el]a[\w-]+)[^]*/,j=/stretch|:\s*\w+\-(?:conte|avail)/,P=/([^-])(image-set\()/,k="-webkit-",A="-moz-",_="-ms-",R=59,I=125,L=123,M=40,D=41,N=10,F=13,U=32,H=45,B=42,G=44,q=58,z=47,$=1,W=1,Y=0,J=1,V=1,K=1,X=0,Q=0,Z=0,ee=[],te=[],ne=0,re=null,oe=0,ae=1,ie="",ce="",se="";function ue(e,t,o,a,i){for(var c,s,l=0,p=0,f=0,d=0,v=0,y=0,b=0,w=0,E=0,S=0,T=0,C=0,j=0,P=0,A=0,_=0,X=0,te=0,re=0,pe=o.length,ve=pe-1,ye="",be="",we="",Oe="",Ee="",xe="";A0&&(be=be.replace(r,"")),be.trim().length>0)){switch(b){case U:case 9:case R:case F:case N:break;default:be+=o.charAt(A)}b=R}if(1===X)switch(b){case L:case I:case R:case 34:case 39:case M:case D:case G:X=0;case 9:case F:case N:case U:break;default:for(X=0,re=A,v=b,A--,b=R;re0&&(++A,b=v);case L:re=pe}}switch(b){case L:for(v=(be=be.trim()).charCodeAt(0),T=1,re=++A;A0&&(be=be.replace(r,"")),y=be.charCodeAt(1)){case 100:case 109:case 115:case H:c=t;break;default:c=ee}if(re=(we=ue(t,c,we,y,i+1)).length,Z>0&&0===re&&(re=be.length),ne>0&&(s=me(3,we,c=le(ee,be,te),t,W,$,re,y,i,a),be=c.join(""),void 0!==s&&0===(re=(we=s.trim()).length)&&(y=0,we="")),re>0)switch(y){case 115:be=be.replace(x,he);case 100:case 109:case H:we=be+"{"+we+"}";break;case 107:we=(be=be.replace(h,"$1 $2"+(ae>0?ie:"")))+"{"+we+"}",we=1===V||2===V&&de("@"+we,3)?"@"+k+we+"@"+we:"@"+we;break;default:we=be+we,112===a&&(Oe+=we,we="")}else we="";break;default:we=ue(t,le(t,be,te),we,a,i+1)}Ee+=we,C=0,X=0,P=0,_=0,te=0,j=0,be="",we="",b=o.charCodeAt(++A);break;case I:case R:if((re=(be=(_>0?be.replace(r,""):be).trim()).length)>1)switch(0===P&&((v=be.charCodeAt(0))===H||v>96&&v<123)&&(re=(be=be.replace(" ",":")).length),ne>0&&void 0!==(s=me(1,be,t,e,W,$,Oe.length,a,i,a))&&0===(re=(be=s.trim()).length)&&(be="\0\0"),v=be.charCodeAt(0),y=be.charCodeAt(1),v){case 0:break;case 64:if(105===y||99===y){xe+=be+o.charAt(A);break}default:if(be.charCodeAt(re-1)===q)break;Oe+=fe(be,v,y,be.charCodeAt(2))}C=0,X=0,P=0,_=0,te=0,be="",b=o.charCodeAt(++A)}}switch(b){case F:case N:if(p+d+f+l+Q===0)switch(S){case D:case 39:case 34:case 64:case 126:case 62:case B:case 43:case z:case H:case q:case G:case R:case L:case I:break;default:P>0&&(X=1)}p===z?p=0:J+C===0&&107!==a&&be.length>0&&(_=1,be+="\0"),ne*oe>0&&me(0,be,t,e,W,$,Oe.length,a,i,a),$=1,W++;break;case R:case I:if(p+d+f+l===0){$++;break}default:switch($++,ye=o.charAt(A),b){case 9:case U:if(d+l+p===0)switch(w){case G:case q:case 9:case U:ye="";break;default:b!==U&&(ye=" ")}break;case 0:ye="\\0";break;case 12:ye="\\f";break;case 11:ye="\\v";break;case 38:d+p+l===0&&J>0&&(te=1,_=1,ye="\f"+ye);break;case 108:if(d+p+l+Y===0&&P>0)switch(A-P){case 2:112===w&&o.charCodeAt(A-3)===q&&(Y=w);case 8:111===E&&(Y=E)}break;case q:d+p+l===0&&(P=A);break;case G:p+f+d+l===0&&(_=1,ye+="\r");break;case 34:case 39:0===p&&(d=d===b?0:0===d?b:d);break;case 91:d+p+f===0&&l++;break;case 93:d+p+f===0&&l--;break;case D:d+p+l===0&&f--;break;case M:if(d+p+l===0){if(0===C)switch(2*w+3*E){case 533:break;default:T=0,C=1}f++}break;case 64:p+f+d+l+P+j===0&&(j=1);break;case B:case z:if(d+l+f>0)break;switch(p){case 0:switch(2*b+3*o.charCodeAt(A+1)){case 235:p=z;break;case 220:re=A,p=B}break;case B:b===z&&w===B&&re+2!==A&&(33===o.charCodeAt(re+2)&&(Oe+=o.substring(re,A+1)),ye="",p=0)}}if(0===p){if(J+d+l+j===0&&107!==a&&b!==R)switch(b){case G:case 126:case 62:case 43:case D:case M:if(0===C){switch(w){case 9:case U:case N:case F:ye+="\0";break;default:ye="\0"+ye+(b===G?"":"\0")}_=1}else switch(b){case M:P+7===A&&108===w&&(P=0),C=++T;break;case D:0==(C=--T)&&(_=1,ye+="\0")}break;case 9:case U:switch(w){case 0:case L:case I:case R:case G:case 12:case 9:case U:case N:case F:break;default:0===C&&(_=1,ye+="\0")}}be+=ye,b!==U&&9!==b&&(S=b)}}E=w,w=b,A++}if(re=Oe.length,Z>0&&0===re&&0===Ee.length&&0===t[0].length==0&&(109!==a||1===t.length&&(J>0?ce:se)===t[0])&&(re=t.join(",").length+2),re>0){if(c=0===J&&107!==a?function(e){for(var t,n,o=0,a=e.length,i=Array(a);o1)){if(f=s.charCodeAt(s.length-1),d=n.charCodeAt(0),t="",0!==l)switch(f){case B:case 126:case 62:case 43:case U:case M:break;default:t=" "}switch(d){case 38:n=t+ce;case 126:case 62:case 43:case U:case D:case M:break;case 91:n=t+n+ce;break;case q:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(K>0){n=t+n.substring(8,p-1);break}default:(l<1||c[l-1].length<1)&&(n=t+ce+n)}break;case G:t="";default:n=p>1&&n.indexOf(":")>0?t+n.replace(O,"$1"+ce+"$2"):t+n+ce}s+=n}i[o]=s.replace(r,"").trim()}return i}(t):t,ne>0&&void 0!==(s=me(2,Oe,c,e,W,$,re,a,i,a))&&0===(Oe=s).length)return xe+Oe+Ee;if(Oe=c.join(",")+"{"+Oe+"}",V*Y!=0){switch(2!==V||de(Oe,2)||(Y=0),Y){case 111:Oe=Oe.replace(g,":-moz-$1")+Oe;break;case 112:Oe=Oe.replace(m,"::"+k+"input-$1")+Oe.replace(m,"::-moz-$1")+Oe.replace(m,":-ms-input-$1")+Oe}Y=0}}return xe+Oe+Ee}function le(e,t,n){var r=t.trim().split(l),o=r,a=r.length,i=e.length;switch(i){case 0:case 1:for(var c=0,s=0===i?"":e[0]+" ";c0&&J>0)return o.replace(f,"$1").replace(p,"$1"+se);break;default:return e.trim()+o.replace(p,"$1"+e.trim())}default:if(n*J>0&&o.indexOf("\f")>0)return o.replace(p,(e.charCodeAt(0)===q?"":"$1")+e.trim())}return e+o}function fe(e,t,n,r){var u,l=0,p=e+";",f=2*t+3*n+4*r;if(944===f)return function(e){var t=e.length,n=e.indexOf(":",9)+1,r=e.substring(0,n).trim(),o=e.substring(n,t-1).trim();switch(e.charCodeAt(9)*ae){case 0:break;case H:if(110!==e.charCodeAt(10))break;default:var a=o.split((o="",c)),i=0;for(n=0,t=a.length;i64&&p<90||p>96&&p<123||95===p||p===H&&u.charCodeAt(1)!==H))switch(isNaN(parseFloat(u))+(-1!==u.indexOf("("))){case 1:switch(u){case"infinite":case"alternate":case"backwards":case"running":case"normal":case"forwards":case"both":case"none":case"linear":case"ease":case"ease-in":case"ease-out":case"ease-in-out":case"paused":case"reverse":case"alternate-reverse":case"inherit":case"initial":case"unset":case"step-start":case"step-end":break;default:u+=ie}}l[n++]=u}o+=(0===i?"":",")+l.join(" ")}}return o=r+o+";",1===V||2===V&&de(o,1)?k+o+o:o}(p);if(0===V||2===V&&!de(p,1))return p;switch(f){case 1015:return 97===p.charCodeAt(10)?k+p+p:p;case 951:return 116===p.charCodeAt(3)?k+p+p:p;case 963:return 110===p.charCodeAt(5)?k+p+p:p;case 1009:if(100!==p.charCodeAt(4))break;case 969:case 942:return k+p+p;case 978:return k+p+A+p+p;case 1019:case 983:return k+p+A+p+_+p+p;case 883:return p.charCodeAt(8)===H?k+p+p:p.indexOf("image-set(",11)>0?p.replace(P,"$1"+k+"$2")+p:p;case 932:if(p.charCodeAt(4)===H)switch(p.charCodeAt(5)){case 103:return k+"box-"+p.replace("-grow","")+k+p+_+p.replace("grow","positive")+p;case 115:return k+p+_+p.replace("shrink","negative")+p;case 98:return k+p+_+p.replace("basis","preferred-size")+p}return k+p+_+p+p;case 964:return k+p+_+"flex-"+p+p;case 1023:if(99!==p.charCodeAt(8))break;return u=p.substring(p.indexOf(":",15)).replace("flex-","").replace("space-between","justify"),k+"box-pack"+u+k+p+_+"flex-pack"+u+p;case 1005:return a.test(p)?p.replace(o,":"+k)+p.replace(o,":"+A)+p:p;case 1e3:switch(l=(u=p.substring(13).trim()).indexOf("-")+1,u.charCodeAt(0)+u.charCodeAt(l)){case 226:u=p.replace(E,"tb");break;case 232:u=p.replace(E,"tb-rl");break;case 220:u=p.replace(E,"lr");break;default:return p}return k+p+_+u+p;case 1017:if(-1===p.indexOf("sticky",9))return p;case 975:switch(l=(p=e).length-10,f=(u=(33===p.charCodeAt(l)?p.substring(0,l):p).substring(e.indexOf(":",7)+1).trim()).charCodeAt(0)+(0|u.charCodeAt(7))){case 203:if(u.charCodeAt(8)<111)break;case 115:p=p.replace(u,k+u)+";"+p;break;case 207:case 102:p=p.replace(u,k+(f>102?"inline-":"")+"box")+";"+p.replace(u,k+u)+";"+p.replace(u,_+u+"box")+";"+p}return p+";";case 938:if(p.charCodeAt(5)===H)switch(p.charCodeAt(6)){case 105:return u=p.replace("-items",""),k+p+k+"box-"+u+_+"flex-"+u+p;case 115:return k+p+_+"flex-item-"+p.replace(T,"")+p;default:return k+p+_+"flex-line-pack"+p.replace("align-content","").replace(T,"")+p}break;case 973:case 989:if(p.charCodeAt(3)!==H||122===p.charCodeAt(4))break;case 931:case 953:if(!0===j.test(e))return 115===(u=e.substring(e.indexOf(":")+1)).charCodeAt(0)?fe(e.replace("stretch","fill-available"),t,n,r).replace(":fill-available",":stretch"):p.replace(u,k+u)+p.replace(u,A+u.replace("fill-",""))+p;break;case 962:if(p=k+p+(102===p.charCodeAt(5)?_+p:"")+p,n+r===211&&105===p.charCodeAt(13)&&p.indexOf("transform",10)>0)return p.substring(0,p.indexOf(";",27)+1).replace(i,"$1"+k+"$2")+p}return p}function de(e,t){var n=e.indexOf(1===t?":":"{"),r=e.substring(0,3!==t?n:10),o=e.substring(n+1,e.length-1);return re(2!==t?r:r.replace(C,"$1"),o,t)}function he(e,t){var n=fe(t,t.charCodeAt(0),t.charCodeAt(1),t.charCodeAt(2));return n!==t+";"?n.replace(S," or ($1)").substring(4):"("+t+")"}function me(e,t,n,r,o,a,i,c,s,u){for(var l,p=0,f=t;p0&&(ie=o.replace(d,91===a?"":"-")),a=1,1===J?se=o:ce=o;var i,c=[se];ne>0&&void 0!==(i=me(-1,n,c,c,W,$,0,0,0,0))&&"string"==typeof i&&(n=i);var s=ue(ee,c,n,0,0);return ne>0&&void 0!==(i=me(-2,s,c,c,W,$,s.length,0,0,0))&&"string"!=typeof(s=i)&&(a=0),ie="",se="",ce="",Y=0,W=1,$=1,X*a==0?s:s.replace(r,"").replace(v,"").replace(y,"$1").replace(b,"$1").replace(w," ")}return ye.use=function e(t){switch(t){case void 0:case null:ne=te.length=0;break;default:if("function"==typeof t)te[ne++]=t;else if("object"==typeof t)for(var n=0,r=t.length;n0,id:f,name:d,toggleEntry:c}),s.a.createElement(l.f,{$height:h&&h.height},u.map((function(t,n){return e({depth:a+1,id:f,index:n,route:t,tocState:i,toggleEntry:c})}))))}var m=n.childMdx,g=m&&m.frontmatter&&m.frontmatter.title||n.title,v=m&&m.fields&&m.fields.slug||n.path;return s.a.createElement("div",{key:o},s.a.createElement("li",null,s.a.createElement(p,{active:i[f]&&!0===i[f].isSelected,depth:a,name:g,path:v})))}({route:e,index:t,depth:0,tocState:n,toggleEntry:r,id:[]})})))};function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t0?r:n)(e)}},q9nr:function(e,t,n){"use strict";var r=n("nwwn"),o=r.DEFAULT_OPTIONS,a=r.imageClass,i=r.imageBackgroundClass,c=r.imageWrapperClass;t.onRouteUpdate=function(e,t){for(var n=Object.assign({},o,t),r=document.querySelectorAll("."+c),s=function(e){var t=r[e],o=t.querySelector("."+i),c=t.querySelector("."+a),s=function(){o.style.transition="opacity 0.5s 0.5s",c.style.transition="opacity 0.5s",u()},u=function e(){o.style.opacity=0,c.style.opacity=1,c.style.color="inherit",c.style.boxShadow="inset 0px 0px 0px 400px "+n.backgroundColor,c.removeEventListener("load",s),c.removeEventListener("error",e)};c.style.opacity=0,c.addEventListener("load",s),c.addEventListener("error",u),c.complete&&u()},u=0;u1?t-1:0),r=1;r2?n-2:0),o=2;o1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),r)},oneOfType:function(e){if(!Array.isArray(e))return o("Invalid argument supplied to oneOfType, expected an instance of array."),r;for(var t=0;t=c;case"max":return s<=c;default:return s===c}}));return c&&!n||!c&&n}))},t.parse=r;var c=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,u=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";var r=n(3),o=n(4),a=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(o.a.all).forEach((function(n){var o=e[n];null!=o&&t.push(function(e,t){var n=Object(r.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?a(e):"(".concat(n,": ").concat(t,")")}(n,o))})),t.join(" and ")}}]))},v1p5:function(e,t,n){(function(e){n("E9XD"),t.__esModule=!0,t.warn=t.requestAnimationFrame=t.reducePropsToState=t.mapStateOnServer=t.handleClientStateChange=t.convertReactPropstoHtmlAttributes=void 0;var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1])||arguments[1];return!1===t?String(e):String(e).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},p=function(e){var t=g(e,c.TAG_NAMES.TITLE),n=g(e,c.HELMET_PROPS.TITLE_TEMPLATE);if(n&&t)return n.replace(/%s/g,(function(){return t}));var r=g(e,c.HELMET_PROPS.DEFAULT_TITLE);return t||r||void 0},f=function(e){return g(e,c.HELMET_PROPS.ON_CHANGE_CLIENT_STATE)||function(){}},d=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return o({},e,t)}),{})},h=function(e,t){return t.filter((function(e){return void 0!==e[c.TAG_NAMES.BASE]})).map((function(e){return e[c.TAG_NAMES.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=e[n];if(r.hasOwnProperty(t))return r[t]}return null},v=(u=Date.now(),function(e){var t=Date.now();t-u>16?(u=t,e(t)):setTimeout((function(){v(e)}),0)}),y=function(e){return clearTimeout(e)},b="undefined"!=typeof window?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||v:e.requestAnimationFrame||v,w="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||y:e.cancelAnimationFrame||y,O=function(e){return console&&"function"==typeof console.warn&&console.warn(e)},E=null,x=function(e,t){var n=e.baseTag,r=e.bodyAttributes,o=e.htmlAttributes,a=e.linkTags,i=e.metaTags,s=e.noscriptTags,u=e.onChangeClientState,l=e.scriptTags,p=e.styleTags,f=e.title,d=e.titleAttributes;C(c.TAG_NAMES.BODY,r),C(c.TAG_NAMES.HTML,o),T(f,d);var h={baseTag:j(c.TAG_NAMES.BASE,n),linkTags:j(c.TAG_NAMES.LINK,a),metaTags:j(c.TAG_NAMES.META,i),noscriptTags:j(c.TAG_NAMES.NOSCRIPT,s),scriptTags:j(c.TAG_NAMES.SCRIPT,l),styleTags:j(c.TAG_NAMES.STYLE,p)},m={},g={};Object.keys(h).forEach((function(e){var t=h[e],n=t.newTags,r=t.oldTags;n.length&&(m[e]=n),r.length&&(g[e]=h[e].oldTags)})),t&&t(),u(e,m,g)},S=function(e){return Array.isArray(e)?e.join(""):e},T=function(e,t){void 0!==e&&document.title!==e&&(document.title=S(e)),C(c.TAG_NAMES.TITLE,t)},C=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute(c.HELMET_ATTRIBUTE),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(t),s=0;s=0;f--)n.removeAttribute(a[f]);o.length===a.length?n.removeAttribute(c.HELMET_ATTRIBUTE):n.getAttribute(c.HELMET_ATTRIBUTE)!==i.join(",")&&n.setAttribute(c.HELMET_ATTRIBUTE,i.join(","))}},j=function(e,t){var n=document.head||document.querySelector(c.TAG_NAMES.HEAD),r=n.querySelectorAll(e+"["+c.HELMET_ATTRIBUTE+"]"),o=Array.prototype.slice.call(r),a=[],i=void 0;return t&&t.length&&t.forEach((function(t){var n=document.createElement(e);for(var r in t)if(t.hasOwnProperty(r))if(r===c.TAG_PROPERTIES.INNER_HTML)n.innerHTML=t.innerHTML;else if(r===c.TAG_PROPERTIES.CSS_TEXT)n.styleSheet?n.styleSheet.cssText=t.cssText:n.appendChild(document.createTextNode(t.cssText));else{var s=void 0===t[r]?"":t[r];n.setAttribute(r,s)}n.setAttribute(c.HELMET_ATTRIBUTE,"true"),o.some((function(e,t){return i=t,n.isEqualNode(e)}))?o.splice(i,1):a.push(n)})),o.forEach((function(e){return e.parentNode.removeChild(e)})),a.forEach((function(e){return n.appendChild(e)})),{oldTags:o,newTags:a}},P=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},k=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[c.REACT_TAG_MAP[n]||n]=e[n],t}),t)},A=function(e,t,n){switch(e){case c.TAG_NAMES.TITLE:return{toComponent:function(){return e=t.title,n=t.titleAttributes,(r={key:e})[c.HELMET_ATTRIBUTE]=!0,o=k(n,r),[a.default.createElement(c.TAG_NAMES.TITLE,o,e)];var e,n,r,o},toString:function(){return function(e,t,n,r){var o=P(n),a=S(t);return o?"<"+e+" "+c.HELMET_ATTRIBUTE+'="true" '+o+">"+l(a,r)+"":"<"+e+" "+c.HELMET_ATTRIBUTE+'="true">'+l(a,r)+""}(e,t.title,t.titleAttributes,n)}};case c.ATTRIBUTE_NAMES.BODY:case c.ATTRIBUTE_NAMES.HTML:return{toComponent:function(){return k(t)},toString:function(){return P(t)}};default:return{toComponent:function(){return function(e,t){return t.map((function(t,n){var r,o=((r={key:n})[c.HELMET_ATTRIBUTE]=!0,r);return Object.keys(t).forEach((function(e){var n=c.REACT_TAG_MAP[e]||e;if(n===c.TAG_PROPERTIES.INNER_HTML||n===c.TAG_PROPERTIES.CSS_TEXT){var r=t.innerHTML||t.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=t[e]})),a.default.createElement(e,o)}))}(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var o=Object.keys(r).filter((function(e){return!(e===c.TAG_PROPERTIES.INNER_HTML||e===c.TAG_PROPERTIES.CSS_TEXT)})).reduce((function(e,t){var o=void 0===r[t]?t:t+'="'+l(r[t],n)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===c.SELF_CLOSING_TAGS.indexOf(e);return t+"<"+e+" "+c.HELMET_ATTRIBUTE+'="true" '+o+(i?"/>":">"+a+"")}),"")}(e,t,n)}}}};t.convertReactPropstoHtmlAttributes=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[c.HTML_TAG_MAP[n]||n]=e[n],t}),t)},t.handleClientStateChange=function(e){E&&w(E),e.defer?E=b((function(){x(e,(function(){E=null}))})):(x(e),E=null)},t.mapStateOnServer=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.linkTags,i=e.metaTags,s=e.noscriptTags,u=e.scriptTags,l=e.styleTags,p=e.title,f=void 0===p?"":p,d=e.titleAttributes;return{base:A(c.TAG_NAMES.BASE,t,r),bodyAttributes:A(c.ATTRIBUTE_NAMES.BODY,n,r),htmlAttributes:A(c.ATTRIBUTE_NAMES.HTML,o,r),link:A(c.TAG_NAMES.LINK,a,r),meta:A(c.TAG_NAMES.META,i,r),noscript:A(c.TAG_NAMES.NOSCRIPT,s,r),script:A(c.TAG_NAMES.SCRIPT,u,r),style:A(c.TAG_NAMES.STYLE,l,r),title:A(c.TAG_NAMES.TITLE,{title:f,titleAttributes:d},r)}},t.reducePropsToState=function(e){return{baseTag:h([c.TAG_PROPERTIES.HREF],e),bodyAttributes:d(c.ATTRIBUTE_NAMES.BODY,e),defer:g(e,c.HELMET_PROPS.DEFER),encode:g(e,c.HELMET_PROPS.ENCODE_SPECIAL_CHARACTERS),htmlAttributes:d(c.ATTRIBUTE_NAMES.HTML,e),linkTags:m(c.TAG_NAMES.LINK,[c.TAG_PROPERTIES.REL,c.TAG_PROPERTIES.HREF],e),metaTags:m(c.TAG_NAMES.META,[c.TAG_PROPERTIES.NAME,c.TAG_PROPERTIES.CHARSET,c.TAG_PROPERTIES.HTTPEQUIV,c.TAG_PROPERTIES.PROPERTY,c.TAG_PROPERTIES.ITEM_PROP],e),noscriptTags:m(c.TAG_NAMES.NOSCRIPT,[c.TAG_PROPERTIES.INNER_HTML],e),onChangeClientState:f(e),scriptTags:m(c.TAG_NAMES.SCRIPT,[c.TAG_PROPERTIES.SRC,c.TAG_PROPERTIES.INNER_HTML],e),styleTags:m(c.TAG_NAMES.STYLE,[c.TAG_PROPERTIES.CSS_TEXT],e),title:p(e),titleAttributes:d(c.ATTRIBUTE_NAMES.TITLE,e)}},t.requestAnimationFrame=b,t.warn=O}).call(this,n("yLpj"))},vOJQ:function(e,t,n){var r=n("lSNA");function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t1?r-1:0),a=1;a0?" Additional arguments: "+o.join(", "):"")));return w(i)}return b(t,e),t}(Error),R=/^[^\S\n]*?\/\* sc-component-id:\s*(\S+)\s+\*\//gm,I=function(e){var t=""+(e||""),n=[];return t.replace(R,(function(e,t,r){return n.push({componentId:t,matchIndex:r}),e})),n.map((function(e,r){var o=e.componentId,a=e.matchIndex,i=n[r+1];return{componentId:o,cssFromDOM:i?t.slice(a,i.matchIndex):t.slice(a)}}))},L=/^\s*\/\/.*$/gm,M=new o.a({global:!1,cascade:!0,keyframe:!1,prefix:!1,compress:!1,semicolon:!0}),D=new o.a({global:!1,cascade:!0,keyframe:!1,prefix:!0,compress:!1,semicolon:!1}),N=[],F=function(e){if(-2===e){var t=N;return N=[],t}},U=i()((function(e){N.push(e)})),H=void 0,B=void 0,G=void 0,q=function(e,t,n){return t>0&&-1!==n.slice(0,t).indexOf(B)&&n.slice(t-B.length,t)!==B?"."+H:e};D.use([function(e,t,n){2===e&&n.length&&n[0].lastIndexOf(B)>0&&(n[0]=n[0].replace(G,q))},U,F]),M.use([U,F]);var z=function(e){return M("",e)};function $(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"&",o=e.join("").replace(L,""),a=t&&n?n+" "+t+" { "+o+" }":o;return H=r,B=t,G=new RegExp("\\"+B+"\\b","g"),D(n||!t?"":t,a)}var W=function(){return n.nc},Y=function(e,t,n){n&&((e[t]||(e[t]=Object.create(null)))[n]=!0)},J=function(e,t){e[t]=Object.create(null)},V=function(e){return function(t,n){return void 0!==e[t]&&e[t][n]}},K=function(e){var t="";for(var n in e)t+=Object.keys(e[n]).join(" ")+" ";return t.trim()},X=function(e){if(e.sheet)return e.sheet;for(var t=e.ownerDocument.styleSheets.length,n=0;n"+e()+""}},ne=function(e,t){return function(){var n,r=((n={})[j]=K(t),n["data-styled-version"]="4.4.1",n),o=W();return o&&(r.nonce=o),s.a.createElement("style",y({},r,{dangerouslySetInnerHTML:{__html:e()}}))}},re=function(e){return function(){return Object.keys(e)}},oe=function(e,t){return e.createTextNode(Z(t))},ae=function e(t,n){var r=void 0===t?Object.create(null):t,o=void 0===n?Object.create(null):n,a=function(e){var t=o[e];return void 0!==t?t:o[e]=[""]},i=function(){var e="";for(var t in o){var n=o[t][0];n&&(e+=Z(t)+n)}return e};return{clone:function(){var t=function(e){var t=Object.create(null);for(var n in e)t[n]=y({},e[n]);return t}(r),n=Object.create(null);for(var a in o)n[a]=[o[a][0]];return e(t,n)},css:i,getIds:re(o),hasNameForId:V(r),insertMarker:a,insertRules:function(e,t,n){a(e)[0]+=t.join(" "),Y(r,e,n)},removeRules:function(e){var t=o[e];void 0!==t&&(t[0]="",J(r,e))},sealed:!1,styleTag:null,toElement:ne(i,r),toHTML:te(i,r)}},ie=function(e,t,n,r,o){if(P&&!n){var a=function(e,t,n){var r=document;e?r=e.ownerDocument:t&&(r=t.ownerDocument);var o=r.createElement("style");o.setAttribute(j,""),o.setAttribute("data-styled-version","4.4.1");var a=W();if(a&&o.setAttribute("nonce",a),o.appendChild(r.createTextNode("")),e&&!t)e.appendChild(o);else{if(!t||!e||!t.parentNode)throw new _(6);t.parentNode.insertBefore(o,n?t:t.nextSibling)}return o}(e,t,r);return k?function(e,t){var n=Object.create(null),r=Object.create(null),o=void 0!==t,a=!1,i=function(t){var o=r[t];return void 0!==o?o:(r[t]=oe(e.ownerDocument,t),e.appendChild(r[t]),n[t]=Object.create(null),r[t])},c=function(){var e="";for(var t in r)e+=r[t].data;return e};return{clone:function(){throw new _(5)},css:c,getIds:re(r),hasNameForId:V(n),insertMarker:i,insertRules:function(e,r,c){for(var s=i(e),u=[],l=r.length,p=0;p0&&(a=!0,t().insertRules(e+"-import",u))},removeRules:function(i){var c=r[i];if(void 0!==c){var s=oe(e.ownerDocument,i);e.replaceChild(s,c),r[i]=s,J(n,i),o&&a&&t().removeRules(i+"-import")}},sealed:!1,styleTag:e,toElement:ne(c,n),toHTML:te(c,n)}}(a,o):function(e,t){var n=Object.create(null),r=Object.create(null),o=[],a=void 0!==t,i=!1,c=function(e){var t=r[e];return void 0!==t?t:(r[e]=o.length,o.push(0),J(n,e),r[e])},s=function(){var t=X(e).cssRules,n="";for(var a in r){n+=Z(a);for(var i=r[a],c=ee(o,i),s=c-o[i];s0&&(i=!0,t().insertRules(r+"-import",h)),o[l]+=d,Y(n,r,u)},removeRules:function(c){var s=r[c];if(void 0!==s&&!1!==e.isConnected){var u=o[s];!function(e,t,n){for(var r=t-n,o=t;o>r;o-=1)e.deleteRule(o)}(X(e),ee(o,s)-1,u),o[s]=0,J(n,c),a&&i&&t().removeRules(c+"-import")}},sealed:!1,styleTag:e,toElement:ne(s,n),toHTML:te(s,n)}}(a,o)}return ae()},ce=/\s+/,se=void 0;se=P?k?40:1e3:-1;var ue=0,le=void 0,pe=function(){function e(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P?document.head:null,r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];g(this,e),this.getImportRuleTag=function(){var e=t.importRuleTag;if(void 0!==e)return e;var n=t.tags[0];return t.importRuleTag=ie(t.target,n?n.styleTag:null,t.forceServer,!0)},ue+=1,this.id=ue,this.forceServer=r,this.target=r?null:n,this.tagMap={},this.deferred={},this.rehydratedNames={},this.ignoreRehydratedNames={},this.tags=[],this.capacity=1,this.clones=[]}return e.prototype.rehydrate=function(){if(!P||this.forceServer)return this;var e=[],t=[],n=!1,r=document.querySelectorAll("style["+j+'][data-styled-version="4.4.1"]'),o=r.length;if(!o)return this;for(var a=0;a0&&void 0!==arguments[0]&&arguments[0];le=new e(void 0,t).rehydrate()},e.prototype.clone=function(){var t=new e(this.target,this.forceServer);return this.clones.push(t),t.tags=this.tags.map((function(e){for(var n=e.getIds(),r=e.clone(),o=0;o1?t-1:0),r=1;r=4;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),r=1540483477*(65535&r)+((1540483477*(r>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),n-=4,++o;switch(n){case 3:r^=(255&e.charCodeAt(o+2))<<16;case 2:r^=(255&e.charCodeAt(o+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(o)))+((1540483477*(r>>>16)&65535)<<16)}return((r=1540483477*(65535&(r^=r>>>13))+((1540483477*(r>>>16)&65535)<<16))^r>>>15)>>>0}var Oe=function(e){return String.fromCharCode(e+(e>25?39:97))};function Ee(e){var t="",n=void 0;for(n=e;n>52;n=Math.floor(n/52))t=Oe(n%52)+t;return Oe(n%52)+t}function xe(e,t){for(var n=0;n2&&void 0!==arguments[2]?arguments[2]:x,r=!!n&&e.theme===n.theme,o=e.theme&&!r?e.theme:t||n.theme;return o},Pe=/[[\].#*$><+~=|^:(),"'`-]+/g,ke=/(^-|-$)/g;function Ae(e){return e.replace(Pe,"-").replace(ke,"")}function _e(e){return"string"==typeof e&&!0}var Re={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDerivedStateFromProps:!0,propTypes:!0,type:!0},Ie={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},Le=((Se={})[l.ForwardRef]={$$typeof:!0,render:!0},Se),Me=Object.defineProperty,De=Object.getOwnPropertyNames,Ne=Object.getOwnPropertySymbols,Fe=void 0===Ne?function(){return[]}:Ne,Ue=Object.getOwnPropertyDescriptor,He=Object.getPrototypeOf,Be=Object.prototype,Ge=Array.prototype;function qe(e,t,n){if("string"!=typeof t){var r=He(t);r&&r!==Be&&qe(e,r,n);for(var o=Ge.concat(De(t),Fe(t)),a=Le[e.$$typeof]||Re,i=Le[t.$$typeof]||Re,c=o.length,s=void 0,u=void 0;c--;)if(u=o[c],!(Ie[u]||n&&n[u]||i&&i[u]||a&&a[u])&&(s=Ue(t,u)))try{Me(e,u,s)}catch(l){}return e}return e}var ze=Object(c.createContext)(),$e=ze.Consumer,We=function(e){function t(n){g(this,t);var r=w(this,e.call(this,n));return r.getContext=Object(p.a)(r.getContext.bind(r)),r.renderInner=r.renderInner.bind(r),r}return b(t,e),t.prototype.render=function(){return this.props.children?s.a.createElement(ze.Consumer,null,this.renderInner):null},t.prototype.renderInner=function(e){var t=this.getContext(this.props.theme,e);return s.a.createElement(ze.Provider,{value:t},this.props.children)},t.prototype.getTheme=function(e,t){if(S(e))return e(t);if(null===e||Array.isArray(e)||"object"!==(void 0===e?"undefined":m(e)))throw new _(8);return y({},t,e)},t.prototype.getContext=function(e,t){return this.getTheme(e,t)},t}(c.Component),Ye=(function(){function e(){g(this,e),this.masterSheet=pe.master,this.instance=this.masterSheet.clone(),this.sealed=!1}e.prototype.seal=function(){if(!this.sealed){var e=this.masterSheet.clones.indexOf(this.instance);this.masterSheet.clones.splice(e,1),this.sealed=!0}},e.prototype.collectStyles=function(e){if(this.sealed)throw new _(2);return s.a.createElement(Ve,{sheet:this.instance},e)},e.prototype.getStyleTags=function(){return this.seal(),this.instance.toHTML()},e.prototype.getStyleElement=function(){return this.seal(),this.instance.toReactElements()},e.prototype.interleaveWithNodeStream=function(e){throw new _(3)}}(),Object(c.createContext)()),Je=Ye.Consumer,Ve=function(e){function t(n){g(this,t);var r=w(this,e.call(this,n));return r.getContext=Object(p.a)(r.getContext),r}return b(t,e),t.prototype.getContext=function(e,t){if(e)return e;if(t)return new pe(t);throw new _(4)},t.prototype.render=function(){var e=this.props,t=e.children,n=e.sheet,r=e.target;return s.a.createElement(Ye.Provider,{value:this.getContext(n,r)},t)},t}(c.Component),Ke={};var Xe=function(e){function t(){g(this,t);var n=w(this,e.call(this));return n.attrs={},n.renderOuter=n.renderOuter.bind(n),n.renderInner=n.renderInner.bind(n),n}return b(t,e),t.prototype.render=function(){return s.a.createElement(Je,null,this.renderOuter)},t.prototype.renderOuter=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:pe.master;return this.styleSheet=e,this.props.forwardedComponent.componentStyle.isStatic?this.renderInner():s.a.createElement($e,null,this.renderInner)},t.prototype.renderInner=function(e){var t=this.props.forwardedComponent,n=t.componentStyle,r=t.defaultProps,o=(t.displayName,t.foldedComponentIds),a=t.styledComponentId,i=t.target,s=void 0;s=n.isStatic?this.generateAndInjectStyles(x,this.props):this.generateAndInjectStyles(je(this.props,e,r)||x,this.props);var u=this.props.as||this.attrs.as||i,l=_e(u),p={},d=y({},this.props,this.attrs),h=void 0;for(h in d)"forwardedComponent"!==h&&"as"!==h&&("forwardedRef"===h?p.ref=d[h]:"forwardedAs"===h?p.as=d[h]:l&&!Object(f.a)(h)||(p[h]=d[h]));return this.props.style&&this.attrs.style&&(p.style=y({},this.attrs.style,this.props.style)),p.className=Array.prototype.concat(o,a,s!==a?s:null,this.props.className,this.attrs.className).filter(Boolean).join(" "),Object(c.createElement)(u,p)},t.prototype.buildExecutionContext=function(e,t,n){var r=this,o=y({},t,{theme:e});return n.length?(this.attrs={},n.forEach((function(e){var t,n=e,a=!1,i=void 0,c=void 0;for(c in S(n)&&(n=n(o),a=!0),n)i=n[c],a||!S(i)||(t=i)&&t.prototype&&t.prototype.isReactComponent||C(i)||(i=i(o)),r.attrs[c]=i,o[c]=i})),o):o},t.prototype.generateAndInjectStyles=function(e,t){var n=t.forwardedComponent,r=n.attrs,o=n.componentStyle;n.warnTooManyClasses;return o.isStatic&&!r.length?o.generateAndInjectStyles(x,this.styleSheet):o.generateAndInjectStyles(this.buildExecutionContext(e,t,r),this.styleSheet)},t}(c.Component);function Qe(e,t,n){var r=C(e),o=!_e(e),a=t.displayName,i=void 0===a?function(e){return _e(e)?"styled."+e:"Styled("+T(e)+")"}(e):a,c=t.componentId,u=void 0===c?function(e,t,n){var r="string"!=typeof t?"sc":Ae(t),o=(Ke[r]||0)+1;Ke[r]=o;var a=r+"-"+e.generateName(r+o);return n?n+"-"+a:a}(Ce,t.displayName,t.parentComponentId):c,l=t.ParentComponent,p=void 0===l?Xe:l,f=t.attrs,h=void 0===f?E:f,m=t.displayName&&t.componentId?Ae(t.displayName)+"-"+t.componentId:t.componentId||u,g=r&&e.attrs?Array.prototype.concat(e.attrs,h).filter(Boolean):h,v=new Ce(r?e.componentStyle.rules.concat(n):n,g,m),b=void 0,w=function(e,t){return s.a.createElement(p,y({},e,{forwardedComponent:b,forwardedRef:t}))};return w.displayName=i,(b=s.a.forwardRef(w)).displayName=i,b.attrs=g,b.componentStyle=v,b.foldedComponentIds=r?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):E,b.styledComponentId=m,b.target=r?e.target:e,b.withComponent=function(e){var r=t.componentId,o=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(t,["componentId"]),a=r&&r+"-"+(_e(e)?e:Ae(T(e)));return Qe(e,y({},o,{attrs:g,componentId:a,ParentComponent:p}),n)},Object.defineProperty(b,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=r?Object(d.a)(e.defaultProps,t):t}}),b.toString=function(){return"."+b.styledComponentId},o&&qe(b,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,styledComponentId:!0,target:!0,withComponent:!0}),b}var Ze=function(e){return function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:x;if(!Object(l.isValidElementType)(n))throw new _(1,String(n));var o=function(){return t(n,r,be.apply(void 0,arguments))};return o.withConfig=function(o){return e(t,n,y({},r,o))},o.attrs=function(o){return e(t,n,y({},r,{attrs:Array.prototype.concat(r.attrs,o).filter(Boolean)}))},o}(Qe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){Ze[e]=Ze(e)}));var et=function(){function e(t,n){g(this,e),this.rules=t,this.componentId=n,this.isStatic=xe(t,E),pe.master.hasId(n)||pe.master.deferredInject(n,[])}return e.prototype.createStyles=function(e,t){var n=$(ye(this.rules,e,t),"");t.inject(this.componentId,n)},e.prototype.removeStyles=function(e){var t=this.componentId;e.hasId(t)&&e.remove(t)},e.prototype.renderStyles=function(e,t){this.removeStyles(t),this.createStyles(e,t)},e}();function tt(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r0?l:n?[n]:[]},t.apiRunnerAsync=function(e,t,n){return r.reduce((function(n,r){return r.plugin[e]?n.then((function(){return r.plugin[e](t,r.options)})):n}),Promise.resolve())}},yLpj:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"==typeof window&&(n=window)}e.exports=n},yoRg:function(e,t,n){var r=n("UTVS"),o=n("/GqU"),a=n("TWQb").indexOf,i=n("0BK2");e.exports=function(e,t){var n,c=o(e),s=0,u=[];for(n in c)!r(i,n)&&r(c,n)&&u.push(n);for(;t.length>s;)r(c,n=t[s++])&&(~a(u,n)||u.push(n));return u}},zBJ4:function(e,t,n){var r=n("2oRo"),o=n("hh1v"),a=r.document,i=o(a)&&o(a.createElement);e.exports=function(e){return i?a.createElement(e):{}}},zk60:function(e,t,n){var r=n("2oRo"),o=n("kRJp");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}}},[["UxWs",3,25]]]); \ No newline at end of file diff --git a/app-c33704d3a1abd6ea3046.js b/app-c33704d3a1abd6ea3046.js new file mode 100644 index 00000000..5bb637c6 --- /dev/null +++ b/app-c33704d3a1abd6ea3046.js @@ -0,0 +1,2 @@ +/*! For license information please see app-c33704d3a1abd6ea3046.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"+ZDr":function(e,t,n){"use strict";var r=n("TqRt");t.__esModule=!0,t.withPrefix=h,t.withAssetPrefix=function(e){return h(e,m())},t.navigateTo=t.replace=t.push=t.navigate=t.default=void 0;var o=r(n("8OQS")),a=r(n("PJYZ")),i=r(n("VbXa")),c=r(n("pVnL")),s=r(n("17x9")),u=r(n("q1tI")),l=n("YwZP"),p=n("LYrO"),f=n("cu4x");t.parsePath=f.parsePath;var d=function(e){return null==e?void 0:e.startsWith("/")};function h(e,t){var n,r;if(void 0===t&&(t=g()),!v(e))return e;if(e.startsWith("./")||e.startsWith("../"))return e;var o=null!==(n=null!==(r=t)&&void 0!==r?r:m())&&void 0!==n?n:"/";return""+((null==o?void 0:o.endsWith("/"))?o.slice(0,-1):o)+(e.startsWith("/")?e:"/"+e)}var m=function(){return"/react-map-gl"},g=function(){return"/react-map-gl"},v=function(e){return e&&!e.startsWith("http://")&&!e.startsWith("https://")&&!e.startsWith("//")};var y=function(e,t){return"number"==typeof e?e:v(e)?d(e)?h(e):function(e,t){return d(e)?e:(0,p.resolve)(e,t)}(e,t):e},b={activeClassName:s.default.string,activeStyle:s.default.object,partiallyActive:s.default.bool};function w(e){return u.default.createElement(l.Location,null,(function(t){var n=t.location;return u.default.createElement(O,(0,c.default)({},e,{_location:n}))}))}var O=function(e){function t(t){var n;(n=e.call(this,t)||this).defaultGetProps=function(e){var t=e.isPartiallyCurrent,r=e.isCurrent;return(n.props.partiallyActive?t:r)?{className:[n.props.className,n.props.activeClassName].filter(Boolean).join(" "),style:(0,c.default)({},n.props.style,n.props.activeStyle)}:null};var r=!1;return"undefined"!=typeof window&&window.IntersectionObserver&&(r=!0),n.state={IOSupported:r},n.handleRef=n.handleRef.bind((0,a.default)(n)),n}(0,i.default)(t,e);var n=t.prototype;return n._prefetch=function(){var e=window.location.pathname;this.props._location&&this.props._location.pathname&&(e=this.props._location.pathname);var t=y(this.props.to,e),n=(0,f.parsePath)(t).pathname;e!==n&&___loader.enqueue(n)},n.componentDidUpdate=function(e,t){this.props.to===e.to||this.state.IOSupported||this._prefetch()},n.componentDidMount=function(){this.state.IOSupported||this._prefetch()},n.componentWillUnmount=function(){if(this.io){var e=this.io,t=e.instance,n=e.el;t.unobserve(n),t.disconnect()}},n.handleRef=function(e){var t,n,r,o=this;this.props.innerRef&&this.props.innerRef.hasOwnProperty("current")?this.props.innerRef.current=e:this.props.innerRef&&this.props.innerRef(e),this.state.IOSupported&&e&&(this.io=(t=e,n=function(){o._prefetch()},(r=new window.IntersectionObserver((function(e){e.forEach((function(e){t===e.target&&(e.isIntersecting||e.intersectionRatio>0)&&(r.unobserve(t),r.disconnect(),n())}))}))).observe(t),{instance:r,el:t}))},n.render=function(){var e=this,t=this.props,n=t.to,r=t.getProps,a=void 0===r?this.defaultGetProps:r,i=t.onClick,s=t.onMouseEnter,p=(t.activeClassName,t.activeStyle,t.innerRef,t.partiallyActive,t.state),d=t.replace,h=t._location,m=(0,o.default)(t,["to","getProps","onClick","onMouseEnter","activeClassName","activeStyle","innerRef","partiallyActive","state","replace","_location"]);var g=y(n,h.pathname);return v(g)?u.default.createElement(l.Link,(0,c.default)({to:g,state:p,getProps:a,innerRef:this.handleRef,onMouseEnter:function(e){s&&s(e),___loader.hovering((0,f.parsePath)(g).pathname)},onClick:function(t){if(i&&i(t),!(0!==t.button||e.props.target||t.defaultPrevented||t.metaKey||t.altKey||t.ctrlKey||t.shiftKey)){t.preventDefault();var n=d,r=encodeURI(g)===h.pathname;"boolean"!=typeof d&&r&&(n=!0),window.___navigate(g,{state:p,replace:n})}return!0}},m)):u.default.createElement("a",(0,c.default)({href:g},m))},t}(u.default.Component);O.propTypes=(0,c.default)({},b,{onClick:s.default.func,to:s.default.string.isRequired,replace:s.default.bool,state:s.default.object});var E=function(e,t,n){return console.warn('The "'+e+'" method is now deprecated and will be removed in Gatsby v'+n+'. Please use "'+t+'" instead.')},x=u.default.forwardRef((function(e,t){return u.default.createElement(w,(0,c.default)({innerRef:t},e))}));t.default=x;t.navigate=function(e,t){window.___navigate(y(e,window.location.pathname),t)};var S=function(e){E("push","navigate",3),window.___push(y(e,window.location.pathname))};t.push=S;t.replace=function(e){E("replace","navigate",3),window.___replace(y(e,window.location.pathname))};t.navigateTo=function(e){return E("navigateTo","navigate",3),S(e)}},"/GqU":function(e,t,n){var r=n("RK3t"),o=n("HYAF");e.exports=function(e){return r(o(e))}},"/hTd":function(e,t,n){"use strict";t.__esModule=!0,t.SessionStorage=void 0;var r=function(){function e(){}var t=e.prototype;return t.read=function(e,t){var n=this.getStateKey(e,t);try{var r=window.sessionStorage.getItem(n);return r?JSON.parse(r):0}catch(o){return window&&window.___GATSBY_REACT_ROUTER_SCROLL&&window.___GATSBY_REACT_ROUTER_SCROLL[n]?window.___GATSBY_REACT_ROUTER_SCROLL[n]:0}},t.save=function(e,t,n){var r=this.getStateKey(e,t),o=JSON.stringify(n);try{window.sessionStorage.setItem(r,o)}catch(a){window&&window.___GATSBY_REACT_ROUTER_SCROLL||(window.___GATSBY_REACT_ROUTER_SCROLL={}),window.___GATSBY_REACT_ROUTER_SCROLL[r]=JSON.parse(o)}},t.getStateKey=function(e,t){var n="@@scroll|"+e.pathname;return null==t?n:n+"|"+t},e}();t.SessionStorage=r},0:function(e,t){},"0BK2":function(e,t){e.exports={}},"0Dky":function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},"0GbY":function(e,t,n){var r=n("Qo9l"),o=n("2oRo"),a=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?a(r[e])||a(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},"0eef":function(e,t,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,a=o&&!r.call({1:2},1);t.f=a?function(e){var t=o(this,e);return!!t&&t.enumerable}:r},"1Y/n":function(e,t,n){var r=n("HAuM"),o=n("ewvW"),a=n("RK3t"),i=n("UMSQ"),c=function(e){return function(t,n,c,s){r(n);var u=o(t),l=a(u),p=i(u.length),f=e?p-1:0,d=e?-1:1;if(c<2)for(;;){if(f in l){s=l[f],f+=d;break}if(f+=d,e?f<0:p<=f)throw TypeError("Reduce of empty array with no initial value")}for(;e?f>=0:p>f;f+=d)f in l&&(s=n(s,l[f],f,u));return s}};e.exports={left:c(!1),right:c(!0)}},"284h":function(e,t,n){var r=n("cDf5");function o(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return o=function(){return e},e}e.exports=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=o();if(t&&t.has(e))return t.get(e);var n={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var c=a?Object.getOwnPropertyDescriptor(e,i):null;c&&(c.get||c.set)?Object.defineProperty(n,i,c):n[i]=e[i]}return n.default=e,t&&t.set(e,n),n}},"2oRo":function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||function(){return this}()||Function("return this")()}).call(this,n("yLpj"))},"30RF":function(e,t,n){"use strict";n.d(t,"d",(function(){return l})),n.d(t,"a",(function(){return p})),n.d(t,"c",(function(){return f})),n.d(t,"b",(function(){return d}));var r=n("LYrO"),o=n("cSJ8"),a=function(e){return void 0===e?e:"/"===e?"/":"/"===e.charAt(e.length-1)?e.slice(0,-1):e},i=new Map,c=[],s=function(e){var t=decodeURIComponent(e);return Object(o.a)(t,"/react-map-gl").split("#")[0].split("?")[0]};function u(e){return e.startsWith("/")||e.startsWith("https://")||e.startsWith("http://")?e:new URL(e,window.location.href+(window.location.href.endsWith("/")?"":"/")).pathname}var l=function(e){c=e},p=function(e){var t=h(e),n=c.map((function(e){var t=e.path;return{path:e.matchPath,originalPath:t}})),o=Object(r.pick)(n,t);return o?a(o.route.originalPath):null},f=function(e){var t=h(e),n=c.map((function(e){var t=e.path;return{path:e.matchPath,originalPath:t}})),o=Object(r.pick)(n,t);return o?o.params:{}},d=function(e){var t=s(u(e));if(i.has(t))return i.get(t);var n=p(t);return n||(n=h(e)),i.set(t,n),n},h=function(e){var t=s(u(e));return"/index.html"===t&&(t="/"),t=a(t)}},"33yf":function(e,t,n){(function(e){function n(e,t){for(var n=0,r=e.length-1;r>=0;r--){var o=e[r];"."===o?e.splice(r,1):".."===o?(e.splice(r,1),n++):n&&(e.splice(r,1),n--)}if(t)for(;n--;n)e.unshift("..");return e}function r(e,t){if(e.filter)return e.filter(t);for(var n=[],r=0;r=-1&&!o;a--){var i=a>=0?arguments[a]:e.cwd();if("string"!=typeof i)throw new TypeError("Arguments to path.resolve must be strings");i&&(t=i+"/"+t,o="/"===i.charAt(0))}return(o?"/":"")+(t=n(r(t.split("/"),(function(e){return!!e})),!o).join("/"))||"."},t.normalize=function(e){var a=t.isAbsolute(e),i="/"===o(e,-1);return(e=n(r(e.split("/"),(function(e){return!!e})),!a).join("/"))||a||(e="."),e&&i&&(e+="/"),(a?"/":"")+e},t.isAbsolute=function(e){return"/"===e.charAt(0)},t.join=function(){var e=Array.prototype.slice.call(arguments,0);return t.normalize(r(e,(function(e,t){if("string"!=typeof e)throw new TypeError("Arguments to path.join must be strings");return e})).join("/"))},t.relative=function(e,n){function r(e){for(var t=0;t=0&&""===e[n];n--);return t>n?[]:e.slice(t,n-t+1)}e=t.resolve(e).substr(1),n=t.resolve(n).substr(1);for(var o=r(e.split("/")),a=r(n.split("/")),i=Math.min(o.length,a.length),c=i,s=0;s=1;--a)if(47===(t=e.charCodeAt(a))){if(!o){r=a;break}}else o=!1;return-1===r?n?"/":".":n&&1===r?"/":e.slice(0,r)},t.basename=function(e,t){var n=function(e){"string"!=typeof e&&(e+="");var t,n=0,r=-1,o=!0;for(t=e.length-1;t>=0;--t)if(47===e.charCodeAt(t)){if(!o){n=t+1;break}}else-1===r&&(o=!1,r=t+1);return-1===r?"":e.slice(n,r)}(e);return t&&n.substr(-1*t.length)===t&&(n=n.substr(0,n.length-t.length)),n},t.extname=function(e){"string"!=typeof e&&(e+="");for(var t=-1,n=0,r=-1,o=!0,a=0,i=e.length-1;i>=0;--i){var c=e.charCodeAt(i);if(47!==c)-1===r&&(o=!1,r=i+1),46===c?-1===t?t=i:1!==a&&(a=1):-1!==t&&(a=-1);else if(!o){n=i+1;break}}return-1===t||-1===r||0===a||1===a&&t===r-1&&t===n+1?"":e.slice(t,r)};var o="b"==="ab".substr(-1)?function(e,t,n){return e.substr(t,n)}:function(e,t,n){return t<0&&(t=e.length+t),e.substr(t,n)}}).call(this,n("8oxB"))},"3uz+":function(e,t,n){"use strict";t.__esModule=!0,t.useScrollRestoration=function(e){var t=(0,a.useLocation)(),n=(0,o.useContext)(r.ScrollContext),i=(0,o.useRef)();return(0,o.useLayoutEffect)((function(){if(i.current){var r=n.read(t,e);i.current.scrollTo(0,r||0)}}),[]),{ref:i,onScroll:function(){i.current&&n.save(t,e,i.current.scrollTop)}}};var r=n("Enzk"),o=n("q1tI"),a=n("YwZP")},"5ku3":function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return a})),n.d(t,"b",(function(){return i}));var r=n("U8pU"),o=n("I0ug");function a(){return!("object"===(void 0===e?"undefined":Object(r.a)(e))&&"[object process]"===String(e)&&!e.browser)||Object(o.a)()}function i(){return a()&&"undefined"!=typeof document}}).call(this,n("8oxB"))},"5yr3":function(e,t,n){"use strict";var r=function(e){return e=e||Object.create(null),{on:function(t,n){(e[t]||(e[t]=[])).push(n)},off:function(t,n){e[t]&&e[t].splice(e[t].indexOf(n)>>>0,1)},emit:function(t,n){(e[t]||[]).slice().map((function(e){e(n)})),(e["*"]||[]).slice().map((function(e){e(t,n)}))}}}();t.a=r},"6JNq":function(e,t,n){var r=n("UTVS"),o=n("Vu81"),a=n("Bs8V"),i=n("m/L8");e.exports=function(e,t){for(var n=o(t),c=i.f,s=a.f,u=0;u=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),p=function(e){return function(t){var n=f(t.components);return o.a.createElement(e,i({},t,{components:n}))}},f=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=f(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),l=f(n),p=r,d=l["".concat(i,".").concat(p)]||l[p]||h[p]||a;return n?o.a.createElement(d,s(s({ref:t},c),{},{components:n})):o.a.createElement(d,s({ref:t},c))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(o[n]=e[n]);return o}},"8oxB":function(e,t){var n,r,o=e.exports={};function a(){throw new Error("setTimeout has not been defined")}function i(){throw new Error("clearTimeout has not been defined")}function c(e){if(n===setTimeout)return setTimeout(e,0);if((n===a||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:a}catch(e){n=a}try{r="function"==typeof clearTimeout?clearTimeout:i}catch(e){r=i}}();var s,u=[],l=!1,p=-1;function f(){l&&s&&(l=!1,s.length?u=s.concat(u):p=-1,u.length&&d())}function d(){if(!l){var e=c(f);l=!0;for(var t=u.length;t;){for(s=u,u=[];++p1)for(var n=1;n1&&void 0!==arguments[1]?arguments[1]:{},u=s.state,l=s.replace,p=void 0!==l&&l;if("number"==typeof t)e.history.go(t);else{u=r({},u,{key:Date.now()+""});try{i||p?e.history.replaceState(u,null,t):e.history.pushState(u,null,t)}catch(d){e.location[p?"replace":"assign"](t)}}a=o(e),i=!0;var f=new Promise((function(e){return c=e}));return n.forEach((function(e){return e({location:a,action:"PUSH"})})),f}}},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=e.indexOf("?"),n={pathname:t>-1?e.substr(0,t):e,search:t>-1?e.substr(t):""},r=0,o=[n],a=[null];return{get location(){return o[r]},addEventListener:function(e,t){},removeEventListener:function(e,t){},history:{get entries(){return o},get index(){return r},get state(){return a[r]},pushState:function(e,t,n){var i=n.split("?"),c=i[0],s=i[1],u=void 0===s?"":s;r++,o.push({pathname:c,search:u.length?"?"+u:u}),a.push(e)},replaceState:function(e,t,n){var i=n.split("?"),c=i[0],s=i[1],u=void 0===s?"":s;o[r]={pathname:c,search:u},a[r]=e},go:function(e){var t=r+e;t<0||t>a.length-1||(r=t)}}}},c=!("undefined"==typeof window||!window.document||!window.document.createElement),s=a(c?window:i()),u=s.navigate},"9uj6":function(e,t,n){"use strict";var r=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,o=function(e){var t={};return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}((function(e){return r.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}));t.a=o},B5uF:function(e,t,n){"use strict";n.d(t,"a",(function(){return h}));var r=n("rePB"),o=n("JX7q"),a=n("dI71"),i=n("q1tI"),c=n.n(i);function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t79&&c<83},{reduce:function(e){return o(this,e,arguments.length,arguments.length>1?arguments[1]:void 0)}})},ECyS:function(e,t,n){"use strict";n("E9XD");function r(e){return Object.prototype.toString.call(e).slice(8,-1)}function o(e){return"Object"===r(e)&&(e.constructor===Object&&Object.getPrototypeOf(e)===Object.prototype)}function a(e){return"Array"===r(e)}function i(e){return"Symbol"===r(e)}function c(){for(var e=0,t=0,n=arguments.length;t=0)}}).call(this,n("8oxB"))},I8vh:function(e,t,n){var r=n("ppGB"),o=Math.max,a=Math.min;e.exports=function(e,t){var n=r(e);return n<0?o(n+t,0):a(n,t)}},IOVJ:function(e,t,n){"use strict";var r=n("rePB"),o=n("dI71"),a=n("q1tI"),i=n.n(a),c=n("emEt"),s=n("xtsi"),u=n("30RF");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=74)&&(r=i.match(/Chrome\/(\d+)/))&&(o=r[1]),e.exports=o&&+o},LYrO:function(e,t,n){"use strict";n.r(t),n.d(t,"startsWith",(function(){return a})),n.d(t,"pick",(function(){return i})),n.d(t,"match",(function(){return c})),n.d(t,"resolve",(function(){return s})),n.d(t,"insertParams",(function(){return u})),n.d(t,"validateRedirect",(function(){return l})),n.d(t,"shallowCompare",(function(){return b}));var r=n("QLaP"),o=n.n(r),a=function(e,t){return e.substr(0,t.length)===t},i=function(e,t){for(var n=void 0,r=void 0,a=t.split("?")[0],i=g(a),c=""===i[0],s=m(e),u=0,l=s.length;ut.score?-1:e.index-t.index}))},g=function(e){return e.replace(/(^\/+|\/+$)/g,"").split("/")},v=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r0})))&&n.length>0?"?"+n.join("&"):"")},y=["uri","path"],b=function(e,t){var n=Object.keys(e);return n.length===Object.keys(t).length&&n.every((function(n){return t.hasOwnProperty(n)&&e[n]===t[n]}))}},LeKB:function(e,t,n){e.exports=[{plugin:n("q9nr"),options:{plugins:[],maxWidth:690,linkImagesToOriginal:!0,showCaptions:!1,markdownCaptions:!1,sizeByPixelDensity:!1,backgroundColor:"white",quality:50,withWebp:!1,tracedSVG:!1,loading:"lazy",disableBgImageOnAlpha:!1,disableBgImage:!1}},{plugin:n("hUyl"),options:{plugins:[],offsetY:64,removeAccents:!0,enableCustomId:!0,className:"anchor"}},{plugin:n("flL/"),options:{plugins:[],extensions:[".md",".mdx"],gatsbyRemarkPlugins:[{resolve:"gatsby-remark-images",options:{maxWidth:690}},"gatsby-remark-responsive-iframe","gatsby-remark-prismjs","gatsby-remark-copy-linked-files",{resolve:"gatsby-remark-autolink-headers",options:{offsetY:64,removeAccents:!0,enableCustomId:!0}},{resolve:"gatsby-remark-embedded-codesandbox",options:{directory:"./",protocol:"embedded-codesandbox://",embedOptions:{codemirror:1,fontsize:12,hidenavigation:1,view:"split"}}}],defaultLayouts:{},lessBabel:!1,remarkPlugins:[],rehypePlugins:[],mediaTypes:["text/markdown","text/x-markdown"],root:"/home/runner/work/react-map-gl/react-map-gl/website"}},{plugin:n("EvL4"),options:{plugins:[],logLevel:1,DIR_NAME:"/home/runner/work/react-map-gl/react-map-gl/website",ROOT_FOLDER:"/home/runner/work/react-map-gl/react-map-gl",DOCS:{id:"table-of-contents",chapters:[{title:"Introduction",entries:[{entry:"docs"},{entry:"docs/whats-new"},{entry:"docs/upgrade-guide"},{entry:"docs/contributing"}]},{title:"Developer Guide",entries:[{entry:"docs/get-started/get-started"},{entry:"docs/get-started/mapbox-tokens"},{entry:"docs/get-started/state-management"},{entry:"docs/get-started/adding-custom-data"},{entry:"docs/get-started/tips-and-tricks"}]},{title:"API Reference",entries:[{entry:"docs/api-reference/map"},{entry:"docs/api-reference/attribution-control"},{entry:"docs/api-reference/fullscreen-control"},{entry:"docs/api-reference/geolocate-control"},{entry:"docs/api-reference/layer"},{entry:"docs/api-reference/map-provider"},{entry:"docs/api-reference/marker"},{entry:"docs/api-reference/navigation-control"},{entry:"docs/api-reference/popup"},{entry:"docs/api-reference/scale-control"},{entry:"docs/api-reference/source"},{entry:"docs/api-reference/use-control"},{entry:"docs/api-reference/use-map"},{entry:"docs/api-reference/types"}]}]},DOC_FOLDERS:["/home/runner/work/react-map-gl/react-map-gl/docs"],SOURCE:["/home/runner/work/react-map-gl/react-map-gl/website/static","/home/runner/work/react-map-gl/react-map-gl/website/src"],PROJECT_TYPE:"github",PROJECT_NAME:"react-map-gl",PROJECT_ORG:"visgl",PROJECT_ORG_LOGO:"images/visgl-logo.png",PROJECT_URL:"https://github.com/visgl/",PROJECT_DESC:"React wrapper for Mapbox GL JS",PROJECT_IMAGE:"images/hero-sm.jpg",PATH_PREFIX:"/react-map-gl",GA_TRACKING_ID:"UA-74374017-2",GITHUB_KEY:null,HOME_PATH:"",PROJECTS:[{name:"deck.gl",url:"https://deck.gl"},{name:"luma.gl",url:"https://luma.gl"},{name:"loaders.gl",url:"https://loaders.gl"},{name:"nebula.gl",url:"https://nebula.gl/"}],LINK_TO_GET_STARTED:"/docs/get-started/get-started",ADDITIONAL_LINKS:[{name:"Blog",href:"http://medium.com/vis-gl",index:4}],INDEX_PAGE_URL:"/home/runner/work/react-map-gl/react-map-gl/website/src/home.js",EXAMPLES:[{title:"Dynamic Styling",image:"images/example-layers.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/layers/src/app.tsx",path:"examples/layers",category:"Examples"},{title:"Markers & Popups",image:"images/example-controls.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/controls/src/app.tsx",path:"examples/controls",category:"Examples"},{title:"Custom Cursor",image:"images/example-custom-cursor.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/custom-cursor/src/app.tsx",path:"examples/custom-cursor",category:"Examples"},{title:"Draggable Marker",image:"images/example-draggable-markers.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/draggable-markers/src/app.tsx",path:"examples/draggable-markers",category:"Examples"},{title:"GeoJSON",image:"images/example-geojson.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geojson/src/app.tsx",path:"examples/geojson",category:"Examples"},{title:"GeoJSON Animation",image:"images/example-geojson-animation.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geojson-animation/src/app.tsx",path:"examples/geojson-animation",category:"Examples"},{title:"Clusters",image:"images/example-clusters.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/clusters/src/app.tsx",path:"examples/clusters",category:"Examples"},{title:"Limit Map Interaction",image:"images/example-interaction.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/interaction/src/app.tsx",path:"examples/interaction",category:"Examples"},{title:"Camera Transition",image:"images/example-viewport-animation.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/viewport-animation/src/app.tsx",path:"examples/viewport-animation",category:"Examples"},{title:"Highlight By Filter",image:"images/example-filter.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/filter/src/app.tsx",path:"examples/filter",category:"Examples"},{title:"Zoom To Bounds",image:"images/example-zoom-to-bounds.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/zoom-to-bounds/src/app.tsx",path:"examples/zoom-to-bounds",category:"Examples"},{title:"Heatmap",image:"images/example-heatmap.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/heatmap/src/app.tsx",path:"examples/heatmap",category:"Examples"},{title:"Draw Polygon",image:"images/example-draw-polygon.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/draw-polygon/src/app.tsx",path:"examples/draw-polygon",category:"Examples"},{title:"Terrain",image:"images/example-terrain.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/terrain/src/app.tsx",path:"examples/terrain",category:"Examples"},{title:"Geocoder",image:"images/example-geocoder.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/geocoder/src/app.tsx",path:"examples/geocoder",category:"Examples"},{title:"Side by Side",image:"images/example-side-by-side.jpg",componentUrl:"/home/runner/work/react-map-gl/react-map-gl/examples/side-by-side/src/app.tsx",path:"examples/side-by-side",category:"Examples"}],THEME_OVERRIDES:{primary400:"#00ADE6",mono100:"#FFFFFF",mono200:"#f7fcfb",mono300:"#ecf7f5",mono400:"#e1f0ee",mono500:"#cae0dc",mono600:"#9ec0bb",mono700:"#6f9691",mono800:"#486865",mono900:"#2b4845",mono1000:"#101918"},STYLESHEETS:["https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css","/style.css"]}}]},Ljh3:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var r=n("JX7q"),o=n("dI71"),a=n("q1tI"),i=n.n(a),c=n("O7rn"),s=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={collapsed:!0,links:Object(c.b)(t)},n.handleClick=n.handleClick.bind(Object(r.a)(n)),n}Object(o.a)(t,e);var n=t.prototype;return n.handleClick=function(){this.setState({collapsed:!this.state.collapsed})},n.render=function(){var e=this.state,t=e.links,n=e.collapsed;return i.a.createElement(c.a,Object.assign({},this.props,{links:t,isLinksMenuOpen:!1,isProjectsMenuOpen:!n,toggleProjectsMenu:this.handleClick,toggleLinksMenu:function(){}}))},t}(a.Component)},ME5O:function(e,t,n){"use strict";t.a={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1}},MMVs:function(e,t,n){e.exports=function(){var e=!1;-1!==navigator.appVersion.indexOf("MSIE 10")&&(e=!0);var t,n=[],r="object"==typeof document&&document,o=e?r.documentElement.doScroll("left"):r.documentElement.doScroll,a=r&&(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);return!a&&r&&r.addEventListener("DOMContentLoaded",t=function(){for(r.removeEventListener("DOMContentLoaded",t),a=1;t=n.shift();)t()}),function(e){a?setTimeout(e,0):n.push(e)}}()},"NC/Y":function(e,t,n){var r=n("0GbY");e.exports=r("navigator","userAgent")||""},NSX3:function(e,t,n){"use strict";n.r(t);var r=n("xtsi");"https:"!==window.location.protocol&&"localhost"!==window.location.hostname?console.error("Service workers can only be used over HTTPS, or on localhost for development"):"serviceWorker"in navigator&&navigator.serviceWorker.register("/react-map-gl/sw.js").then((function(e){e.addEventListener("updatefound",(function(){Object(r.apiRunner)("onServiceWorkerUpdateFound",{serviceWorker:e});var t=e.installing;console.log("installingWorker",t),t.addEventListener("statechange",(function(){switch(t.state){case"installed":navigator.serviceWorker.controller?(window.___swUpdated=!0,Object(r.apiRunner)("onServiceWorkerUpdateReady",{serviceWorker:e}),window.___failedResources&&(console.log("resources failed, SW updated - reloading"),window.location.reload())):(console.log("Content is now available offline!"),Object(r.apiRunner)("onServiceWorkerInstalled",{serviceWorker:e}));break;case"redundant":console.error("The installing service worker became redundant."),Object(r.apiRunner)("onServiceWorkerRedundant",{serviceWorker:e});break;case"activated":Object(r.apiRunner)("onServiceWorkerActive",{serviceWorker:e})}}))}))})).catch((function(e){console.error("Error during service worker registration:",e)}))},NsGk:function(e,t,n){t.components={"component---examples-clusters-src-app-tsx":function(){return Promise.all([n.e(0),n.e(5)]).then(n.bind(null,"h3ZS"))},"component---examples-controls-src-app-tsx":function(){return Promise.all([n.e(0),n.e(6)]).then(n.bind(null,"hLkE"))},"component---examples-custom-cursor-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(7)]).then(n.bind(null,"D5EJ"))},"component---examples-draggable-markers-src-app-tsx":function(){return Promise.all([n.e(0),n.e(8)]).then(n.bind(null,"XiBU"))},"component---examples-draw-polygon-src-app-tsx":function(){return Promise.all([n.e(0),n.e(2),n.e(9)]).then(n.bind(null,"Iug2"))},"component---examples-filter-src-app-tsx":function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,"LBzf"))},"component---examples-geocoder-src-app-tsx":function(){return Promise.all([n.e(0),n.e(11)]).then(n.bind(null,"rSgj"))},"component---examples-geojson-animation-src-app-tsx":function(){return Promise.all([n.e(0),n.e(12)]).then(n.bind(null,"qGxt"))},"component---examples-geojson-src-app-tsx":function(){return Promise.all([n.e(0),n.e(13)]).then(n.bind(null,"TPXO"))},"component---examples-heatmap-src-app-tsx":function(){return Promise.all([n.e(0),n.e(14)]).then(n.bind(null,"M+zY"))},"component---examples-interaction-src-app-tsx":function(){return Promise.all([n.e(0),n.e(15)]).then(n.bind(null,"AVzd"))},"component---examples-layers-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(16)]).then(n.bind(null,"keqU"))},"component---examples-side-by-side-src-app-tsx":function(){return Promise.all([n.e(0),n.e(17)]).then(n.bind(null,"HEEo"))},"component---examples-terrain-src-app-tsx":function(){return Promise.all([n.e(0),n.e(18)]).then(n.bind(null,"IOtm"))},"component---examples-viewport-animation-src-app-tsx":function(){return Promise.all([n.e(0),n.e(19)]).then(n.bind(null,"3F3y"))},"component---examples-zoom-to-bounds-src-app-tsx":function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(20)]).then(n.bind(null,"jUl1"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":function(){return n.e(21).then(n.bind(null,"bzNg"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":function(){return n.e(22).then(n.bind(null,"2flm"))},"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":function(){return n.e(23).then(n.bind(null,"H/ma"))},"component---src-home-js":function(){return n.e(24).then(n.bind(null,"e0Gm"))}}},O7rn:function(e,t,n){"use strict";n.d(t,"b",(function(){return v}));var r=n("rePB"),o=n("q1tI"),a=n.n(o),i=n("17x9"),c=n.n(i),s=n("K/gy"),u=n.n(s),l=n("vOJQ"),p=n("ivKS");function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t0&&{label:"Examples",to:"/examples"},o="github"===n.PROJECT_TYPE&&{href:"https://github.com/"+n.PROJECT_ORG+"/"+n.PROJECT_NAME,label:a.a.createElement(h,null)},i=[r,{label:"Documentation",to:n.HOME_PATH?"/":"/docs"},{label:"Search",to:"/search"}];return n.ADDITIONAL_LINKS&&n.ADDITIONAL_LINKS.length>0&&n.ADDITIONAL_LINKS.map((function(e){return d(d({},e),{},{label:e.name})})).forEach((function(e){Number.isFinite(e.index)?i.splice(e.index,0,e):i.push(e)})),i.push(o),i.filter(Boolean)}var y=function(e){var t=e.links;return a.a.createElement(p.g,null,t.map((function(e,t){return a.a.createElement(p.e,{key:"link-"+t},a.a.createElement(m,e))})))};t.a=function(e){var t=e.links,n=e.config,r=void 0===n?{}:n,o=e.toggleMenu,i=e.toggleToc,c=e.isTocOpen,s=e.isMenuOpen,u=e.isSmallScreen,l=r.PROJECT_NAME,f=r.PROJECTS,d=void 0===f?[]:f,h=r.HEADER_LINK_URL,m=void 0===h?"/":h,v=d.map((function(e){var t=e.name,n=e.url;return a.a.createElement(p.m,{key:"menulink-"+t,href:n},t)})),b=function(e){o(!s),e.stopPropagation()};return u?a.a.createElement(p.b,{onClick:function(){return o(!1)}},a.a.createElement(p.l,null,a.a.createElement(g,{to:m,label:l}),a.a.createElement(p.j,{$collapsed:!s,$nbItems:t.length+1},a.a.createElement(y,{links:t}))),i&&a.a.createElement(p.n,{onClick:function(){o(!1),i(!c)}},"Table of Contents"),a.a.createElement(p.a,{onClick:b}),s&&a.a.createElement(p.k,null)):a.a.createElement(p.b,{onClick:function(){return o(!1)}},a.a.createElement(p.l,null,a.a.createElement(p.a,{onClick:b}),a.a.createElement(g,{to:m,label:l}),a.a.createElement(p.j,{$collapsed:!s,$nbItems:d.length},v)),a.a.createElement(y,{links:t}),s&&a.a.createElement(p.k,null))}},PJYZ:function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},QLaP:function(e,t,n){"use strict";e.exports=function(e,t,n,r,o,a,i,c){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,a,i,c],l=0;(s=new Error(t.replace(/%s/g,(function(){return u[l++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},Qo9l:function(e,t,n){var r=n("2oRo");e.exports=r},RK3t:function(e,t,n){var r=n("0Dky"),o=n("xrYK"),a="".split;e.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?a.call(e,""):Object(e)}:Object},SksO:function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},TAZq:function(e,t,n){e.exports=function(){"use strict";return function(e){function t(t){if(t)try{e(t+"}")}catch(n){}}return function(n,r,o,a,i,c,s,u,l,p){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===p?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}}()},TJpk:function(e,t,n){t.__esModule=!0,t.Helmet=void 0;var r=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var m,g,v,y=(0,c.default)(u.reducePropsToState,u.handleClientStateChange,u.mapStateOnServer)((function(){return null})),b=(m=y,v=g=function(e){function t(){return d(this,t),h(this,e.apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.shouldComponentUpdate=function(e){return!(0,s.default)(this.props,e)},t.prototype.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case l.TAG_NAMES.SCRIPT:case l.TAG_NAMES.NOSCRIPT:return{innerHTML:t};case l.TAG_NAMES.STYLE:return{cssText:t}}throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},t.prototype.flattenArrayTypeChildren=function(e){var t,n=e.child,o=e.arrayTypeChildren,a=e.newChildProps,i=e.nestedChildren;return r({},o,((t={})[n.type]=[].concat(o[n.type]||[],[r({},a,this.mapNestedChildrenToProps(n,i))]),t))},t.prototype.mapObjectTypeChildren=function(e){var t,n,o=e.child,a=e.newProps,i=e.newChildProps,c=e.nestedChildren;switch(o.type){case l.TAG_NAMES.TITLE:return r({},a,((t={})[o.type]=c,t.titleAttributes=r({},i),t));case l.TAG_NAMES.BODY:return r({},a,{bodyAttributes:r({},i)});case l.TAG_NAMES.HTML:return r({},a,{htmlAttributes:r({},i)})}return r({},a,((n={})[o.type]=r({},i),n))},t.prototype.mapArrayTypeChildrenToProps=function(e,t){var n=r({},t);return Object.keys(e).forEach((function(t){var o;n=r({},n,((o={})[t]=e[t],o))})),n},t.prototype.warnOnInvalidChildren=function(e,t){return!0},t.prototype.mapChildrenToProps=function(e,t){var n=this,r={};return a.default.Children.forEach(e,(function(e){if(e&&e.props){var o=e.props,a=o.children,i=f(o,["children"]),c=(0,u.convertReactPropstoHtmlAttributes)(i);switch(n.warnOnInvalidChildren(e,a),e.type){case l.TAG_NAMES.LINK:case l.TAG_NAMES.META:case l.TAG_NAMES.NOSCRIPT:case l.TAG_NAMES.SCRIPT:case l.TAG_NAMES.STYLE:r=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:r,newChildProps:c,nestedChildren:a});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:c,nestedChildren:a})}}})),t=this.mapArrayTypeChildrenToProps(r,t)},t.prototype.render=function(){var e=this.props,t=e.children,n=f(e,["children"]),o=r({},n);return t&&(o=this.mapChildrenToProps(t,o)),a.default.createElement(m,o)},o(t,null,[{key:"canUseDOM",set:function(e){m.canUseDOM=e}}]),t}(a.default.Component),g.propTypes={base:i.default.object,bodyAttributes:i.default.object,children:i.default.oneOfType([i.default.arrayOf(i.default.node),i.default.node]),defaultTitle:i.default.string,defer:i.default.bool,encodeSpecialCharacters:i.default.bool,htmlAttributes:i.default.object,link:i.default.arrayOf(i.default.object),meta:i.default.arrayOf(i.default.object),noscript:i.default.arrayOf(i.default.object),onChangeClientState:i.default.func,script:i.default.arrayOf(i.default.object),style:i.default.arrayOf(i.default.object),title:i.default.string,titleAttributes:i.default.object,titleTemplate:i.default.string},g.defaultProps={defer:!0,encodeSpecialCharacters:!0},g.peek=m.peek,g.rewind=function(){var e=m.rewind();return e||(e=(0,u.mapStateOnServer)({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),e},v);b.renderStatic=b.rewind,t.Helmet=b,t.default=b},TOwV:function(e,t,n){"use strict";e.exports=n("qT12")},TR4N:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["children","color","size","style","width","height"]),p=t.reactIconBase,f=void 0===p?{}:p,d=i||f.size||"1em";return o.default.createElement("svg",r({children:n,fill:"currentColor",preserveAspectRatio:"xMidYMid meet",height:u||d,width:s||d},f,l,{style:r({verticalAlign:"middle",color:a||f.color},f.style||{},c)}))};c.propTypes={color:a.default.string,size:a.default.oneOfType([a.default.string,a.default.number]),width:a.default.oneOfType([a.default.string,a.default.number]),height:a.default.oneOfType([a.default.string,a.default.number]),style:a.default.object},c.contextTypes={reactIconBase:a.default.shape(c.propTypes)},t.default=c,e.exports=t.default},TWQb:function(e,t,n){var r=n("/GqU"),o=n("UMSQ"),a=n("I8vh"),i=function(e){return function(t,n,i){var c,s=r(t),u=o(s.length),l=a(i,u);if(e&&n!=n){for(;u>l;)if((c=s[l++])!=c)return!0}else for(;u>l;l++)if((e||l in s)&&s[l]===n)return e||l||0;return!e&&-1}};e.exports={includes:i(!0),indexOf:i(!1)}},TqRt:function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},U8pU:function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"a",(function(){return r}))},UMSQ:function(e,t,n){var r=n("ppGB"),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},UTVS:function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},UxWs:function(e,t,n){"use strict";n.r(t);var r=n("dI71"),o=n("xtsi"),a=n("q1tI"),i=n.n(a),c=n("i8i4"),s=n.n(c),u=n("YwZP"),l=n("7hJ6"),p=n("MMVs"),f=n.n(p),d=n("Wbzz"),h=(n("E9XD"),n("emEt")),m=n("YLt+"),g=n("5yr3"),v={id:"gatsby-announcer",style:{position:"absolute",top:0,width:1,height:1,padding:0,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0},"aria-live":"assertive","aria-atomic":"true"},y=n("9Xx/"),b=n("+ZDr"),w=m.reduce((function(e,t){return e[t.fromPath]=t,e}),{});function O(e){var t=w[e];return null!=t&&(window.___replace(t.toPath),!0)}var E=function(e,t){O(e.pathname)||Object(o.apiRunner)("onPreRouteUpdate",{location:e,prevLocation:t})},x=function(e,t){O(e.pathname)||Object(o.apiRunner)("onRouteUpdate",{location:e,prevLocation:t})},S=function(e,t){if(void 0===t&&(t={}),"number"!=typeof e){var n=Object(b.parsePath)(e).pathname,r=w[n];if(r&&(e=r.toPath,n=Object(b.parsePath)(e).pathname),window.___swUpdated)window.location=n;else{var a=setTimeout((function(){g.a.emit("onDelayedLoadPageResources",{pathname:n}),Object(o.apiRunner)("onRouteUpdateDelayed",{location:window.location})}),1e3);h.default.loadPage(n).then((function(r){if(!r||r.status===h.PageResourceStatus.Error)return window.history.replaceState({},"",location.href),window.location=n,void clearTimeout(a);r&&r.page.webpackCompilationHash!==window.___webpackCompilationHash&&("serviceWorker"in navigator&&null!==navigator.serviceWorker.controller&&"activated"===navigator.serviceWorker.controller.state&&navigator.serviceWorker.controller.postMessage({gatsbyApi:"clearPathResources"}),window.location=n),Object(u.navigate)(e,t),clearTimeout(a)}))}}else y.c.navigate(e)};function T(e,t){var n=this,r=t.location,a=r.pathname,i=r.hash,c=Object(o.apiRunner)("shouldUpdateScroll",{prevRouterProps:e,pathname:a,routerProps:{location:r},getSavedScrollPosition:function(e){return[0,n._stateStorage.read(e,e.key)]}});if(c.length>0)return c[c.length-1];if(e&&e.location.pathname===a)return i?decodeURI(i.slice(1)):[0,0];return!0}var C=function(e){function t(t){var n;return(n=e.call(this,t)||this).announcementRef=i.a.createRef(),n}Object(r.a)(t,e);var n=t.prototype;return n.componentDidUpdate=function(e,t){var n=this;requestAnimationFrame((function(){var e="new page at "+n.props.location.pathname;document.title&&(e=document.title);var t=document.querySelectorAll("#gatsby-focus-wrapper h1");t&&t.length&&(e=t[0].textContent);var r="Navigated to "+e;n.announcementRef.current&&(n.announcementRef.current.innerText!==r&&(n.announcementRef.current.innerText=r))}))},n.render=function(){return i.a.createElement("div",Object.assign({},v,{ref:this.announcementRef}))},t}(i.a.Component),j=function(e,t){var n,r;return e.href!==t.href||(null==e||null===(n=e.state)||void 0===n?void 0:n.key)!==(null==t||null===(r=t.state)||void 0===r?void 0:r.key)},P=function(e){function t(t){var n;return n=e.call(this,t)||this,E(t.location,null),n}Object(r.a)(t,e);var n=t.prototype;return n.componentDidMount=function(){x(this.props.location,null)},n.shouldComponentUpdate=function(e){return!!j(e.location,this.props.location)&&(E(this.props.location,e.location),!0)},n.componentDidUpdate=function(e){j(e.location,this.props.location)&&x(this.props.location,e.location)},n.render=function(){return i.a.createElement(i.a.Fragment,null,this.props.children,i.a.createElement(C,{location:location}))},t}(i.a.Component),k=n("IOVJ"),A=n("NsGk"),_=n.n(A),R=n("rePB");function I(e,t){for(var n in e)if(!(n in t))return!0;for(var r in t)if(e[r]!==t[r])return!0;return!1}function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function M(e){for(var t=1;t0&&n("NSX3");var e=function(e){return i.a.createElement(u.BaseContext.Provider,{value:{baseuri:"/",basepath:"/"}},i.a.createElement(k.a,e))},t=i.a.createContext({}),a=function(e){function n(){return e.apply(this,arguments)||this}return Object(r.a)(n,e),n.prototype.render=function(){var e=this.props.children;return i.a.createElement(u.Location,null,(function(n){var r=n.location;return i.a.createElement(D,{location:r},(function(n){var r=n.pageResources,o=n.location,a=Object(h.getStaticQueryResults)();return i.a.createElement(d.c.Provider,{value:a},i.a.createElement(t.Provider,{value:{pageResources:r,location:o}},e))}))}))},n}(i.a.Component),c=function(n){function o(){return n.apply(this,arguments)||this}return Object(r.a)(o,n),o.prototype.render=function(){var n=this;return i.a.createElement(t.Consumer,null,(function(t){var r=t.pageResources,o=t.location;return i.a.createElement(P,{location:o},i.a.createElement(l.ScrollContext,{location:o,shouldUpdateScroll:T},i.a.createElement(u.Router,{basepath:"/react-map-gl",location:o,id:"gatsby-focus-wrapper"},i.a.createElement(e,Object.assign({path:"/404.html"===r.page.path?Object(N.a)(o.pathname,"/react-map-gl"):encodeURI(r.page.matchPath||r.page.path)},n.props,{location:o,pageResources:r},r.json)))))}))},o}(i.a.Component),p=window,m=p.pagePath,g=p.location;m&&"/react-map-gl"+m!==g.pathname&&!(U.findMatchPath(Object(N.a)(g.pathname,"/react-map-gl"))||"/404.html"===m||m.match(/^\/404\/?$/)||m.match(/^\/offline-plugin-app-shell-fallback\/?$/))&&Object(u.navigate)("/react-map-gl"+m+g.search+g.hash,{replace:!0}),h.publicLoader.loadPage(g.pathname).then((function(e){if(!e||e.status===h.PageResourceStatus.Error)throw new Error("page resources for "+g.pathname+" not found. Not rendering React");window.___webpackCompilationHash=e.page.webpackCompilationHash;var t=Object(o.apiRunner)("wrapRootElement",{element:i.a.createElement(c,null)},i.a.createElement(c,null),(function(e){return{element:e.result}})).pop(),n=function(){return i.a.createElement(a,null,t)},r=Object(o.apiRunner)("replaceHydrateFunction",void 0,s.a.hydrate)[0];f()((function(){r(i.a.createElement(n,null),"undefined"!=typeof window?document.getElementById("___gatsby"):void 0,(function(){Object(o.apiRunner)("onInitialClientRender")}))}))}))}))},VbXa:function(e,t,n){var r=n("SksO");e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}},VpIT:function(e,t,n){var r=n("xDBR"),o=n("xs3f");(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.8.3",mode:r?"pure":"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})},Vu81:function(e,t,n){var r=n("0GbY"),o=n("JBy8"),a=n("dBg+"),i=n("glrk");e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(i(e)),n=a.f;return n?t.concat(n(e)):t}},Wbzz:function(e,t,n){"use strict";n.d(t,"c",(function(){return c})),n.d(t,"b",(function(){return u}));var r=n("q1tI"),o=n.n(r),a=n("+ZDr"),i=n.n(a);n.d(t,"a",(function(){return i.a})),n.d(t,"d",(function(){return a.withPrefix}));n("7hJ6"),n("lw3w"),n("emEt").default.enqueue;var c=o.a.createContext({});function s(e){var t=e.staticQueryData,n=e.data,r=e.query,a=e.render,i=n?n.data:t[r]&&t[r].data;return o.a.createElement(o.a.Fragment,null,i&&a(i),!i&&o.a.createElement("div",null,"Loading (StaticQuery)"))}var u=function(e){var t=e.data,n=e.query,r=e.render,a=e.children;return o.a.createElement(c.Consumer,null,(function(e){return o.a.createElement(s,{data:t,query:n,render:r||a,staticQueryData:e})}))}},Wwog:function(e,t,n){"use strict";function r(e,t){if(e.length!==t.length)return!1;for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function m(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function g(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var v=function(e,t){var n=s()(t);return n.displayName=e,n},y=v("Location"),b=function(e){var t=e.children;return o.a.createElement(y.Consumer,null,(function(e){return e?t(e):o.a.createElement(w,null,t)}))},w=function(e){function t(){var n,r;h(this,t);for(var o=arguments.length,a=Array(o),i=0;i-1?(a=t.substring(0,r),i=t.substring(r)):a=t,o.a.createElement(y.Provider,{value:{location:{pathname:a,search:i,hash:""},navigate:function(){throw new Error("You can't call navigate on the server.")}}},n)},E=v("Base",{baseuri:"/",basepath:"/"}),x=function(e){return o.a.createElement(E.Consumer,null,(function(t){return o.a.createElement(b,null,(function(n){return o.a.createElement(S,f({},t,n,e))}))}))},S=function(e){function t(){return h(this,t),m(this,e.apply(this,arguments))}return g(t,e),t.prototype.render=function(){var e=this.props,t=e.location,n=e.navigate,r=e.basepath,a=e.primary,i=e.children,c=(e.baseuri,e.component),s=void 0===c?"div":c,u=d(e,["location","navigate","basepath","primary","children","baseuri","component"]),p=o.a.Children.toArray(i).reduce((function(e,t){var n=z(r)(t);return e.concat(n)}),[]),h=t.pathname,m=Object(l.pick)(p,h);if(m){var g=m.params,v=m.uri,y=m.route,b=m.route.value;r=y.default?r:y.path.replace(/\*$/,"");var w=f({},g,{uri:v,location:t,navigate:function(e,t){return n(Object(l.resolve)(e,v),t)}}),O=o.a.cloneElement(b,w,b.props.children?o.a.createElement(x,{location:t,primary:a},b.props.children):void 0),S=a?C:s,T=a?f({uri:v,location:t,component:s},u):u;return o.a.createElement(E.Provider,{value:{baseuri:v,basepath:r}},o.a.createElement(S,T,O))}return null},t}(o.a.PureComponent);S.defaultProps={primary:!0};var T=v("Focus"),C=function(e){var t=e.uri,n=e.location,r=e.component,a=d(e,["uri","location","component"]);return o.a.createElement(T.Consumer,null,(function(e){return o.a.createElement(k,f({},a,{component:r,requestFocus:e,uri:t,location:n}))}))},j=!0,P=0,k=function(e){function t(){var n,r;h(this,t);for(var o=arguments.length,a=Array(o),i=0;i2&&void 0!==arguments[2]?arguments[2]:"sessionStorage";i(this,e),this.storage=p(r),this.id=t,this.config={},Object.assign(this.config,n),this._loadConfiguration()}return Object(c.a)(e,[{key:"getConfiguration",value:function(){return this.config}},{key:"setConfiguration",value:function(e){return this.config={},this.updateConfiguration(e)}},{key:"updateConfiguration",value:function(e){if(Object.assign(this.config,e),this.storage){var t=JSON.stringify(this.config);this.storage.setItem(this.id,t)}return this}},{key:"_loadConfiguration",value:function(){var e={};if(this.storage){var t=this.storage.getItem(this.id);e=t?JSON.parse(t):{}}return Object.assign(this.config,e),this}}]),e}();function d(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:8,n=Math.max(t-e.length,0);return"".concat(" ".repeat(n)).concat(e)}function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:8,n=Math.max(t-e.length,0);return"".concat(e).concat(" ".repeat(n))}function m(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:600,o=e.src.replace(/\(/g,"%28").replace(/\)/g,"%29");e.width>r&&(n=Math.min(n,r/e.width));var a=e.width*n,i=e.height*n,c=["font-size:1px;","padding:".concat(Math.floor(i/2),"px ").concat(Math.floor(a/2),"px;"),"line-height:".concat(i,"px;"),"background:url(".concat(o,");"),"background-size:".concat(a,"px ").concat(i,"px;"),"color:transparent;"].join("");return["".concat(t," %c+"),c]}var g={BLACK:30,RED:31,GREEN:32,YELLOW:33,BLUE:34,MAGENTA:35,CYAN:36,WHITE:37,BRIGHT_BLACK:90,BRIGHT_RED:91,BRIGHT_GREEN:92,BRIGHT_YELLOW:93,BRIGHT_BLUE:94,BRIGHT_MAGENTA:95,BRIGHT_CYAN:96,BRIGHT_WHITE:97};function v(e){return"string"==typeof e?g[e.toUpperCase()]||g.WHITE:e}function y(e,t,n){return l||"string"!=typeof e||(t&&(t=v(t),e="[".concat(t,"m").concat(e,"")),n&&(t=v(n),e="[".concat(n+10,"m").concat(e,""))),e}function b(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(!e)return;if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return w(e,t)}(e))){var t=0,n=function(){};return{s:n,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f: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.")}var r,o,a=!0,i=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){i=!0,o=e},f:function(){try{a||null==r.return||r.return()}finally{if(i)throw o}}}}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:["constructor"],r=Object.getPrototypeOf(e),o=Object.getOwnPropertyNames(r),a=b(o);try{var i=function(){var r=t.value;"function"==typeof e[r]&&(n.find((function(e){return r===e}))||(e[r]=e[r].bind(e)))};for(a.s();!(t=a.n()).done;)i()}catch(c){a.e(c)}finally{a.f()}}function E(e,t){if(!e)throw new Error(t||"Assertion failed")}var x=n("K9nA");function S(){var e;if(l&&x.f.performance)e=x.f.performance.now();else if(x.d.hrtime){var t=x.d.hrtime();e=1e3*t[0]+t[1]/1e6}else e=Date.now();return e}var T={debug:l&&console.debug||console.log,log:console.log,info:console.info,warn:console.warn,error:console.error},C={enabled:!0,level:0};function j(){}var P={},k={once:!0};function A(e){for(var t in e)for(var n in e[t])return n||"untitled";return"empty"}var _=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.id;i(this,e),this.id=n,this.VERSION=u,this._startTs=S(),this._deltaTs=S(),this.LOG_THROTTLE_TIMEOUT=0,this._storage=new f("__probe-".concat(this.id,"__"),C),this.userData={},this.timeStamp("".concat(this.id," started")),O(this),Object.seal(this)}return Object(c.a)(e,[{key:"isEnabled",value:function(){return this._storage.config.enabled}},{key:"getLevel",value:function(){return this._storage.config.level}},{key:"getTotal",value:function(){return Number((S()-this._startTs).toPrecision(10))}},{key:"getDelta",value:function(){return Number((S()-this._deltaTs).toPrecision(10))}},{key:"getPriority",value:function(){return this.level}},{key:"enable",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return this._storage.updateConfiguration({enabled:e}),this}},{key:"setLevel",value:function(e){return this._storage.updateConfiguration({level:e}),this}},{key:"assert",value:function(e,t){E(e,t)}},{key:"warn",value:function(e){return this._getLogFunction(0,e,T.warn,arguments,k)}},{key:"error",value:function(e){return this._getLogFunction(0,e,T.error,arguments)}},{key:"deprecated",value:function(e,t){return this.warn("`".concat(e,"` is deprecated and will be removed in a later version. Use `").concat(t,"` instead"))}},{key:"removed",value:function(e,t){return this.error("`".concat(e,"` has been removed. Use `").concat(t,"` instead"))}},{key:"probe",value:function(e,t){return this._getLogFunction(e,t,T.log,arguments,{time:!0,once:!0})}},{key:"log",value:function(e,t){return this._getLogFunction(e,t,T.debug,arguments)}},{key:"info",value:function(e,t){return this._getLogFunction(e,t,console.info,arguments)}},{key:"once",value:function(e,t){return this._getLogFunction(e,t,T.debug||T.info,arguments,k)}},{key:"table",value:function(e,t,n){return t?this._getLogFunction(e,t,console.table||j,n&&[n],{tag:A(t)}):j}},{key:"image",value:function(e){var t=e.logLevel,r=e.priority,a=e.image,i=e.message,c=void 0===i?"":i,s=e.scale,u=void 0===s?1:s;return this._shouldLog(t||r)?l?function(e){var t=e.image,n=e.message,r=void 0===n?"":n,a=e.scale,i=void 0===a?1:a;if("string"==typeof t){var c=new Image;return c.onload=function(){var e,t=m(c,r,i);(e=console).log.apply(e,Object(o.a)(t))},c.src=t,j}var s=t.nodeName||"";if("img"===s.toLowerCase()){var u;return(u=console).log.apply(u,Object(o.a)(m(t,r,i))),j}if("canvas"===s.toLowerCase()){var l=new Image;return l.onload=function(){var e;return(e=console).log.apply(e,Object(o.a)(m(l,r,i)))},l.src=t.toDataURL(),j}return j}({image:a,message:c,scale:u}):function(e){var t=e.image,r=(e.message,e.scale),o=void 0===r?1:r,a=null;try{a=n(0)}catch(i){}if(a)return function(){return a(t,{fit:"box",width:"".concat(Math.round(80*o),"%")}).then((function(e){return console.log(e)}))};return j}({image:a,message:c,scale:u}):j}},{key:"settings",value:function(){console.table?console.table(this._storage.config):console.log(this._storage.config)}},{key:"get",value:function(e){return this._storage.config[e]}},{key:"set",value:function(e,t){this._storage.updateConfiguration(Object(a.a)({},e,t))}},{key:"time",value:function(e,t){return this._getLogFunction(e,t,console.time?console.time:console.info)}},{key:"timeEnd",value:function(e,t){return this._getLogFunction(e,t,console.timeEnd?console.timeEnd:console.info)}},{key:"timeStamp",value:function(e,t){return this._getLogFunction(e,t,console.timeStamp||j)}},{key:"group",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{collapsed:!1},r=n=I({logLevel:e,message:t,opts:n}),o=r.collapsed;return n.method=(o?console.groupCollapsed:console.group)||console.info,this._getLogFunction(n)}},{key:"groupCollapsed",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return this.group(e,t,Object.assign({},n,{collapsed:!0}))}},{key:"groupEnd",value:function(e){return this._getLogFunction(e,"",console.groupEnd||j)}},{key:"withGroup",value:function(e,t,n){this.group(e,t)();try{n()}finally{this.groupEnd(e)()}}},{key:"trace",value:function(){console.trace&&console.trace()}},{key:"_shouldLog",value:function(e){return this.isEnabled()&&this.getLevel()>=R(e)}},{key:"_getLogFunction",value:function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],a=arguments.length>4?arguments[4]:void 0;if(this._shouldLog(e)){var i;a=I({logLevel:e,message:t,args:r,opts:a}),E(n=n||a.method),a.total=this.getTotal(),a.delta=this.getDelta(),this._deltaTs=S();var c=a.tag||a.message;if(a.once){if(P[c])return j;P[c]=S()}return t=L(this.id,a.message,a),(i=n).bind.apply(i,[console,t].concat(Object(o.a)(a.args)))}return j}},{key:"level",set:function(e){this.setLevel(e)},get:function(){return this.getLevel()}},{key:"priority",set:function(e){this.level=e},get:function(){return this.level}}]),e}();function R(e){if(!e)return 0;var t;switch(Object(r.a)(e)){case"number":t=e;break;case"object":t=e.logLevel||e.priority||0;break;default:return 0}return E(Number.isFinite(t)&&t>=0),t}function I(e){var t=e.logLevel,n=e.message;e.logLevel=R(t);for(var o=e.args?Array.from(e.args):[];o.length&&o.shift()!==n;);switch(e.args=o,Object(r.a)(t)){case"string":case"function":void 0!==n&&o.unshift(n),e.message=t;break;case"object":Object.assign(e,t)}"function"==typeof e.message&&(e.message=e.message());var a=Object(r.a)(e.message);return E("string"===a||"object"===a),Object.assign(e,e.opts)}function L(e,t,n){if("string"==typeof t){var r=n.time?d((o=n.total)<10?"".concat(o.toFixed(2),"ms"):o<100?"".concat(o.toFixed(1),"ms"):o<1e3?"".concat(o.toFixed(0),"ms"):"".concat((o/1e3).toFixed(2),"s")):"";t=y(t=n.time?"".concat(e,": ").concat(r," ").concat(t):"".concat(e,": ").concat(t),n.color,n.background)}var o;return t}_.VERSION=u;var M=n("I0ug");function D(){return void 0!==x.f.orientation}function N(e){if(!e&&!Object(s.a)())return"Node";if(Object(M.a)(e))return"Electron";var t="undefined"!=typeof navigator?navigator:{},n=e||t.userAgent||"";if(n.indexOf("Edge")>-1)return"Edge";var r=-1!==n.indexOf("MSIE "),o=-1!==n.indexOf("Trident/");return r||o?"IE":x.f.chrome?"Chrome":x.f.safari?"Safari":x.f.mozInnerScreenX?"Firefox":"Unknown"}var F=n("GawU"),U=function(){function e(t,n){i(this,e),this.name=t,this.type=n,this.sampleSize=1,this.reset()}return Object(c.a)(e,[{key:"setSampleSize",value:function(e){return this.sampleSize=e,this}},{key:"incrementCount",value:function(){return this.addCount(1),this}},{key:"decrementCount",value:function(){return this.subtractCount(1),this}},{key:"addCount",value:function(e){return this._count+=e,this._samples++,this._checkSampling(),this}},{key:"subtractCount",value:function(e){return this._count-=e,this._samples++,this._checkSampling(),this}},{key:"addTime",value:function(e){return this._time+=e,this.lastTiming=e,this._samples++,this._checkSampling(),this}},{key:"timeStart",value:function(){return this._startTime=Object(F.a)(),this._timerPending=!0,this}},{key:"timeEnd",value:function(){return this._timerPending?(this.addTime(Object(F.a)()-this._startTime),this._timerPending=!1,this._checkSampling(),this):this}},{key:"getSampleAverageCount",value:function(){return this.sampleSize>0?this.lastSampleCount/this.sampleSize:0}},{key:"getSampleAverageTime",value:function(){return this.sampleSize>0?this.lastSampleTime/this.sampleSize:0}},{key:"getSampleHz",value:function(){return this.lastSampleTime>0?this.sampleSize/(this.lastSampleTime/1e3):0}},{key:"getAverageCount",value:function(){return this.samples>0?this.count/this.samples:0}},{key:"getAverageTime",value:function(){return this.samples>0?this.time/this.samples:0}},{key:"getHz",value:function(){return this.time>0?this.samples/(this.time/1e3):0}},{key:"reset",value:function(){return this.time=0,this.count=0,this.samples=0,this.lastTiming=0,this.lastSampleTime=0,this.lastSampleCount=0,this._count=0,this._time=0,this._samples=0,this._startTime=0,this._timerPending=!1,this}},{key:"_checkSampling",value:function(){this._samples===this.sampleSize&&(this.lastSampleTime=this._time,this.lastSampleCount=this._count,this.count+=this._count,this.time+=this._time,this.samples+=this._samples,this._time=0,this._count=0,this._samples=0)}}]),e}(),H=function(){function e(t){var n=t.id,r=t.stats;i(this,e),this.id=n,this.stats={},this._initializeStats(r),Object.seal(this)}return Object(c.a)(e,[{key:"get",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"count";return this._getOrCreate({name:e,type:t})}},{key:"reset",value:function(){for(var e in this.stats)this.stats[e].reset();return this}},{key:"forEach",value:function(e){for(var t in this.stats)e(this.stats[t])}},{key:"getTable",value:function(){var e={};return this.forEach((function(t){e[t.name]={time:t.time||0,count:t.count||0,average:t.getAverageTime()||0,hz:t.getHz()||0}})),e}},{key:"_initializeStats",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];t.forEach((function(t){return e._getOrCreate(t)}))}},{key:"_getOrCreate",value:function(e){if(!e||!e.name)return null;var t=e.name,n=e.type;return this.stats[t]||(this.stats[t]=e instanceof U?e:new U(t,n)),this.stats[t]}},{key:"size",get:function(){return Object.keys(this.stats).length}}]),e}();t.default=new _({id:"probe.gl"})},aJjT:function(e,t,n){e.exports=function e(t){"use strict";var n=/^\0+/g,r=/[\0\r\f]/g,o=/: */g,a=/zoo|gra/,i=/([,: ])(transform)/g,c=/,+\s*(?![^(]*[)])/g,s=/ +\s*(?![^(]*[)])/g,u=/ *[\0] */g,l=/,\r+?/g,p=/([\t\r\n ])*\f?&/g,f=/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,d=/\W+/g,h=/@(k\w+)\s*(\S*)\s*/,m=/::(place)/g,g=/:(read-only)/g,v=/\s+(?=[{\];=:>])/g,y=/([[}=:>])\s+/g,b=/(\{[^{]+?);(?=\})/g,w=/\s{2,}/g,O=/([^\(])(:+) */g,E=/[svh]\w+-[tblr]{2}/,x=/\(\s*(.*)\s*\)/g,S=/([\s\S]*?);/g,T=/-self|flex-/g,C=/[^]*?(:[rp][el]a[\w-]+)[^]*/,j=/stretch|:\s*\w+\-(?:conte|avail)/,P=/([^-])(image-set\()/,k="-webkit-",A="-moz-",_="-ms-",R=59,I=125,L=123,M=40,D=41,N=10,F=13,U=32,H=45,B=42,G=44,q=58,z=47,$=1,W=1,Y=0,J=1,V=1,K=1,X=0,Q=0,Z=0,ee=[],te=[],ne=0,re=null,oe=0,ae=1,ie="",ce="",se="";function ue(e,t,o,a,i){for(var c,s,l=0,p=0,f=0,d=0,v=0,y=0,b=0,w=0,E=0,S=0,T=0,C=0,j=0,P=0,A=0,_=0,X=0,te=0,re=0,pe=o.length,ve=pe-1,ye="",be="",we="",Oe="",Ee="",xe="";A0&&(be=be.replace(r,"")),be.trim().length>0)){switch(b){case U:case 9:case R:case F:case N:break;default:be+=o.charAt(A)}b=R}if(1===X)switch(b){case L:case I:case R:case 34:case 39:case M:case D:case G:X=0;case 9:case F:case N:case U:break;default:for(X=0,re=A,v=b,A--,b=R;re0&&(++A,b=v);case L:re=pe}}switch(b){case L:for(v=(be=be.trim()).charCodeAt(0),T=1,re=++A;A0&&(be=be.replace(r,"")),y=be.charCodeAt(1)){case 100:case 109:case 115:case H:c=t;break;default:c=ee}if(re=(we=ue(t,c,we,y,i+1)).length,Z>0&&0===re&&(re=be.length),ne>0&&(s=me(3,we,c=le(ee,be,te),t,W,$,re,y,i,a),be=c.join(""),void 0!==s&&0===(re=(we=s.trim()).length)&&(y=0,we="")),re>0)switch(y){case 115:be=be.replace(x,he);case 100:case 109:case H:we=be+"{"+we+"}";break;case 107:we=(be=be.replace(h,"$1 $2"+(ae>0?ie:"")))+"{"+we+"}",we=1===V||2===V&&de("@"+we,3)?"@"+k+we+"@"+we:"@"+we;break;default:we=be+we,112===a&&(Oe+=we,we="")}else we="";break;default:we=ue(t,le(t,be,te),we,a,i+1)}Ee+=we,C=0,X=0,P=0,_=0,te=0,j=0,be="",we="",b=o.charCodeAt(++A);break;case I:case R:if((re=(be=(_>0?be.replace(r,""):be).trim()).length)>1)switch(0===P&&((v=be.charCodeAt(0))===H||v>96&&v<123)&&(re=(be=be.replace(" ",":")).length),ne>0&&void 0!==(s=me(1,be,t,e,W,$,Oe.length,a,i,a))&&0===(re=(be=s.trim()).length)&&(be="\0\0"),v=be.charCodeAt(0),y=be.charCodeAt(1),v){case 0:break;case 64:if(105===y||99===y){xe+=be+o.charAt(A);break}default:if(be.charCodeAt(re-1)===q)break;Oe+=fe(be,v,y,be.charCodeAt(2))}C=0,X=0,P=0,_=0,te=0,be="",b=o.charCodeAt(++A)}}switch(b){case F:case N:if(p+d+f+l+Q===0)switch(S){case D:case 39:case 34:case 64:case 126:case 62:case B:case 43:case z:case H:case q:case G:case R:case L:case I:break;default:P>0&&(X=1)}p===z?p=0:J+C===0&&107!==a&&be.length>0&&(_=1,be+="\0"),ne*oe>0&&me(0,be,t,e,W,$,Oe.length,a,i,a),$=1,W++;break;case R:case I:if(p+d+f+l===0){$++;break}default:switch($++,ye=o.charAt(A),b){case 9:case U:if(d+l+p===0)switch(w){case G:case q:case 9:case U:ye="";break;default:b!==U&&(ye=" ")}break;case 0:ye="\\0";break;case 12:ye="\\f";break;case 11:ye="\\v";break;case 38:d+p+l===0&&J>0&&(te=1,_=1,ye="\f"+ye);break;case 108:if(d+p+l+Y===0&&P>0)switch(A-P){case 2:112===w&&o.charCodeAt(A-3)===q&&(Y=w);case 8:111===E&&(Y=E)}break;case q:d+p+l===0&&(P=A);break;case G:p+f+d+l===0&&(_=1,ye+="\r");break;case 34:case 39:0===p&&(d=d===b?0:0===d?b:d);break;case 91:d+p+f===0&&l++;break;case 93:d+p+f===0&&l--;break;case D:d+p+l===0&&f--;break;case M:if(d+p+l===0){if(0===C)switch(2*w+3*E){case 533:break;default:T=0,C=1}f++}break;case 64:p+f+d+l+P+j===0&&(j=1);break;case B:case z:if(d+l+f>0)break;switch(p){case 0:switch(2*b+3*o.charCodeAt(A+1)){case 235:p=z;break;case 220:re=A,p=B}break;case B:b===z&&w===B&&re+2!==A&&(33===o.charCodeAt(re+2)&&(Oe+=o.substring(re,A+1)),ye="",p=0)}}if(0===p){if(J+d+l+j===0&&107!==a&&b!==R)switch(b){case G:case 126:case 62:case 43:case D:case M:if(0===C){switch(w){case 9:case U:case N:case F:ye+="\0";break;default:ye="\0"+ye+(b===G?"":"\0")}_=1}else switch(b){case M:P+7===A&&108===w&&(P=0),C=++T;break;case D:0==(C=--T)&&(_=1,ye+="\0")}break;case 9:case U:switch(w){case 0:case L:case I:case R:case G:case 12:case 9:case U:case N:case F:break;default:0===C&&(_=1,ye+="\0")}}be+=ye,b!==U&&9!==b&&(S=b)}}E=w,w=b,A++}if(re=Oe.length,Z>0&&0===re&&0===Ee.length&&0===t[0].length==0&&(109!==a||1===t.length&&(J>0?ce:se)===t[0])&&(re=t.join(",").length+2),re>0){if(c=0===J&&107!==a?function(e){for(var t,n,o=0,a=e.length,i=Array(a);o1)){if(f=s.charCodeAt(s.length-1),d=n.charCodeAt(0),t="",0!==l)switch(f){case B:case 126:case 62:case 43:case U:case M:break;default:t=" "}switch(d){case 38:n=t+ce;case 126:case 62:case 43:case U:case D:case M:break;case 91:n=t+n+ce;break;case q:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(K>0){n=t+n.substring(8,p-1);break}default:(l<1||c[l-1].length<1)&&(n=t+ce+n)}break;case G:t="";default:n=p>1&&n.indexOf(":")>0?t+n.replace(O,"$1"+ce+"$2"):t+n+ce}s+=n}i[o]=s.replace(r,"").trim()}return i}(t):t,ne>0&&void 0!==(s=me(2,Oe,c,e,W,$,re,a,i,a))&&0===(Oe=s).length)return xe+Oe+Ee;if(Oe=c.join(",")+"{"+Oe+"}",V*Y!=0){switch(2!==V||de(Oe,2)||(Y=0),Y){case 111:Oe=Oe.replace(g,":-moz-$1")+Oe;break;case 112:Oe=Oe.replace(m,"::"+k+"input-$1")+Oe.replace(m,"::-moz-$1")+Oe.replace(m,":-ms-input-$1")+Oe}Y=0}}return xe+Oe+Ee}function le(e,t,n){var r=t.trim().split(l),o=r,a=r.length,i=e.length;switch(i){case 0:case 1:for(var c=0,s=0===i?"":e[0]+" ";c0&&J>0)return o.replace(f,"$1").replace(p,"$1"+se);break;default:return e.trim()+o.replace(p,"$1"+e.trim())}default:if(n*J>0&&o.indexOf("\f")>0)return o.replace(p,(e.charCodeAt(0)===q?"":"$1")+e.trim())}return e+o}function fe(e,t,n,r){var u,l=0,p=e+";",f=2*t+3*n+4*r;if(944===f)return function(e){var t=e.length,n=e.indexOf(":",9)+1,r=e.substring(0,n).trim(),o=e.substring(n,t-1).trim();switch(e.charCodeAt(9)*ae){case 0:break;case H:if(110!==e.charCodeAt(10))break;default:var a=o.split((o="",c)),i=0;for(n=0,t=a.length;i64&&p<90||p>96&&p<123||95===p||p===H&&u.charCodeAt(1)!==H))switch(isNaN(parseFloat(u))+(-1!==u.indexOf("("))){case 1:switch(u){case"infinite":case"alternate":case"backwards":case"running":case"normal":case"forwards":case"both":case"none":case"linear":case"ease":case"ease-in":case"ease-out":case"ease-in-out":case"paused":case"reverse":case"alternate-reverse":case"inherit":case"initial":case"unset":case"step-start":case"step-end":break;default:u+=ie}}l[n++]=u}o+=(0===i?"":",")+l.join(" ")}}return o=r+o+";",1===V||2===V&&de(o,1)?k+o+o:o}(p);if(0===V||2===V&&!de(p,1))return p;switch(f){case 1015:return 97===p.charCodeAt(10)?k+p+p:p;case 951:return 116===p.charCodeAt(3)?k+p+p:p;case 963:return 110===p.charCodeAt(5)?k+p+p:p;case 1009:if(100!==p.charCodeAt(4))break;case 969:case 942:return k+p+p;case 978:return k+p+A+p+p;case 1019:case 983:return k+p+A+p+_+p+p;case 883:return p.charCodeAt(8)===H?k+p+p:p.indexOf("image-set(",11)>0?p.replace(P,"$1"+k+"$2")+p:p;case 932:if(p.charCodeAt(4)===H)switch(p.charCodeAt(5)){case 103:return k+"box-"+p.replace("-grow","")+k+p+_+p.replace("grow","positive")+p;case 115:return k+p+_+p.replace("shrink","negative")+p;case 98:return k+p+_+p.replace("basis","preferred-size")+p}return k+p+_+p+p;case 964:return k+p+_+"flex-"+p+p;case 1023:if(99!==p.charCodeAt(8))break;return u=p.substring(p.indexOf(":",15)).replace("flex-","").replace("space-between","justify"),k+"box-pack"+u+k+p+_+"flex-pack"+u+p;case 1005:return a.test(p)?p.replace(o,":"+k)+p.replace(o,":"+A)+p:p;case 1e3:switch(l=(u=p.substring(13).trim()).indexOf("-")+1,u.charCodeAt(0)+u.charCodeAt(l)){case 226:u=p.replace(E,"tb");break;case 232:u=p.replace(E,"tb-rl");break;case 220:u=p.replace(E,"lr");break;default:return p}return k+p+_+u+p;case 1017:if(-1===p.indexOf("sticky",9))return p;case 975:switch(l=(p=e).length-10,f=(u=(33===p.charCodeAt(l)?p.substring(0,l):p).substring(e.indexOf(":",7)+1).trim()).charCodeAt(0)+(0|u.charCodeAt(7))){case 203:if(u.charCodeAt(8)<111)break;case 115:p=p.replace(u,k+u)+";"+p;break;case 207:case 102:p=p.replace(u,k+(f>102?"inline-":"")+"box")+";"+p.replace(u,k+u)+";"+p.replace(u,_+u+"box")+";"+p}return p+";";case 938:if(p.charCodeAt(5)===H)switch(p.charCodeAt(6)){case 105:return u=p.replace("-items",""),k+p+k+"box-"+u+_+"flex-"+u+p;case 115:return k+p+_+"flex-item-"+p.replace(T,"")+p;default:return k+p+_+"flex-line-pack"+p.replace("align-content","").replace(T,"")+p}break;case 973:case 989:if(p.charCodeAt(3)!==H||122===p.charCodeAt(4))break;case 931:case 953:if(!0===j.test(e))return 115===(u=e.substring(e.indexOf(":")+1)).charCodeAt(0)?fe(e.replace("stretch","fill-available"),t,n,r).replace(":fill-available",":stretch"):p.replace(u,k+u)+p.replace(u,A+u.replace("fill-",""))+p;break;case 962:if(p=k+p+(102===p.charCodeAt(5)?_+p:"")+p,n+r===211&&105===p.charCodeAt(13)&&p.indexOf("transform",10)>0)return p.substring(0,p.indexOf(";",27)+1).replace(i,"$1"+k+"$2")+p}return p}function de(e,t){var n=e.indexOf(1===t?":":"{"),r=e.substring(0,3!==t?n:10),o=e.substring(n+1,e.length-1);return re(2!==t?r:r.replace(C,"$1"),o,t)}function he(e,t){var n=fe(t,t.charCodeAt(0),t.charCodeAt(1),t.charCodeAt(2));return n!==t+";"?n.replace(S," or ($1)").substring(4):"("+t+")"}function me(e,t,n,r,o,a,i,c,s,u){for(var l,p=0,f=t;p0&&(ie=o.replace(d,91===a?"":"-")),a=1,1===J?se=o:ce=o;var i,c=[se];ne>0&&void 0!==(i=me(-1,n,c,c,W,$,0,0,0,0))&&"string"==typeof i&&(n=i);var s=ue(ee,c,n,0,0);return ne>0&&void 0!==(i=me(-2,s,c,c,W,$,s.length,0,0,0))&&"string"!=typeof(s=i)&&(a=0),ie="",se="",ce="",Y=0,W=1,$=1,X*a==0?s:s.replace(r,"").replace(v,"").replace(y,"$1").replace(b,"$1").replace(w," ")}return ye.use=function e(t){switch(t){case void 0:case null:ne=te.length=0;break;default:if("function"==typeof t)te[ne++]=t;else if("object"==typeof t)for(var n=0,r=t.length;n0,id:f,name:d,toggleEntry:c}),s.a.createElement(l.f,{$height:h&&h.height},u.map((function(t,n){return e({depth:a+1,id:f,index:n,route:t,tocState:i,toggleEntry:c})}))))}var m=n.childMdx,g=m&&m.frontmatter&&m.frontmatter.title||n.title,v=m&&m.fields&&m.fields.slug||n.path;return s.a.createElement("div",{key:o},s.a.createElement("li",null,s.a.createElement(p,{active:i[f]&&!0===i[f].isSelected,depth:a,name:g,path:v})))}({route:e,index:t,depth:0,tocState:n,toggleEntry:r,id:[]})})))};function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t0?r:n)(e)}},q9nr:function(e,t,n){"use strict";var r=n("nwwn"),o=r.DEFAULT_OPTIONS,a=r.imageClass,i=r.imageBackgroundClass,c=r.imageWrapperClass;t.onRouteUpdate=function(e,t){for(var n=Object.assign({},o,t),r=document.querySelectorAll("."+c),s=function(e){var t=r[e],o=t.querySelector("."+i),c=t.querySelector("."+a),s=function(){o.style.transition="opacity 0.5s 0.5s",c.style.transition="opacity 0.5s",u()},u=function e(){o.style.opacity=0,c.style.opacity=1,c.style.color="inherit",c.style.boxShadow="inset 0px 0px 0px 400px "+n.backgroundColor,c.removeEventListener("load",s),c.removeEventListener("error",e)};c.style.opacity=0,c.addEventListener("load",s),c.addEventListener("error",u),c.complete&&u()},u=0;u1?t-1:0),r=1;r2?n-2:0),o=2;o1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),r)},oneOfType:function(e){if(!Array.isArray(e))return o("Invalid argument supplied to oneOfType, expected an instance of array."),r;for(var t=0;t=c;case"max":return s<=c;default:return s===c}}));return c&&!n||!c&&n}))},t.parse=r;var c=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,u=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";var r=n(3),o=n(4),a=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(o.a.all).forEach((function(n){var o=e[n];null!=o&&t.push(function(e,t){var n=Object(r.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?a(e):"(".concat(n,": ").concat(t,")")}(n,o))})),t.join(" and ")}}]))},v1p5:function(e,t,n){(function(e){n("E9XD"),t.__esModule=!0,t.warn=t.requestAnimationFrame=t.reducePropsToState=t.mapStateOnServer=t.handleClientStateChange=t.convertReactPropstoHtmlAttributes=void 0;var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1])||arguments[1];return!1===t?String(e):String(e).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},p=function(e){var t=g(e,c.TAG_NAMES.TITLE),n=g(e,c.HELMET_PROPS.TITLE_TEMPLATE);if(n&&t)return n.replace(/%s/g,(function(){return t}));var r=g(e,c.HELMET_PROPS.DEFAULT_TITLE);return t||r||void 0},f=function(e){return g(e,c.HELMET_PROPS.ON_CHANGE_CLIENT_STATE)||function(){}},d=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return o({},e,t)}),{})},h=function(e,t){return t.filter((function(e){return void 0!==e[c.TAG_NAMES.BASE]})).map((function(e){return e[c.TAG_NAMES.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=e[n];if(r.hasOwnProperty(t))return r[t]}return null},v=(u=Date.now(),function(e){var t=Date.now();t-u>16?(u=t,e(t)):setTimeout((function(){v(e)}),0)}),y=function(e){return clearTimeout(e)},b="undefined"!=typeof window?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||v:e.requestAnimationFrame||v,w="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||y:e.cancelAnimationFrame||y,O=function(e){return console&&"function"==typeof console.warn&&console.warn(e)},E=null,x=function(e,t){var n=e.baseTag,r=e.bodyAttributes,o=e.htmlAttributes,a=e.linkTags,i=e.metaTags,s=e.noscriptTags,u=e.onChangeClientState,l=e.scriptTags,p=e.styleTags,f=e.title,d=e.titleAttributes;C(c.TAG_NAMES.BODY,r),C(c.TAG_NAMES.HTML,o),T(f,d);var h={baseTag:j(c.TAG_NAMES.BASE,n),linkTags:j(c.TAG_NAMES.LINK,a),metaTags:j(c.TAG_NAMES.META,i),noscriptTags:j(c.TAG_NAMES.NOSCRIPT,s),scriptTags:j(c.TAG_NAMES.SCRIPT,l),styleTags:j(c.TAG_NAMES.STYLE,p)},m={},g={};Object.keys(h).forEach((function(e){var t=h[e],n=t.newTags,r=t.oldTags;n.length&&(m[e]=n),r.length&&(g[e]=h[e].oldTags)})),t&&t(),u(e,m,g)},S=function(e){return Array.isArray(e)?e.join(""):e},T=function(e,t){void 0!==e&&document.title!==e&&(document.title=S(e)),C(c.TAG_NAMES.TITLE,t)},C=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute(c.HELMET_ATTRIBUTE),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(t),s=0;s=0;f--)n.removeAttribute(a[f]);o.length===a.length?n.removeAttribute(c.HELMET_ATTRIBUTE):n.getAttribute(c.HELMET_ATTRIBUTE)!==i.join(",")&&n.setAttribute(c.HELMET_ATTRIBUTE,i.join(","))}},j=function(e,t){var n=document.head||document.querySelector(c.TAG_NAMES.HEAD),r=n.querySelectorAll(e+"["+c.HELMET_ATTRIBUTE+"]"),o=Array.prototype.slice.call(r),a=[],i=void 0;return t&&t.length&&t.forEach((function(t){var n=document.createElement(e);for(var r in t)if(t.hasOwnProperty(r))if(r===c.TAG_PROPERTIES.INNER_HTML)n.innerHTML=t.innerHTML;else if(r===c.TAG_PROPERTIES.CSS_TEXT)n.styleSheet?n.styleSheet.cssText=t.cssText:n.appendChild(document.createTextNode(t.cssText));else{var s=void 0===t[r]?"":t[r];n.setAttribute(r,s)}n.setAttribute(c.HELMET_ATTRIBUTE,"true"),o.some((function(e,t){return i=t,n.isEqualNode(e)}))?o.splice(i,1):a.push(n)})),o.forEach((function(e){return e.parentNode.removeChild(e)})),a.forEach((function(e){return n.appendChild(e)})),{oldTags:o,newTags:a}},P=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},k=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[c.REACT_TAG_MAP[n]||n]=e[n],t}),t)},A=function(e,t,n){switch(e){case c.TAG_NAMES.TITLE:return{toComponent:function(){return e=t.title,n=t.titleAttributes,(r={key:e})[c.HELMET_ATTRIBUTE]=!0,o=k(n,r),[a.default.createElement(c.TAG_NAMES.TITLE,o,e)];var e,n,r,o},toString:function(){return function(e,t,n,r){var o=P(n),a=S(t);return o?"<"+e+" "+c.HELMET_ATTRIBUTE+'="true" '+o+">"+l(a,r)+"":"<"+e+" "+c.HELMET_ATTRIBUTE+'="true">'+l(a,r)+""}(e,t.title,t.titleAttributes,n)}};case c.ATTRIBUTE_NAMES.BODY:case c.ATTRIBUTE_NAMES.HTML:return{toComponent:function(){return k(t)},toString:function(){return P(t)}};default:return{toComponent:function(){return function(e,t){return t.map((function(t,n){var r,o=((r={key:n})[c.HELMET_ATTRIBUTE]=!0,r);return Object.keys(t).forEach((function(e){var n=c.REACT_TAG_MAP[e]||e;if(n===c.TAG_PROPERTIES.INNER_HTML||n===c.TAG_PROPERTIES.CSS_TEXT){var r=t.innerHTML||t.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=t[e]})),a.default.createElement(e,o)}))}(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var o=Object.keys(r).filter((function(e){return!(e===c.TAG_PROPERTIES.INNER_HTML||e===c.TAG_PROPERTIES.CSS_TEXT)})).reduce((function(e,t){var o=void 0===r[t]?t:t+'="'+l(r[t],n)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===c.SELF_CLOSING_TAGS.indexOf(e);return t+"<"+e+" "+c.HELMET_ATTRIBUTE+'="true" '+o+(i?"/>":">"+a+"")}),"")}(e,t,n)}}}};t.convertReactPropstoHtmlAttributes=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[c.HTML_TAG_MAP[n]||n]=e[n],t}),t)},t.handleClientStateChange=function(e){E&&w(E),e.defer?E=b((function(){x(e,(function(){E=null}))})):(x(e),E=null)},t.mapStateOnServer=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.linkTags,i=e.metaTags,s=e.noscriptTags,u=e.scriptTags,l=e.styleTags,p=e.title,f=void 0===p?"":p,d=e.titleAttributes;return{base:A(c.TAG_NAMES.BASE,t,r),bodyAttributes:A(c.ATTRIBUTE_NAMES.BODY,n,r),htmlAttributes:A(c.ATTRIBUTE_NAMES.HTML,o,r),link:A(c.TAG_NAMES.LINK,a,r),meta:A(c.TAG_NAMES.META,i,r),noscript:A(c.TAG_NAMES.NOSCRIPT,s,r),script:A(c.TAG_NAMES.SCRIPT,u,r),style:A(c.TAG_NAMES.STYLE,l,r),title:A(c.TAG_NAMES.TITLE,{title:f,titleAttributes:d},r)}},t.reducePropsToState=function(e){return{baseTag:h([c.TAG_PROPERTIES.HREF],e),bodyAttributes:d(c.ATTRIBUTE_NAMES.BODY,e),defer:g(e,c.HELMET_PROPS.DEFER),encode:g(e,c.HELMET_PROPS.ENCODE_SPECIAL_CHARACTERS),htmlAttributes:d(c.ATTRIBUTE_NAMES.HTML,e),linkTags:m(c.TAG_NAMES.LINK,[c.TAG_PROPERTIES.REL,c.TAG_PROPERTIES.HREF],e),metaTags:m(c.TAG_NAMES.META,[c.TAG_PROPERTIES.NAME,c.TAG_PROPERTIES.CHARSET,c.TAG_PROPERTIES.HTTPEQUIV,c.TAG_PROPERTIES.PROPERTY,c.TAG_PROPERTIES.ITEM_PROP],e),noscriptTags:m(c.TAG_NAMES.NOSCRIPT,[c.TAG_PROPERTIES.INNER_HTML],e),onChangeClientState:f(e),scriptTags:m(c.TAG_NAMES.SCRIPT,[c.TAG_PROPERTIES.SRC,c.TAG_PROPERTIES.INNER_HTML],e),styleTags:m(c.TAG_NAMES.STYLE,[c.TAG_PROPERTIES.CSS_TEXT],e),title:p(e),titleAttributes:d(c.ATTRIBUTE_NAMES.TITLE,e)}},t.requestAnimationFrame=b,t.warn=O}).call(this,n("yLpj"))},vOJQ:function(e,t,n){var r=n("lSNA");function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t1?r-1:0),a=1;a0?" Additional arguments: "+o.join(", "):"")));return w(i)}return b(t,e),t}(Error),R=/^[^\S\n]*?\/\* sc-component-id:\s*(\S+)\s+\*\//gm,I=function(e){var t=""+(e||""),n=[];return t.replace(R,(function(e,t,r){return n.push({componentId:t,matchIndex:r}),e})),n.map((function(e,r){var o=e.componentId,a=e.matchIndex,i=n[r+1];return{componentId:o,cssFromDOM:i?t.slice(a,i.matchIndex):t.slice(a)}}))},L=/^\s*\/\/.*$/gm,M=new o.a({global:!1,cascade:!0,keyframe:!1,prefix:!1,compress:!1,semicolon:!0}),D=new o.a({global:!1,cascade:!0,keyframe:!1,prefix:!0,compress:!1,semicolon:!1}),N=[],F=function(e){if(-2===e){var t=N;return N=[],t}},U=i()((function(e){N.push(e)})),H=void 0,B=void 0,G=void 0,q=function(e,t,n){return t>0&&-1!==n.slice(0,t).indexOf(B)&&n.slice(t-B.length,t)!==B?"."+H:e};D.use([function(e,t,n){2===e&&n.length&&n[0].lastIndexOf(B)>0&&(n[0]=n[0].replace(G,q))},U,F]),M.use([U,F]);var z=function(e){return M("",e)};function $(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"&",o=e.join("").replace(L,""),a=t&&n?n+" "+t+" { "+o+" }":o;return H=r,B=t,G=new RegExp("\\"+B+"\\b","g"),D(n||!t?"":t,a)}var W=function(){return n.nc},Y=function(e,t,n){n&&((e[t]||(e[t]=Object.create(null)))[n]=!0)},J=function(e,t){e[t]=Object.create(null)},V=function(e){return function(t,n){return void 0!==e[t]&&e[t][n]}},K=function(e){var t="";for(var n in e)t+=Object.keys(e[n]).join(" ")+" ";return t.trim()},X=function(e){if(e.sheet)return e.sheet;for(var t=e.ownerDocument.styleSheets.length,n=0;n"+e()+""}},ne=function(e,t){return function(){var n,r=((n={})[j]=K(t),n["data-styled-version"]="4.4.1",n),o=W();return o&&(r.nonce=o),s.a.createElement("style",y({},r,{dangerouslySetInnerHTML:{__html:e()}}))}},re=function(e){return function(){return Object.keys(e)}},oe=function(e,t){return e.createTextNode(Z(t))},ae=function e(t,n){var r=void 0===t?Object.create(null):t,o=void 0===n?Object.create(null):n,a=function(e){var t=o[e];return void 0!==t?t:o[e]=[""]},i=function(){var e="";for(var t in o){var n=o[t][0];n&&(e+=Z(t)+n)}return e};return{clone:function(){var t=function(e){var t=Object.create(null);for(var n in e)t[n]=y({},e[n]);return t}(r),n=Object.create(null);for(var a in o)n[a]=[o[a][0]];return e(t,n)},css:i,getIds:re(o),hasNameForId:V(r),insertMarker:a,insertRules:function(e,t,n){a(e)[0]+=t.join(" "),Y(r,e,n)},removeRules:function(e){var t=o[e];void 0!==t&&(t[0]="",J(r,e))},sealed:!1,styleTag:null,toElement:ne(i,r),toHTML:te(i,r)}},ie=function(e,t,n,r,o){if(P&&!n){var a=function(e,t,n){var r=document;e?r=e.ownerDocument:t&&(r=t.ownerDocument);var o=r.createElement("style");o.setAttribute(j,""),o.setAttribute("data-styled-version","4.4.1");var a=W();if(a&&o.setAttribute("nonce",a),o.appendChild(r.createTextNode("")),e&&!t)e.appendChild(o);else{if(!t||!e||!t.parentNode)throw new _(6);t.parentNode.insertBefore(o,n?t:t.nextSibling)}return o}(e,t,r);return k?function(e,t){var n=Object.create(null),r=Object.create(null),o=void 0!==t,a=!1,i=function(t){var o=r[t];return void 0!==o?o:(r[t]=oe(e.ownerDocument,t),e.appendChild(r[t]),n[t]=Object.create(null),r[t])},c=function(){var e="";for(var t in r)e+=r[t].data;return e};return{clone:function(){throw new _(5)},css:c,getIds:re(r),hasNameForId:V(n),insertMarker:i,insertRules:function(e,r,c){for(var s=i(e),u=[],l=r.length,p=0;p0&&(a=!0,t().insertRules(e+"-import",u))},removeRules:function(i){var c=r[i];if(void 0!==c){var s=oe(e.ownerDocument,i);e.replaceChild(s,c),r[i]=s,J(n,i),o&&a&&t().removeRules(i+"-import")}},sealed:!1,styleTag:e,toElement:ne(c,n),toHTML:te(c,n)}}(a,o):function(e,t){var n=Object.create(null),r=Object.create(null),o=[],a=void 0!==t,i=!1,c=function(e){var t=r[e];return void 0!==t?t:(r[e]=o.length,o.push(0),J(n,e),r[e])},s=function(){var t=X(e).cssRules,n="";for(var a in r){n+=Z(a);for(var i=r[a],c=ee(o,i),s=c-o[i];s0&&(i=!0,t().insertRules(r+"-import",h)),o[l]+=d,Y(n,r,u)},removeRules:function(c){var s=r[c];if(void 0!==s&&!1!==e.isConnected){var u=o[s];!function(e,t,n){for(var r=t-n,o=t;o>r;o-=1)e.deleteRule(o)}(X(e),ee(o,s)-1,u),o[s]=0,J(n,c),a&&i&&t().removeRules(c+"-import")}},sealed:!1,styleTag:e,toElement:ne(s,n),toHTML:te(s,n)}}(a,o)}return ae()},ce=/\s+/,se=void 0;se=P?k?40:1e3:-1;var ue=0,le=void 0,pe=function(){function e(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P?document.head:null,r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];g(this,e),this.getImportRuleTag=function(){var e=t.importRuleTag;if(void 0!==e)return e;var n=t.tags[0];return t.importRuleTag=ie(t.target,n?n.styleTag:null,t.forceServer,!0)},ue+=1,this.id=ue,this.forceServer=r,this.target=r?null:n,this.tagMap={},this.deferred={},this.rehydratedNames={},this.ignoreRehydratedNames={},this.tags=[],this.capacity=1,this.clones=[]}return e.prototype.rehydrate=function(){if(!P||this.forceServer)return this;var e=[],t=[],n=!1,r=document.querySelectorAll("style["+j+'][data-styled-version="4.4.1"]'),o=r.length;if(!o)return this;for(var a=0;a0&&void 0!==arguments[0]&&arguments[0];le=new e(void 0,t).rehydrate()},e.prototype.clone=function(){var t=new e(this.target,this.forceServer);return this.clones.push(t),t.tags=this.tags.map((function(e){for(var n=e.getIds(),r=e.clone(),o=0;o1?t-1:0),r=1;r=4;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),r=1540483477*(65535&r)+((1540483477*(r>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),n-=4,++o;switch(n){case 3:r^=(255&e.charCodeAt(o+2))<<16;case 2:r^=(255&e.charCodeAt(o+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(o)))+((1540483477*(r>>>16)&65535)<<16)}return((r=1540483477*(65535&(r^=r>>>13))+((1540483477*(r>>>16)&65535)<<16))^r>>>15)>>>0}var Oe=function(e){return String.fromCharCode(e+(e>25?39:97))};function Ee(e){var t="",n=void 0;for(n=e;n>52;n=Math.floor(n/52))t=Oe(n%52)+t;return Oe(n%52)+t}function xe(e,t){for(var n=0;n2&&void 0!==arguments[2]?arguments[2]:x,r=!!n&&e.theme===n.theme,o=e.theme&&!r?e.theme:t||n.theme;return o},Pe=/[[\].#*$><+~=|^:(),"'`-]+/g,ke=/(^-|-$)/g;function Ae(e){return e.replace(Pe,"-").replace(ke,"")}function _e(e){return"string"==typeof e&&!0}var Re={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDerivedStateFromProps:!0,propTypes:!0,type:!0},Ie={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},Le=((Se={})[l.ForwardRef]={$$typeof:!0,render:!0},Se),Me=Object.defineProperty,De=Object.getOwnPropertyNames,Ne=Object.getOwnPropertySymbols,Fe=void 0===Ne?function(){return[]}:Ne,Ue=Object.getOwnPropertyDescriptor,He=Object.getPrototypeOf,Be=Object.prototype,Ge=Array.prototype;function qe(e,t,n){if("string"!=typeof t){var r=He(t);r&&r!==Be&&qe(e,r,n);for(var o=Ge.concat(De(t),Fe(t)),a=Le[e.$$typeof]||Re,i=Le[t.$$typeof]||Re,c=o.length,s=void 0,u=void 0;c--;)if(u=o[c],!(Ie[u]||n&&n[u]||i&&i[u]||a&&a[u])&&(s=Ue(t,u)))try{Me(e,u,s)}catch(l){}return e}return e}var ze=Object(c.createContext)(),$e=ze.Consumer,We=function(e){function t(n){g(this,t);var r=w(this,e.call(this,n));return r.getContext=Object(p.a)(r.getContext.bind(r)),r.renderInner=r.renderInner.bind(r),r}return b(t,e),t.prototype.render=function(){return this.props.children?s.a.createElement(ze.Consumer,null,this.renderInner):null},t.prototype.renderInner=function(e){var t=this.getContext(this.props.theme,e);return s.a.createElement(ze.Provider,{value:t},this.props.children)},t.prototype.getTheme=function(e,t){if(S(e))return e(t);if(null===e||Array.isArray(e)||"object"!==(void 0===e?"undefined":m(e)))throw new _(8);return y({},t,e)},t.prototype.getContext=function(e,t){return this.getTheme(e,t)},t}(c.Component),Ye=(function(){function e(){g(this,e),this.masterSheet=pe.master,this.instance=this.masterSheet.clone(),this.sealed=!1}e.prototype.seal=function(){if(!this.sealed){var e=this.masterSheet.clones.indexOf(this.instance);this.masterSheet.clones.splice(e,1),this.sealed=!0}},e.prototype.collectStyles=function(e){if(this.sealed)throw new _(2);return s.a.createElement(Ve,{sheet:this.instance},e)},e.prototype.getStyleTags=function(){return this.seal(),this.instance.toHTML()},e.prototype.getStyleElement=function(){return this.seal(),this.instance.toReactElements()},e.prototype.interleaveWithNodeStream=function(e){throw new _(3)}}(),Object(c.createContext)()),Je=Ye.Consumer,Ve=function(e){function t(n){g(this,t);var r=w(this,e.call(this,n));return r.getContext=Object(p.a)(r.getContext),r}return b(t,e),t.prototype.getContext=function(e,t){if(e)return e;if(t)return new pe(t);throw new _(4)},t.prototype.render=function(){var e=this.props,t=e.children,n=e.sheet,r=e.target;return s.a.createElement(Ye.Provider,{value:this.getContext(n,r)},t)},t}(c.Component),Ke={};var Xe=function(e){function t(){g(this,t);var n=w(this,e.call(this));return n.attrs={},n.renderOuter=n.renderOuter.bind(n),n.renderInner=n.renderInner.bind(n),n}return b(t,e),t.prototype.render=function(){return s.a.createElement(Je,null,this.renderOuter)},t.prototype.renderOuter=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:pe.master;return this.styleSheet=e,this.props.forwardedComponent.componentStyle.isStatic?this.renderInner():s.a.createElement($e,null,this.renderInner)},t.prototype.renderInner=function(e){var t=this.props.forwardedComponent,n=t.componentStyle,r=t.defaultProps,o=(t.displayName,t.foldedComponentIds),a=t.styledComponentId,i=t.target,s=void 0;s=n.isStatic?this.generateAndInjectStyles(x,this.props):this.generateAndInjectStyles(je(this.props,e,r)||x,this.props);var u=this.props.as||this.attrs.as||i,l=_e(u),p={},d=y({},this.props,this.attrs),h=void 0;for(h in d)"forwardedComponent"!==h&&"as"!==h&&("forwardedRef"===h?p.ref=d[h]:"forwardedAs"===h?p.as=d[h]:l&&!Object(f.a)(h)||(p[h]=d[h]));return this.props.style&&this.attrs.style&&(p.style=y({},this.attrs.style,this.props.style)),p.className=Array.prototype.concat(o,a,s!==a?s:null,this.props.className,this.attrs.className).filter(Boolean).join(" "),Object(c.createElement)(u,p)},t.prototype.buildExecutionContext=function(e,t,n){var r=this,o=y({},t,{theme:e});return n.length?(this.attrs={},n.forEach((function(e){var t,n=e,a=!1,i=void 0,c=void 0;for(c in S(n)&&(n=n(o),a=!0),n)i=n[c],a||!S(i)||(t=i)&&t.prototype&&t.prototype.isReactComponent||C(i)||(i=i(o)),r.attrs[c]=i,o[c]=i})),o):o},t.prototype.generateAndInjectStyles=function(e,t){var n=t.forwardedComponent,r=n.attrs,o=n.componentStyle;n.warnTooManyClasses;return o.isStatic&&!r.length?o.generateAndInjectStyles(x,this.styleSheet):o.generateAndInjectStyles(this.buildExecutionContext(e,t,r),this.styleSheet)},t}(c.Component);function Qe(e,t,n){var r=C(e),o=!_e(e),a=t.displayName,i=void 0===a?function(e){return _e(e)?"styled."+e:"Styled("+T(e)+")"}(e):a,c=t.componentId,u=void 0===c?function(e,t,n){var r="string"!=typeof t?"sc":Ae(t),o=(Ke[r]||0)+1;Ke[r]=o;var a=r+"-"+e.generateName(r+o);return n?n+"-"+a:a}(Ce,t.displayName,t.parentComponentId):c,l=t.ParentComponent,p=void 0===l?Xe:l,f=t.attrs,h=void 0===f?E:f,m=t.displayName&&t.componentId?Ae(t.displayName)+"-"+t.componentId:t.componentId||u,g=r&&e.attrs?Array.prototype.concat(e.attrs,h).filter(Boolean):h,v=new Ce(r?e.componentStyle.rules.concat(n):n,g,m),b=void 0,w=function(e,t){return s.a.createElement(p,y({},e,{forwardedComponent:b,forwardedRef:t}))};return w.displayName=i,(b=s.a.forwardRef(w)).displayName=i,b.attrs=g,b.componentStyle=v,b.foldedComponentIds=r?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):E,b.styledComponentId=m,b.target=r?e.target:e,b.withComponent=function(e){var r=t.componentId,o=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(t,["componentId"]),a=r&&r+"-"+(_e(e)?e:Ae(T(e)));return Qe(e,y({},o,{attrs:g,componentId:a,ParentComponent:p}),n)},Object.defineProperty(b,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=r?Object(d.a)(e.defaultProps,t):t}}),b.toString=function(){return"."+b.styledComponentId},o&&qe(b,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,styledComponentId:!0,target:!0,withComponent:!0}),b}var Ze=function(e){return function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:x;if(!Object(l.isValidElementType)(n))throw new _(1,String(n));var o=function(){return t(n,r,be.apply(void 0,arguments))};return o.withConfig=function(o){return e(t,n,y({},r,o))},o.attrs=function(o){return e(t,n,y({},r,{attrs:Array.prototype.concat(r.attrs,o).filter(Boolean)}))},o}(Qe,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){Ze[e]=Ze(e)}));var et=function(){function e(t,n){g(this,e),this.rules=t,this.componentId=n,this.isStatic=xe(t,E),pe.master.hasId(n)||pe.master.deferredInject(n,[])}return e.prototype.createStyles=function(e,t){var n=$(ye(this.rules,e,t),"");t.inject(this.componentId,n)},e.prototype.removeStyles=function(e){var t=this.componentId;e.hasId(t)&&e.remove(t)},e.prototype.renderStyles=function(e,t){this.removeStyles(t),this.createStyles(e,t)},e}();function tt(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r0?l:n?[n]:[]},t.apiRunnerAsync=function(e,t,n){return r.reduce((function(n,r){return r.plugin[e]?n.then((function(){return r.plugin[e](t,r.options)})):n}),Promise.resolve())}},yLpj:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"==typeof window&&(n=window)}e.exports=n},yoRg:function(e,t,n){var r=n("UTVS"),o=n("/GqU"),a=n("TWQb").indexOf,i=n("0BK2");e.exports=function(e,t){var n,c=o(e),s=0,u=[];for(n in c)!r(i,n)&&r(c,n)&&u.push(n);for(;t.length>s;)r(c,n=t[s++])&&(~a(u,n)||u.push(n));return u}},zBJ4:function(e,t,n){var r=n("2oRo"),o=n("hh1v"),a=r.document,i=o(a)&&o(a.createElement);e.exports=function(e){return i?a.createElement(e):{}}},zk60:function(e,t,n){var r=n("2oRo"),o=n("kRJp");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}}},[["UxWs",3,25]]]); \ No newline at end of file diff --git a/app-74206dce61110b4a5815.js.LICENSE.txt b/app-c33704d3a1abd6ea3046.js.LICENSE.txt similarity index 100% rename from app-74206dce61110b4a5815.js.LICENSE.txt rename to app-c33704d3a1abd6ea3046.js.LICENSE.txt diff --git a/chunk-map.json b/chunk-map.json index 9728d410..1dfed0ff 100644 --- a/chunk-map.json +++ b/chunk-map.json @@ -1 +1 @@ -{"polyfill":["/polyfill-4b657be50967bad20dc3.js"],"app":["/app-74206dce61110b4a5815.js"],"component---examples-clusters-src-app-tsx":["/component---examples-clusters-src-app-tsx-ae435c98aa31b91df409.js"],"component---examples-controls-src-app-tsx":["/component---examples-controls-src-app-tsx-d64f7d83a89165ad193f.js"],"component---examples-custom-cursor-src-app-tsx":["/component---examples-custom-cursor-src-app-tsx-bd123514f109e45b15c9.js"],"component---examples-draggable-markers-src-app-tsx":["/component---examples-draggable-markers-src-app-tsx-c08cc0293d6f625308f7.js"],"component---examples-draw-polygon-src-app-tsx":["/component---examples-draw-polygon-src-app-tsx-4287be5a2ea35fbe0113.js"],"component---examples-filter-src-app-tsx":["/component---examples-filter-src-app-tsx-28b144519a629b0e0c53.js"],"component---examples-geocoder-src-app-tsx":["/component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js"],"component---examples-geojson-animation-src-app-tsx":["/component---examples-geojson-animation-src-app-tsx-8eaab89aa0e2583bf5b2.js"],"component---examples-geojson-src-app-tsx":["/component---examples-geojson-src-app-tsx-41c34d99e192325220b0.js"],"component---examples-heatmap-src-app-tsx":["/component---examples-heatmap-src-app-tsx-0b3732d7c7d5211df4e2.js"],"component---examples-interaction-src-app-tsx":["/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"],"component---examples-layers-src-app-tsx":["/component---examples-layers-src-app-tsx-cf13aa48a159342af3e3.js"],"component---examples-side-by-side-src-app-tsx":["/component---examples-side-by-side-src-app-tsx-c948e78a1a5129b01a93.js"],"component---examples-terrain-src-app-tsx":["/component---examples-terrain-src-app-tsx-66f43d9bdd9acd36ee6b.js"],"component---examples-viewport-animation-src-app-tsx":["/component---examples-viewport-animation-src-app-tsx-8c2f70b3ab14cbdc2a58.js"],"component---examples-zoom-to-bounds-src-app-tsx":["/component---examples-zoom-to-bounds-src-app-tsx-2d6b6e19aa1d94266910.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-861d77d9a70335a1bb15.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-b867458182f2a5e115e0.js"],"component---src-home-js":["/component---src-home-js-d077024a439c8e9d840e.js"]} \ No newline at end of file +{"polyfill":["/polyfill-4b657be50967bad20dc3.js"],"app":["/app-c33704d3a1abd6ea3046.js"],"component---examples-clusters-src-app-tsx":["/component---examples-clusters-src-app-tsx-ae435c98aa31b91df409.js"],"component---examples-controls-src-app-tsx":["/component---examples-controls-src-app-tsx-d64f7d83a89165ad193f.js"],"component---examples-custom-cursor-src-app-tsx":["/component---examples-custom-cursor-src-app-tsx-bd123514f109e45b15c9.js"],"component---examples-draggable-markers-src-app-tsx":["/component---examples-draggable-markers-src-app-tsx-c08cc0293d6f625308f7.js"],"component---examples-draw-polygon-src-app-tsx":["/component---examples-draw-polygon-src-app-tsx-4287be5a2ea35fbe0113.js"],"component---examples-filter-src-app-tsx":["/component---examples-filter-src-app-tsx-28b144519a629b0e0c53.js"],"component---examples-geocoder-src-app-tsx":["/component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js"],"component---examples-geojson-animation-src-app-tsx":["/component---examples-geojson-animation-src-app-tsx-8eaab89aa0e2583bf5b2.js"],"component---examples-geojson-src-app-tsx":["/component---examples-geojson-src-app-tsx-96c6855ca732a70078ab.js"],"component---examples-heatmap-src-app-tsx":["/component---examples-heatmap-src-app-tsx-c7a35aaf435bc075107c.js"],"component---examples-interaction-src-app-tsx":["/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"],"component---examples-layers-src-app-tsx":["/component---examples-layers-src-app-tsx-cf13aa48a159342af3e3.js"],"component---examples-side-by-side-src-app-tsx":["/component---examples-side-by-side-src-app-tsx-c948e78a1a5129b01a93.js"],"component---examples-terrain-src-app-tsx":["/component---examples-terrain-src-app-tsx-66f43d9bdd9acd36ee6b.js"],"component---examples-viewport-animation-src-app-tsx":["/component---examples-viewport-animation-src-app-tsx-8c2f70b3ab14cbdc2a58.js"],"component---examples-zoom-to-bounds-src-app-tsx":["/component---examples-zoom-to-bounds-src-app-tsx-2d6b6e19aa1d94266910.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-861d77d9a70335a1bb15.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-b867458182f2a5e115e0.js"],"component---src-home-js":["/component---src-home-js-d077024a439c8e9d840e.js"]} \ No newline at end of file diff --git a/component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js b/component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js similarity index 98% rename from component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js rename to component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js index 2242fe3d..cbf2abcd 100644 --- a/component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js +++ b/component---examples-geocoder-src-app-tsx-72ced1d3ef228c75c4a2.js @@ -1,2 +1,2 @@ -/*! For license information please see component---examples-geocoder-src-app-tsx-a4acc00560408dc65201.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{"+qE3":function(t,e,n){"use strict";var i,r="object"==typeof Reflect?Reflect:null,o=r&&"function"==typeof r.apply?r.apply:function(t,e,n){return Function.prototype.apply.call(t,e,n)};i=r&&"function"==typeof r.ownKeys?r.ownKeys:Object.getOwnPropertySymbols?function(t){return Object.getOwnPropertyNames(t).concat(Object.getOwnPropertySymbols(t))}:function(t){return Object.getOwnPropertyNames(t)};var s=Number.isNaN||function(t){return t!=t};function a(){a.init.call(this)}t.exports=a,t.exports.once=function(t,e){return new Promise((function(n,i){function r(){void 0!==o&&t.removeListener("error",o),n([].slice.call(arguments))}var o;"error"!==e&&(o=function(n){t.removeListener(e,r),i(n)},t.once("error",o)),t.once(e,r)}))},a.EventEmitter=a,a.prototype._events=void 0,a.prototype._eventsCount=0,a.prototype._maxListeners=void 0;var u=10;function c(t){if("function"!=typeof t)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof t)}function l(t){return void 0===t._maxListeners?a.defaultMaxListeners:t._maxListeners}function h(t,e,n,i){var r,o,s,a;if(c(n),void 0===(o=t._events)?(o=t._events=Object.create(null),t._eventsCount=0):(void 0!==o.newListener&&(t.emit("newListener",e,n.listener?n.listener:n),o=t._events),s=o[e]),void 0===s)s=o[e]=n,++t._eventsCount;else if("function"==typeof s?s=o[e]=i?[n,s]:[s,n]:i?s.unshift(n):s.push(n),(r=l(t))>0&&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 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);it?1:e>=t?0:NaN},d=function(e){var t;return 1===e.length&&(t=e,e=function(e,n){return l(t(e),n)}),{left:function(t,n,r,a){for(null==r&&(r=0),null==a&&(a=t.length);r>>1;e(t[c],n)<0?r=c+1:a=c}return r},right:function(t,n,r,a){for(null==r&&(r=0),null==a&&(a=t.length);r>>1;e(t[c],n)>0?a=c:r=c+1}return r}}};var s=d(l),b=s.right,h=(s.left,b);var g=function(e){return null===e?NaN:+e},m=Array.prototype,p=(m.slice,m.map,function(e,t,n){e=+e,t=+t,n=(a=arguments.length)<2?(t=e,e=0,1):a<3?1:+n;for(var r=-1,a=0|Math.max(0,Math.ceil((t-e)/n)),c=new Array(a);++r=1)return+n(e[r-1],r-1,e);var r,a=(r-1)*t,c=Math.floor(a),f=+n(e[c],c,e);return f+(+n(e[c+1],c+1,e)-f)*(a-c)}};function v(){}function w(e,t){var n=new v;if(e instanceof v)e.each((function(e,t){n.set(t,e)}));else if(Array.isArray(e)){var r,a=-1,c=e.length;if(null==t)for(;++a>8&15|t>>4&240,t>>4&15|240&t,(15&t)<<4|15&t,1):8===n?V(t>>24&255,t>>16&255,t>>8&255,(255&t)/255):4===n?V(t>>12&15|t>>8&240,t>>8&15|t>>4&240,t>>4&15|240&t,((15&t)<<4|15&t)/255):null):(t=j.exec(e))?new X(t[1],t[2],t[3],1):(t=H.exec(e))?new X(255*t[1]/100,255*t[2]/100,255*t[3]/100,1):(t=A.exec(e))?V(t[1],t[2],t[3],t[4]):(t=$.exec(e))?V(255*t[1]/100,255*t[2]/100,255*t[3]/100,t[4]):(t=L.exec(e))?_(t[1],t[2]/100,t[3]/100,1):(t=q.exec(e))?_(t[1],t[2]/100,t[3]/100,t[4]):P.hasOwnProperty(e)?R(P[e]):"transparent"===e?new X(NaN,NaN,NaN,0):null}function R(e){return new X(e>>16&255,e>>8&255,255&e,1)}function V(e,t,n,r){return r<=0&&(e=t=n=NaN),new X(e,t,n,r)}function W(e){return e instanceof S||(e=I(e)),e?new X((e=e.rgb()).r,e.g,e.b,e.opacity):new X}function J(e,t,n,r){return 1===arguments.length?W(e):new X(e,t,n,null==r?1:r)}function X(e,t,n,r){this.r=+e,this.g=+t,this.b=+n,this.opacity=+r}function Q(){return"#"+G(this.r)+G(this.g)+G(this.b)}function B(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"rgb(":"rgba(")+Math.max(0,Math.min(255,Math.round(this.r)||0))+", "+Math.max(0,Math.min(255,Math.round(this.g)||0))+", "+Math.max(0,Math.min(255,Math.round(this.b)||0))+(1===e?")":", "+e+")")}function G(e){return((e=Math.max(0,Math.min(255,Math.round(e)||0)))<16?"0":"")+e.toString(16)}function _(e,t,n,r){return r<=0?e=t=n=NaN:n<=0||n>=1?e=t=NaN:t<=0&&(e=NaN),new ee(e,t,n,r)}function K(e){if(e instanceof ee)return new ee(e.h,e.s,e.l,e.opacity);if(e instanceof S||(e=I(e)),!e)return new ee;if(e instanceof ee)return e;var t=(e=e.rgb()).r/255,n=e.g/255,r=e.b/255,a=Math.min(t,n,r),c=Math.max(t,n,r),f=NaN,i=c-a,u=(c+a)/2;return i?(f=t===c?(n-r)/i+6*(n0&&u<1?0:f,new ee(f,i,u,e.opacity)}function ee(e,t,n,r){this.h=+e,this.s=+t,this.l=+n,this.opacity=+r}function te(e,t,n){return 255*(e<60?t+(n-t)*e/60:e<180?n:e<240?t+(n-t)*(240-e)/60:t)}function ne(e,t,n,r,a){var c=e*e,f=c*e;return((1-3*e+3*c-f)*t+(4-6*c+3*f)*n+(1+3*e+3*c-3*f)*r+f*a)/6}N(S,I,{copy:function(e){return Object.assign(new this.constructor,this,e)},displayable:function(){return this.rgb().displayable()},hex:z,formatHex:z,formatHsl:function(){return K(this).formatHsl()},formatRgb:Z,toString:Z}),N(X,J,k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new X(this.r*e,this.g*e,this.b*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new X(this.r*e,this.g*e,this.b*e,this.opacity)},rgb:function(){return this},displayable:function(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:Q,formatHex:Q,formatRgb:B,toString:B})),N(ee,(function(e,t,n,r){return 1===arguments.length?K(e):new ee(e,t,n,null==r?1:r)}),k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new ee(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new ee(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=this.h%360+360*(this.h<0),t=isNaN(e)||isNaN(this.s)?0:this.s,n=this.l,r=n+(n<.5?n:1-n)*t,a=2*n-r;return new X(te(e>=240?e-240:e+120,a,r),te(e,a,r),te(e<120?e+240:e-120,a,r),this.opacity)},displayable:function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl:function(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"hsl(":"hsla(")+(this.h||0)+", "+100*(this.s||0)+"%, "+100*(this.l||0)+"%"+(1===e?")":", "+e+")")}}));var re=function(e){return function(){return e}};function ae(e,t){return function(n){return e+n*t}}function ce(e){return 1==(e=+e)?fe:function(t,n){return n-t?function(e,t,n){return e=Math.pow(e,n),t=Math.pow(t,n)-e,n=1/n,function(r){return Math.pow(e+r*t,n)}}(t,n,e):re(isNaN(t)?n:t)}}function fe(e,t){var n=t-e;return n?ae(e,n):re(isNaN(e)?t:e)}(function e(t){var n=ce(t);function r(e,t){var r=n((e=J(e)).r,(t=J(t)).r),a=n(e.g,t.g),c=n(e.b,t.b),f=fe(e.opacity,t.opacity);return function(t){return e.r=r(t),e.g=a(t),e.b=c(t),e.opacity=f(t),e+""}}return r.gamma=e,r})(1);function ie(e){return function(t){var n,r,a=t.length,c=new Array(a),f=new Array(a),i=new Array(a);for(n=0;n=1?(n=1,t-1):Math.floor(n*t),a=e[r],c=e[r+1],f=r>0?e[r-1]:2*a-c,i=r=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;function le(e){if(!(t=oe.exec(e)))throw new Error("invalid format: "+e);var t;return new de({fill:t[1],align:t[2],sign:t[3],symbol:t[4],zero:t[5],width:t[6],comma:t[7],precision:t[8]&&t[8].slice(1),trim:t[9],type:t[10]})}function de(e){this.fill=void 0===e.fill?" ":e.fill+"",this.align=void 0===e.align?">":e.align+"",this.sign=void 0===e.sign?"-":e.sign+"",this.symbol=void 0===e.symbol?"":e.symbol+"",this.zero=!!e.zero,this.width=void 0===e.width?void 0:+e.width,this.comma=!!e.comma,this.precision=void 0===e.precision?void 0:+e.precision,this.trim=!!e.trim,this.type=void 0===e.type?"":e.type+""}le.prototype=de.prototype,de.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(void 0===this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(void 0===this.precision?"":"."+Math.max(0,0|this.precision))+(this.trim?"~":"")+this.type};function se(e,t){if((n=(e=t?e.toExponential(t-1):e.toExponential()).indexOf("e"))<0)return null;var n,r=e.slice(0,n);return[r.length>1?r[0]+r.slice(2):r,+e.slice(n+1)]}var be,he,ge=function(e){return(e=se(Math.abs(e)))?e[1]:NaN},me=function(e,t){var n=se(e,t);if(!n)return e+"";var r=n[0],a=n[1];return a<0?"0."+new Array(-a).join("0")+r:r.length>a+1?r.slice(0,a+1)+"."+r.slice(a+1):r+new Array(a-r.length+2).join("0")},pe={"%":function(e,t){return(100*e).toFixed(t)},b:function(e){return Math.round(e).toString(2)},c:function(e){return e+""},d:function(e){return Math.abs(e=Math.round(e))>=1e21?e.toLocaleString("en").replace(/,/g,""):e.toString(10)},e:function(e,t){return e.toExponential(t)},f:function(e,t){return e.toFixed(t)},g:function(e,t){return e.toPrecision(t)},o:function(e){return Math.round(e).toString(8)},p:function(e,t){return me(100*e,t)},r:me,s:function(e,t){var n=se(e,t);if(!n)return e+"";var r=n[0],a=n[1],c=a-(be=3*Math.max(-8,Math.min(8,Math.floor(a/3))))+1,f=r.length;return c===f?r:c>f?r+new Array(c-f+1).join("0"):c>0?r.slice(0,c)+"."+r.slice(c):"0."+new Array(1-c).join("0")+se(e,Math.max(0,t+c-1))[0]},X:function(e){return Math.round(e).toString(16).toUpperCase()},x:function(e){return Math.round(e).toString(16)}},ye=function(e){return e},ve=Array.prototype.map,we=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];he=function(e){var t,n,r=void 0===e.grouping||void 0===e.thousands?ye:(t=ve.call(e.grouping,Number),n=e.thousands+"",function(e,r){for(var a=e.length,c=[],f=0,i=t[0],u=0;a>0&&i>0&&(u+i+1>r&&(i=Math.max(1,r-u)),c.push(e.substring(a-=i,a+i)),!((u+=i+1)>r));)i=t[f=(f+1)%t.length];return c.reverse().join(n)}),a=void 0===e.currency?"":e.currency[0]+"",c=void 0===e.currency?"":e.currency[1]+"",f=void 0===e.decimal?".":e.decimal+"",i=void 0===e.numerals?ye:function(e){return function(t){return t.replace(/[0-9]/g,(function(t){return e[+t]}))}}(ve.call(e.numerals,String)),u=void 0===e.percent?"%":e.percent+"",o=void 0===e.minus?"-":e.minus+"",l=void 0===e.nan?"NaN":e.nan+"";function d(e){var t=(e=le(e)).fill,n=e.align,d=e.sign,s=e.symbol,b=e.zero,h=e.width,g=e.comma,m=e.precision,p=e.trim,y=e.type;"n"===y?(g=!0,y="g"):pe[y]||(void 0===m&&(m=12),p=!0,y="g"),(b||"0"===t&&"="===n)&&(b=!0,t="0",n="=");var v="$"===s?a:"#"===s&&/[boxX]/.test(y)?"0"+y.toLowerCase():"",w="$"===s?c:/[%p]/.test(y)?u:"",M=pe[y],T=/[defgprs%]/.test(y);function x(e){var a,c,u,s=v,x=w;if("c"===y)x=M(e)+x,e="";else{var C=(e=+e)<0||1/e<0;if(e=isNaN(e)?l:M(Math.abs(e),m),p&&(e=function(e){e:for(var t,n=e.length,r=1,a=-1;r0&&(a=0)}return a>0?e.slice(0,a)+e.slice(t+1):e}(e)),C&&0==+e&&"+"!==d&&(C=!1),s=(C?"("===d?d:o:"-"===d||"("===d?"":d)+s,x=("s"===y?we[8+be/3]:"")+x+(C&&"("===d?")":""),T)for(a=-1,c=e.length;++a(u=e.charCodeAt(a))||u>57){x=(46===u?f+e.slice(a+1):e.slice(a))+x,e=e.slice(0,a);break}}g&&!b&&(e=r(e,1/0));var U=s.length+e.length+x.length,D=U>1)+s+e+x+D.slice(U);break;default:e=D+s+e+x}return i(e)}return m=void 0===m?6:/[gprs]/.test(y)?Math.max(1,Math.min(21,m)):Math.max(0,Math.min(20,m)),x.toString=function(){return e+""},x}return{format:d,formatPrefix:function(e,t){var n=d(((e=le(e)).type="f",e)),r=3*Math.max(-8,Math.min(8,Math.floor(ge(t)/3))),a=Math.pow(10,-r),c=we[8+r/3];return function(e){return n(a*e)+c}}}}({decimal:".",thousands:",",grouping:[3],currency:["$",""],minus:"-"}),he.format,he.formatPrefix;var Me=new Date,Te=new Date;function xe(e,t,n,r){function a(t){return e(t=0===arguments.length?new Date:new Date(+t)),t}return a.floor=function(t){return e(t=new Date(+t)),t},a.ceil=function(n){return e(n=new Date(n-1)),t(n,1),e(n),n},a.round=function(e){var t=a(e),n=a.ceil(e);return e-t0))return i;do{i.push(f=new Date(+n)),t(n,c),e(n)}while(f=t)for(;e(t),!n(t);)t.setTime(t-1)}),(function(e,r){if(e>=e)if(r<0)for(;++r<=0;)for(;t(e,-1),!n(e););else for(;--r>=0;)for(;t(e,1),!n(e););}))},n&&(a.count=function(t,r){return Me.setTime(+t),Te.setTime(+r),e(Me),e(Te),Math.floor(n(Me,Te))},a.every=function(e){return e=Math.floor(e),isFinite(e)&&e>0?e>1?a.filter(r?function(t){return r(t)%e==0}:function(t){return a.count(0,t)%e==0}):a:null}),a}var Ce=xe((function(e){e.setMonth(0,1),e.setHours(0,0,0,0)}),(function(e,t){e.setFullYear(e.getFullYear()+t)}),(function(e,t){return t.getFullYear()-e.getFullYear()}),(function(e){return e.getFullYear()}));Ce.every=function(e){return isFinite(e=Math.floor(e))&&e>0?xe((function(t){t.setFullYear(Math.floor(t.getFullYear()/e)*e),t.setMonth(0,1),t.setHours(0,0,0,0)}),(function(t,n){t.setFullYear(t.getFullYear()+n*e)})):null};var Ue=Ce,De=(Ce.range,xe((function(e){e.setDate(1),e.setHours(0,0,0,0)}),(function(e,t){e.setMonth(e.getMonth()+t)}),(function(e,t){return t.getMonth()-e.getMonth()+12*(t.getFullYear()-e.getFullYear())}),(function(e){return e.getMonth()})));De.range;function Ne(e){return xe((function(t){t.setDate(t.getDate()-(t.getDay()+7-e)%7),t.setHours(0,0,0,0)}),(function(e,t){e.setDate(e.getDate()+7*t)}),(function(e,t){return(t-e-6e4*(t.getTimezoneOffset()-e.getTimezoneOffset()))/6048e5}))}var ke=Ne(0),Se=Ne(1),Fe=Ne(2),Ee=Ne(3),Ye=Ne(4),Oe=Ne(5),je=Ne(6),He=(ke.range,Se.range,Fe.range,Ee.range,Ye.range,Oe.range,je.range,xe((function(e){e.setHours(0,0,0,0)}),(function(e,t){e.setDate(e.getDate()+t)}),(function(e,t){return(t-e-6e4*(t.getTimezoneOffset()-e.getTimezoneOffset()))/864e5}),(function(e){return e.getDate()-1}))),Ae=He,$e=(He.range,xe((function(e){e.setTime(e-e.getMilliseconds()-1e3*e.getSeconds()-6e4*e.getMinutes())}),(function(e,t){e.setTime(+e+36e5*t)}),(function(e,t){return(t-e)/36e5}),(function(e){return e.getHours()}))),Le=($e.range,xe((function(e){e.setTime(e-e.getMilliseconds()-1e3*e.getSeconds())}),(function(e,t){e.setTime(+e+6e4*t)}),(function(e,t){return(t-e)/6e4}),(function(e){return e.getMinutes()}))),qe=(Le.range,xe((function(e){e.setTime(e-e.getMilliseconds())}),(function(e,t){e.setTime(+e+1e3*t)}),(function(e,t){return(t-e)/1e3}),(function(e){return e.getUTCSeconds()}))),Pe=(qe.range,xe((function(){}),(function(e,t){e.setTime(+e+t)}),(function(e,t){return t-e})));Pe.every=function(e){return e=Math.floor(e),isFinite(e)&&e>0?e>1?xe((function(t){t.setTime(Math.floor(t/e)*e)}),(function(t,n){t.setTime(+t+n*e)}),(function(t,n){return(n-t)/e})):Pe:null};Pe.range;function ze(e){return xe((function(t){t.setUTCDate(t.getUTCDate()-(t.getUTCDay()+7-e)%7),t.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCDate(e.getUTCDate()+7*t)}),(function(e,t){return(t-e)/6048e5}))}var Ze=ze(0),Ie=ze(1),Re=ze(2),Ve=ze(3),We=ze(4),Je=ze(5),Xe=ze(6),Qe=(Ze.range,Ie.range,Re.range,Ve.range,We.range,Je.range,Xe.range,xe((function(e){e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCDate(e.getUTCDate()+t)}),(function(e,t){return(t-e)/864e5}),(function(e){return e.getUTCDate()-1}))),Be=Qe,Ge=(Qe.range,xe((function(e){e.setUTCMonth(0,1),e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCFullYear(e.getUTCFullYear()+t)}),(function(e,t){return t.getUTCFullYear()-e.getUTCFullYear()}),(function(e){return e.getUTCFullYear()})));Ge.every=function(e){return isFinite(e=Math.floor(e))&&e>0?xe((function(t){t.setUTCFullYear(Math.floor(t.getUTCFullYear()/e)*e),t.setUTCMonth(0,1),t.setUTCHours(0,0,0,0)}),(function(t,n){t.setUTCFullYear(t.getUTCFullYear()+n*e)})):null};var _e=Ge;Ge.range;function Ke(e){if(0<=e.y&&e.y<100){var t=new Date(-1,e.m,e.d,e.H,e.M,e.S,e.L);return t.setFullYear(e.y),t}return new Date(e.y,e.m,e.d,e.H,e.M,e.S,e.L)}function et(e){if(0<=e.y&&e.y<100){var t=new Date(Date.UTC(-1,e.m,e.d,e.H,e.M,e.S,e.L));return t.setUTCFullYear(e.y),t}return new Date(Date.UTC(e.y,e.m,e.d,e.H,e.M,e.S,e.L))}function tt(e,t,n){return{y:e,m:t,d:n,H:0,M:0,S:0,L:0}}var nt,rt={"-":"",_:" ",0:"0"},at=/^\s*\d+/,ct=/^%/,ft=/[\\^$*+?|[\]().{}]/g;function it(e,t,n){var r=e<0?"-":"",a=(r?-e:e)+"",c=a.length;return r+(c68?1900:2e3),n+r[0].length):-1}function yt(e,t,n){var r=/^(Z)|([+-]\d\d)(?::?(\d\d))?/.exec(t.slice(n,n+6));return r?(e.Z=r[1]?0:-(r[2]+(r[3]||"00")),n+r[0].length):-1}function vt(e,t,n){var r=at.exec(t.slice(n,n+1));return r?(e.q=3*r[0]-3,n+r[0].length):-1}function wt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.m=r[0]-1,n+r[0].length):-1}function Mt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.d=+r[0],n+r[0].length):-1}function Tt(e,t,n){var r=at.exec(t.slice(n,n+3));return r?(e.m=0,e.d=+r[0],n+r[0].length):-1}function xt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.H=+r[0],n+r[0].length):-1}function Ct(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.M=+r[0],n+r[0].length):-1}function Ut(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.S=+r[0],n+r[0].length):-1}function Dt(e,t,n){var r=at.exec(t.slice(n,n+3));return r?(e.L=+r[0],n+r[0].length):-1}function Nt(e,t,n){var r=at.exec(t.slice(n,n+6));return r?(e.L=Math.floor(r[0]/1e3),n+r[0].length):-1}function kt(e,t,n){var r=ct.exec(t.slice(n,n+1));return r?n+r[0].length:-1}function St(e,t,n){var r=at.exec(t.slice(n));return r?(e.Q=+r[0],n+r[0].length):-1}function Ft(e,t,n){var r=at.exec(t.slice(n));return r?(e.s=+r[0],n+r[0].length):-1}function Et(e,t){return it(e.getDate(),t,2)}function Yt(e,t){return it(e.getHours(),t,2)}function Ot(e,t){return it(e.getHours()%12||12,t,2)}function jt(e,t){return it(1+Ae.count(Ue(e),e),t,3)}function Ht(e,t){return it(e.getMilliseconds(),t,3)}function At(e,t){return Ht(e,t)+"000"}function $t(e,t){return it(e.getMonth()+1,t,2)}function Lt(e,t){return it(e.getMinutes(),t,2)}function qt(e,t){return it(e.getSeconds(),t,2)}function Pt(e){var t=e.getDay();return 0===t?7:t}function zt(e,t){return it(ke.count(Ue(e)-1,e),t,2)}function Zt(e){var t=e.getDay();return t>=4||0===t?Ye(e):Ye.ceil(e)}function It(e,t){return e=Zt(e),it(Ye.count(Ue(e),e)+(4===Ue(e).getDay()),t,2)}function Rt(e){return e.getDay()}function Vt(e,t){return it(Se.count(Ue(e)-1,e),t,2)}function Wt(e,t){return it(e.getFullYear()%100,t,2)}function Jt(e,t){return it((e=Zt(e)).getFullYear()%100,t,2)}function Xt(e,t){return it(e.getFullYear()%1e4,t,4)}function Qt(e,t){var n=e.getDay();return it((e=n>=4||0===n?Ye(e):Ye.ceil(e)).getFullYear()%1e4,t,4)}function Bt(e){var t=e.getTimezoneOffset();return(t>0?"-":(t*=-1,"+"))+it(t/60|0,"0",2)+it(t%60,"0",2)}function Gt(e,t){return it(e.getUTCDate(),t,2)}function _t(e,t){return it(e.getUTCHours(),t,2)}function Kt(e,t){return it(e.getUTCHours()%12||12,t,2)}function en(e,t){return it(1+Be.count(_e(e),e),t,3)}function tn(e,t){return it(e.getUTCMilliseconds(),t,3)}function nn(e,t){return tn(e,t)+"000"}function rn(e,t){return it(e.getUTCMonth()+1,t,2)}function an(e,t){return it(e.getUTCMinutes(),t,2)}function cn(e,t){return it(e.getUTCSeconds(),t,2)}function fn(e){var t=e.getUTCDay();return 0===t?7:t}function un(e,t){return it(Ze.count(_e(e)-1,e),t,2)}function on(e){var t=e.getUTCDay();return t>=4||0===t?We(e):We.ceil(e)}function ln(e,t){return e=on(e),it(We.count(_e(e),e)+(4===_e(e).getUTCDay()),t,2)}function dn(e){return e.getUTCDay()}function sn(e,t){return it(Ie.count(_e(e)-1,e),t,2)}function bn(e,t){return it(e.getUTCFullYear()%100,t,2)}function hn(e,t){return it((e=on(e)).getUTCFullYear()%100,t,2)}function gn(e,t){return it(e.getUTCFullYear()%1e4,t,4)}function mn(e,t){var n=e.getUTCDay();return it((e=n>=4||0===n?We(e):We.ceil(e)).getUTCFullYear()%1e4,t,4)}function pn(){return"+0000"}function yn(){return"%"}function vn(e){return+e}function wn(e){return Math.floor(+e/1e3)}!function(e){nt=function(e){var t=e.dateTime,n=e.date,r=e.time,a=e.periods,c=e.days,f=e.shortDays,i=e.months,u=e.shortMonths,o=ot(a),l=lt(a),d=ot(c),s=lt(c),b=ot(f),h=lt(f),g=ot(i),m=lt(i),p=ot(u),y=lt(u),v={a:function(e){return f[e.getDay()]},A:function(e){return c[e.getDay()]},b:function(e){return u[e.getMonth()]},B:function(e){return i[e.getMonth()]},c:null,d:Et,e:Et,f:At,g:Jt,G:Qt,H:Yt,I:Ot,j:jt,L:Ht,m:$t,M:Lt,p:function(e){return a[+(e.getHours()>=12)]},q:function(e){return 1+~~(e.getMonth()/3)},Q:vn,s:wn,S:qt,u:Pt,U:zt,V:It,w:Rt,W:Vt,x:null,X:null,y:Wt,Y:Xt,Z:Bt,"%":yn},w={a:function(e){return f[e.getUTCDay()]},A:function(e){return c[e.getUTCDay()]},b:function(e){return u[e.getUTCMonth()]},B:function(e){return i[e.getUTCMonth()]},c:null,d:Gt,e:Gt,f:nn,g:hn,G:mn,H:_t,I:Kt,j:en,L:tn,m:rn,M:an,p:function(e){return a[+(e.getUTCHours()>=12)]},q:function(e){return 1+~~(e.getUTCMonth()/3)},Q:vn,s:wn,S:cn,u:fn,U:un,V:ln,w:dn,W:sn,x:null,X:null,y:bn,Y:gn,Z:pn,"%":yn},M={a:function(e,t,n){var r=b.exec(t.slice(n));return r?(e.w=h[r[0].toLowerCase()],n+r[0].length):-1},A:function(e,t,n){var r=d.exec(t.slice(n));return r?(e.w=s[r[0].toLowerCase()],n+r[0].length):-1},b:function(e,t,n){var r=p.exec(t.slice(n));return r?(e.m=y[r[0].toLowerCase()],n+r[0].length):-1},B:function(e,t,n){var r=g.exec(t.slice(n));return r?(e.m=m[r[0].toLowerCase()],n+r[0].length):-1},c:function(e,n,r){return C(e,t,n,r)},d:Mt,e:Mt,f:Nt,g:pt,G:mt,H:xt,I:xt,j:Tt,L:Dt,m:wt,M:Ct,p:function(e,t,n){var r=o.exec(t.slice(n));return r?(e.p=l[r[0].toLowerCase()],n+r[0].length):-1},q:vt,Q:St,s:Ft,S:Ut,u:st,U:bt,V:ht,w:dt,W:gt,x:function(e,t,r){return C(e,n,t,r)},X:function(e,t,n){return C(e,r,t,n)},y:pt,Y:mt,Z:yt,"%":kt};function T(e,t){return function(n){var r,a,c,f=[],i=-1,u=0,o=e.length;for(n instanceof Date||(n=new Date(+n));++i53)return null;"w"in c||(c.w=1),"Z"in c?(a=(r=et(tt(c.y,0,1))).getUTCDay(),r=a>4||0===a?Ie.ceil(r):Ie(r),r=Be.offset(r,7*(c.V-1)),c.y=r.getUTCFullYear(),c.m=r.getUTCMonth(),c.d=r.getUTCDate()+(c.w+6)%7):(a=(r=Ke(tt(c.y,0,1))).getDay(),r=a>4||0===a?Se.ceil(r):Se(r),r=Ae.offset(r,7*(c.V-1)),c.y=r.getFullYear(),c.m=r.getMonth(),c.d=r.getDate()+(c.w+6)%7)}else("W"in c||"U"in c)&&("w"in c||(c.w="u"in c?c.u%7:"W"in c?1:0),a="Z"in c?et(tt(c.y,0,1)).getUTCDay():Ke(tt(c.y,0,1)).getDay(),c.m=0,c.d="W"in c?(c.w+6)%7+7*c.W-(a+5)%7:c.w+7*c.U-(a+6)%7);return"Z"in c?(c.H+=c.Z/100|0,c.M+=c.Z%100,et(c)):Ke(c)}}function C(e,t,n,r){for(var a,c,f=0,i=t.length,u=n.length;f=u)return-1;if(37===(a=t.charCodeAt(f++))){if(a=t.charAt(f++),!(c=M[a in rt?t.charAt(f++):a])||(r=c(e,n,r))<0)return-1}else if(a!=n.charCodeAt(r++))return-1}return r}return v.x=T(n,v),v.X=T(r,v),v.c=T(t,v),w.x=T(n,w),w.X=T(r,w),w.c=T(t,w),{format:function(e){var t=T(e+="",v);return t.toString=function(){return e},t},parse:function(e){var t=x(e+="",!1);return t.toString=function(){return e},t},utcFormat:function(e){var t=T(e+="",w);return t.toString=function(){return e},t},utcParse:function(e){var t=x(e+="",!0);return t.toString=function(){return e},t}}}(e),nt.format,nt.parse,nt.utcFormat,nt.utcParse}({dateTime:"%x, %X",date:"%-m/%-d/%Y",time:"%-I:%M:%S %p",periods:["AM","PM"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]});var Mn=xe((function(e){e.setUTCDate(1),e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCMonth(e.getUTCMonth()+t)}),(function(e,t){return t.getUTCMonth()-e.getUTCMonth()+12*(t.getUTCFullYear()-e.getUTCFullYear())}),(function(e){return e.getUTCMonth()})),Tn=(Mn.range,xe((function(e){e.setUTCMinutes(0,0,0)}),(function(e,t){e.setTime(+e+36e5*t)}),(function(e,t){return(t-e)/36e5}),(function(e){return e.getUTCHours()}))),xn=(Tn.range,xe((function(e){e.setUTCSeconds(0,0)}),(function(e,t){e.setTime(+e+6e4*t)}),(function(e,t){return(t-e)/6e4}),(function(e){return e.getUTCMinutes()}))),Cn=(xn.range,function(e){return e.match(/.{6}/g).map((function(e){return"#"+e}))}),Un=(Cn("1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf"),Cn("393b795254a36b6ecf9c9ede6379398ca252b5cf6bcedb9c8c6d31bd9e39e7ba52e7cb94843c39ad494ad6616be7969c7b4173a55194ce6dbdde9ed6"),Cn("3182bd6baed69ecae1c6dbefe6550dfd8d3cfdae6bfdd0a231a35474c476a1d99bc7e9c0756bb19e9ac8bcbddcdadaeb636363969696bdbdbdd9d9d9"),Cn("1f77b4aec7e8ff7f0effbb782ca02c98df8ad62728ff98969467bdc5b0d58c564bc49c94e377c2f7b6d27f7f7fc7c7c7bcbd22dbdb8d17becf9edae5"),Math.PI/180),Dn=180/Math.PI,Nn=-.14861,kn=1.78277,Sn=-.29227,Fn=-.90649,En=1.97294,Yn=En*Fn,On=En*kn,jn=kn*Sn-Fn*Nn;function Hn(e){if(e instanceof $n)return new $n(e.h,e.s,e.l,e.opacity);e instanceof X||(e=W(e));var t=e.r/255,n=e.g/255,r=e.b/255,a=(jn*r+Yn*t-On*n)/(jn+Yn-On),c=r-a,f=(En*(n-a)-Sn*c)/Fn,i=Math.sqrt(f*f+c*c)/(En*a*(1-a)),u=i?Math.atan2(f,c)*Dn-120:NaN;return new $n(u<0?u+360:u,i,a,e.opacity)}function An(e,t,n,r){return 1===arguments.length?Hn(e):new $n(e,t,n,null==r?1:r)}function $n(e,t,n,r){this.h=+e,this.s=+t,this.l=+n,this.opacity=+r}function Ln(e){return function t(n){function r(t,r){var a=e((t=An(t)).h,(r=An(r)).h),c=fe(t.s,r.s),f=fe(t.l,r.l),i=fe(t.opacity,r.opacity);return function(e){return t.h=a(e),t.s=c(e),t.l=f(Math.pow(e,n)),t.opacity=i(e),t+""}}return n=+n,r.gamma=t,r}(1)}N($n,An,k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new $n(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new $n(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=isNaN(this.h)?0:(this.h+120)*Un,t=+this.l,n=isNaN(this.s)?0:this.s*t*(1-t),r=Math.cos(e),a=Math.sin(e);return new X(255*(t+n*(Nn*r+kn*a)),255*(t+n*(Sn*r+Fn*a)),255*(t+n*(En*r)),this.opacity)}}));Ln((function(e,t){var n=t-e;return n?ae(e,n>180||n<-180?n-360*Math.round(n/360):n):re(isNaN(e)?t:e)}));var qn=Ln(fe);qn(An(300,.5,0),An(-240,.5,1)),qn(An(-100,.75,.35),An(80,1.5,.8)),qn(An(260,.75,.35),An(80,1.5,.8)),An();function Pn(e){var t=e.length;return function(n){return e[Math.max(0,Math.min(t-1,Math.floor(n*t)))]}}Pn(Cn("44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725")),Pn(Cn("00000401000501010601010802010902020b02020d03030f03031204041405041606051806051a07061c08071e0907200a08220b09240c09260d0a290e0b2b100b2d110c2f120d31130d34140e36150e38160f3b180f3d19103f1a10421c10441d11471e114920114b21114e22115024125325125527125829115a2a115c2c115f2d11612f116331116533106734106936106b38106c390f6e3b0f703d0f713f0f72400f74420f75440f764510774710784910784a10794c117a4e117b4f127b51127c52137c54137d56147d57157e59157e5a167e5c167f5d177f5f187f601880621980641a80651a80671b80681c816a1c816b1d816d1d816e1e81701f81721f817320817521817621817822817922827b23827c23827e24828025828125818326818426818627818827818928818b29818c29818e2a81902a81912b81932b80942c80962c80982d80992d809b2e7f9c2e7f9e2f7fa02f7fa1307ea3307ea5317ea6317da8327daa337dab337cad347cae347bb0357bb2357bb3367ab5367ab73779b83779ba3878bc3978bd3977bf3a77c03a76c23b75c43c75c53c74c73d73c83e73ca3e72cc3f71cd4071cf4070d0416fd2426fd3436ed5446dd6456cd8456cd9466bdb476adc4869de4968df4a68e04c67e24d66e34e65e44f64e55064e75263e85362e95462ea5661eb5760ec5860ed5a5fee5b5eef5d5ef05f5ef1605df2625df2645cf3655cf4675cf4695cf56b5cf66c5cf66e5cf7705cf7725cf8745cf8765cf9785df9795df97b5dfa7d5efa7f5efa815ffb835ffb8560fb8761fc8961fc8a62fc8c63fc8e64fc9065fd9266fd9467fd9668fd9869fd9a6afd9b6bfe9d6cfe9f6dfea16efea36ffea571fea772fea973feaa74feac76feae77feb078feb27afeb47bfeb67cfeb77efeb97ffebb81febd82febf84fec185fec287fec488fec68afec88cfeca8dfecc8ffecd90fecf92fed194fed395fed597fed799fed89afdda9cfddc9efddea0fde0a1fde2a3fde3a5fde5a7fde7a9fde9aafdebacfcecaefceeb0fcf0b2fcf2b4fcf4b6fcf6b8fcf7b9fcf9bbfcfbbdfcfdbf")),Pn(Cn("00000401000501010601010802010a02020c02020e03021004031204031405041706041907051b08051d09061f0a07220b07240c08260d08290e092b10092d110a30120a32140b34150b37160b39180c3c190c3e1b0c411c0c431e0c451f0c48210c4a230c4c240c4f260c51280b53290b552b0b572d0b592f0a5b310a5c320a5e340a5f3609613809623909633b09643d09653e0966400a67420a68440a68450a69470b6a490b6a4a0c6b4c0c6b4d0d6c4f0d6c510e6c520e6d540f6d550f6d57106e59106e5a116e5c126e5d126e5f136e61136e62146e64156e65156e67166e69166e6a176e6c186e6d186e6f196e71196e721a6e741a6e751b6e771c6d781c6d7a1d6d7c1d6d7d1e6d7f1e6c801f6c82206c84206b85216b87216b88226a8a226a8c23698d23698f24699025689225689326679526679727669827669a28659b29649d29649f2a63a02a63a22b62a32c61a52c60a62d60a82e5fa92e5eab2f5ead305dae305cb0315bb1325ab3325ab43359b63458b73557b93556ba3655bc3754bd3853bf3952c03a51c13a50c33b4fc43c4ec63d4dc73e4cc83f4bca404acb4149cc4248ce4347cf4446d04545d24644d34743d44842d54a41d74b3fd84c3ed94d3dda4e3cdb503bdd513ade5238df5337e05536e15635e25734e35933e45a31e55c30e65d2fe75e2ee8602de9612bea632aeb6429eb6628ec6726ed6925ee6a24ef6c23ef6e21f06f20f1711ff1731df2741cf3761bf37819f47918f57b17f57d15f67e14f68013f78212f78410f8850ff8870ef8890cf98b0bf98c0af98e09fa9008fa9207fa9407fb9606fb9706fb9906fb9b06fb9d07fc9f07fca108fca309fca50afca60cfca80dfcaa0ffcac11fcae12fcb014fcb216fcb418fbb61afbb81dfbba1ffbbc21fbbe23fac026fac228fac42afac62df9c72ff9c932f9cb35f8cd37f8cf3af7d13df7d340f6d543f6d746f5d949f5db4cf4dd4ff4df53f4e156f3e35af3e55df2e661f2e865f2ea69f1ec6df1ed71f1ef75f1f179f2f27df2f482f3f586f3f68af4f88ef5f992f6fa96f8fb9af9fc9dfafda1fcffa4")),Pn(Cn("0d088710078813078916078a19068c1b068d1d068e20068f2206902406912605912805922a05932c05942e05952f059631059733059735049837049938049a3a049a3c049b3e049c3f049c41049d43039e44039e46039f48039f4903a04b03a14c02a14e02a25002a25102a35302a35502a45601a45801a45901a55b01a55c01a65e01a66001a66100a76300a76400a76600a76700a86900a86a00a86c00a86e00a86f00a87100a87201a87401a87501a87701a87801a87a02a87b02a87d03a87e03a88004a88104a78305a78405a78606a68707a68808a68a09a58b0aa58d0ba58e0ca48f0da4910ea3920fa39410a29511a19613a19814a099159f9a169f9c179e9d189d9e199da01a9ca11b9ba21d9aa31e9aa51f99a62098a72197a82296aa2395ab2494ac2694ad2793ae2892b02991b12a90b22b8fb32c8eb42e8db52f8cb6308bb7318ab83289ba3388bb3488bc3587bd3786be3885bf3984c03a83c13b82c23c81c33d80c43e7fc5407ec6417dc7427cc8437bc9447aca457acb4679cc4778cc4977cd4a76ce4b75cf4c74d04d73d14e72d24f71d35171d45270d5536fd5546ed6556dd7566cd8576bd9586ada5a6ada5b69db5c68dc5d67dd5e66de5f65de6164df6263e06363e16462e26561e26660e3685fe4695ee56a5de56b5de66c5ce76e5be76f5ae87059e97158e97257ea7457eb7556eb7655ec7754ed7953ed7a52ee7b51ef7c51ef7e50f07f4ff0804ef1814df1834cf2844bf3854bf3874af48849f48948f58b47f58c46f68d45f68f44f79044f79143f79342f89441f89540f9973ff9983ef99a3efa9b3dfa9c3cfa9e3bfb9f3afba139fba238fca338fca537fca636fca835fca934fdab33fdac33fdae32fdaf31fdb130fdb22ffdb42ffdb52efeb72dfeb82cfeba2cfebb2bfebd2afebe2afec029fdc229fdc328fdc527fdc627fdc827fdca26fdcb26fccd25fcce25fcd025fcd225fbd324fbd524fbd724fad824fada24f9dc24f9dd25f8df25f8e125f7e225f7e425f6e626f6e826f5e926f5eb27f4ed27f3ee27f3f027f2f227f1f426f1f525f0f724f0f921"));function zn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Zn(e){for(var t=1;t0?r[a-1]:t[0],at?1:e>=t?0:NaN},d=function(e){var t;return 1===e.length&&(t=e,e=function(e,n){return l(t(e),n)}),{left:function(t,n,r,a){for(null==r&&(r=0),null==a&&(a=t.length);r>>1;e(t[c],n)<0?r=c+1:a=c}return r},right:function(t,n,r,a){for(null==r&&(r=0),null==a&&(a=t.length);r>>1;e(t[c],n)>0?a=c:r=c+1}return r}}};var s=d(l),b=s.right,h=(s.left,b);var g=function(e){return null===e?NaN:+e},m=Array.prototype,p=(m.slice,m.map,function(e,t,n){e=+e,t=+t,n=(a=arguments.length)<2?(t=e,e=0,1):a<3?1:+n;for(var r=-1,a=0|Math.max(0,Math.ceil((t-e)/n)),c=new Array(a);++r=1)return+n(e[r-1],r-1,e);var r,a=(r-1)*t,c=Math.floor(a),f=+n(e[c],c,e);return f+(+n(e[c+1],c+1,e)-f)*(a-c)}};function v(){}function w(e,t){var n=new v;if(e instanceof v)e.each((function(e,t){n.set(t,e)}));else if(Array.isArray(e)){var r,a=-1,c=e.length;if(null==t)for(;++a>8&15|t>>4&240,t>>4&15|240&t,(15&t)<<4|15&t,1):8===n?V(t>>24&255,t>>16&255,t>>8&255,(255&t)/255):4===n?V(t>>12&15|t>>8&240,t>>8&15|t>>4&240,t>>4&15|240&t,((15&t)<<4|15&t)/255):null):(t=j.exec(e))?new X(t[1],t[2],t[3],1):(t=H.exec(e))?new X(255*t[1]/100,255*t[2]/100,255*t[3]/100,1):(t=A.exec(e))?V(t[1],t[2],t[3],t[4]):(t=$.exec(e))?V(255*t[1]/100,255*t[2]/100,255*t[3]/100,t[4]):(t=L.exec(e))?_(t[1],t[2]/100,t[3]/100,1):(t=q.exec(e))?_(t[1],t[2]/100,t[3]/100,t[4]):P.hasOwnProperty(e)?R(P[e]):"transparent"===e?new X(NaN,NaN,NaN,0):null}function R(e){return new X(e>>16&255,e>>8&255,255&e,1)}function V(e,t,n,r){return r<=0&&(e=t=n=NaN),new X(e,t,n,r)}function W(e){return e instanceof S||(e=I(e)),e?new X((e=e.rgb()).r,e.g,e.b,e.opacity):new X}function J(e,t,n,r){return 1===arguments.length?W(e):new X(e,t,n,null==r?1:r)}function X(e,t,n,r){this.r=+e,this.g=+t,this.b=+n,this.opacity=+r}function Q(){return"#"+G(this.r)+G(this.g)+G(this.b)}function B(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"rgb(":"rgba(")+Math.max(0,Math.min(255,Math.round(this.r)||0))+", "+Math.max(0,Math.min(255,Math.round(this.g)||0))+", "+Math.max(0,Math.min(255,Math.round(this.b)||0))+(1===e?")":", "+e+")")}function G(e){return((e=Math.max(0,Math.min(255,Math.round(e)||0)))<16?"0":"")+e.toString(16)}function _(e,t,n,r){return r<=0?e=t=n=NaN:n<=0||n>=1?e=t=NaN:t<=0&&(e=NaN),new ee(e,t,n,r)}function K(e){if(e instanceof ee)return new ee(e.h,e.s,e.l,e.opacity);if(e instanceof S||(e=I(e)),!e)return new ee;if(e instanceof ee)return e;var t=(e=e.rgb()).r/255,n=e.g/255,r=e.b/255,a=Math.min(t,n,r),c=Math.max(t,n,r),f=NaN,i=c-a,u=(c+a)/2;return i?(f=t===c?(n-r)/i+6*(n0&&u<1?0:f,new ee(f,i,u,e.opacity)}function ee(e,t,n,r){this.h=+e,this.s=+t,this.l=+n,this.opacity=+r}function te(e,t,n){return 255*(e<60?t+(n-t)*e/60:e<180?n:e<240?t+(n-t)*(240-e)/60:t)}function ne(e,t,n,r,a){var c=e*e,f=c*e;return((1-3*e+3*c-f)*t+(4-6*c+3*f)*n+(1+3*e+3*c-3*f)*r+f*a)/6}N(S,I,{copy:function(e){return Object.assign(new this.constructor,this,e)},displayable:function(){return this.rgb().displayable()},hex:z,formatHex:z,formatHsl:function(){return K(this).formatHsl()},formatRgb:Z,toString:Z}),N(X,J,k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new X(this.r*e,this.g*e,this.b*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new X(this.r*e,this.g*e,this.b*e,this.opacity)},rgb:function(){return this},displayable:function(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:Q,formatHex:Q,formatRgb:B,toString:B})),N(ee,(function(e,t,n,r){return 1===arguments.length?K(e):new ee(e,t,n,null==r?1:r)}),k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new ee(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new ee(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=this.h%360+360*(this.h<0),t=isNaN(e)||isNaN(this.s)?0:this.s,n=this.l,r=n+(n<.5?n:1-n)*t,a=2*n-r;return new X(te(e>=240?e-240:e+120,a,r),te(e,a,r),te(e<120?e+240:e-120,a,r),this.opacity)},displayable:function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl:function(){var e=this.opacity;return(1===(e=isNaN(e)?1:Math.max(0,Math.min(1,e)))?"hsl(":"hsla(")+(this.h||0)+", "+100*(this.s||0)+"%, "+100*(this.l||0)+"%"+(1===e?")":", "+e+")")}}));var re=function(e){return function(){return e}};function ae(e,t){return function(n){return e+n*t}}function ce(e){return 1==(e=+e)?fe:function(t,n){return n-t?function(e,t,n){return e=Math.pow(e,n),t=Math.pow(t,n)-e,n=1/n,function(r){return Math.pow(e+r*t,n)}}(t,n,e):re(isNaN(t)?n:t)}}function fe(e,t){var n=t-e;return n?ae(e,n):re(isNaN(e)?t:e)}(function e(t){var n=ce(t);function r(e,t){var r=n((e=J(e)).r,(t=J(t)).r),a=n(e.g,t.g),c=n(e.b,t.b),f=fe(e.opacity,t.opacity);return function(t){return e.r=r(t),e.g=a(t),e.b=c(t),e.opacity=f(t),e+""}}return r.gamma=e,r})(1);function ie(e){return function(t){var n,r,a=t.length,c=new Array(a),f=new Array(a),i=new Array(a);for(n=0;n=1?(n=1,t-1):Math.floor(n*t),a=e[r],c=e[r+1],f=r>0?e[r-1]:2*a-c,i=r=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;function le(e){if(!(t=oe.exec(e)))throw new Error("invalid format: "+e);var t;return new de({fill:t[1],align:t[2],sign:t[3],symbol:t[4],zero:t[5],width:t[6],comma:t[7],precision:t[8]&&t[8].slice(1),trim:t[9],type:t[10]})}function de(e){this.fill=void 0===e.fill?" ":e.fill+"",this.align=void 0===e.align?">":e.align+"",this.sign=void 0===e.sign?"-":e.sign+"",this.symbol=void 0===e.symbol?"":e.symbol+"",this.zero=!!e.zero,this.width=void 0===e.width?void 0:+e.width,this.comma=!!e.comma,this.precision=void 0===e.precision?void 0:+e.precision,this.trim=!!e.trim,this.type=void 0===e.type?"":e.type+""}le.prototype=de.prototype,de.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(void 0===this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(void 0===this.precision?"":"."+Math.max(0,0|this.precision))+(this.trim?"~":"")+this.type};function se(e,t){if((n=(e=t?e.toExponential(t-1):e.toExponential()).indexOf("e"))<0)return null;var n,r=e.slice(0,n);return[r.length>1?r[0]+r.slice(2):r,+e.slice(n+1)]}var be,he,ge=function(e){return(e=se(Math.abs(e)))?e[1]:NaN},me=function(e,t){var n=se(e,t);if(!n)return e+"";var r=n[0],a=n[1];return a<0?"0."+new Array(-a).join("0")+r:r.length>a+1?r.slice(0,a+1)+"."+r.slice(a+1):r+new Array(a-r.length+2).join("0")},pe={"%":function(e,t){return(100*e).toFixed(t)},b:function(e){return Math.round(e).toString(2)},c:function(e){return e+""},d:function(e){return Math.abs(e=Math.round(e))>=1e21?e.toLocaleString("en").replace(/,/g,""):e.toString(10)},e:function(e,t){return e.toExponential(t)},f:function(e,t){return e.toFixed(t)},g:function(e,t){return e.toPrecision(t)},o:function(e){return Math.round(e).toString(8)},p:function(e,t){return me(100*e,t)},r:me,s:function(e,t){var n=se(e,t);if(!n)return e+"";var r=n[0],a=n[1],c=a-(be=3*Math.max(-8,Math.min(8,Math.floor(a/3))))+1,f=r.length;return c===f?r:c>f?r+new Array(c-f+1).join("0"):c>0?r.slice(0,c)+"."+r.slice(c):"0."+new Array(1-c).join("0")+se(e,Math.max(0,t+c-1))[0]},X:function(e){return Math.round(e).toString(16).toUpperCase()},x:function(e){return Math.round(e).toString(16)}},ye=function(e){return e},ve=Array.prototype.map,we=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];he=function(e){var t,n,r=void 0===e.grouping||void 0===e.thousands?ye:(t=ve.call(e.grouping,Number),n=e.thousands+"",function(e,r){for(var a=e.length,c=[],f=0,i=t[0],u=0;a>0&&i>0&&(u+i+1>r&&(i=Math.max(1,r-u)),c.push(e.substring(a-=i,a+i)),!((u+=i+1)>r));)i=t[f=(f+1)%t.length];return c.reverse().join(n)}),a=void 0===e.currency?"":e.currency[0]+"",c=void 0===e.currency?"":e.currency[1]+"",f=void 0===e.decimal?".":e.decimal+"",i=void 0===e.numerals?ye:function(e){return function(t){return t.replace(/[0-9]/g,(function(t){return e[+t]}))}}(ve.call(e.numerals,String)),u=void 0===e.percent?"%":e.percent+"",o=void 0===e.minus?"-":e.minus+"",l=void 0===e.nan?"NaN":e.nan+"";function d(e){var t=(e=le(e)).fill,n=e.align,d=e.sign,s=e.symbol,b=e.zero,h=e.width,g=e.comma,m=e.precision,p=e.trim,y=e.type;"n"===y?(g=!0,y="g"):pe[y]||(void 0===m&&(m=12),p=!0,y="g"),(b||"0"===t&&"="===n)&&(b=!0,t="0",n="=");var v="$"===s?a:"#"===s&&/[boxX]/.test(y)?"0"+y.toLowerCase():"",w="$"===s?c:/[%p]/.test(y)?u:"",M=pe[y],T=/[defgprs%]/.test(y);function x(e){var a,c,u,s=v,x=w;if("c"===y)x=M(e)+x,e="";else{var C=(e=+e)<0||1/e<0;if(e=isNaN(e)?l:M(Math.abs(e),m),p&&(e=function(e){e:for(var t,n=e.length,r=1,a=-1;r0&&(a=0)}return a>0?e.slice(0,a)+e.slice(t+1):e}(e)),C&&0==+e&&"+"!==d&&(C=!1),s=(C?"("===d?d:o:"-"===d||"("===d?"":d)+s,x=("s"===y?we[8+be/3]:"")+x+(C&&"("===d?")":""),T)for(a=-1,c=e.length;++a(u=e.charCodeAt(a))||u>57){x=(46===u?f+e.slice(a+1):e.slice(a))+x,e=e.slice(0,a);break}}g&&!b&&(e=r(e,1/0));var U=s.length+e.length+x.length,D=U>1)+s+e+x+D.slice(U);break;default:e=D+s+e+x}return i(e)}return m=void 0===m?6:/[gprs]/.test(y)?Math.max(1,Math.min(21,m)):Math.max(0,Math.min(20,m)),x.toString=function(){return e+""},x}return{format:d,formatPrefix:function(e,t){var n=d(((e=le(e)).type="f",e)),r=3*Math.max(-8,Math.min(8,Math.floor(ge(t)/3))),a=Math.pow(10,-r),c=we[8+r/3];return function(e){return n(a*e)+c}}}}({decimal:".",thousands:",",grouping:[3],currency:["$",""],minus:"-"}),he.format,he.formatPrefix;var Me=new Date,Te=new Date;function xe(e,t,n,r){function a(t){return e(t=0===arguments.length?new Date:new Date(+t)),t}return a.floor=function(t){return e(t=new Date(+t)),t},a.ceil=function(n){return e(n=new Date(n-1)),t(n,1),e(n),n},a.round=function(e){var t=a(e),n=a.ceil(e);return e-t0))return i;do{i.push(f=new Date(+n)),t(n,c),e(n)}while(f=t)for(;e(t),!n(t);)t.setTime(t-1)}),(function(e,r){if(e>=e)if(r<0)for(;++r<=0;)for(;t(e,-1),!n(e););else for(;--r>=0;)for(;t(e,1),!n(e););}))},n&&(a.count=function(t,r){return Me.setTime(+t),Te.setTime(+r),e(Me),e(Te),Math.floor(n(Me,Te))},a.every=function(e){return e=Math.floor(e),isFinite(e)&&e>0?e>1?a.filter(r?function(t){return r(t)%e==0}:function(t){return a.count(0,t)%e==0}):a:null}),a}var Ce=xe((function(e){e.setMonth(0,1),e.setHours(0,0,0,0)}),(function(e,t){e.setFullYear(e.getFullYear()+t)}),(function(e,t){return t.getFullYear()-e.getFullYear()}),(function(e){return e.getFullYear()}));Ce.every=function(e){return isFinite(e=Math.floor(e))&&e>0?xe((function(t){t.setFullYear(Math.floor(t.getFullYear()/e)*e),t.setMonth(0,1),t.setHours(0,0,0,0)}),(function(t,n){t.setFullYear(t.getFullYear()+n*e)})):null};var Ue=Ce,De=(Ce.range,xe((function(e){e.setDate(1),e.setHours(0,0,0,0)}),(function(e,t){e.setMonth(e.getMonth()+t)}),(function(e,t){return t.getMonth()-e.getMonth()+12*(t.getFullYear()-e.getFullYear())}),(function(e){return e.getMonth()})));De.range;function Ne(e){return xe((function(t){t.setDate(t.getDate()-(t.getDay()+7-e)%7),t.setHours(0,0,0,0)}),(function(e,t){e.setDate(e.getDate()+7*t)}),(function(e,t){return(t-e-6e4*(t.getTimezoneOffset()-e.getTimezoneOffset()))/6048e5}))}var ke=Ne(0),Se=Ne(1),Fe=Ne(2),Ee=Ne(3),Ye=Ne(4),Oe=Ne(5),je=Ne(6),He=(ke.range,Se.range,Fe.range,Ee.range,Ye.range,Oe.range,je.range,xe((function(e){e.setHours(0,0,0,0)}),(function(e,t){e.setDate(e.getDate()+t)}),(function(e,t){return(t-e-6e4*(t.getTimezoneOffset()-e.getTimezoneOffset()))/864e5}),(function(e){return e.getDate()-1}))),Ae=He,$e=(He.range,xe((function(e){e.setTime(e-e.getMilliseconds()-1e3*e.getSeconds()-6e4*e.getMinutes())}),(function(e,t){e.setTime(+e+36e5*t)}),(function(e,t){return(t-e)/36e5}),(function(e){return e.getHours()}))),Le=($e.range,xe((function(e){e.setTime(e-e.getMilliseconds()-1e3*e.getSeconds())}),(function(e,t){e.setTime(+e+6e4*t)}),(function(e,t){return(t-e)/6e4}),(function(e){return e.getMinutes()}))),qe=(Le.range,xe((function(e){e.setTime(e-e.getMilliseconds())}),(function(e,t){e.setTime(+e+1e3*t)}),(function(e,t){return(t-e)/1e3}),(function(e){return e.getUTCSeconds()}))),Pe=(qe.range,xe((function(){}),(function(e,t){e.setTime(+e+t)}),(function(e,t){return t-e})));Pe.every=function(e){return e=Math.floor(e),isFinite(e)&&e>0?e>1?xe((function(t){t.setTime(Math.floor(t/e)*e)}),(function(t,n){t.setTime(+t+n*e)}),(function(t,n){return(n-t)/e})):Pe:null};Pe.range;function ze(e){return xe((function(t){t.setUTCDate(t.getUTCDate()-(t.getUTCDay()+7-e)%7),t.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCDate(e.getUTCDate()+7*t)}),(function(e,t){return(t-e)/6048e5}))}var Ze=ze(0),Ie=ze(1),Re=ze(2),Ve=ze(3),We=ze(4),Je=ze(5),Xe=ze(6),Qe=(Ze.range,Ie.range,Re.range,Ve.range,We.range,Je.range,Xe.range,xe((function(e){e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCDate(e.getUTCDate()+t)}),(function(e,t){return(t-e)/864e5}),(function(e){return e.getUTCDate()-1}))),Be=Qe,Ge=(Qe.range,xe((function(e){e.setUTCMonth(0,1),e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCFullYear(e.getUTCFullYear()+t)}),(function(e,t){return t.getUTCFullYear()-e.getUTCFullYear()}),(function(e){return e.getUTCFullYear()})));Ge.every=function(e){return isFinite(e=Math.floor(e))&&e>0?xe((function(t){t.setUTCFullYear(Math.floor(t.getUTCFullYear()/e)*e),t.setUTCMonth(0,1),t.setUTCHours(0,0,0,0)}),(function(t,n){t.setUTCFullYear(t.getUTCFullYear()+n*e)})):null};var _e=Ge;Ge.range;function Ke(e){if(0<=e.y&&e.y<100){var t=new Date(-1,e.m,e.d,e.H,e.M,e.S,e.L);return t.setFullYear(e.y),t}return new Date(e.y,e.m,e.d,e.H,e.M,e.S,e.L)}function et(e){if(0<=e.y&&e.y<100){var t=new Date(Date.UTC(-1,e.m,e.d,e.H,e.M,e.S,e.L));return t.setUTCFullYear(e.y),t}return new Date(Date.UTC(e.y,e.m,e.d,e.H,e.M,e.S,e.L))}function tt(e,t,n){return{y:e,m:t,d:n,H:0,M:0,S:0,L:0}}var nt,rt={"-":"",_:" ",0:"0"},at=/^\s*\d+/,ct=/^%/,ft=/[\\^$*+?|[\]().{}]/g;function it(e,t,n){var r=e<0?"-":"",a=(r?-e:e)+"",c=a.length;return r+(c68?1900:2e3),n+r[0].length):-1}function yt(e,t,n){var r=/^(Z)|([+-]\d\d)(?::?(\d\d))?/.exec(t.slice(n,n+6));return r?(e.Z=r[1]?0:-(r[2]+(r[3]||"00")),n+r[0].length):-1}function vt(e,t,n){var r=at.exec(t.slice(n,n+1));return r?(e.q=3*r[0]-3,n+r[0].length):-1}function wt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.m=r[0]-1,n+r[0].length):-1}function Mt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.d=+r[0],n+r[0].length):-1}function Tt(e,t,n){var r=at.exec(t.slice(n,n+3));return r?(e.m=0,e.d=+r[0],n+r[0].length):-1}function xt(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.H=+r[0],n+r[0].length):-1}function Ct(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.M=+r[0],n+r[0].length):-1}function Ut(e,t,n){var r=at.exec(t.slice(n,n+2));return r?(e.S=+r[0],n+r[0].length):-1}function Dt(e,t,n){var r=at.exec(t.slice(n,n+3));return r?(e.L=+r[0],n+r[0].length):-1}function Nt(e,t,n){var r=at.exec(t.slice(n,n+6));return r?(e.L=Math.floor(r[0]/1e3),n+r[0].length):-1}function kt(e,t,n){var r=ct.exec(t.slice(n,n+1));return r?n+r[0].length:-1}function St(e,t,n){var r=at.exec(t.slice(n));return r?(e.Q=+r[0],n+r[0].length):-1}function Ft(e,t,n){var r=at.exec(t.slice(n));return r?(e.s=+r[0],n+r[0].length):-1}function Et(e,t){return it(e.getDate(),t,2)}function Yt(e,t){return it(e.getHours(),t,2)}function Ot(e,t){return it(e.getHours()%12||12,t,2)}function jt(e,t){return it(1+Ae.count(Ue(e),e),t,3)}function Ht(e,t){return it(e.getMilliseconds(),t,3)}function At(e,t){return Ht(e,t)+"000"}function $t(e,t){return it(e.getMonth()+1,t,2)}function Lt(e,t){return it(e.getMinutes(),t,2)}function qt(e,t){return it(e.getSeconds(),t,2)}function Pt(e){var t=e.getDay();return 0===t?7:t}function zt(e,t){return it(ke.count(Ue(e)-1,e),t,2)}function Zt(e){var t=e.getDay();return t>=4||0===t?Ye(e):Ye.ceil(e)}function It(e,t){return e=Zt(e),it(Ye.count(Ue(e),e)+(4===Ue(e).getDay()),t,2)}function Rt(e){return e.getDay()}function Vt(e,t){return it(Se.count(Ue(e)-1,e),t,2)}function Wt(e,t){return it(e.getFullYear()%100,t,2)}function Jt(e,t){return it((e=Zt(e)).getFullYear()%100,t,2)}function Xt(e,t){return it(e.getFullYear()%1e4,t,4)}function Qt(e,t){var n=e.getDay();return it((e=n>=4||0===n?Ye(e):Ye.ceil(e)).getFullYear()%1e4,t,4)}function Bt(e){var t=e.getTimezoneOffset();return(t>0?"-":(t*=-1,"+"))+it(t/60|0,"0",2)+it(t%60,"0",2)}function Gt(e,t){return it(e.getUTCDate(),t,2)}function _t(e,t){return it(e.getUTCHours(),t,2)}function Kt(e,t){return it(e.getUTCHours()%12||12,t,2)}function en(e,t){return it(1+Be.count(_e(e),e),t,3)}function tn(e,t){return it(e.getUTCMilliseconds(),t,3)}function nn(e,t){return tn(e,t)+"000"}function rn(e,t){return it(e.getUTCMonth()+1,t,2)}function an(e,t){return it(e.getUTCMinutes(),t,2)}function cn(e,t){return it(e.getUTCSeconds(),t,2)}function fn(e){var t=e.getUTCDay();return 0===t?7:t}function un(e,t){return it(Ze.count(_e(e)-1,e),t,2)}function on(e){var t=e.getUTCDay();return t>=4||0===t?We(e):We.ceil(e)}function ln(e,t){return e=on(e),it(We.count(_e(e),e)+(4===_e(e).getUTCDay()),t,2)}function dn(e){return e.getUTCDay()}function sn(e,t){return it(Ie.count(_e(e)-1,e),t,2)}function bn(e,t){return it(e.getUTCFullYear()%100,t,2)}function hn(e,t){return it((e=on(e)).getUTCFullYear()%100,t,2)}function gn(e,t){return it(e.getUTCFullYear()%1e4,t,4)}function mn(e,t){var n=e.getUTCDay();return it((e=n>=4||0===n?We(e):We.ceil(e)).getUTCFullYear()%1e4,t,4)}function pn(){return"+0000"}function yn(){return"%"}function vn(e){return+e}function wn(e){return Math.floor(+e/1e3)}!function(e){nt=function(e){var t=e.dateTime,n=e.date,r=e.time,a=e.periods,c=e.days,f=e.shortDays,i=e.months,u=e.shortMonths,o=ot(a),l=lt(a),d=ot(c),s=lt(c),b=ot(f),h=lt(f),g=ot(i),m=lt(i),p=ot(u),y=lt(u),v={a:function(e){return f[e.getDay()]},A:function(e){return c[e.getDay()]},b:function(e){return u[e.getMonth()]},B:function(e){return i[e.getMonth()]},c:null,d:Et,e:Et,f:At,g:Jt,G:Qt,H:Yt,I:Ot,j:jt,L:Ht,m:$t,M:Lt,p:function(e){return a[+(e.getHours()>=12)]},q:function(e){return 1+~~(e.getMonth()/3)},Q:vn,s:wn,S:qt,u:Pt,U:zt,V:It,w:Rt,W:Vt,x:null,X:null,y:Wt,Y:Xt,Z:Bt,"%":yn},w={a:function(e){return f[e.getUTCDay()]},A:function(e){return c[e.getUTCDay()]},b:function(e){return u[e.getUTCMonth()]},B:function(e){return i[e.getUTCMonth()]},c:null,d:Gt,e:Gt,f:nn,g:hn,G:mn,H:_t,I:Kt,j:en,L:tn,m:rn,M:an,p:function(e){return a[+(e.getUTCHours()>=12)]},q:function(e){return 1+~~(e.getUTCMonth()/3)},Q:vn,s:wn,S:cn,u:fn,U:un,V:ln,w:dn,W:sn,x:null,X:null,y:bn,Y:gn,Z:pn,"%":yn},M={a:function(e,t,n){var r=b.exec(t.slice(n));return r?(e.w=h[r[0].toLowerCase()],n+r[0].length):-1},A:function(e,t,n){var r=d.exec(t.slice(n));return r?(e.w=s[r[0].toLowerCase()],n+r[0].length):-1},b:function(e,t,n){var r=p.exec(t.slice(n));return r?(e.m=y[r[0].toLowerCase()],n+r[0].length):-1},B:function(e,t,n){var r=g.exec(t.slice(n));return r?(e.m=m[r[0].toLowerCase()],n+r[0].length):-1},c:function(e,n,r){return C(e,t,n,r)},d:Mt,e:Mt,f:Nt,g:pt,G:mt,H:xt,I:xt,j:Tt,L:Dt,m:wt,M:Ct,p:function(e,t,n){var r=o.exec(t.slice(n));return r?(e.p=l[r[0].toLowerCase()],n+r[0].length):-1},q:vt,Q:St,s:Ft,S:Ut,u:st,U:bt,V:ht,w:dt,W:gt,x:function(e,t,r){return C(e,n,t,r)},X:function(e,t,n){return C(e,r,t,n)},y:pt,Y:mt,Z:yt,"%":kt};function T(e,t){return function(n){var r,a,c,f=[],i=-1,u=0,o=e.length;for(n instanceof Date||(n=new Date(+n));++i53)return null;"w"in c||(c.w=1),"Z"in c?(a=(r=et(tt(c.y,0,1))).getUTCDay(),r=a>4||0===a?Ie.ceil(r):Ie(r),r=Be.offset(r,7*(c.V-1)),c.y=r.getUTCFullYear(),c.m=r.getUTCMonth(),c.d=r.getUTCDate()+(c.w+6)%7):(a=(r=Ke(tt(c.y,0,1))).getDay(),r=a>4||0===a?Se.ceil(r):Se(r),r=Ae.offset(r,7*(c.V-1)),c.y=r.getFullYear(),c.m=r.getMonth(),c.d=r.getDate()+(c.w+6)%7)}else("W"in c||"U"in c)&&("w"in c||(c.w="u"in c?c.u%7:"W"in c?1:0),a="Z"in c?et(tt(c.y,0,1)).getUTCDay():Ke(tt(c.y,0,1)).getDay(),c.m=0,c.d="W"in c?(c.w+6)%7+7*c.W-(a+5)%7:c.w+7*c.U-(a+6)%7);return"Z"in c?(c.H+=c.Z/100|0,c.M+=c.Z%100,et(c)):Ke(c)}}function C(e,t,n,r){for(var a,c,f=0,i=t.length,u=n.length;f=u)return-1;if(37===(a=t.charCodeAt(f++))){if(a=t.charAt(f++),!(c=M[a in rt?t.charAt(f++):a])||(r=c(e,n,r))<0)return-1}else if(a!=n.charCodeAt(r++))return-1}return r}return v.x=T(n,v),v.X=T(r,v),v.c=T(t,v),w.x=T(n,w),w.X=T(r,w),w.c=T(t,w),{format:function(e){var t=T(e+="",v);return t.toString=function(){return e},t},parse:function(e){var t=x(e+="",!1);return t.toString=function(){return e},t},utcFormat:function(e){var t=T(e+="",w);return t.toString=function(){return e},t},utcParse:function(e){var t=x(e+="",!0);return t.toString=function(){return e},t}}}(e),nt.format,nt.parse,nt.utcFormat,nt.utcParse}({dateTime:"%x, %X",date:"%-m/%-d/%Y",time:"%-I:%M:%S %p",periods:["AM","PM"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]});var Mn=xe((function(e){e.setUTCDate(1),e.setUTCHours(0,0,0,0)}),(function(e,t){e.setUTCMonth(e.getUTCMonth()+t)}),(function(e,t){return t.getUTCMonth()-e.getUTCMonth()+12*(t.getUTCFullYear()-e.getUTCFullYear())}),(function(e){return e.getUTCMonth()})),Tn=(Mn.range,xe((function(e){e.setUTCMinutes(0,0,0)}),(function(e,t){e.setTime(+e+36e5*t)}),(function(e,t){return(t-e)/36e5}),(function(e){return e.getUTCHours()}))),xn=(Tn.range,xe((function(e){e.setUTCSeconds(0,0)}),(function(e,t){e.setTime(+e+6e4*t)}),(function(e,t){return(t-e)/6e4}),(function(e){return e.getUTCMinutes()}))),Cn=(xn.range,function(e){return e.match(/.{6}/g).map((function(e){return"#"+e}))}),Un=(Cn("1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf"),Cn("393b795254a36b6ecf9c9ede6379398ca252b5cf6bcedb9c8c6d31bd9e39e7ba52e7cb94843c39ad494ad6616be7969c7b4173a55194ce6dbdde9ed6"),Cn("3182bd6baed69ecae1c6dbefe6550dfd8d3cfdae6bfdd0a231a35474c476a1d99bc7e9c0756bb19e9ac8bcbddcdadaeb636363969696bdbdbdd9d9d9"),Cn("1f77b4aec7e8ff7f0effbb782ca02c98df8ad62728ff98969467bdc5b0d58c564bc49c94e377c2f7b6d27f7f7fc7c7c7bcbd22dbdb8d17becf9edae5"),Math.PI/180),Dn=180/Math.PI,Nn=-.14861,kn=1.78277,Sn=-.29227,Fn=-.90649,En=1.97294,Yn=En*Fn,On=En*kn,jn=kn*Sn-Fn*Nn;function Hn(e){if(e instanceof $n)return new $n(e.h,e.s,e.l,e.opacity);e instanceof X||(e=W(e));var t=e.r/255,n=e.g/255,r=e.b/255,a=(jn*r+Yn*t-On*n)/(jn+Yn-On),c=r-a,f=(En*(n-a)-Sn*c)/Fn,i=Math.sqrt(f*f+c*c)/(En*a*(1-a)),u=i?Math.atan2(f,c)*Dn-120:NaN;return new $n(u<0?u+360:u,i,a,e.opacity)}function An(e,t,n,r){return 1===arguments.length?Hn(e):new $n(e,t,n,null==r?1:r)}function $n(e,t,n,r){this.h=+e,this.s=+t,this.l=+n,this.opacity=+r}function Ln(e){return function t(n){function r(t,r){var a=e((t=An(t)).h,(r=An(r)).h),c=fe(t.s,r.s),f=fe(t.l,r.l),i=fe(t.opacity,r.opacity);return function(e){return t.h=a(e),t.s=c(e),t.l=f(Math.pow(e,n)),t.opacity=i(e),t+""}}return n=+n,r.gamma=t,r}(1)}N($n,An,k(S,{brighter:function(e){return e=null==e?1/.7:Math.pow(1/.7,e),new $n(this.h,this.s,this.l*e,this.opacity)},darker:function(e){return e=null==e?.7:Math.pow(.7,e),new $n(this.h,this.s,this.l*e,this.opacity)},rgb:function(){var e=isNaN(this.h)?0:(this.h+120)*Un,t=+this.l,n=isNaN(this.s)?0:this.s*t*(1-t),r=Math.cos(e),a=Math.sin(e);return new X(255*(t+n*(Nn*r+kn*a)),255*(t+n*(Sn*r+Fn*a)),255*(t+n*(En*r)),this.opacity)}}));Ln((function(e,t){var n=t-e;return n?ae(e,n>180||n<-180?n-360*Math.round(n/360):n):re(isNaN(e)?t:e)}));var qn=Ln(fe);qn(An(300,.5,0),An(-240,.5,1)),qn(An(-100,.75,.35),An(80,1.5,.8)),qn(An(260,.75,.35),An(80,1.5,.8)),An();function Pn(e){var t=e.length;return function(n){return e[Math.max(0,Math.min(t-1,Math.floor(n*t)))]}}Pn(Cn("44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725")),Pn(Cn("00000401000501010601010802010902020b02020d03030f03031204041405041606051806051a07061c08071e0907200a08220b09240c09260d0a290e0b2b100b2d110c2f120d31130d34140e36150e38160f3b180f3d19103f1a10421c10441d11471e114920114b21114e22115024125325125527125829115a2a115c2c115f2d11612f116331116533106734106936106b38106c390f6e3b0f703d0f713f0f72400f74420f75440f764510774710784910784a10794c117a4e117b4f127b51127c52137c54137d56147d57157e59157e5a167e5c167f5d177f5f187f601880621980641a80651a80671b80681c816a1c816b1d816d1d816e1e81701f81721f817320817521817621817822817922827b23827c23827e24828025828125818326818426818627818827818928818b29818c29818e2a81902a81912b81932b80942c80962c80982d80992d809b2e7f9c2e7f9e2f7fa02f7fa1307ea3307ea5317ea6317da8327daa337dab337cad347cae347bb0357bb2357bb3367ab5367ab73779b83779ba3878bc3978bd3977bf3a77c03a76c23b75c43c75c53c74c73d73c83e73ca3e72cc3f71cd4071cf4070d0416fd2426fd3436ed5446dd6456cd8456cd9466bdb476adc4869de4968df4a68e04c67e24d66e34e65e44f64e55064e75263e85362e95462ea5661eb5760ec5860ed5a5fee5b5eef5d5ef05f5ef1605df2625df2645cf3655cf4675cf4695cf56b5cf66c5cf66e5cf7705cf7725cf8745cf8765cf9785df9795df97b5dfa7d5efa7f5efa815ffb835ffb8560fb8761fc8961fc8a62fc8c63fc8e64fc9065fd9266fd9467fd9668fd9869fd9a6afd9b6bfe9d6cfe9f6dfea16efea36ffea571fea772fea973feaa74feac76feae77feb078feb27afeb47bfeb67cfeb77efeb97ffebb81febd82febf84fec185fec287fec488fec68afec88cfeca8dfecc8ffecd90fecf92fed194fed395fed597fed799fed89afdda9cfddc9efddea0fde0a1fde2a3fde3a5fde5a7fde7a9fde9aafdebacfcecaefceeb0fcf0b2fcf2b4fcf4b6fcf6b8fcf7b9fcf9bbfcfbbdfcfdbf")),Pn(Cn("00000401000501010601010802010a02020c02020e03021004031204031405041706041907051b08051d09061f0a07220b07240c08260d08290e092b10092d110a30120a32140b34150b37160b39180c3c190c3e1b0c411c0c431e0c451f0c48210c4a230c4c240c4f260c51280b53290b552b0b572d0b592f0a5b310a5c320a5e340a5f3609613809623909633b09643d09653e0966400a67420a68440a68450a69470b6a490b6a4a0c6b4c0c6b4d0d6c4f0d6c510e6c520e6d540f6d550f6d57106e59106e5a116e5c126e5d126e5f136e61136e62146e64156e65156e67166e69166e6a176e6c186e6d186e6f196e71196e721a6e741a6e751b6e771c6d781c6d7a1d6d7c1d6d7d1e6d7f1e6c801f6c82206c84206b85216b87216b88226a8a226a8c23698d23698f24699025689225689326679526679727669827669a28659b29649d29649f2a63a02a63a22b62a32c61a52c60a62d60a82e5fa92e5eab2f5ead305dae305cb0315bb1325ab3325ab43359b63458b73557b93556ba3655bc3754bd3853bf3952c03a51c13a50c33b4fc43c4ec63d4dc73e4cc83f4bca404acb4149cc4248ce4347cf4446d04545d24644d34743d44842d54a41d74b3fd84c3ed94d3dda4e3cdb503bdd513ade5238df5337e05536e15635e25734e35933e45a31e55c30e65d2fe75e2ee8602de9612bea632aeb6429eb6628ec6726ed6925ee6a24ef6c23ef6e21f06f20f1711ff1731df2741cf3761bf37819f47918f57b17f57d15f67e14f68013f78212f78410f8850ff8870ef8890cf98b0bf98c0af98e09fa9008fa9207fa9407fb9606fb9706fb9906fb9b06fb9d07fc9f07fca108fca309fca50afca60cfca80dfcaa0ffcac11fcae12fcb014fcb216fcb418fbb61afbb81dfbba1ffbbc21fbbe23fac026fac228fac42afac62df9c72ff9c932f9cb35f8cd37f8cf3af7d13df7d340f6d543f6d746f5d949f5db4cf4dd4ff4df53f4e156f3e35af3e55df2e661f2e865f2ea69f1ec6df1ed71f1ef75f1f179f2f27df2f482f3f586f3f68af4f88ef5f992f6fa96f8fb9af9fc9dfafda1fcffa4")),Pn(Cn("0d088710078813078916078a19068c1b068d1d068e20068f2206902406912605912805922a05932c05942e05952f059631059733059735049837049938049a3a049a3c049b3e049c3f049c41049d43039e44039e46039f48039f4903a04b03a14c02a14e02a25002a25102a35302a35502a45601a45801a45901a55b01a55c01a65e01a66001a66100a76300a76400a76600a76700a86900a86a00a86c00a86e00a86f00a87100a87201a87401a87501a87701a87801a87a02a87b02a87d03a87e03a88004a88104a78305a78405a78606a68707a68808a68a09a58b0aa58d0ba58e0ca48f0da4910ea3920fa39410a29511a19613a19814a099159f9a169f9c179e9d189d9e199da01a9ca11b9ba21d9aa31e9aa51f99a62098a72197a82296aa2395ab2494ac2694ad2793ae2892b02991b12a90b22b8fb32c8eb42e8db52f8cb6308bb7318ab83289ba3388bb3488bc3587bd3786be3885bf3984c03a83c13b82c23c81c33d80c43e7fc5407ec6417dc7427cc8437bc9447aca457acb4679cc4778cc4977cd4a76ce4b75cf4c74d04d73d14e72d24f71d35171d45270d5536fd5546ed6556dd7566cd8576bd9586ada5a6ada5b69db5c68dc5d67dd5e66de5f65de6164df6263e06363e16462e26561e26660e3685fe4695ee56a5de56b5de66c5ce76e5be76f5ae87059e97158e97257ea7457eb7556eb7655ec7754ed7953ed7a52ee7b51ef7c51ef7e50f07f4ff0804ef1814df1834cf2844bf3854bf3874af48849f48948f58b47f58c46f68d45f68f44f79044f79143f79342f89441f89540f9973ff9983ef99a3efa9b3dfa9c3cfa9e3bfb9f3afba139fba238fca338fca537fca636fca835fca934fdab33fdac33fdae32fdaf31fdb130fdb22ffdb42ffdb52efeb72dfeb82cfeba2cfebb2bfebd2afebe2afec029fdc229fdc328fdc527fdc627fdc827fdca26fdcb26fccd25fcce25fcd025fcd225fbd324fbd524fbd724fad824fada24f9dc24f9dd25f8df25f8e125f7e225f7e425f6e626f6e826f5e926f5eb27f4ed27f3ee27f3f027f2f227f1f426f1f525f0f724f0f921"));function zn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Zn(e){for(var t=1;t0?r[a-1]:t[0],a

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() {
@@ -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 446f7ebc..efc6898f 100644 --- a/docs/api-reference/fullscreen-control/index.html +++ b/docs/api-reference/fullscreen-control/index.html @@ -84,7 +84,7 @@ 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() {
@@ -98,4 +98,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   >
     <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 6fdfff99..cbd1dd20 100644 --- a/docs/api-reference/geolocate-control/index.html +++ b/docs/api-reference/geolocate-control/index.html @@ -88,7 +88,7 @@ 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() {
@@ -115,4 +115,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 500502cc..697da6f0 100644 --- a/docs/api-reference/layer/index.html +++ b/docs/api-reference/layer/index.html @@ -88,7 +88,7 @@ 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 = {
@@ -113,4 +113,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   >
     <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 2b02f197..30614f08 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 6422a50d..e2b1fd65 100644 --- a/docs/api-reference/map/index.html +++ b/docs/api-reference/map/index.html @@ -92,7 +92,7 @@ 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() {
@@ -140,5 +140,5 @@ For example, 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\<string, string>
Default: null
A patch to apply to the default localization table for UI strings, e.g. control tooltips.
 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.
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
+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 diff --git a/docs/api-reference/marker/index.html b/docs/api-reference/marker/index.html index 06ac41e2..7d526c69 100644 --- a/docs/api-reference/marker/index.html +++ b/docs/api-reference/marker/index.html @@ -92,7 +92,7 @@ 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() {
@@ -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
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
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 dcab15b0..677c5521 100644 --- a/docs/api-reference/navigation-control/index.html +++ b/docs/api-reference/navigation-control/index.html @@ -84,7 +84,7 @@ 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() {
@@ -98,4 +98,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   >
     <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 6af51730..c83619b0 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() {
@@ -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 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 diff --git a/docs/api-reference/scale-control/index.html b/docs/api-reference/scale-control/index.html index d5a76ce6..2bf7cc97 100644 --- a/docs/api-reference/scale-control/index.html +++ b/docs/api-reference/scale-control/index.html @@ -84,7 +84,7 @@ 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() {
@@ -98,4 +98,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   >
     <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 ca05fe87..28b9eb66 100644 --- a/docs/api-reference/source/index.html +++ b/docs/api-reference/source/index.html @@ -86,7 +86,7 @@ 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 = {
@@ -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 8583fbef..c766f1ec 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

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

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 696fa0c4..f779eaed 100644 --- a/docs/api-reference/use-control/index.html +++ b/docs/api-reference/use-control/index.html @@ -88,7 +88,7 @@ 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) {
@@ -132,4 +132,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   options?: {
     position?: ControlPosition;
   }
-): IControl
The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
  • onCreate: ({map: MapboxMap, mapLib: mapboxgl}) => IControl - called to create an instance of the control.
  • onRemove: ({map: MapboxMap, 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
+): IControl

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

Parameters:

  • onCreate: ({map: MapboxMap, mapLib: mapboxgl}) => IControl - called to create an instance of the control.
  • onRemove: ({map: MapboxMap, 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 2e3a215d..97a11853 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, used with the MapProvider, helps an app to perform map operations outside of the component that directly renders a Map.

import {MapProvider, Map, useMap} from 'react-map-gl';
+  
useMap
The useMap hook, used with the MapProvider, helps an app to perform map operations outside of the component that directly renders a Map.
import {MapProvider, Map, useMap} from 'react-map-gl';
 
 function Root() {
   return (
@@ -105,4 +105,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   };
 
   return <button onClick={onClick}>Go</button>;
-}
See a full example here.
Signature
useMap(): {[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.
Source
use-map.tsx

\ No newline at end of file
+}

See a full example here.

Signature

useMap(): {[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.

Source

use-map.tsx

\ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index 036650bf..84fdede1 100644 --- a/docs/contributing/index.html +++ b/docs/contributing/index.html @@ -88,8 +88,8 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Contributing to react-map-gl

Thanks for taking the time to contribute!

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

Setting Up Dev Environment

The master branch is the active development branch.

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

Contributing to react-map-gl

Thanks for taking the time to contribute!

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

Setting Up Dev Environment

The master branch is the active development branch.

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

git checkout master
 yarn bootstrap
 yarn test

Test:

$ npm run test

Test in Node:

$ npm run test node

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

$ npm run test browser

Pull Requests

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

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

PR Checklist

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

Release

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

Community Governance

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

Technical Steering Committee

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

Maintainers

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

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

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

Code of Conduct

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

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

Code of Conduct

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

\ No newline at end of file diff --git a/docs/get-started/adding-custom-data/index.html b/docs/get-started/adding-custom-data/index.html index e853c2c6..273bb8e7 100644 --- a/docs/get-started/adding-custom-data/index.html +++ b/docs/get-started/adding-custom-data/index.html @@ -1,4 +1,4 @@ -react-map-gl | Adding Custom Data

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: [
+    new DefinePlugin({
+      'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
+    })
+  ]
+};
    /// rollup.config.js
+const replace = require('@rollup/plugin-replace').default;
+
+module.exports = {
+  ...
+  plugins: [
+    replace({ 
+      '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
+<TabContext value={selectedTab}>
+  <TabList onChange={handleTabChange}>
+    <Tab label="Map" value="map" />
+    <Tab label="List" value="table" />
+  </TabList>
+  <TabPanel value="map">
+    <Map
+      mapStyle="mapbox://styles/mapbox/streets-v9" >
+      {items.map(renderMarker)}
+    </Map>
+  </TabPanel>
+  <TabPanel value="table">
+    <Table>
+      {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">
+    <Map reuseMaps
+      mapStyle="mapbox://styles/mapbox/streets-v9" >
+      {items.map(renderMarker)}
+    </Map>
+  </TabPanel>

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:

import {useSelector, useDispatch} from 'react-redux';
+import Map, {Marker} from 'react-map-gl';
+
+function MapView() {
+  const viewState = useSelector(s => s.viewState);
+  const vehicles = useSelector(s => s.vehicles);
+  const dispatch = useDispatch();
+
+  const onMove = useCallback(evt => {
+    dispatch({type: 'setViewState', payload: evt.viewState});
+  }, []);
+
+  return (
+    <Map
+      {...viewState}
+      onMove={onMove}
+      mapStyle="mapbox://styles/mapbox/streets-v9" >
+    >
+      {vehicles.map(vehicle => (
+        <Marker key={vehicle.id}
+          longitude={vehicle.coordinates[0]}
+          latitude={vehicle.coordinates[1]}>
+          <svg>
+            // vehicle icon
+          </svg>
+        </Marker>)
+      )}
+    </Map>
+  );
+}

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:

  const markers = useMemo(() => vehicles.map(vehicle => (
+    <Marker key={vehicle.id}
+      longitude={vehicle.coordinates[0]}
+      latitude={vehicle.coordinates[1]}>
+      <svg>
+        // vehicle icon
+      </svg>
+    </Marker>)
+  )}, [vehicles]);
+
+  return (
+    <Map
+      {...viewState}
+      onMove={onMove}
+      mapStyle="mapbox://styles/mapbox/streets-v9" >
+    >
+      {markers}
+    </Map>
+  );
+}

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))
+    };
+  }, [vehicles]);
+
+  return (
+    <Map
+      {...viewState}
+      onMove={onMove}
+      mapStyle="mapbox://styles/mapbox/streets-v9" >
+    >
+      <Source id="vehicles" type="geojson" data={vehiclesGeoJSON}>
+        <Layer type="symbol"
+          layout={{
+            'icon-image': 'vehicle-icon',
+            'icon-size': 1,
+            'text-field': ['get', 'id']
+          }} >
+      </Sources>
+    </Map>
+  );
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 5442ab91..c75b5bc2 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 5d58e00d..2b368c5a 100644 --- a/docs/upgrade-guide/index.html +++ b/docs/upgrade-guide/index.html @@ -100,7 +100,7 @@ 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 SVGOveray) 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 fro "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 = {
+  
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 SVGOveray) 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 fro "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}
@@ -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 4a2e0733..78111fa5 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 a27c52e1..fce1e4c4 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 d5c564ef..48b5d7f6 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 c7b984f5..2ee9db22 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 53b1b555..56db85e1 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 39ee20d5..462e0962 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 6be9eddb..1f31bae3 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 327ff67a..abb64a1c 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 17fbaaa1..ca5b11c7 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 d9c0013a..b6e81d85 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 0b98a882..39e14643 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 d21e2c58..cad972b9 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 6ec5c020..d0c6bd64 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 296464be..3ef991c1 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 b9c66755..ee184874 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 d1dac124..c63eee15 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 76b13252..d5909c63 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 a6aa09ce..bb1941df 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 4e87c3d3..a57e8e6e 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 8d078516..47569dbb 100644 --- a/page-data/app-data.json +++ b/page-data/app-data.json @@ -1 +1 @@ -{"webpackCompilationHash":"2ab0e5216235f97d7bbe"} +{"webpackCompilationHash":"d3209454bceedac0e499"} 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 aee90eb0..452320cc 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"},"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 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 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 738df031..d4fc4b5b 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"},"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 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 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 ead284c5..f8abb51e 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 }, \"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 React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useEffect\"), 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 geolocateControlRef\", 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 }, \"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 }, \"}\"), 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"},"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 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 }, \"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 React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useEffect\"), 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 geolocateControlRef\", 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 }, \"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 }, \"}\"), 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 1ca176d0..4d8aadf0 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"},"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 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 diff --git a/page-data/docs/api-reference/map-provider/page-data.json b/page-data/docs/api-reference/map-provider/page-data.json index 1b7c0585..29f2d2ed 100644 --- a/page-data/docs/api-reference/map-provider/page-data.json +++ b/page-data/docs/api-reference/map-provider/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/map-provider","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\": \"mapprovider\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#mapprovider\",\n \"aria-label\": \"mapprovider permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapProvider\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/context.html#contextprovider\"\n }, \"Context.Provider\"), \" that facilitates map operations outside of the component that directly renders a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \".\"), mdx(\"p\", null, \"The component should wrap all nodes in which you may want to access the maps:\"), 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 punctuation\"\n }, \"{\"), \"MapProvider\", 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 punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Application tree, somewhere one or more component(s) are rendered\"), \"\\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 }, \"/\"), \"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 }, \"}\")))), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" for more information.\"), 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":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component…","frontmatter":{"title":"MapProvider"}}},"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"},"title":"MapProvider","slug":"docs/api-reference/map-provider","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-provider","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\": \"mapprovider\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#mapprovider\",\n \"aria-label\": \"mapprovider permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapProvider\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/context.html#contextprovider\"\n }, \"Context.Provider\"), \" that facilitates map operations outside of the component that directly renders a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \".\"), mdx(\"p\", null, \"The component should wrap all nodes in which you may want to access the maps:\"), 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 punctuation\"\n }, \"{\"), \"MapProvider\", 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 punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// Application tree, somewhere one or more component(s) are rendered\"), \"\\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 }, \"/\"), \"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 }, \"}\")))), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" for more information.\"), 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":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component…","frontmatter":{"title":"MapProvider"}}},"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":"MapProvider","slug":"docs/api-reference/map-provider","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 6f0e3d64..8c351d91 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 React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useEffect\"), 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 }, \"'styleimagemissing'\"), 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 }, \")\"), \"\\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 }, \"}\"), \" \", 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-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"},"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 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 React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useEffect\"), 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 }, \"'styleimagemissing'\"), 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 }, \")\"), \"\\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 }, \"}\"), \" \", 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 e20518ca..087c07b6 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-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"},"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 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-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 c4413f3e..c04d3b75 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"},"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 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 diff --git a/page-data/docs/api-reference/popup/page-data.json b/page-data/docs/api-reference/popup/page-data.json index 1ad289d6..4da8ca56 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"},"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 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 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 3929c30d..06d5cd92 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"},"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 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 diff --git a/page-data/docs/api-reference/source/page-data.json b/page-data/docs/api-reference/source/page-data.json index 08dea30e..8ea221ae 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"},"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 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 diff --git a/page-data/docs/api-reference/types/page-data.json b/page-data/docs/api-reference/types/page-data.json index 615c612c..b07c7f6b 100644 --- a/page-data/docs/api-reference/types/page-data.json +++ b/page-data/docs/api-reference/types/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/types","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\": \"types\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#types\",\n \"aria-label\": \"types permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Types\"), mdx(\"p\", null, \"The following types can be imported from \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" when using TypeScript.\"), mdx(\"h2\", {\n \"id\": \"components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#components\",\n \"aria-label\": \"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 }))), \"Components\"), mdx(\"h4\", {\n \"id\": \"mapboxmap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxmap\",\n \"aria-label\": \"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 }))), \"MapboxMap\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"mapboxgl.Map\"), \" instance.\"), mdx(\"h4\", {\n \"id\": \"icontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#icontrol\",\n \"aria-label\": \"icontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"IControl\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"mapboxgl.IControl\"), \" implementation.\"), mdx(\"h4\", {\n \"id\": \"customlayerinterface\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#customlayerinterface\",\n \"aria-label\": \"customlayerinterface permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CustomLayerInterface\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface\"\n }, \"custom layer implementation\"), \".\"), mdx(\"h4\", {\n \"id\": \"mapref\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapref\",\n \"aria-label\": \"mapref permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapRef\"), mdx(\"p\", null, \"Instance \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"(https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)\"\n }, \"ref\"), \" of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#methods\"\n }, \"Map documentation\"), \" for details.\"), mdx(\"h4\", {\n \"id\": \"geolocatecontrolref\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocatecontrolref\",\n \"aria-label\": \"geolocatecontrolref permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateControlRef\"), mdx(\"p\", null, \"Instance \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"(https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)\"\n }, \"ref\"), \" of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\"), \" component. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/geolocate-control.md#methods\"\n }, \"GeolocateControl documentation\"), \" for details.\"), 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(\"h4\", {\n \"id\": \"mapboxstyle\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxstyle\",\n \"aria-label\": \"mapboxstyle permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxStyle\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://mapbox.com/mapbox-gl-style-spec/\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"fog\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fog\",\n \"aria-label\": \"fog permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Fog\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/\"\n }, \"Fog Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"light\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#light\",\n \"aria-label\": \"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 }))), \"Light\"), mdx(\"p\", null, \"An object conforming 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\": \"terrainspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#terrainspecification\",\n \"aria-label\": \"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 }))), \"TerrainSpecification\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/\"\n }, \"Terrain Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"projectionspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#projectionspecification\",\n \"aria-label\": \"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 }))), \"ProjectionSpecification\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"name\"), \" (string): projection name, one of Albers (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'albers'\"), \"), Equal Earth (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'equalEarth'\"), \"), Equirectangular/Plate Carr\\xE9e/WGS84 (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'equirectangular'\"), \"), Lambert (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'lambertConformalConic'\"), \"), Mercator (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'mercator'\"), \"), Natural Earth (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'naturalEarth'\"), \"), and Winkel Tripel (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'winkelTripel'\"), \").\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"center?\"), \" (\", \"[number, number]\", \"): longitude and latitude of the projection center\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"parallels?\"), \" (\", \"[number, number]\", \"): the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://en.wikipedia.org/wiki/Map_projection#Conic\"\n }, \"two standard parallels\"), \" of a conic projection such as Albers and Lambert.\")), mdx(\"h4\", {\n \"id\": \"backgroundlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#backgroundlayer\",\n \"aria-label\": \"backgroundlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"BackgroundLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"background\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"circlelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#circlelayer\",\n \"aria-label\": \"circlelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CircleLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"circle\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"fillextrusionlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fillextrusionlayer\",\n \"aria-label\": \"fillextrusionlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"FillExtrusionLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fill-extrusion\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"filllayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#filllayer\",\n \"aria-label\": \"filllayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"FillLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fill\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"heatmaplayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#heatmaplayer\",\n \"aria-label\": \"heatmaplayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"HeatmapLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"heatmap\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"hillshadelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#hillshadelayer\",\n \"aria-label\": \"hillshadelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"HillshadeLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"hillshade\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#hillshade\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"linelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#linelayer\",\n \"aria-label\": \"linelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LineLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"line\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rasterlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rasterlayer\",\n \"aria-label\": \"rasterlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#raster\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"symbollayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#symbollayer\",\n \"aria-label\": \"symbollayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"SymbolLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"symbol\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"skylayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#skylayer\",\n \"aria-label\": \"skylayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"SkyLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"sky\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"geojsonsourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geojsonsourceraw\",\n \"aria-label\": \"geojsonsourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeoJSONSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"geojson\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"videosourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#videosourceraw\",\n \"aria-label\": \"videosourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VideoSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"video\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#video\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"imagesourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#imagesourceraw\",\n \"aria-label\": \"imagesourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ImageSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"image\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"vectorsourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#vectorsourceraw\",\n \"aria-label\": \"vectorsourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VectorSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"vector\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rastersource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rastersource\",\n \"aria-label\": \"rastersource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterSource\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rasterdemsource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rasterdemsource\",\n \"aria-label\": \"rasterdemsource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterDemSource\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster-dem\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster-dem\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"canvassourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#canvassourceraw\",\n \"aria-label\": \"canvassourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CanvasSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"canvas\"), \" source type. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassourceoptions\"\n }, \"CanvasSourceOptions\"), \".\"), mdx(\"h2\", {\n \"id\": \"configurations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#configurations\",\n \"aria-label\": \"configurations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Configurations\"), mdx(\"h4\", {\n \"id\": \"anchor\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#anchor\",\n \"aria-label\": \"anchor permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Anchor\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'center'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\"), \".\"), mdx(\"h4\", {\n \"id\": \"alignment\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#alignment\",\n \"aria-label\": \"alignment permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Alignment\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'map'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'viewport'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\"), \".\"), mdx(\"h4\", {\n \"id\": \"controlposition\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#controlposition\",\n \"aria-label\": \"controlposition permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ControlPosition\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\"), \".\"), mdx(\"h4\", {\n \"id\": \"dragpanoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#dragpanoptions\",\n \"aria-label\": \"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 }))), \"DragPanOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"linearity?\"), \": number - The rate at which the speed reduces after the pan ends.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"easing?\"), \": (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"deceleration?\"), \": number - Factor used to scale the drag velocity. 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 }, \"maxSpeed?\"), \": number - The maximum value of the drag velocity. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"1400\"), \".\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler#enable\"\n }, \"DragPanHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"fitboundsoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fitboundsoptions\",\n \"aria-label\": \"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 }))), \"FitBoundsOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"offset?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#pointlike\"\n }, \"PointLike\"), \" - The center of the given bounds relative to the map's center, measured in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"padding?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#paddingoptions\"\n }, \"PaddingOptions\"), \" - The amount of padding in pixels to add to the given bounds.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxZoom?\"), \": number - The maximum zoom level to allow when the map view transitions to the specified bounds.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"animate?\"), \": boolean - When set to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \", no animation happens.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"linear?\"), \": boolean - If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map transitions using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#easeto\"\n }, \"Map#easeTo\"), \". If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map transitions using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"Map#flyTo\"), \" \"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"duration?\"), \": number - Duration in milliseconds\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxDuration?\"), \": number - Max duration in milliseconds\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"essential?\"), \": boolean - If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \", then the animation is considered essential and will not be affected by \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"prefers-reduced-motion\"), \". Otherwise, the transition will happen instantly if the user has enabled the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"reduced motion\"), \" accesibility feature in their operating system.\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds\"\n }, \"Map#fitBounds\")), mdx(\"h4\", {\n \"id\": \"zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#zoomrotateoptions\",\n \"aria-label\": \"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 }))), \"ZoomRotateOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"around?\"), \": 'center' - If \\\"center\\\" is passed, map will zoom around center of map.\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler#enable\"\n }, \"ScrollZoomHandler#enable\"), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler#enable\"\n }, \"TouchZoomRotateHandler#enable\")), mdx(\"h4\", {\n \"id\": \"paddingoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#paddingoptions\",\n \"aria-label\": \"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 }))), \"PaddingOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"left\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"top\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"right\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bottom\"), \": number - in pixels.\")), mdx(\"h4\", {\n \"id\": \"transformrequestfunction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#transformrequestfunction\",\n \"aria-label\": \"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 }))), \"TransformRequestFunction\"), mdx(\"p\", null, \"A function that takes the following arguments:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"url\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"resourceType\"), \": 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image';\")), mdx(\"p\", null, \"And returns an object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"url\"), \": string - The URL to be requested.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"credentials?\"), \": 'same-origin' | 'include' - Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'include'\"), \" to send cookies with cross-origin requests.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"headers?\"), \": { \", \"[header: string]\", \": any } - The headers to be sent with the request.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"method?\"), \": 'GET' | 'POST' | 'PUT'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"collectResourceTiming?\"), \": boolean\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/properties/#requestparameters\"\n }, \"RequestParameters\"), \".\"), mdx(\"h2\", {\n \"id\": \"data-types\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#data-types\",\n \"aria-label\": \"data types permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Data Types\"), mdx(\"h4\", {\n \"id\": \"lnglat\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglat\",\n \"aria-label\": \"lnglat permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLat\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat\"\n }, \"mapboxgl.LngLat\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"lnglatlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatlike\",\n \"aria-label\": \"lnglatlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLatLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \" object, an array of two numbers representing longitude and latitude, or an object with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lng\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lat\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lon\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lat\"), \" properties.\"), mdx(\"h4\", {\n \"id\": \"lnglatbounds\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatbounds\",\n \"aria-label\": \"lnglatbounds permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLatBounds\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds\"\n }, \"mapboxgl.LngLatBounds\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"lnglatboundslike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatboundslike\",\n \"aria-label\": \"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 }))), \"LngLatBoundsLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglatbounds\"\n }, \"LngLatBounds\"), \" object, an array of \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglatlike\"\n }, \"LngLatLike\"), \" objects in \", \"[sw, ne]\", \" order, or an array of numbers in \", \"[west, south, east, north]\", \" order.\"), mdx(\"h4\", {\n \"id\": \"point\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#point\",\n \"aria-label\": \"point permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Point\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/point-geometry\"\n }, \"mapboxgl.Point\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#pointlike\",\n \"aria-label\": \"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 }))), \"PointLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#point\"\n }, \"Point\"), \" or an array of two numbers representing x and y screen coordinates in pixels.\"), mdx(\"h4\", {\n \"id\": \"mapboxgeojsonfeature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxgeojsonfeature\",\n \"aria-label\": \"mapboxgeojsonfeature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxGeoJSONFeature\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://geojson.org/\"\n }, \"GeoJSON\"), \" feature that also contains the following library-specific fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"layer\"), \": Layer\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceLayer\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"state\"), \": { \", \"[key: string]\", \": any }\")), mdx(\"h4\", {\n \"id\": \"viewstate\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#viewstate\",\n \"aria-label\": \"viewstate permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ViewState\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number - The longitude of the map center.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number - The latitude of the map center.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number - The zoom level.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number - The pitch (tilt) of the map, in degrees.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number - The bearing (rotation) of the map, in degrees.\")), mdx(\"h2\", {\n \"id\": \"sources\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#sources\",\n \"aria-label\": \"sources permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Sources\"), mdx(\"p\", null, \"The following are implementations of source types that could be retrieved with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#getsource\"\n }, \"Map#getSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"geojsonsource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geojsonsource\",\n \"aria-label\": \"geojsonsource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeoJSONSource\"), mdx(\"p\", null, \"A source containing GeoJSON. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource\"\n }, \"GeoJSONSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"videosource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#videosource\",\n \"aria-label\": \"videosource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VideoSource\"), mdx(\"p\", null, \"A source containing video. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#videosource\"\n }, \"VideoSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"imagesource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#imagesource\",\n \"aria-label\": \"imagesource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ImageSource\"), mdx(\"p\", null, \"A source containing image. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#imagesource\"\n }, \"ImageSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"canvassource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#canvassource\",\n \"aria-label\": \"canvassource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CanvasSource\"), mdx(\"p\", null, \"A source containing the contents of an HTML canvas. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassource\"\n }, \"CanvasSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"vectortilesource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#vectortilesource\",\n \"aria-label\": \"vectortilesource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VectorTileSource\"), mdx(\"p\", null, \"A source containing vector tiles in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/vector-tiles/reference/\"\n }, \"Mapbox Vector Tile format\"), \". See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#vectortilesource\"\n }, \"VectorTileSource\"), \".\"), mdx(\"h2\", {\n \"id\": \"events\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#events\",\n \"aria-label\": \"events permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Events\"), mdx(\"h4\", {\n \"id\": \"mapboxevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxevent\",\n \"aria-label\": \"mapboxevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string - Event type\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\"), \" - The map instance that fired the event\")), mdx(\"h4\", {\n \"id\": \"maplayermouseevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#maplayermouseevent\",\n \"aria-label\": \"maplayermouseevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapLayerMouseEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\"\n }, \"MouseEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"point\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"features?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxgeojsonfeature\"\n }, \"MapboxGeoJSONFeature\"), \"[]\")), mdx(\"h4\", {\n \"id\": \"mapwheelevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapwheelevent\",\n \"aria-label\": \"mapwheelevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapWheelEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent\"\n }, \"WheelEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\")), mdx(\"h4\", {\n \"id\": \"maplayertouchevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#maplayertouchevent\",\n \"aria-label\": \"maplayertouchevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapLayerTouchEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\"\n }, \"TouchEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"point\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"points\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\"), \"[]\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLats\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \"[]\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"features?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxgeojsonfeature\"\n }, \"MapboxGeoJSONFeature\"), \"[]\")), mdx(\"h4\", {\n \"id\": \"viewstatechangeevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#viewstatechangeevent\",\n \"aria-label\": \"viewstatechangeevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ViewStateChangeEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string - Event type\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewState\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#viewstate\"\n }, \"ViewState\"), \" - the next view state that the camera wants to change to based on user input or transition.\")), mdx(\"h4\", {\n \"id\": \"mapboxzoomevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxzoomevent\",\n \"aria-label\": \"mapboxzoomevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapBoxZoomEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\"\n }, \"MouseEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"boxZoomBounds\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglatbounds\"\n }, \"LngLatBounds\"))), mdx(\"h4\", {\n \"id\": \"mapstyledataevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapstyledataevent\",\n \"aria-label\": \"mapstyledataevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapStyleDataEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dataType\"), \": 'style'\")), mdx(\"h4\", {\n \"id\": \"mapsourcedataevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapsourcedataevent\",\n \"aria-label\": \"mapsourcedataevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapSourceDataEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dataType\"), \": 'source'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isSourceLoaded\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceId\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceDataType\"), \": 'metadata' | 'content'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"tile\"), \": any\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"coord\"), \": Coordinate\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \".\"), mdx(\"h4\", {\n \"id\": \"errorevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#errorevent\",\n \"aria-label\": \"errorevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ErrorEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": 'error'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"error\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\"\n }, \"Error\"))), mdx(\"h4\", {\n \"id\": \"geolocateevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateevent\",\n \"aria-label\": \"geolocateevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\"))), mdx(\"h4\", {\n \"id\": \"geolocateresultevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateresultevent\",\n \"aria-label\": \"geolocateresultevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateResultEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"coords\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates\"\n }, \"GeolocationCoordinates\"), \" - the current location.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"timestamp\"), \": number - the time at which the location was retrieved.\")), mdx(\"h4\", {\n \"id\": \"geolocateerrorevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateerrorevent\",\n \"aria-label\": \"geolocateerrorevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateErrorEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"code\"), \": PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError\"\n }, \"GeolocationPositionError\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\")), mdx(\"h4\", {\n \"id\": \"markerdragevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#markerdragevent\",\n \"aria-label\": \"markerdragevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MarkerDragEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker\"\n }, \"mapboxgl.Marker\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \" - the new location of the marker\")), mdx(\"h4\", {\n \"id\": \"popupevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#popupevent\",\n \"aria-label\": \"popupevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"PopupEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"mapboxgl.Popup\"))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance…","frontmatter":{"title":"Types"}}},"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"},"title":"Types","slug":"docs/api-reference/types","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/types","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\": \"types\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#types\",\n \"aria-label\": \"types permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Types\"), mdx(\"p\", null, \"The following types can be imported from \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" when using TypeScript.\"), mdx(\"h2\", {\n \"id\": \"components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#components\",\n \"aria-label\": \"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 }))), \"Components\"), mdx(\"h4\", {\n \"id\": \"mapboxmap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxmap\",\n \"aria-label\": \"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 }))), \"MapboxMap\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/\"\n }, \"mapboxgl.Map\"), \" instance.\"), mdx(\"h4\", {\n \"id\": \"icontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#icontrol\",\n \"aria-label\": \"icontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"IControl\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"mapboxgl.IControl\"), \" implementation.\"), mdx(\"h4\", {\n \"id\": \"customlayerinterface\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#customlayerinterface\",\n \"aria-label\": \"customlayerinterface permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CustomLayerInterface\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface\"\n }, \"custom layer implementation\"), \".\"), mdx(\"h4\", {\n \"id\": \"mapref\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapref\",\n \"aria-label\": \"mapref permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapRef\"), mdx(\"p\", null, \"Instance \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"(https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)\"\n }, \"ref\"), \" of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#methods\"\n }, \"Map documentation\"), \" for details.\"), mdx(\"h4\", {\n \"id\": \"geolocatecontrolref\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocatecontrolref\",\n \"aria-label\": \"geolocatecontrolref permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateControlRef\"), mdx(\"p\", null, \"Instance \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"(https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)\"\n }, \"ref\"), \" of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\"), \" component. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/geolocate-control.md#methods\"\n }, \"GeolocateControl documentation\"), \" for details.\"), 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(\"h4\", {\n \"id\": \"mapboxstyle\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxstyle\",\n \"aria-label\": \"mapboxstyle permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxStyle\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://mapbox.com/mapbox-gl-style-spec/\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"fog\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fog\",\n \"aria-label\": \"fog permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Fog\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/\"\n }, \"Fog Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"light\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#light\",\n \"aria-label\": \"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 }))), \"Light\"), mdx(\"p\", null, \"An object conforming 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\": \"terrainspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#terrainspecification\",\n \"aria-label\": \"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 }))), \"TerrainSpecification\"), mdx(\"p\", null, \"An object conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/\"\n }, \"Terrain Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"projectionspecification\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#projectionspecification\",\n \"aria-label\": \"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 }))), \"ProjectionSpecification\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"name\"), \" (string): projection name, one of Albers (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'albers'\"), \"), Equal Earth (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'equalEarth'\"), \"), Equirectangular/Plate Carr\\xE9e/WGS84 (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'equirectangular'\"), \"), Lambert (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'lambertConformalConic'\"), \"), Mercator (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'mercator'\"), \"), Natural Earth (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'naturalEarth'\"), \"), and Winkel Tripel (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'winkelTripel'\"), \").\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"center?\"), \" (\", \"[number, number]\", \"): longitude and latitude of the projection center\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"parallels?\"), \" (\", \"[number, number]\", \"): the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://en.wikipedia.org/wiki/Map_projection#Conic\"\n }, \"two standard parallels\"), \" of a conic projection such as Albers and Lambert.\")), mdx(\"h4\", {\n \"id\": \"backgroundlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#backgroundlayer\",\n \"aria-label\": \"backgroundlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"BackgroundLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"background\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"circlelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#circlelayer\",\n \"aria-label\": \"circlelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CircleLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"circle\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"fillextrusionlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fillextrusionlayer\",\n \"aria-label\": \"fillextrusionlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"FillExtrusionLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fill-extrusion\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"filllayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#filllayer\",\n \"aria-label\": \"filllayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"FillLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fill\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"heatmaplayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#heatmaplayer\",\n \"aria-label\": \"heatmaplayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"HeatmapLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"heatmap\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"hillshadelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#hillshadelayer\",\n \"aria-label\": \"hillshadelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"HillshadeLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"hillshade\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#hillshade\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"linelayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#linelayer\",\n \"aria-label\": \"linelayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LineLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"line\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rasterlayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rasterlayer\",\n \"aria-label\": \"rasterlayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#raster\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"symbollayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#symbollayer\",\n \"aria-label\": \"symbollayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"SymbolLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"symbol\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"skylayer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#skylayer\",\n \"aria-label\": \"skylayer permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"SkyLayer\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"sky\"), \" layer according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"geojsonsourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geojsonsourceraw\",\n \"aria-label\": \"geojsonsourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeoJSONSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"geojson\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"videosourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#videosourceraw\",\n \"aria-label\": \"videosourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VideoSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"video\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#video\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"imagesourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#imagesourceraw\",\n \"aria-label\": \"imagesourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ImageSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"image\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"vectorsourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#vectorsourceraw\",\n \"aria-label\": \"vectorsourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VectorSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"vector\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rastersource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rastersource\",\n \"aria-label\": \"rastersource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterSource\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"rasterdemsource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#rasterdemsource\",\n \"aria-label\": \"rasterdemsource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"RasterDemSource\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"raster-dem\"), \" source according to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster-dem\"\n }, \"Mapbox Style Specification\"), \".\"), mdx(\"h4\", {\n \"id\": \"canvassourceraw\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#canvassourceraw\",\n \"aria-label\": \"canvassourceraw permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CanvasSourceRaw\"), mdx(\"p\", null, \"A JSON object that defines a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"canvas\"), \" source type. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassourceoptions\"\n }, \"CanvasSourceOptions\"), \".\"), mdx(\"h2\", {\n \"id\": \"configurations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#configurations\",\n \"aria-label\": \"configurations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Configurations\"), mdx(\"h4\", {\n \"id\": \"anchor\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#anchor\",\n \"aria-label\": \"anchor permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Anchor\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'center'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\"), \".\"), mdx(\"h4\", {\n \"id\": \"alignment\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#alignment\",\n \"aria-label\": \"alignment permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Alignment\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'map'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'viewport'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'auto'\"), \".\"), mdx(\"h4\", {\n \"id\": \"controlposition\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#controlposition\",\n \"aria-label\": \"controlposition permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ControlPosition\"), mdx(\"p\", null, \"One of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-right'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'top-left'\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-right'\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom-left'\"), \".\"), mdx(\"h4\", {\n \"id\": \"dragpanoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#dragpanoptions\",\n \"aria-label\": \"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 }))), \"DragPanOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"linearity?\"), \": number - The rate at which the speed reduces after the pan ends.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"easing?\"), \": (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"deceleration?\"), \": number - Factor used to scale the drag velocity. 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 }, \"maxSpeed?\"), \": number - The maximum value of the drag velocity. Default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"1400\"), \".\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler#enable\"\n }, \"DragPanHandler#enable\"), \".\"), mdx(\"h4\", {\n \"id\": \"fitboundsoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#fitboundsoptions\",\n \"aria-label\": \"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 }))), \"FitBoundsOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"offset?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#pointlike\"\n }, \"PointLike\"), \" - The center of the given bounds relative to the map's center, measured in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"padding?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#paddingoptions\"\n }, \"PaddingOptions\"), \" - The amount of padding in pixels to add to the given bounds.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxZoom?\"), \": number - The maximum zoom level to allow when the map view transitions to the specified bounds.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"animate?\"), \": boolean - When set to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \", no animation happens.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"linear?\"), \": boolean - If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \", the map transitions using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#easeto\"\n }, \"Map#easeTo\"), \". If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \", the map transitions using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto\"\n }, \"Map#flyTo\"), \" \"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"duration?\"), \": number - Duration in milliseconds\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxDuration?\"), \": number - Max duration in milliseconds\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"essential?\"), \": boolean - If \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \", then the animation is considered essential and will not be affected by \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"prefers-reduced-motion\"), \". Otherwise, the transition will happen instantly if the user has enabled the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"reduced motion\"), \" accesibility feature in their operating system.\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds\"\n }, \"Map#fitBounds\")), mdx(\"h4\", {\n \"id\": \"zoomrotateoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#zoomrotateoptions\",\n \"aria-label\": \"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 }))), \"ZoomRotateOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"around?\"), \": 'center' - If \\\"center\\\" is passed, map will zoom around center of map.\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler#enable\"\n }, \"ScrollZoomHandler#enable\"), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler#enable\"\n }, \"TouchZoomRotateHandler#enable\")), mdx(\"h4\", {\n \"id\": \"paddingoptions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#paddingoptions\",\n \"aria-label\": \"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 }))), \"PaddingOptions\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"left\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"top\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"right\"), \": number - in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bottom\"), \": number - in pixels.\")), mdx(\"h4\", {\n \"id\": \"transformrequestfunction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#transformrequestfunction\",\n \"aria-label\": \"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 }))), \"TransformRequestFunction\"), mdx(\"p\", null, \"A function that takes the following arguments:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"url\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"resourceType\"), \": 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image';\")), mdx(\"p\", null, \"And returns an object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"url\"), \": string - The URL to be requested.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"credentials?\"), \": 'same-origin' | 'include' - Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'include'\"), \" to send cookies with cross-origin requests.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"headers?\"), \": { \", \"[header: string]\", \": any } - The headers to be sent with the request.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"method?\"), \": 'GET' | 'POST' | 'PUT'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"collectResourceTiming?\"), \": boolean\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/properties/#requestparameters\"\n }, \"RequestParameters\"), \".\"), mdx(\"h2\", {\n \"id\": \"data-types\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#data-types\",\n \"aria-label\": \"data types permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Data Types\"), mdx(\"h4\", {\n \"id\": \"lnglat\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglat\",\n \"aria-label\": \"lnglat permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLat\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat\"\n }, \"mapboxgl.LngLat\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"lnglatlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatlike\",\n \"aria-label\": \"lnglatlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLatLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \" object, an array of two numbers representing longitude and latitude, or an object with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lng\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lat\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lon\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"lat\"), \" properties.\"), mdx(\"h4\", {\n \"id\": \"lnglatbounds\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatbounds\",\n \"aria-label\": \"lnglatbounds permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"LngLatBounds\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds\"\n }, \"mapboxgl.LngLatBounds\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"lnglatboundslike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#lnglatboundslike\",\n \"aria-label\": \"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 }))), \"LngLatBoundsLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglatbounds\"\n }, \"LngLatBounds\"), \" object, an array of \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#lnglatlike\"\n }, \"LngLatLike\"), \" objects in \", \"[sw, ne]\", \" order, or an array of numbers in \", \"[west, south, east, north]\", \" order.\"), mdx(\"h4\", {\n \"id\": \"point\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#point\",\n \"aria-label\": \"point permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Point\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/point-geometry\"\n }, \"mapboxgl.Point\"), \" object.\"), mdx(\"h4\", {\n \"id\": \"pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#pointlike\",\n \"aria-label\": \"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 }))), \"PointLike\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#point\"\n }, \"Point\"), \" or an array of two numbers representing x and y screen coordinates in pixels.\"), mdx(\"h4\", {\n \"id\": \"mapboxgeojsonfeature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxgeojsonfeature\",\n \"aria-label\": \"mapboxgeojsonfeature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxGeoJSONFeature\"), mdx(\"p\", null, \"A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://geojson.org/\"\n }, \"GeoJSON\"), \" feature that also contains the following library-specific fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"layer\"), \": Layer\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceLayer\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"state\"), \": { \", \"[key: string]\", \": any }\")), mdx(\"h4\", {\n \"id\": \"viewstate\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#viewstate\",\n \"aria-label\": \"viewstate permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ViewState\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \": number - The longitude of the map center.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \": number - The latitude of the map center.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \": number - The zoom level.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \": number - The pitch (tilt) of the map, in degrees.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \": number - The bearing (rotation) of the map, in degrees.\")), mdx(\"h2\", {\n \"id\": \"sources\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#sources\",\n \"aria-label\": \"sources permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Sources\"), mdx(\"p\", null, \"The following are implementations of source types that could be retrieved with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/map/#map#getsource\"\n }, \"Map#getSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"geojsonsource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geojsonsource\",\n \"aria-label\": \"geojsonsource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeoJSONSource\"), mdx(\"p\", null, \"A source containing GeoJSON. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource\"\n }, \"GeoJSONSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"videosource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#videosource\",\n \"aria-label\": \"videosource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VideoSource\"), mdx(\"p\", null, \"A source containing video. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#videosource\"\n }, \"VideoSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"imagesource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#imagesource\",\n \"aria-label\": \"imagesource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ImageSource\"), mdx(\"p\", null, \"A source containing image. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#imagesource\"\n }, \"ImageSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"canvassource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#canvassource\",\n \"aria-label\": \"canvassource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CanvasSource\"), mdx(\"p\", null, \"A source containing the contents of an HTML canvas. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassource\"\n }, \"CanvasSource\"), \".\"), mdx(\"h4\", {\n \"id\": \"vectortilesource\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#vectortilesource\",\n \"aria-label\": \"vectortilesource permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"VectorTileSource\"), mdx(\"p\", null, \"A source containing vector tiles in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/vector-tiles/reference/\"\n }, \"Mapbox Vector Tile format\"), \". See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/sources/#vectortilesource\"\n }, \"VectorTileSource\"), \".\"), mdx(\"h2\", {\n \"id\": \"events\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#events\",\n \"aria-label\": \"events permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Events\"), mdx(\"h4\", {\n \"id\": \"mapboxevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxevent\",\n \"aria-label\": \"mapboxevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapboxEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string - Event type\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\"), \" - The map instance that fired the event\")), mdx(\"h4\", {\n \"id\": \"maplayermouseevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#maplayermouseevent\",\n \"aria-label\": \"maplayermouseevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapLayerMouseEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\"\n }, \"MouseEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"point\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"features?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxgeojsonfeature\"\n }, \"MapboxGeoJSONFeature\"), \"[]\")), mdx(\"h4\", {\n \"id\": \"mapwheelevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapwheelevent\",\n \"aria-label\": \"mapwheelevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapWheelEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent\"\n }, \"WheelEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\")), mdx(\"h4\", {\n \"id\": \"maplayertouchevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#maplayertouchevent\",\n \"aria-label\": \"maplayertouchevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapLayerTouchEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\"\n }, \"TouchEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"point\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"points\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#point\"\n }, \"Point\"), \"[]\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLats\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \"[]\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventDefault\"), \": () => void\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"defaultPrevented\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"features?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxgeojsonfeature\"\n }, \"MapboxGeoJSONFeature\"), \"[]\")), mdx(\"h4\", {\n \"id\": \"viewstatechangeevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#viewstatechangeevent\",\n \"aria-label\": \"viewstatechangeevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ViewStateChangeEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string - Event type\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewState\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#viewstate\"\n }, \"ViewState\"), \" - the next view state that the camera wants to change to based on user input or transition.\")), mdx(\"h4\", {\n \"id\": \"mapboxzoomevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapboxzoomevent\",\n \"aria-label\": \"mapboxzoomevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapBoxZoomEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"originalEvent?\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\"\n }, \"MouseEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"boxZoomBounds\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglatbounds\"\n }, \"LngLatBounds\"))), mdx(\"h4\", {\n \"id\": \"mapstyledataevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapstyledataevent\",\n \"aria-label\": \"mapstyledataevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapStyleDataEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dataType\"), \": 'style'\")), mdx(\"h4\", {\n \"id\": \"mapsourcedataevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#mapsourcedataevent\",\n \"aria-label\": \"mapsourcedataevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapSourceDataEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dataType\"), \": 'source'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isSourceLoaded\"), \": boolean\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"source\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceId\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceDataType\"), \": 'metadata' | 'content'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"tile\"), \": any\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"coord\"), \": Coordinate\")), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent\"\n }, \"MapDataEvent\"), \".\"), mdx(\"h4\", {\n \"id\": \"errorevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#errorevent\",\n \"aria-label\": \"errorevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ErrorEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": 'error'\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"error\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\"\n }, \"Error\"))), mdx(\"h4\", {\n \"id\": \"geolocateevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateevent\",\n \"aria-label\": \"geolocateevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#mapboxmap\"\n }, \"MapboxMap\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\"))), mdx(\"h4\", {\n \"id\": \"geolocateresultevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateresultevent\",\n \"aria-label\": \"geolocateresultevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateResultEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"coords\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates\"\n }, \"GeolocationCoordinates\"), \" - the current location.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"timestamp\"), \": number - the time at which the location was retrieved.\")), mdx(\"h4\", {\n \"id\": \"geolocateerrorevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#geolocateerrorevent\",\n \"aria-label\": \"geolocateerrorevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"GeolocateErrorEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol\"\n }, \"mapboxgl.GeolocateControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"code\"), \": PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError\"\n }, \"GeolocationPositionError\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\")), mdx(\"h4\", {\n \"id\": \"markerdragevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#markerdragevent\",\n \"aria-label\": \"markerdragevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MarkerDragEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker\"\n }, \"mapboxgl.Marker\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"lngLat\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"#lnglat\"\n }, \"LngLat\"), \" - the new location of the marker\")), mdx(\"h4\", {\n \"id\": \"popupevent\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#popupevent\",\n \"aria-label\": \"popupevent permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"PopupEvent\"), mdx(\"p\", null, \"An object with the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"type\"), \": string\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"target\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"mapboxgl.Popup\"))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance…","frontmatter":{"title":"Types"}}},"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":"Types","slug":"docs/api-reference/types","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 179cb6aa..05456069 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 }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" IControl\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" IControl\"))), 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: MapboxMap, 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: MapboxMap, 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"},"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 }, \"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 }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" IControl\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" MapboxMap\", 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 }, \":\"), \" IControl\"))), 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: MapboxMap, 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: MapboxMap, 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 39d83876..3ceb6efb 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, used with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map-provider.md\"\n }, \"MapProvider\"), \", helps an app to perform map operations outside of the component that directly renders a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\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 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(): {[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(\"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, used with the MapProvider , helps an app to perform map operations outside of the component that directly renders…","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"},"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, used with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map-provider.md\"\n }, \"MapProvider\"), \", helps an app to perform map operations outside of the component that directly renders a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\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 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(): {[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(\"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, used with the MapProvider , helps an app to perform map operations outside of the component that directly renders…","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 6518e817..3d0095d4 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"},"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\"), \" 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 abab3cf2..24e1371b 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\": \"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"},"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 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 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 299e677d..cbb14aae 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\"))), 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"},"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 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\"))), 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 a5cdcb6a..7fe23926 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 }, \"mapboxApiAccessToken\"), \" 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, \"But we would recommend using something like \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/motdotla/dotenv\"\n }, \"dotenv\"), \" and put your key in an untracked \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \".env\"), \" file, that will then expose it as a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"process.env\"), \" variable, with much less leaking risks.\"), 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"},"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 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 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 7d42d893..e06ba859 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"},"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 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 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 new file mode 100644 index 00000000..0513b8d5 --- /dev/null +++ b/page-data/docs/get-started/tips-and-tricks/page-data.json @@ -0,0 +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 diff --git a/page-data/docs/page-data.json b/page-data/docs/page-data.json index 50526117..25d63741 100644 --- a/page-data/docs/page-data.json +++ b/page-data/docs/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs","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(\"p\", {\n \"align\": \"center\"\n }, \"\\n These docs are for\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v7.0-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n Looking for an old version?\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v6.1-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v5.3-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n\"), mdx(\"h1\", {\n \"id\": \"introduction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#introduction\",\n \"aria-label\": \"introduction permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Introduction\"), mdx(\"p\", null, \"react-map-gl is a suite of \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://facebook.github.io/react/\"\n }, \"React\"), \" components for\\nMapbox GL JS-compatible libraries.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Library\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/MapLibre/maplibre-gl-js\"\n }, \"MapLibre\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"An open fork of mapbox-gl v1, that can be used without a mapbox token.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js\"\n }, \"Mapbox GL JS v1\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js\"\n }, \"Mapbox GL JS v2\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Other mapbox-gl forks\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")))), mdx(\"p\", null, \"For basemaps:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can load map data from Mapbox's own service.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can create and host your own map data using one of the many \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/awesome-vector-tiles\"\n }, \"open source tools\"), \".\")), mdx(\"p\", null, \"New to react-map-gl? \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md\"\n }, \"Get Started\")), mdx(\"p\", null, \"Want to contribute? See our \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/developer-guide.md\"\n }, \"Developer Guide\")), mdx(\"h2\", {\n \"id\": \"design-philosophy\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#design-philosophy\",\n \"aria-label\": \"design philosophy permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Design Philosophy\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://kepler.gl\"\n }, \"geospatial analytics\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://avs.auto/\"\n }, \"self-driving data visualization\"), \". To manage the complexity of these applications, we fully embrace React and reactive programming.\"), mdx(\"p\", null, \"The stock mapbox-gl APIs are \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Imperative_programming\"\n }, \"imperative\"), \". That is, you instruct the map to do something (for example, \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto\"\n }, \"map.flyTo\"), \"), and it will execute the command at its own pace.\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://deck.gl\"\n }, \"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 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"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. \"), mdx(\"p\", null, \"Ultimately, in the spirit of the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Reactive_programming\"\n }, \"reactive programming paradigm\"), \", data always flows \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"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.\"), mdx(\"p\", null, \"react-map-gl creates a fully reactive wrapper for mapbox-gl. The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \" component can be fully \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/forms.html#controlled-components\"\n }, \"controlled\"), \", that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \".\"), mdx(\"h2\", {\n \"id\": \"limitations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#limitations\",\n \"aria-label\": \"limitations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Limitations\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"It is possible to call the native methods directly from the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance obtained via \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#gemap\"\n }, \"getMap\"), \". However, doing so may result in the map's state to deviate from its props. For example, calling \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.setMaxZoom\"), \" directly will cause the map's constraint settings to differ from the value of the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"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.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork…","frontmatter":{"title":"Introduction"}}},"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"},"title":"Introduction","slug":"docs","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs","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(\"p\", {\n \"align\": \"center\"\n }, \"\\n These docs are for\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v7.0-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n Looking for an old version?\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v6.1-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/docs\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://img.shields.io/badge/v5.3-brightgreen.svg?style=flat-square\"\n }), \"\\n \"), \"\\n\"), mdx(\"h1\", {\n \"id\": \"introduction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#introduction\",\n \"aria-label\": \"introduction permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Introduction\"), mdx(\"p\", null, \"react-map-gl is a suite of \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://facebook.github.io/react/\"\n }, \"React\"), \" components for\\nMapbox GL JS-compatible libraries.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Library\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/MapLibre/maplibre-gl-js\"\n }, \"MapLibre\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"An open fork of mapbox-gl v1, that can be used without a mapbox token.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js\"\n }, \"Mapbox GL JS v1\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js\"\n }, \"Mapbox GL JS v2\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Other mapbox-gl forks\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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.\")))), mdx(\"p\", null, \"For basemaps:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can load map data from Mapbox's own service.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can create and host your own map data using one of the many \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/awesome-vector-tiles\"\n }, \"open source tools\"), \".\")), mdx(\"p\", null, \"New to react-map-gl? \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md\"\n }, \"Get Started\")), mdx(\"p\", null, \"Want to contribute? See our \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/developer-guide.md\"\n }, \"Developer Guide\")), mdx(\"h2\", {\n \"id\": \"design-philosophy\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#design-philosophy\",\n \"aria-label\": \"design philosophy permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Design Philosophy\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://kepler.gl\"\n }, \"geospatial analytics\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://avs.auto/\"\n }, \"self-driving data visualization\"), \". To manage the complexity of these applications, we fully embrace React and reactive programming.\"), mdx(\"p\", null, \"The stock mapbox-gl APIs are \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Imperative_programming\"\n }, \"imperative\"), \". That is, you instruct the map to do something (for example, \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto\"\n }, \"map.flyTo\"), \"), and it will execute the command at its own pace.\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://deck.gl\"\n }, \"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 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"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. \"), mdx(\"p\", null, \"Ultimately, in the spirit of the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://en.wikipedia.org/wiki/Reactive_programming\"\n }, \"reactive programming paradigm\"), \", data always flows \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"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.\"), mdx(\"p\", null, \"react-map-gl creates a fully reactive wrapper for mapbox-gl. The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \" component can be fully \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/forms.html#controlled-components\"\n }, \"controlled\"), \", that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \".\"), mdx(\"h2\", {\n \"id\": \"limitations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#limitations\",\n \"aria-label\": \"limitations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Limitations\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"It is possible to call the native methods directly from the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" instance obtained via \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#gemap\"\n }, \"getMap\"), \". However, doing so may result in the map's state to deviate from its props. For example, calling \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"map.setMaxZoom\"), \" directly will cause the map's constraint settings to differ from the value of the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"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.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork…","frontmatter":{"title":"Introduction"}}},"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":"Introduction","slug":"docs","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 916919ce..73cdcdee 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 }, \"SVGOveray\"), \") 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 fro \", 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"},"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 }, \"SVGOveray\"), \") 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 fro \", 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 diff --git a/page-data/docs/whats-new/page-data.json b/page-data/docs/whats-new/page-data.json index 873756f8..7a26f53d 100644 --- a/page-data/docs/whats-new/page-data.json +++ b/page-data/docs/whats-new/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/whats-new","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\": \"whats-new\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#whats-new\",\n \"aria-label\": \"whats new permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What's new\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v70\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v70\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v7.0\"), mdx(\"p\", null, \"Release date: Feb 4, 2022\"), mdx(\"p\", null, \"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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Lightweight: the ESM build size is reduced from 219k to 57k\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"flyTo\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" etc.) can now be called directly without breaking the React binding.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Compatibility: first and third-party plugins! Directly use \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon\"\n }, \"mapbox-gl-draw\"), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder\"\n }, \"mapbox-gl-geocoder\"), \", to name a few.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md\"\n }, \"imported\"), \".\")), mdx(\"p\", null, \"Visit the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" if you are trying to upgrade from v5 and v6.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v53v61\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v53v61\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v5.3/v6.1\"), mdx(\"p\", null, \"Release date: Jan 27, 2020\"), mdx(\"h3\", {\n \"id\": \"highlights\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights\",\n \"aria-label\": \"highlights permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"TypeScript and Flow typings\"), \" are now published with the library\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"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 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#interaction-options\"\n }, \"interaction options\"), \" for details.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A new \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#eventrecognizeroptions\"\n }, \"eventRecognizerOptions\"), \" prop is added for fine-tuning the interaction experience.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"New component: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/attribution-control.md\"\n }, \"AttributionControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Promoted to official API: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/map-context.md\"\n }, \"MapContext\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resolved React error over attempted state update during render\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\"), \" added supports for \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"showAccuracyCircle\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All controls now support inline styling with a \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"style\"), \" prop\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All components and examples have been rewritten as functional components\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v60\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v60\",\n \"aria-label\": \"react map gl v60 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v6.0\"), mdx(\"p\", null, \"Release date: Dec 16, 2020\"), mdx(\"h3\", {\n \"id\": \"whats-changed\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#whats-changed\",\n \"aria-label\": \"whats changed permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What's Changed\"), mdx(\"p\", null, \"The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"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 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"NOT\"), \" upgrade to this version, and consider your options discussed in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/mapbox-tokens.md\"\n }, \"this document\"), \".\"), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" for a complete list of breaking changes.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v52\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v52\",\n \"aria-label\": \"react map gl v52 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.2\"), mdx(\"p\", null, \"Release date: Jan 6, 2020\"), mdx(\"h3\", {\n \"id\": \"highlights-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-1\",\n \"aria-label\": \"highlights 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 }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/scale-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"ScaleControl\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"NavigationControl\"), \": new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"label\"), \" prop\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"GeolocateControl\"), \": new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"label\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onGeolocate\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" props\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Export\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"WebMercatorViewport\"), \" is re-exported from the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport-mercator-project\"), \" library for ease of use. It's recommended to import it from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" instead to avoid future dependency change.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Example\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://visgl.github.io/react-map-gl/examples/clusters\"\n }, \"Clusters\"))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v51\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v51\",\n \"aria-label\": \"react map gl v51 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.1\"), mdx(\"p\", null, \"Release date: Oct 30, 2019\"), mdx(\"h3\", {\n \"id\": \"highlights-2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-2\",\n \"aria-label\": \"highlights 2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Layer\")), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Source\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Viewport transition\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionDuration\"), \" can be set to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'auto'\"), \" when using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/fly-to-interpolator.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"FlyToInterpolator\")), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Example\"), \": Add an \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://visgl.github.io/react-map-gl/examples/draw-polygon\"\n }, \"example\"), \" with drawing library \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw\"\n }, \"react-map-gl-draw\"), \".\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v50\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v50\",\n \"aria-label\": \"react map gl v50 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.0\"), mdx(\"p\", null, \"Release date: May 31, 2019\"), mdx(\"h3\", {\n \"id\": \"whats-changed-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#whats-changed-1\",\n \"aria-label\": \"whats changed 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 }))), \"What's Changed\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0\"\n }, \"changelog\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.mapbox.com/new-pricing-46b7c26166e7\"\n }, \"blog post\"), \".\"), mdx(\"p\", null, \"Alongside Mapbox GL JS's new milestone, we have relaxed the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" dependency from locking minor release (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"~0.53.0\"), \") to major release (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"^1.0.0\"), \"). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v41\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v41\",\n \"aria-label\": \"react map gl v41 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v4.1\"), mdx(\"p\", null, \"Release date: Mar 14, 2019\"), mdx(\"h3\", {\n \"id\": \"highlights-3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-3\",\n \"aria-label\": \"highlights 3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/fullscreen-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"FullscreenControl\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/geolocate-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New callback props\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" supports more callbacks:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onNativeClick\"))))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v40\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v40\",\n \"aria-label\": \"react map gl v40 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v4.0\"), mdx(\"p\", null, \"Release date: Nov 5, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-4\",\n \"aria-label\": \"highlights 4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Relative dimensions\"), \" Both \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" now support CSS strings supplied to map \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\"), \" props. New \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onResize\"), \" callback is fired when the map resizes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"React 16\"), \" Upgrade to React 16.3 context and ref patterns\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Babel 7\"), \" Upgrade build system to Babel 7, better support for tree-shaking\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Style diffing\"), \" Now use Mapbox's native style diffing. Immutable is no longer required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Draggable Markers\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" component now supports a new prop \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"draggable\"), \", along with callbacks \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \", and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"3d Popups\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Popup\"), \" component now supports a new prop \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sortByDepth\"), \" to enable proper occlusion when multiple popups are used in a tilted map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Interaction states\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \" is now called with richer descriptors of the user interaction, including \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isPanning\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isZooming\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isRotating\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Interactive layers\"), \" Dropped the requirement 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(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New callback props\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" supports more callbacks:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDblClick\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseDown\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseMove\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseUp\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchStart\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchMove\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchEnd\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseLeave\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onWheel\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseOut\"))))), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" for breaking changes.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v33\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v33\",\n \"aria-label\": \"react map gl v33 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.3\"), mdx(\"p\", null, \"Release date: July, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-5\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-5\",\n \"aria-label\": \"highlights 5 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New \", mdx(\"code\", {\n parentName: \"strong\",\n \"className\": \"language-text\"\n }, \"viewState\"), \" Property\"), \": Makes it possible to specify all map state properties (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \") as a single property.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New \", mdx(\"code\", {\n parentName: \"strong\",\n \"className\": \"language-text\"\n }, \"onViewStateChange\"), \" callback\"), \": An alternative callback that matches the new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewState\"), \" prop.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v32\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v32\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v3.2\"), mdx(\"p\", null, \"Realease date: January, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-6\",\n \"aria-label\": \"highlights 6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Viewport transition\"), \": feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Better parity of Mapbox interaction\"), \": navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Support for Map Reuse (experimental)\"), \": A new property \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mapbox-gl 0.42.2\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New props\"), \" of the InteractiveMap component:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Map creation: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"reuseMaps\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Interaction: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchZoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchRotate\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Transition: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionDuration\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionInterpolator\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionEasing\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionInterruption\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionStart\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionInterrupt\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionEnd\"))))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v31\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v31\",\n \"aria-label\": \"react map gl v31 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.1\"), mdx(\"p\", null, \"Release date: October 19, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-7\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-7\",\n \"aria-label\": \"highlights 7 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Event handling\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Support right mouse drag to rotate\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Support keyboard navigation\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Allow controls and overlays to block map interactions\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"React 16\"), \" - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \">=15.4.x\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mapbox-gl v0.40.1\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"No Token warning\"), \": react-map-gl now renders an HTML message if no mapbox token is supplied.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v30\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v30\",\n \"aria-label\": \"react map gl v30 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.0\"), mdx(\"p\", null, \"Release date: July 27th, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-8\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-8\",\n \"aria-label\": \"highlights 8 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Latest Mapbox GL JS\"), \": Bumps \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases\"\n }, \"0.38\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Multi-Touch Support\"), \": Full support for multi-touch gestures such as pinch-to-zoom and rotate.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": The \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapGL\"), \" component has been split into \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/static-map.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"StaticMap\")), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\")), \" (the default). Also, \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/popup.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Popup\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/marker.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Marker\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/navigation-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"NavigationControl\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Improved Overlay Components\"), \": Supplying viewport props (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \") are no longer required if you render \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/svg-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/canvas-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\")), \" or \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/html-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\")), \" as a child of the map. Perspective mode is now supported in all overlays.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Props\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"minPitch\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dragPan\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"doubleClickZoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchZoomRotate\"), \",\\n\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \" are now provided to allow granular control of map interactivity.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Documentation\"), \": Significantly expanded and linked with our other geospatial frameworks.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Examples\"), \": New stand-alone examples to get you started instantly with the new features.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Event Handling\"), \": New event handling architecture that enables full customization of event handling (experimental).\")), mdx(\"h3\", {\n \"id\": \"components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#components\",\n \"aria-label\": \"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 }))), \"Components\"), mdx(\"h4\", {\n \"id\": \"interactivemap-new-mapgl-replacement\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#interactivemap-new-mapgl-replacement\",\n \"aria-label\": \"interactivemap new mapgl replacement permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }, \"InteractiveMap (New, MapGL replacement)\")), mdx(\"p\", null, \"This is a wrapper on top of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \". It takes all the props of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" and additional ones such as \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"dragRotate\"), \", etc. to control interactivity on the map. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/interactive-map.js\"\n }, \"Source Code\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"staticmap-new\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#staticmap-new\",\n \"aria-label\": \"staticmap new permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/static-map.md\"\n }, \"StaticMap (New)\")), mdx(\"p\", null, \"This is the React wrapper around \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" and takes in viewport properties such as \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \". Style diffing and updating logic also live here. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/static-map.js\"\n }, \"Source Code\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\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 }, \"Three overlays (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ScatterplotOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"DraggablePointsOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ChoroplethOverlay\"), \"), have been moved out of the library and are now only provided as examples.\")), mdx(\"h3\", {\n \"id\": \"property-changes\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#property-changes\",\n \"aria-label\": \"property changes permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Property Changes\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Property Names\"), \" - some prop names have been modernized, the old ones will still work for now with a warning.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Internal Properties\"), \" such as \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isHovering\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isDragging\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"startDragLngLat\"), \" have been removed.\\nThese were never meant to be useful publicly and have caused confusions in the past.\")), mdx(\"h3\", {\n \"id\": \"utilities\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#utilities\",\n \"aria-label\": \"utilities permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Utilities\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"fitBounds\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" has been moved to another repository and has been rewritten to provide a more logical interface.\")), mdx(\"p\", null, \"For more information, see the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Upgrade Guide\"), \".\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v20\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v20\",\n \"aria-label\": \"react map gl v20 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v2.0\"), mdx(\"p\", null, \"Date: Jan 17, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-9\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-9\",\n \"aria-label\": \"highlights 9 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Latest mapbox-gl\"), \": Bump \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" to v0.31.0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"new maxZoom prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxZoom\"), \" prop and defaults to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"20\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New onLoad prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onLoad\"), \" event handler\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"new onClick prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onClick\"), \" prop handler (#140)\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v10\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v10\",\n \"aria-label\": \"react map gl v10 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v1.0\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Perspective Mode\"), \" - Now supports \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"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'.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v06\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v06\",\n \"aria-label\": \"react map gl v06 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v0.6\"), mdx(\"p\", null, \"Initial public version\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":5,"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 v…","frontmatter":{"title":"What's new"}}},"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"},"title":"What's new","slug":"docs/whats-new","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/whats-new","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\": \"whats-new\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#whats-new\",\n \"aria-label\": \"whats new permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What's new\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v70\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v70\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v7.0\"), mdx(\"p\", null, \"Release date: Feb 4, 2022\"), mdx(\"p\", null, \"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:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Lightweight: the ESM build size is reduced from 219k to 57k\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"flyTo\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" etc.) can now be called directly without breaking the React binding.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Compatibility: first and third-party plugins! Directly use \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon\"\n }, \"mapbox-gl-draw\"), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder\"\n }, \"mapbox-gl-geocoder\"), \", to name a few.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md\"\n }, \"imported\"), \".\")), mdx(\"p\", null, \"Visit the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" if you are trying to upgrade from v5 and v6.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v53v61\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v53v61\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v5.3/v6.1\"), mdx(\"p\", null, \"Release date: Jan 27, 2020\"), mdx(\"h3\", {\n \"id\": \"highlights\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights\",\n \"aria-label\": \"highlights permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"TypeScript and Flow typings\"), \" are now published with the library\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"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 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#interaction-options\"\n }, \"interaction options\"), \" for details.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A new \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#eventrecognizeroptions\"\n }, \"eventRecognizerOptions\"), \" prop is added for fine-tuning the interaction experience.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"New component: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/attribution-control.md\"\n }, \"AttributionControl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Promoted to official API: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/map-context.md\"\n }, \"MapContext\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resolved React error over attempted state update during render\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\"), \" added supports for \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"showAccuracyCircle\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All controls now support inline styling with a \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"style\"), \" prop\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All components and examples have been rewritten as functional components\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v60\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v60\",\n \"aria-label\": \"react map gl v60 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v6.0\"), mdx(\"p\", null, \"Release date: Dec 16, 2020\"), mdx(\"h3\", {\n \"id\": \"whats-changed\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#whats-changed\",\n \"aria-label\": \"whats changed permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What's Changed\"), mdx(\"p\", null, \"The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0\"\n }, \"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 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"NOT\"), \" upgrade to this version, and consider your options discussed in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/get-started/mapbox-tokens.md\"\n }, \"this document\"), \".\"), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" for a complete list of breaking changes.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v52\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v52\",\n \"aria-label\": \"react map gl v52 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.2\"), mdx(\"p\", null, \"Release date: Jan 6, 2020\"), mdx(\"h3\", {\n \"id\": \"highlights-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-1\",\n \"aria-label\": \"highlights 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 }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/scale-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"ScaleControl\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"NavigationControl\"), \": new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"label\"), \" prop\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"GeolocateControl\"), \": new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"label\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onGeolocate\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"auto\"), \" props\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Export\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"WebMercatorViewport\"), \" is re-exported from the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport-mercator-project\"), \" library for ease of use. It's recommended to import it from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" instead to avoid future dependency change.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Example\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://visgl.github.io/react-map-gl/examples/clusters\"\n }, \"Clusters\"))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v51\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v51\",\n \"aria-label\": \"react map gl v51 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.1\"), mdx(\"p\", null, \"Release date: Oct 30, 2019\"), mdx(\"h3\", {\n \"id\": \"highlights-2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-2\",\n \"aria-label\": \"highlights 2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/layer.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Layer\")), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Source\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Viewport transition\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionDuration\"), \" can be set to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"'auto'\"), \" when using \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/fly-to-interpolator.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"FlyToInterpolator\")), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Example\"), \": Add an \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://visgl.github.io/react-map-gl/examples/draw-polygon\"\n }, \"example\"), \" with drawing library \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw\"\n }, \"react-map-gl-draw\"), \".\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v50\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v50\",\n \"aria-label\": \"react map gl v50 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v5.0\"), mdx(\"p\", null, \"Release date: May 31, 2019\"), mdx(\"h3\", {\n \"id\": \"whats-changed-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#whats-changed-1\",\n \"aria-label\": \"whats changed 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 }))), \"What's Changed\"), mdx(\"p\", null, \"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 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0\"\n }, \"changelog\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.mapbox.com/new-pricing-46b7c26166e7\"\n }, \"blog post\"), \".\"), mdx(\"p\", null, \"Alongside Mapbox GL JS's new milestone, we have relaxed the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" dependency from locking minor release (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"~0.53.0\"), \") to major release (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"^1.0.0\"), \"). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v41\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v41\",\n \"aria-label\": \"react map gl v41 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v4.1\"), mdx(\"p\", null, \"Release date: Mar 14, 2019\"), mdx(\"h3\", {\n \"id\": \"highlights-3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-3\",\n \"aria-label\": \"highlights 3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/fullscreen-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"FullscreenControl\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/geolocate-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"GeolocateControl\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New callback props\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" supports more callbacks:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onNativeClick\"))))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v40\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v40\",\n \"aria-label\": \"react map gl v40 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v4.0\"), mdx(\"p\", null, \"Release date: Nov 5, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-4\",\n \"aria-label\": \"highlights 4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Relative dimensions\"), \" Both \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" now support CSS strings supplied to map \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\"), \" props. New \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onResize\"), \" callback is fired when the map resizes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"React 16\"), \" Upgrade to React 16.3 context and ref patterns\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Babel 7\"), \" Upgrade build system to Babel 7, better support for tree-shaking\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Style diffing\"), \" Now use Mapbox's native style diffing. Immutable is no longer required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Draggable Markers\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Marker\"), \" component now supports a new prop \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"draggable\"), \", along with callbacks \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDragStart\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDrag\"), \", and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDragEnd\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"3d Popups\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Popup\"), \" component now supports a new prop \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sortByDepth\"), \" to enable proper occlusion when multiple popups are used in a tilted map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Interaction states\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \" is now called with richer descriptors of the user interaction, including \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isPanning\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isZooming\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isRotating\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Interactive layers\"), \" Dropped the requirement 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(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New callback props\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" supports more callbacks:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onDblClick\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseDown\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseMove\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseUp\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchStart\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchMove\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTouchEnd\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseLeave\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onWheel\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseOut\"))))), mdx(\"p\", null, \"See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/upgrade-guide.md\"\n }, \"upgrade guide\"), \" for breaking changes.\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v33\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v33\",\n \"aria-label\": \"react map gl v33 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.3\"), mdx(\"p\", null, \"Release date: July, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-5\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-5\",\n \"aria-label\": \"highlights 5 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New \", mdx(\"code\", {\n parentName: \"strong\",\n \"className\": \"language-text\"\n }, \"viewState\"), \" Property\"), \": Makes it possible to specify all map state properties (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \") as a single property.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New \", mdx(\"code\", {\n parentName: \"strong\",\n \"className\": \"language-text\"\n }, \"onViewStateChange\"), \" callback\"), \": An alternative callback that matches the new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewState\"), \" prop.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v32\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v32\",\n \"aria-label\": \"react map gl 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 }))), \"react-map-gl v3.2\"), mdx(\"p\", null, \"Realease date: January, 2018\"), mdx(\"h3\", {\n \"id\": \"highlights-6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-6\",\n \"aria-label\": \"highlights 6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Viewport transition\"), \": feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Better parity of Mapbox interaction\"), \": navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Support for Map Reuse (experimental)\"), \": A new property \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mapbox-gl 0.42.2\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New props\"), \" of the InteractiveMap component:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Map creation: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transformRequest\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"reuseMaps\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Interaction: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchZoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchRotate\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Transition: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionDuration\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionInterpolator\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionEasing\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transitionInterruption\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionStart\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionInterrupt\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onTransitionEnd\"))))), mdx(\"h2\", {\n \"id\": \"react-map-gl-v31\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v31\",\n \"aria-label\": \"react map gl v31 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.1\"), mdx(\"p\", null, \"Release date: October 19, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-7\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-7\",\n \"aria-label\": \"highlights 7 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Event handling\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Support right mouse drag to rotate\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Support keyboard navigation\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Allow controls and overlays to block map interactions\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"React 16\"), \" - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \">=15.4.x\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mapbox-gl v0.40.1\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"No Token warning\"), \": react-map-gl now renders an HTML message if no mapbox token is supplied.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v30\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v30\",\n \"aria-label\": \"react map gl v30 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v3.0\"), mdx(\"p\", null, \"Release date: July 27th, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-8\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-8\",\n \"aria-label\": \"highlights 8 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Latest Mapbox GL JS\"), \": Bumps \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases\"\n }, \"0.38\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Multi-Touch Support\"), \": Full support for multi-touch gestures such as pinch-to-zoom and rotate.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Components\"), \": The \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapGL\"), \" component has been split into \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/static-map.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"StaticMap\")), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\")), \" (the default). Also, \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/popup.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Popup\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/marker.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"Marker\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/navigation-control.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"NavigationControl\")), \" have been added to provide better React parity with the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" API.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Improved Overlay Components\"), \": Supplying viewport props (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \" \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \") are no longer required if you render \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/svg-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\")), \", \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/canvas-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\")), \" or \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/html-overlay.md\"\n }, mdx(\"code\", {\n parentName: \"a\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\")), \" as a child of the map. Perspective mode is now supported in all overlays.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New Props\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"minPitch\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"dragPan\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"doubleClickZoom\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchZoomRotate\"), \",\\n\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \" are now provided to allow granular control of map interactivity.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Documentation\"), \": Significantly expanded and linked with our other geospatial frameworks.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Examples\"), \": New stand-alone examples to get you started instantly with the new features.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Event Handling\"), \": New event handling architecture that enables full customization of event handling (experimental).\")), mdx(\"h3\", {\n \"id\": \"components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#components\",\n \"aria-label\": \"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 }))), \"Components\"), mdx(\"h4\", {\n \"id\": \"interactivemap-new-mapgl-replacement\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#interactivemap-new-mapgl-replacement\",\n \"aria-label\": \"interactivemap new mapgl replacement permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }, \"InteractiveMap (New, MapGL replacement)\")), mdx(\"p\", null, \"This is a wrapper on top of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \". It takes all the props of \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" and additional ones such as \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"scrollZoom\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"dragRotate\"), \", etc. to control interactivity on the map. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/interactive-map.js\"\n }, \"Source Code\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"staticmap-new\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#staticmap-new\",\n \"aria-label\": \"staticmap new permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/static-map.md\"\n }, \"StaticMap (New)\")), mdx(\"p\", null, \"This is the React wrapper around \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Mapbox GL JS\"), \" and takes in viewport properties such as \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \". Style diffing and updating logic also live here. See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/static-map.js\"\n }, \"Source Code\"), \" for more information.\"), mdx(\"h4\", {\n \"id\": \"overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\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 }, \"Three overlays (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ScatterplotOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"DraggablePointsOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ChoroplethOverlay\"), \"), have been moved out of the library and are now only provided as examples.\")), mdx(\"h3\", {\n \"id\": \"property-changes\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#property-changes\",\n \"aria-label\": \"property changes permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Property Changes\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Property Names\"), \" - some prop names have been modernized, the old ones will still work for now with a warning.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Internal Properties\"), \" such as \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isHovering\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"isDragging\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"startDragLngLat\"), \" have been removed.\\nThese were never meant to be useful publicly and have caused confusions in the past.\")), mdx(\"h3\", {\n \"id\": \"utilities\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#utilities\",\n \"aria-label\": \"utilities permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Utilities\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"fitBounds\"), \": \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" has been moved to another repository and has been rewritten to provide a more logical interface.\")), mdx(\"p\", null, \"For more information, see the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Upgrade Guide\"), \".\"), mdx(\"h2\", {\n \"id\": \"react-map-gl-v20\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v20\",\n \"aria-label\": \"react map gl v20 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v2.0\"), mdx(\"p\", null, \"Date: Jan 17, 2017\"), mdx(\"h3\", {\n \"id\": \"highlights-9\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#highlights-9\",\n \"aria-label\": \"highlights 9 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Highlights\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Latest mapbox-gl\"), \": Bump \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" to v0.31.0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"new maxZoom prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxZoom\"), \" prop and defaults to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"20\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"New onLoad prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onLoad\"), \" event handler\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"new onClick prop\"), \" - Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onClick\"), \" prop handler (#140)\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v10\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v10\",\n \"aria-label\": \"react map gl v10 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v1.0\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Perspective Mode\"), \" - Now supports \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"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'.\")), mdx(\"h2\", {\n \"id\": \"react-map-gl-v06\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react-map-gl-v06\",\n \"aria-label\": \"react map gl v06 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"react-map-gl v0.6\"), mdx(\"p\", null, \"Initial public version\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":5,"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 v…","frontmatter":{"title":"What's new"}}},"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":"What's new","slug":"docs/whats-new","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 0e9c62e5..0f70e04a 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. 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":"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 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":"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 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: MapboxMap, mapLib: mapboxgl}) => IControl - called to create an instance of the control. onRemove : ({map: MapboxMap, 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, used with the MapProvider , helps an app to perform map operations outside of the component that directly renders a Map . See a full example here . Signature useMap(): {[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 . 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 SVGOveray ) 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 fro \"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. 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":"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 mapboxApiAccessToken prop to the map component Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App) Provide it in the URL, e.g ?access_token=TOKEN But we would recommend using something like dotenv and put your key in an untracked .env file, that will then expose it as a process.env variable, with much less leaking risks. Display Maps Without A Mapbox Token It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are: Stay on 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"}]}},"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 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":"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 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: MapboxMap, mapLib: mapboxgl}) => IControl - called to create an instance of the control. onRemove : ({map: MapboxMap, 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, used with the MapProvider , helps an app to perform map operations outside of the component that directly renders a Map . See a full example here . Signature useMap(): {[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 . 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 SVGOveray ) 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 fro \"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 diff --git a/page-data/sq/d/484347790.json b/page-data/sq/d/484347790.json index 8dfee8d8..09ce9a57 100644 --- a/page-data/sq/d/484347790.json +++ b/page-data/sq/d/484347790.json @@ -1 +1 @@ -{"data":{"site":{"siteMetadata":{"config":{"PROJECT_NAME":"react-map-gl","PROJECT_TYPE":"github","PROJECT_DESC":"React wrapper for Mapbox GL JS","PROJECT_URL":"https://github.com/visgl/","PROJECT_ORG":"visgl","PROJECT_IMAGE":"images/hero-sm.jpg","PROJECT_ORG_LOGO":"images/visgl-logo.png","HEADER_LINK_URL":"/","LINK_TO_GET_STARTED":"/docs/get-started/get-started","PATH_PREFIX":"/react-map-gl","GA_TRACKING_ID":"UA-74374017-2","EXAMPLES":[{"title":"Dynamic Styling","path":"examples/layers"},{"title":"Markers & Popups","path":"examples/controls"},{"title":"Custom Cursor","path":"examples/custom-cursor"},{"title":"Draggable Marker","path":"examples/draggable-markers"},{"title":"GeoJSON","path":"examples/geojson"},{"title":"GeoJSON Animation","path":"examples/geojson-animation"},{"title":"Clusters","path":"examples/clusters"},{"title":"Limit Map Interaction","path":"examples/interaction"},{"title":"Camera Transition","path":"examples/viewport-animation"},{"title":"Highlight By Filter","path":"examples/filter"},{"title":"Zoom To Bounds","path":"examples/zoom-to-bounds"},{"title":"Heatmap","path":"examples/heatmap"},{"title":"Draw Polygon","path":"examples/draw-polygon"},{"title":"Terrain","path":"examples/terrain"},{"title":"Geocoder","path":"examples/geocoder"},{"title":"Side by Side","path":"examples/side-by-side"}],"THEME_OVERRIDES":"{\"primary400\":\"#00ADE6\",\"mono100\":\"#FFFFFF\",\"mono200\":\"#f7fcfb\",\"mono300\":\"#ecf7f5\",\"mono400\":\"#e1f0ee\",\"mono500\":\"#cae0dc\",\"mono600\":\"#9ec0bb\",\"mono700\":\"#6f9691\",\"mono800\":\"#486865\",\"mono900\":\"#2b4845\",\"mono1000\":\"#101918\"}","STYLESHEETS":["https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css","/style.css"],"PROJECTS":[{"name":"deck.gl","url":"https://deck.gl"},{"name":"luma.gl","url":"https://luma.gl"},{"name":"loaders.gl","url":"https://loaders.gl"},{"name":"nebula.gl","url":"https://nebula.gl/"}],"ADDITIONAL_LINKS":[{"name":"Blog","href":"http://medium.com/vis-gl","index":4}],"HOME_PATH":""}}},"tableOfContents":{"chapters":[{"title":"Introduction","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"Introduction"},"fields":{"slug":"docs"},"headings":null}},{"childMdx":{"frontmatter":{"title":"What's new"},"fields":{"slug":"docs/whats-new"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Upgrade Guide"},"fields":{"slug":"docs/upgrade-guide"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Contributing to react-map-gl"},"fields":{"slug":"docs/contributing"},"headings":null}}]},{"title":"Developer Guide","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"Get Started"},"fields":{"slug":"docs/get-started/get-started"},"headings":null}},{"childMdx":{"frontmatter":{"title":"About Mapbox Tokens"},"fields":{"slug":"docs/get-started/mapbox-tokens"},"headings":null}},{"childMdx":{"frontmatter":{"title":"State Management"},"fields":{"slug":"docs/get-started/state-management"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Adding Custom Data"},"fields":{"slug":"docs/get-started/adding-custom-data"},"headings":null}}]},{"title":"API Reference","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"default (Map)"},"fields":{"slug":"docs/api-reference/map"},"headings":null}},{"childMdx":{"frontmatter":{"title":"AttributionControl"},"fields":{"slug":"docs/api-reference/attribution-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"FullscreenControl"},"fields":{"slug":"docs/api-reference/fullscreen-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"GeolocateControl"},"fields":{"slug":"docs/api-reference/geolocate-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Layer"},"fields":{"slug":"docs/api-reference/layer"},"headings":null}},{"childMdx":{"frontmatter":{"title":"MapProvider"},"fields":{"slug":"docs/api-reference/map-provider"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Marker"},"fields":{"slug":"docs/api-reference/marker"},"headings":null}},{"childMdx":{"frontmatter":{"title":"NavigationControl"},"fields":{"slug":"docs/api-reference/navigation-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Popup"},"fields":{"slug":"docs/api-reference/popup"},"headings":null}},{"childMdx":{"frontmatter":{"title":"ScaleControl"},"fields":{"slug":"docs/api-reference/scale-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Source"},"fields":{"slug":"docs/api-reference/source"},"headings":null}},{"childMdx":{"frontmatter":{"title":"useControl"},"fields":{"slug":"docs/api-reference/use-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"useMap"},"fields":{"slug":"docs/api-reference/use-map"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Types"},"fields":{"slug":"docs/api-reference/types"},"headings":null}}]}]}}} \ No newline at end of file +{"data":{"site":{"siteMetadata":{"config":{"PROJECT_NAME":"react-map-gl","PROJECT_TYPE":"github","PROJECT_DESC":"React wrapper for Mapbox GL JS","PROJECT_URL":"https://github.com/visgl/","PROJECT_ORG":"visgl","PROJECT_IMAGE":"images/hero-sm.jpg","PROJECT_ORG_LOGO":"images/visgl-logo.png","HEADER_LINK_URL":"/","LINK_TO_GET_STARTED":"/docs/get-started/get-started","PATH_PREFIX":"/react-map-gl","GA_TRACKING_ID":"UA-74374017-2","EXAMPLES":[{"title":"Dynamic Styling","path":"examples/layers"},{"title":"Markers & Popups","path":"examples/controls"},{"title":"Custom Cursor","path":"examples/custom-cursor"},{"title":"Draggable Marker","path":"examples/draggable-markers"},{"title":"GeoJSON","path":"examples/geojson"},{"title":"GeoJSON Animation","path":"examples/geojson-animation"},{"title":"Clusters","path":"examples/clusters"},{"title":"Limit Map Interaction","path":"examples/interaction"},{"title":"Camera Transition","path":"examples/viewport-animation"},{"title":"Highlight By Filter","path":"examples/filter"},{"title":"Zoom To Bounds","path":"examples/zoom-to-bounds"},{"title":"Heatmap","path":"examples/heatmap"},{"title":"Draw Polygon","path":"examples/draw-polygon"},{"title":"Terrain","path":"examples/terrain"},{"title":"Geocoder","path":"examples/geocoder"},{"title":"Side by Side","path":"examples/side-by-side"}],"THEME_OVERRIDES":"{\"primary400\":\"#00ADE6\",\"mono100\":\"#FFFFFF\",\"mono200\":\"#f7fcfb\",\"mono300\":\"#ecf7f5\",\"mono400\":\"#e1f0ee\",\"mono500\":\"#cae0dc\",\"mono600\":\"#9ec0bb\",\"mono700\":\"#6f9691\",\"mono800\":\"#486865\",\"mono900\":\"#2b4845\",\"mono1000\":\"#101918\"}","STYLESHEETS":["https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css","https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css","/style.css"],"PROJECTS":[{"name":"deck.gl","url":"https://deck.gl"},{"name":"luma.gl","url":"https://luma.gl"},{"name":"loaders.gl","url":"https://loaders.gl"},{"name":"nebula.gl","url":"https://nebula.gl/"}],"ADDITIONAL_LINKS":[{"name":"Blog","href":"http://medium.com/vis-gl","index":4}],"HOME_PATH":""}}},"tableOfContents":{"chapters":[{"title":"Introduction","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"Introduction"},"fields":{"slug":"docs"},"headings":null}},{"childMdx":{"frontmatter":{"title":"What's new"},"fields":{"slug":"docs/whats-new"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Upgrade Guide"},"fields":{"slug":"docs/upgrade-guide"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Contributing to react-map-gl"},"fields":{"slug":"docs/contributing"},"headings":null}}]},{"title":"Developer Guide","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"Get Started"},"fields":{"slug":"docs/get-started/get-started"},"headings":null}},{"childMdx":{"frontmatter":{"title":"About Mapbox Tokens"},"fields":{"slug":"docs/get-started/mapbox-tokens"},"headings":null}},{"childMdx":{"frontmatter":{"title":"State Management"},"fields":{"slug":"docs/get-started/state-management"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Adding Custom Data"},"fields":{"slug":"docs/get-started/adding-custom-data"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Tips and Tricks"},"fields":{"slug":"docs/get-started/tips-and-tricks"},"headings":null}}]},{"title":"API Reference","level":1,"chapters":null,"entries":[{"childMdx":{"frontmatter":{"title":"default (Map)"},"fields":{"slug":"docs/api-reference/map"},"headings":null}},{"childMdx":{"frontmatter":{"title":"AttributionControl"},"fields":{"slug":"docs/api-reference/attribution-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"FullscreenControl"},"fields":{"slug":"docs/api-reference/fullscreen-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"GeolocateControl"},"fields":{"slug":"docs/api-reference/geolocate-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Layer"},"fields":{"slug":"docs/api-reference/layer"},"headings":null}},{"childMdx":{"frontmatter":{"title":"MapProvider"},"fields":{"slug":"docs/api-reference/map-provider"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Marker"},"fields":{"slug":"docs/api-reference/marker"},"headings":null}},{"childMdx":{"frontmatter":{"title":"NavigationControl"},"fields":{"slug":"docs/api-reference/navigation-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Popup"},"fields":{"slug":"docs/api-reference/popup"},"headings":null}},{"childMdx":{"frontmatter":{"title":"ScaleControl"},"fields":{"slug":"docs/api-reference/scale-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Source"},"fields":{"slug":"docs/api-reference/source"},"headings":null}},{"childMdx":{"frontmatter":{"title":"useControl"},"fields":{"slug":"docs/api-reference/use-control"},"headings":null}},{"childMdx":{"frontmatter":{"title":"useMap"},"fields":{"slug":"docs/api-reference/use-map"},"headings":null}},{"childMdx":{"frontmatter":{"title":"Types"},"fields":{"slug":"docs/api-reference/types"},"headings":null}}]}]}}} \ No newline at end of file diff --git a/search/index.html b/search/index.html index 1e47c86d..98e8922a 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
22 articles indexed.
\ No newline at end of file +
Search
23 articles indexed.
\ No newline at end of file diff --git a/webpack-runtime-ad40530292517ad7aca7.js b/webpack-runtime-b299849377ee80f100b6.js similarity index 93% rename from webpack-runtime-ad40530292517ad7aca7.js rename to webpack-runtime-b299849377ee80f100b6.js index 439e4a1a..e567d80f 100644 --- a/webpack-runtime-ad40530292517ad7aca7.js +++ b/webpack-runtime-b299849377ee80f100b6.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