diff --git a/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js b/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.js new file mode 100644 index 00000000..58b37f2b --- /dev/null +++ b/834b8338ea35f2c3d17eb82aef29032efb222d04-4987a42f9d9cc122e5b3.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),r.cursor&&(i.getCanvas().style.cursor=r.cursor),this._renderTransform=i.transform.clone();var u=i._render;i._render=function(e){t._inRender=!0,u.call(i,e),t._inRender=!1};var c=i._renderTaskQueue.run;i._renderTaskQueue.run=function(e){c.call(i._renderTaskQueue,e),t._onBeforeRepaint()},i.on("render",(function(){return t._onAfterRepaint()}));var s=i.fire;for(var l in i.fire=this._fireEvent.bind(this,s),i.on("resize",(function(){t._renderTransform.resize(i.transform.width,i.transform.height)})),i.on("styledata",(function(){return t._updateStyleComponents(t.props,{})})),i.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),O)i.on(l,this._onPointerEvent);for(var f in j)i.on(f,this._onCameraEvent);for(var p in P)i.on(p,this._onEvent);this._map=i},t.recycle=function(){e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=c(n,h(h({},u(r.transform)),e));if(s&&t){var l=this._deferredEvents;l.move=!0,l.zoom||(l.zoom=o!==n.zoom),l.rotate||(l.rotate=i!==n.bearing),l.pitch||(l.pitch=a!==n.pitch)}return r.isMoving()||c(r.transform,e),s},t._updateSettings=function(e,t){for(var r,n=this._map,o=!1,a=y(S);!(r=a()).done;){var i=r.value;i in e&&!Object(v.b)(e[i],t[i])&&(o=!0,n["set"+i[0].toUpperCase()+i.slice(1)](e[i]))}return o},t._updateStyle=function(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor),e.mapStyle!==t.mapStyle){var r={diff:e.styleDiffing};return"localIdeographFontFamily"in e&&(r.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(m(e.mapStyle),r),!0}return!1},t._updateStyleComponents=function(e,t){var r=this._map,n=!1;return r.style.loaded()&&("light"in e&&!Object(v.b)(e.light,t.light)&&(n=!0,r.setLight(e.light)),"fog"in e&&!Object(v.b)(e.fog,t.fog)&&(n=!0,r.setFog(e.fog)),"terrain"in e&&!Object(v.b)(e.terrain,t.terrain)&&(e.terrain&&!r.getSource(e.terrain.source)||(n=!0,r.setTerrain(e.terrain),this._renderTransform.elevation=r.transform.elevation))),n},t._updateHandlers=function(e,t){for(var r,n=this._map,o=!1,a=y(w);!(r=a()).done;){var i=r.value,u=e[i];Object(v.b)(u,t[i])||(o=!0,u?n[i].enable(u):n[i].disable())}return o},t._updateHover=function(e){var t=this.props;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var r,n,o=e.type,a=(null===(r=this._hoveredFeatures)||void 0===r?void 0:r.length)>0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(e.point,{layers:t.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,i&&!a&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=o}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){e._map.transform=n}},Object(i.a)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function E(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}function C(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return L(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function I(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r prop: "+n);else e.setCoordinates(t.coordinates)}}(f,e,r.current):f=l(t,c,e),r.current=e,f&&o.Children.map(e.children,(function(e){return e&&Object(o.cloneElement)(e,{source:c})}))||null}},OSzm:function(e,t,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(e){var t=Object(a.a)((function(t){return new t.mapLib.NavigationControl(e)}),{position:e.position});return Object(n.useEffect)((function(){Object(o.a)(t._container,e.style)}),[e.style]),null}t.a=n.memo(i)},SA6Z:function(e,t,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0;)r.appendChild(a.childNodes[0]);return o._container=r,t.initialViewState&&n._updateViewState(t.initialViewState,!1),o.resize(),n.setProps(h(h({},t),{},{styleDiffing:!1})),o.isStyleLoaded()?o.fire("load"):o.once("styledata",(function(){return o.fire("load")})),n},t._initialize=function(e){var t=this,r=this.props,n=h(h(h({},r),r.initialViewState),{},{accessToken:r.mapboxAccessToken||E()||null,container:e,style:m(r.mapStyle)}),o=n.initialViewState||n.viewState||n;if(Object.assign(n,{center:[o.longitude||0,o.latitude||0],zoom:o.zoom||0,pitch:o.pitch||0,bearing:o.bearing||0}),r.gl){var a=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=a,r.gl}}var i=new this._MapClass(n);o.padding&&i.setPadding(o.padding),r.cursor&&(i.getCanvas().style.cursor=r.cursor),this._renderTransform=i.transform.clone();var u=i._render;i._render=function(e){t._inRender=!0,u.call(i,e),t._inRender=!1};var c=i._renderTaskQueue.run;i._renderTaskQueue.run=function(e){c.call(i._renderTaskQueue,e),t._onBeforeRepaint()},i.on("render",(function(){return t._onAfterRepaint()}));var s=i.fire;for(var l in i.fire=this._fireEvent.bind(this,s),i.on("resize",(function(){t._renderTransform.resize(i.transform.width,i.transform.height)})),i.on("styledata",(function(){return t._updateStyleComponents(t.props,{})})),i.on("sourcedata",(function(){return t._updateStyleComponents(t.props,{})})),O)i.on(l,this._onPointerEvent);for(var f in j)i.on(f,this._onCameraEvent);for(var p in P)i.on(p,this._onEvent);this._map=i},t.recycle=function(){e.savedMaps.push(this)},t.destroy=function(){this._map.remove()},t.redraw=function(){var e=this._map;!this._inRender&&e.style&&(e._frame&&(e._frame.cancel(),e._frame=null),e._render())},t._updateSize=function(e){var t=e.viewState;if(t){var r=this._map;if(t.width!==r.transform.width||t.height!==r.transform.height)return r.resize(),!0}return!1},t._updateViewState=function(e,t){if(this._internalUpdate)return!1;var r=this._map,n=this._renderTransform,o=n.zoom,a=n.pitch,i=n.bearing,s=c(n,h(h({},u(r.transform)),e));if(s&&t){var l=this._deferredEvents;l.move=!0,l.zoom||(l.zoom=o!==n.zoom),l.rotate||(l.rotate=i!==n.bearing),l.pitch||(l.pitch=a!==n.pitch)}return r.isMoving()||c(r.transform,e),s},t._updateSettings=function(e,t){for(var r,n=this._map,o=!1,a=y(S);!(r=a()).done;){var i=r.value;i in e&&!Object(v.b)(e[i],t[i])&&(o=!0,n["set"+i[0].toUpperCase()+i.slice(1)](e[i]))}return o},t._updateStyle=function(e,t){if(e.cursor!==t.cursor&&(this._map.getCanvas().style.cursor=e.cursor),e.mapStyle!==t.mapStyle){var r={diff:e.styleDiffing};return"localIdeographFontFamily"in e&&(r.localIdeographFontFamily=e.localIdeographFontFamily),this._map.setStyle(m(e.mapStyle),r),!0}return!1},t._updateStyleComponents=function(e,t){var r=this._map,n=!1;return r.style.loaded()&&("light"in e&&!Object(v.b)(e.light,t.light)&&(n=!0,r.setLight(e.light)),"fog"in e&&!Object(v.b)(e.fog,t.fog)&&(n=!0,r.setFog(e.fog)),"terrain"in e&&!Object(v.b)(e.terrain,t.terrain)&&(e.terrain&&!r.getSource(e.terrain.source)||(n=!0,r.setTerrain(e.terrain)))),n},t._updateHandlers=function(e,t){for(var r,n=this._map,o=!1,a=y(w);!(r=a()).done;){var i=r.value,u=e[i];Object(v.b)(u,t[i])||(o=!0,u?n[i].enable(u):n[i].disable())}return o},t._updateHover=function(e){var t=this.props;if(t.interactiveLayerIds&&(t.onMouseMove||t.onMouseEnter||t.onMouseLeave)){var r,n,o=e.type,a=(null===(r=this._hoveredFeatures)||void 0===r?void 0:r.length)>0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(e.point,{layers:t.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(e.type="mouseleave",this._onPointerEvent(e)),this._hoveredFeatures=n,i&&!a&&(e.type="mouseenter",this._onPointerEvent(e)),e.type=o}else this._hoveredFeatures=null},t._fireEvent=function(e,t,r){var n=this._map,o=n.transform,a="string"==typeof t?t:t.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof t&&(t.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,e.call(n,t,r),n.transform=o,n):(e.call(n,t,r),n)},t._onBeforeRepaint=function(){var e=this,t=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&t.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){e._map.transform=n}},Object(i.a)(e,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),e}();function E(){var e=null;if("undefined"!=typeof location){var t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{e=e||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return e}function C(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return L(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=e[Symbol.iterator]()).next.bind(r)}function I(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r

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

\ No newline at end of file
+Takes precedence over workerUrl.
workerCount: number
Default: 2
The number of web workers instantiated on a page with mapbox-gl maps.
workerUrl: string
Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
Source
map.tsx
\ No newline at end of file diff --git a/docs/api-reference/marker/index.html b/docs/api-reference/marker/index.html index f4458e37..014c1a23 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
onClick: (evt: MapEvent) => void
Called when the marker is clicked on.
onDragStart: (evt: MarkerDragEvent) => void
Called when dragging starts, if draggable is true.
onDrag: (evt: MarkerDragEvent) => void
Called while dragging, if draggable is true.
onDragEnd: (evt: MarkerDragEvent) => void
Called when dragging ends, if draggable is true.
Source
marker.ts

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

Types

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

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

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

GeolocateControlRef

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

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

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

BackgroundLayer

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

CircleLayer

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

FillExtrusionLayer

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

FillLayer

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

HeatmapLayer

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

HillshadeLayer

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

LineLayer

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

RasterLayer

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

SymbolLayer

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

SkyLayer

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

GeoJSONSourceRaw

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

VideoSourceRaw

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

ImageSourceRaw

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

VectorSourceRaw

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

RasterSource

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

RasterDemSource

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

CanvasSourceRaw

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

Configurations

Anchor

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

Alignment

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

ControlPosition

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

DragPanOptions

An object with the following fields:

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

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

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

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

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

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

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

TransformRequestFunction

A function that takes the following arguments:

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

And returns an object with the following fields:

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

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

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

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

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

Point

A mapboxgl.Point object.

PointLike

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

MapboxGeoJSONFeature

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

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

ViewState

An object with the following fields:

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

Sources

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

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

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

VectorTileSource

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

Events

MapboxEvent

An object with the following fields:

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

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

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

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

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

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

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

MapSourceDataEvent

An object with the following fields:

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

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

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

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

\ No newline at end of file +

Types

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

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

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

GeolocateControlRef

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

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

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

BackgroundLayer

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

CircleLayer

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

FillExtrusionLayer

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

FillLayer

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

HeatmapLayer

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

HillshadeLayer

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

LineLayer

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

RasterLayer

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

SymbolLayer

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

SkyLayer

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

GeoJSONSourceRaw

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

VideoSourceRaw

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

ImageSourceRaw

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

VectorSourceRaw

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

RasterSource

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

RasterDemSource

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

CanvasSourceRaw

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

Configurations

Anchor

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

Alignment

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

ControlPosition

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

DragPanOptions

An object with the following fields:

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

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

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

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

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

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

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

TransformRequestFunction

A function that takes the following arguments:

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

And returns an object with the following fields:

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

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

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

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

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

Point

A mapboxgl.Point object.

PointLike

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

MapboxGeoJSONFeature

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

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

ViewState

An object with the following fields:

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

Sources

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

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

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

VectorTileSource

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

Events

MapboxEvent

An object with the following fields:

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

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

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

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

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

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

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

MapSourceDataEvent

An object with the following fields:

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

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

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

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

\ No newline at end of file diff --git a/docs/api-reference/use-control/index.html b/docs/api-reference/use-control/index.html index 1e5fb617..bc85118c 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) {
@@ -120,16 +120,16 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     </Map>
   );
 }
See a full example here.
Signature
useControl<T extends IControl>(
-  onCreate: ({map: MapboxMap, mapLib: mapboxgl}) => IControl,
+  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
   options?: {
     position?: ControlPosition;
   }
 ): T
 
 useControl<T extends IControl>(
-  onCreate: ({map: MapboxMap, mapLib: mapboxgl}) => IControl,
-  onRemove: ({map: MapboxMap, mapLib: mapboxgl}) => void,
+  onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
+  onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,
   options?: {
     position?: ControlPosition;
   }
-): T
The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
  • onCreate: ({map: 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
+): T

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

Parameters:

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

Returns:

IControl - the control instance from onCreate.

Source

use-control.ts

\ No newline at end of file diff --git a/docs/api-reference/use-map/index.html b/docs/api-reference/use-map/index.html index 045ae87f..90003351 100644 --- a/docs/api-reference/use-map/index.html +++ b/docs/api-reference/use-map/index.html @@ -84,7 +84,27 @@ 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 allows a custom component to reference the Map that contains it.
When used with the MapProvider, this hook can also reference maps that are rendered outside of the current component's direct render tree.
/// Example using `useMap` inside a Map
+import {Map, useMap} from 'react-map-gl';
+
+function Root() {
+  return (
+    <Map ... >
+      <NavigationButton />
+    </Map>
+  );
+}
+
+function NavigateButton() {
+  const {current: map} = useMap();
+
+  const onClick = () => {
+    map.flyTo({center: [-122.4, 37.8]});
+  };
+
+  return <button onClick={onClick}>Go</button>;
+}
/// Example using `useMap` with `MapProvider`
+import {MapProvider, Map, useMap} from 'react-map-gl';
 
 function Root() {
   return (
@@ -105,4 +125,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(): {current?: MapRef, [id: string]: MapRef}

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

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

Source

use-map.tsx

\ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index d315e97d..9457876e 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 4f7c486c..34289797 100644 --- a/docs/get-started/adding-custom-data/index.html +++ b/docs/get-started/adding-custom-data/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Adding Custom Data

Native Mapbox Layers

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

import * as React from 'react';
+  
Adding Custom Data
Native Mapbox Layers
You can inject data and mapbox native layers using the Source and Layer components:
import * as React from 'react';
 import Map, {Source, Layer} from 'react-map-gl';
 
 const geojson = {
@@ -120,4 +120,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       </Source>
     </Map>
   );
-}
For details about data sources and layer configuration, check out the Mapbox style specification.
For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples.
Custom Overlays
You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here.
Other vis.gl Libraries
For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web.
  • deck.gl - WebGL-powered framework for the visualization of large datasets.
  • loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
  • nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.

\ No newline at end of file
+}

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

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

Custom Overlays

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

Other vis.gl Libraries

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

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

Get Started

Installation

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

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

Example

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

\ No newline at end of file
+import 'maplibre-gl/dist/maplibre-gl.css';
\ No newline at end of file diff --git a/docs/get-started/mapbox-tokens/index.html b/docs/get-started/mapbox-tokens/index.html index 3a03f148..43115a78 100644 --- a/docs/get-started/mapbox-tokens/index.html +++ b/docs/get-started/mapbox-tokens/index.html @@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

About Mapbox Tokens

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

About Mapbox Tokens

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

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

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

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

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

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

Display Maps Without A Mapbox Token

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

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

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

Open source tile schemas include:

Some useful resources for creating your own map service:

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

An example function:

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

State Management

There are two ways to use a Map:

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

Uncontrolled Map

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

import * as React from 'react';
+  
State Management
There are two ways to use a Map:
  • Uncontrolled: The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class.
  • Controlled: The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.
Uncontrolled Map
You may clone a full app configuration for this example here.
import * as React from 'react';
 import Map from 'react-map-gl';
 
 function App() {
@@ -144,4 +144,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     onMove={onMove}
     mapStyle="mapbox://styles/mapbox/streets-v9"
   />;
-}

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

Tips and Tricks

Securing Mapbox Token

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

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

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

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

  • Add the following to your bundler config:

    /// webpack.config.js
+  
    Tips and Tricks
    Securing Mapbox Token
    Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.
    • Never commit your token in clear text into GitHub or other source control.
    • In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.
    • Create separate tokens for development (often times on http://localhost), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own.
    • Add the following to your bundler config:
      /// webpack.config.js
 const {DefinePlugin} = require('webpack');
 
 module.exports = {
@@ -200,4 +200,4 @@ module.exports }} >
       </Sources>
     </Map>
-  );
    
\ No newline at end of file
+  );
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index ef3abd5e..98e16d3b 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 61accf41..0573c538 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 SVGOverlay) are removed. Check out this example for implementing similar controls in your own application.
  • LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example.

Map

documentation

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

Other components

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

Upgrading to v5.3/v6.1

  • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
  • react-virtualized-auto-sizer is no longer a dependency.
  • Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
const CONTROLLER_OPTS = {
+  
Upgrade Guide
Upgrading to v7.0
v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.
If you are using react-map-gl controls (Marker, Popup, NavigationControl etc.) with deck.gl's ContextProvider, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.
Dependencies
  • Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.
  • viewport-mercator-project (an alias of @math.gl/web-mercator) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.
Module exports
  • InteractiveMap and StaticMap are removed. Instead, import Map.
  • setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled).
  • MapController is removed.  v7.0 has removed its own implementation of user input handling in favor of the native handlers. If you are using a custom implementation of MapController, check if the native handlers offer options to address your application's needs.
  • MapContext and useMapControl are removed. Check out the new API useMap and useControl.
  • The overlay components (HTMLOverlay, CanvasOverlay and SVGOverlay) are removed. Check out this example for implementing similar controls in your own application.
  • LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example.
Map
documentation
  • Renamed props for better consistency with the wrapped library:
    • mapboxApiAccessToken is now mapboxAccessToken
    • mapboxApiUrl is now baseApiUrl
    • preventStyleDiffing (default false) is replaced with styleDiffing (default true)
  • mapStyle should be explicitly specified. The default value has changed from "mapbox://styles/mapbox/light-v9" to an empty style.
  • The following props are removed and apps should use style instead:
    • width
    • height
    • visible
  • onViewportChange, onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management.
  • transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example.
  • mapOptions is removed. Almost all of the options for the native Map class are exposed as props. 
  • onHover is removed. Use onMouseMove or onMouseEnter.
  • The event argument is changed for all interaction callbacks. See documentation for details.
  • getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover.
  • touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop.
Other components
  • capture* props are removed.
  • *label props are removed. Use Map's locale prop.
  • All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.
Upgrading to v5.3/v6.1
  • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
  • react-virtualized-auto-sizer is no longer a dependency.
  • Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
const CONTROLLER_OPTS = {
   dragPan: {inertia: 0},
   dragRotate: {inertia: 0},
   touchZoom: {inertia: 0}
@@ -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 07b459e7..8a614ffb 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 21279106..dd7cd813 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 56119c01..ce23f9c7 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 acb32011..5581aec4 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 e8601b5e..a6da490d 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 266e1e53..293e1f6c 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 13cfc8aa..4e8ec7f4 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 e3c45090..36bd2ca9 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 a3719155..da77ddcc 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 07d7b26f..450d4843 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 a9c94cde..30ae2d41 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 b5bc7683..e9e52975 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 31139572..3fa125a9 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 be4f10aa..78514779 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 } } }) -
\ No newline at end of file +
\ No newline at end of file diff --git a/examples/side-by-side/index.html b/examples/side-by-side/index.html index 95ad788a..f724cdf0 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 af281929..650ef72b 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 89a5fb40..4c9e909f 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 a955b6dd..e0e4b24c 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 39526d46..c3289170 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 437fe8c7..5b419b2e 100644 --- a/page-data/app-data.json +++ b/page-data/app-data.json @@ -1 +1 @@ -{"webpackCompilationHash":"c44de1c18a6202703b82"} +{"webpackCompilationHash":"22fdd46801f0593a20ca"} 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 a8fa7408..a55a6071 100644 --- a/page-data/docs/api-reference/use-control/page-data.json +++ b/page-data/docs/api-reference/use-control/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-control","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"usecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usecontrol\",\n \"aria-label\": \"usecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"useControl\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useControl\"), \" hook is used to create React wrappers for custom map controls.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapboxDraw \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@mapbox/mapbox-gl-draw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"DrawControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"props\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" DrawControlProps\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"MapboxDraw\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"position\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"null\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/satellite-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"DrawControl\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"top-left\\\"\"), \"\\n displayControlsDefault\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n controls\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n polygon\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n trash\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/examples/draw-polygon\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Signature\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" 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 }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \"\\n\\nuseControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" 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 }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\")))), mdx(\"p\", null, \"The hook creates an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"IControl\"), \" instance, adds it to the map when it's available, and removes it upon unmount.\"), mdx(\"p\", null, \"Parameters:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \": ({map: 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 +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-control","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"usecontrol\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usecontrol\",\n \"aria-label\": \"usecontrol permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"useControl\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useControl\"), \" hook is used to create React wrappers for custom map controls.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapboxDraw \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@mapbox/mapbox-gl-draw'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"DrawControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"props\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" DrawControlProps\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"MapboxDraw\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" props\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"position\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"null\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/satellite-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"DrawControl\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"top-left\\\"\"), \"\\n displayControlsDefault\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n controls\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n polygon\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n trash\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/examples/draw-polygon\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Signature\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"useControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \"\\n\\nuseControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"extends\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"IControl\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onCreate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" IControl\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onRemove\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"map\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" MapRef\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" mapLib\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token operator\"\n }, \":\"), \" mapboxgl\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"void\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n options\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n position\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"?\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" ControlPosition\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"T\")))), mdx(\"p\", null, \"The hook creates an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol\"\n }, \"IControl\"), \" instance, adds it to the map when it's available, and removes it upon unmount.\"), mdx(\"p\", null, \"Parameters:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \": ({map: MapRef, mapLib: mapboxgl}) => \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - called to create an instance of the control.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onRemove\"), \": ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"options\"), \": object\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"position\"), \": 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map\")))), mdx(\"p\", null, \"Returns:\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#icontrol\"\n }, \"IControl\"), \" - the control instance from \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onCreate\"), \".\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-control.ts\"\n }, \"use-control.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook…","frontmatter":{"title":"useControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useControl","slug":"docs/api-reference/use-control","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file 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 3ceb6efb..765c0496 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","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useMap","slug":"docs/api-reference/use-map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/use-map","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"usemap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#usemap\",\n \"aria-label\": \"usemap permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"useMap\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap\"), \" hook allows a custom component to reference the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"Map\"), \" that contains it.\"), mdx(\"p\", null, \"When used with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map-provider.md\"\n }, \"MapProvider\"), \", this hook can also reference maps that are rendered outside of the current component's direct render tree.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` inside a Map\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigationButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"current\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"/// Example using `useMap` with `MapProvider`\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" useMap\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Root\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapA\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"myMapB\\\"\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"NavigateButton \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"MapProvider\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"NavigateButton\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useMap\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"onClick\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n myMapA\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"122.4\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.8\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n myMapB\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"flyTo\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"center\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"74\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"button onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"onClick\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"Go\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"button\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"See a full example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/get-started/hook\"\n }, \"here\"), \".\"), mdx(\"h2\", {\n \"id\": \"signature\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#signature\",\n \"aria-label\": \"signature permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Signature\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"useMap(): {current?: MapRef, [id: string]: MapRef}\")), mdx(\"p\", null, \"The hook returns an object that contains all mounted maps under the closest \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"MapProvider\"), \". The keys are each map's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md#id\"\n }, \"id\"), \" and the values are the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#mapref\"\n }, \"MapRef\"), \".\"), mdx(\"p\", null, \"If the hook is used inside a decendent of a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component, the returned object also contains a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"current\"), \" field that references the containing map.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/use-map.tsx\"\n }, \"use-map.tsx\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can…","frontmatter":{"title":"useMap"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"useMap","slug":"docs/api-reference/use-map","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/page-data/search/page-data.json b/page-data/search/page-data.json index ad6acf2b..db9ee110 100644 --- a/page-data/search/page-data.json +++ b/page-data/search/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token. Mapbox GL JS v2 The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps. Other mapbox-gl forks It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. For basemaps: You can load map data from Mapbox's own service. You can create and host your own map data using one of the many open source tools . New to react-map-gl? Get Started Want to contribute? See our Developer Guide Design Philosophy react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization . To manage the complexity of these applications, we fully embrace React and reactive programming. The stock mapbox-gl APIs are imperative . That is, you instruct the map to do something (for example, map.flyTo ), and it will execute the command at its own pace. This does not scale when we have many components that need to synchronize with each other. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl . In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. We might store the source of truth in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. Ultimately, in the spirit of the reactive programming paradigm , data always flows down . As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync. react-map-gl creates a fully reactive wrapper for mapbox-gl. The Map component can be fully controlled , that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management . Limitations In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants. It is possible to call the native methods directly from the Map instance obtained via getMap . However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. compact : boolean | undefined If true , force a compact attribution that shows the full attribution on mouse hover. If false , force the full attribution control. If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide. Note that your attribution must adhere to Mapbox's guidelines . customAttribution : string | string[] String or strings to show in addition to any other attributions. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source attribution-control.ts","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"compact: boolean | undefined","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. containerId : string Id of the DOM element which should be made full screen. By default, the map container element will be made full screen. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source fullscreen-control.ts","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"containerId: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger() : boolean Trigger a geolocation event. Returns: true if successful. Properties Note that the following properties are not reactive. They are only used when the component first mounts. Tracking options positionOptions : PositionOptions A Geolocation API PositionOptions object trackUserLocation : boolean Default: false If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. Render options fitBoundsOptions : FitBoundsOptions Default: {maxZoom: 15} A ( fitBounds ) options object to use when the map is panned and zoomed to the user's location. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showAccuracyCircle : boolean Default: true Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. \nThis only has effect if showUserLocation is true . showUserHeading : boolean Default: false If true , an arrow will be drawn next to the user location dot indicating the device's heading.\nThis only has affect when trackUserLocation is true . showUserLocation : boolean Default: true Show a dot on the map at the user's location. Set to false to disable. Callbacks onGeolocate : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success. onError : (evt: GeolocateErrorEvent ) => void Called on each Geolocation API position update that returned as an error. onOutOfMaxBounds : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success but user position is out of map maxBounds . onTrackUserLocationStart : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the active lock state. onTrackUserLocationEnd : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the background state. Source geolocate-control.ts","headings":[{"value":"GeolocateControl","depth":1},{"value":"Methods","depth":2},{"value":"trigger(): boolean","depth":4},{"value":"Properties","depth":2},{"value":"Tracking options","depth":3},{"value":"positionOptions: PositionOptions","depth":4},{"value":"trackUserLocation: boolean","depth":4},{"value":"Render options","depth":3},{"value":"fitBoundsOptions: FitBoundsOptions","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showAccuracyCircle: boolean","depth":4},{"value":"showUserHeading: boolean","depth":4},{"value":"showUserLocation: boolean","depth":4},{"value":"Callbacks","depth":3},{"value":"onGeolocate: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onError: (evt: GeolocateErrorEvent) => void","depth":4},{"value":"onOutOfMaxBounds: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onTrackUserLocationStart: (evt: GeolocateEvent) => void","depth":4},{"value":"onTrackUserLocationEnd: (evt: GeolocateEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"Layer This component allows apps to create a map layer using React. Properties The props provided to this component should be conforming to the Mapbox layer specification . When props change shallowly , the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance. Identity Properties Once a is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's key prop to give each element a stable identity. id : string Unique identifier of the layer. If not provided, a default id will be assigned. type : string Required. Type of the layer. Options beforeId : string The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL. Note that layers are added by the order that they mount. They are NOT reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate beforeId for consistent behavior. source : string source is required by some layer types in the Mapbox style specification. If is used as the child of a Source component, this prop will be overwritten by the id of the parent source. Source layer.ts","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Options","depth":3},{"value":"beforeId: string","depth":4},{"value":"source: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component should wrap all nodes in which you may want to access the maps: See useMap for more information. Source use-map.tsx","headings":[{"value":"MapProvider","depth":1},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-provider","title":"MapProvider"},{"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible via a React ref or the useMap hook. The MapRef object exposes Map methods that are safe to call without breaaking the React bindings . For example, setStyle() is hidden from the ref object, because the style is supposed to be changed by updating the mapStyle prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors. You can still access the hidden members via getMap() : getMap() : MapboxMap Returns the native Map instance associated with this component. Properties Layout options id : string Map container id. style : CSSProperties Default: {position: 'relative', width: '100%', height: '100%'} Map container CSS. cursor : string Default: 'auto' The current cursor type . Styling options fog : Fog | null The fog property of the style. Must conform to the Fog Style Specification .\nIf null is provided, removes the fog from the map. light : Light Light properties of the style. Must conform to the Light Style Specification . mapStyle : MapboxStyle | string | Immutable Default: (empty style) The map's Mapbox style. This must be an a JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. projection : string | ProjectionSpecification Default: 'mercator' The projection the map should be rendered in. Available projections are Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). Conic projections such as Albers and Lambert have configurable center and parallels properties that allow developers to define the region in which the projection has minimal distortion; see example . renderWorldCopies : boolean Default: true If true , multiple copies of the world will be rendered, when zoomed out. styleDiffing : boolean Default: true Enable diffing when mapStyle changes. If false , force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update. terrain : TerrainSpecification Terrain property of the style. Must conform to the Terrain Style Specification .\nIf null is provided, removes terrain from the map. Camera options initialViewState : object The initial view state of the map. If specified, longitude , latitude , zoom etc. in props are ignored when constructing the map. Only specify initialViewState if Map is being used as an uncontrolled component . See state management for examples. bounds? : LngLatBoundsLike - The initial bounds of the map. If specified, it overrides the longitude , latitude and zoom options. Default null . fitBoundsOptions : FitBoundsOptions - A fitBounds options object to use only when setting the bounds option. Default null . longitude : number - The initial longitude of the map center. Default 0 . latitude : number - The initial latitude of the map center. Default 0 . zoom : number - The initial zoom level. Default 0 . pitch : number - The initial pitch (tilt) of the map. Default 0 . bearing : number - The initial bearing (rotation) of the map. Default 0 . longitude : number The longitude of the map center. latitude : number The latitude of the map center. zoom : number The zoom level of the map. pitch : number The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). bearing : number The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. padding : PaddingOptions Default: null The padding in pixels around the viewport. minZoom : number Default: 0 The minimum zoom level of the map (0-24). maxZoom : number Default: 22 The maximum zoom level of the map (0-24). minPitch : number Default: 0 The minimum pitch of the map (0-85). maxPitch : number Default: 60 The maximum pitch of the map (0-85). maxBounds : LngLatBoundsLike Default: null If set, the map is constrained to the given bounds. Input handler options boxZoom : boolean Default: true If true , the \"box zoom\" interaction is enabled (see BoxZoomHandler ). doubleClickZoom : boolean Default: true If true , the \"double click to zoom\" interaction is enabled (see DoubleClickZoomHandler ). dragRotate : boolean Default: true If true , the \"drag to rotate\" interaction is enabled (see DragRotateHandler ). dragPan : boolean | DragPanOptions Default: true If true , the \"drag to pan\" interaction is enabled. Optionally accpt an object value that is the options to DragPanHandler#enable . keyboard : boolean Default: true If true , keyboard shortcuts are enabled (see KeyboardHandler ). scrollZoom : boolean | ZoomRotateOptions Default: true If true , the \"scroll to zoom\" interaction is enabled. Optionally accpt an object value that is the options to ScrollZoomHandler#enable . touchPitch : boolean Default: true If true , the \"drag to pitch\" interaction is enabled. Optionally accpt an object value that is the options to TouchPitchHandler#enable . touchZoomRotate : boolean | ZoomRotateOptions Default: true If true , the \"pinch to rotate and zoom\" interaction is enabled. Optionally accpt an object value that is the options to TouchZoomRotateHandler#enable . interactiveLayerIds : string[] Default: null The id(s) of style layer(s). If specified, pointer event ( mousemove , click etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a features property containing an array of the matching features. If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a features property. See the Callbacks section for affected events. Callbacks onResize : (event: MapboxEvent ) => void Called when the map has been resized. onLoad : (event: MapboxEvent ) => void Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. onRender : (event: MapboxEvent ) => void Called whenever the map is drawn to the screen. onIdle : (event: MapboxEvent ) => void Called after the last frame rendered before the map enters an \"idle\" state: No camera transitions are in progress All currently requested tiles have loaded All fade/transition animations have completed onRemove : (event: MapboxEvent ) => void Called when the map has been removed. onError : (event: ErrorEvent ) => void Default: evt => console.error(evt.error) Called when an error occurs. onMouseDown : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s). onMouseUp : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is released within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s). onMouseOver : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. onMouseEnter : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by interactiveLayerIds from outside that layer or outside the map canvas. onMouseMove : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s). onMouseLeave : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by interactiveLayerIds or moves from the layer to outside the map canvas. onMouseOut : (event: MapLayerMouseEvent ) => void Called when a point device (usually a mouse) leaves the map's canvas. onClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released at the same point on the map. If interactiveLayerIds is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer. onDblClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. If interactiveLayerIds is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer. onContextMenu : (event: MapLayerMouseEvent ) => void Called when the right button of the mouse is clicked or the context menu key is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer. onWheel : (event: MapWheelEvent ) => void Called when a wheel event occurs within the map. onTouchStart : (event: MapLayerTouchEvent ) => void Called when a touchstart event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchEnd : (event: MapLayerTouchEvent ) => void Called when a touchend event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchMove : (event: MapLayerTouchEvent ) => void Called when a touchmove event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchCancel : (event: MapLayerTouchEvent ) => void Called when a touchcancel event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onMoveStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one view to another. onMove : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one view to another. When Map is used as a controlled component, event.viewState reflects the view state that the camera \"proposes\" to move to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the view state props ( longitude , latitude , zoom etc.).\nSee state management for examples. onMoveEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one view to another. onDragStart : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction starts. onDrag : (event: ViewStateChangeEvent ) => void Called repeatedly during a \"drag to pan\" interaction. onDragEnd : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction ends. onZoomStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one zoom level to another. onZoom : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one zoom level to another. When Map is used as a controlled component, event.viewState.zoom reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the zoom prop. onZoomEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one zoom level to another. onRotateStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one bearing (rotation) to another. onRotate : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one bearing (rotation) to another. When Map is used as a controlled component, event.viewState.bearing reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the bearing prop. onRotateEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one bearing (rotation) to another. onPitchStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one pitch (tilt) to another. onPitch : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one pitch (tilt) to another. When Map is used as a controlled component, event.viewState.pitch reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the pitch prop. onPitchEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one pitch (tilt) to another. onBoxZoomStart : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction starts. onBoxZoomEnd : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction ends. onBoxZoomCancel : (event: MapBoxZoomEvent ) => void Called when the user cancels a \"box zoom\" interaction, or when the bounding box does not meet the minimum size threshold. onData : (event: MapStyleDataEvent | MapSourceDataEvent ) => void Called when any map data loads or changes. See MapDataEvent for more information. onStyleData : (event: MapStyleDataEvent ) => void Called when the map's style loads or changes. See MapDataEvent for more information. onSourceData : (event: MapSourceDataEvent ) => void Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information. Other options Props in this section are not reactive. They are only used once when the Map instance is constructed. mapLib : any Override the map library. By default, it loads the mapbox-gl module using dynamic import . This can be used to replace mapbox-gl with a compatible fork: Or to load a pre-bundled version of the library: Default: import('mapbox-gl') mapboxAccessToken : string Token used to access the Mapbox data service. See about map tokens . antialias : boolean Default: false If true , the gl context will be created with MSAA antialiasing , which can be useful for antialiasing custom layers.\nThis is false by default as a performance optimization. attributionControl : boolean Default: true If true , an attribution control will be added to the map. baseApiUrl : string The map's default API URL for requesting tiles, styles, sprites, and glyphs. bearingSnap : number Default: 7 Snap to north threshold in degrees. clickTolerance : number Default: 3 The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag). collectResourceTiming : boolean Default: false If true , Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a resourceTiming property of relevant data events. cooperativeGestures : boolean Default: false If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled. crossSourceCollisions : boolean Default: true If true , symbols from multiple sources can collide with each other during collision detection. If false , collision detection is run separately for the symbols in each source. customAttribution : string | string[] Default: null String or strings to show in an AttributionControl.\nOnly applicable if attributionControl is true . fadeDuration : number Default: 300 Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading. failIfMajorPerformanceCaveat : boolean Default: false If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. hash : boolean | string Default: false If true , the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\nFor example, http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60 . An additional string may optionally be provided to indicate a parameter-styled hash,\ne.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar , where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash. interactive : boolean Default: true If false , no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input. locale : Record\\ Default: null A patch to apply to the default localization table for UI strings, e.g. control tooltips.\nThe locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs.\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table). localFontFamily : string Default: null Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily. localIdeographFontFamily : string Default: 'sans-serif' Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See example . logoPosition : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'bottom-left' A string representing the position of the Mapbox wordmark on the map. maxParallelImageRequests : number Default: 16 The maximum number of images (raster tiles, sprites, icons) to load in parallel. maxTileCacheSize : number Default: null The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. optimizeForTerrain : boolean Default: true If true, map will prioritize rendering for performance by reordering layers.\nIf false, layers will always be drawn in the specified order. pitchWithRotate : boolean Default: true If false , the map's pitch (tilt) control with \"drag to rotate\" interaction will be disabled. preserveDrawingBuffer : boolean Default: false If true , The maps canvas can be exported to a PNG using map.getCanvas().toDataURL() ;. This is false by default as a performance optimization. refreshExpiredTiles : boolean Default: true If false , the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers. reuseMaps : boolean Default: false By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed. If reuseMaps is set to true , when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid new billable events triggered by initialization. Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and initialViewState of the new component are respected. RTLTextPlugin : string Default: 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js' Sets the map's RTL text plugin . Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Setting this prop is the equivelant of calling mapboxgl.setRTLTextPlugin with lazy: true . testMode : boolean Default: false Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests. trackResize : boolean Default: true If true , the map will automatically resize when the browser window resizes. transformRequest : TransformRequestFunction Default: null A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests. workerClass : object Default: null Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\nTakes precedence over workerUrl . workerCount : number Default: 2 The number of web workers instantiated on a page with mapbox-gl maps. workerUrl : string Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. Source map.tsx","headings":[{"value":"default (Map)","depth":1},{"value":"Methods","depth":2},{"value":"getMap(): MapboxMap","depth":4},{"value":"Properties","depth":2},{"value":"Layout options","depth":3},{"value":"id: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"cursor: string","depth":4},{"value":"Styling options","depth":3},{"value":"fog: Fog | null","depth":4},{"value":"light: Light","depth":4},{"value":"mapStyle: MapboxStyle | string | Immutable","depth":4},{"value":"projection: string | ProjectionSpecification","depth":4},{"value":"renderWorldCopies: boolean","depth":4},{"value":"styleDiffing: boolean","depth":4},{"value":"terrain: TerrainSpecification","depth":4},{"value":"Camera options","depth":3},{"value":"initialViewState: object","depth":4},{"value":"longitude: number","depth":4},{"value":"latitude: number","depth":4},{"value":"zoom: number","depth":4},{"value":"pitch: number","depth":4},{"value":"bearing: number","depth":4},{"value":"padding: PaddingOptions","depth":4},{"value":"minZoom: number","depth":4},{"value":"maxZoom: number","depth":4},{"value":"minPitch: number","depth":4},{"value":"maxPitch: number","depth":4},{"value":"maxBounds: LngLatBoundsLike","depth":4},{"value":"Input handler options","depth":3},{"value":"boxZoom: boolean","depth":4},{"value":"doubleClickZoom: boolean","depth":4},{"value":"dragRotate: boolean","depth":4},{"value":"dragPan: boolean | DragPanOptions","depth":4},{"value":"keyboard: boolean","depth":4},{"value":"scrollZoom: boolean | ZoomRotateOptions","depth":4},{"value":"touchPitch: boolean","depth":4},{"value":"touchZoomRotate: boolean | ZoomRotateOptions","depth":4},{"value":"interactiveLayerIds: string[]","depth":4},{"value":"Callbacks","depth":3},{"value":"onResize: (event: MapboxEvent) => void","depth":4},{"value":"onLoad: (event: MapboxEvent) => void","depth":4},{"value":"onRender: (event: MapboxEvent) => void","depth":4},{"value":"onIdle: (event: MapboxEvent) => void","depth":4},{"value":"onRemove: (event: MapboxEvent) => void","depth":4},{"value":"onError: (event: ErrorEvent) => void","depth":4},{"value":"onMouseDown: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseUp: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOver: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseEnter: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseMove: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseLeave: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOut: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onDblClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onContextMenu: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onWheel: (event: MapWheelEvent) => void","depth":4},{"value":"onTouchStart: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchEnd: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchMove: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchCancel: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onMoveStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMove: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMoveEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDrag: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoom: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotate: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitch: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onBoxZoomStart: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomEnd: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomCancel: (event:MapBoxZoomEvent) => void","depth":4},{"value":"onData: (event: MapStyleDataEvent | MapSourceDataEvent) => void","depth":4},{"value":"onStyleData: (event: MapStyleDataEvent) => void","depth":4},{"value":"onSourceData: (event: MapSourceDataEvent) => void","depth":4},{"value":"Other options","depth":3},{"value":"mapLib: any","depth":4},{"value":"mapboxAccessToken: string","depth":4},{"value":"antialias: boolean","depth":4},{"value":"attributionControl: boolean","depth":4},{"value":"baseApiUrl: string","depth":4},{"value":"bearingSnap: number","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"collectResourceTiming: boolean","depth":4},{"value":"cooperativeGestures: boolean","depth":4},{"value":"crossSourceCollisions: boolean","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"fadeDuration: number","depth":4},{"value":"failIfMajorPerformanceCaveat: boolean","depth":4},{"value":"hash: boolean | string","depth":4},{"value":"interactive: boolean","depth":4},{"value":"locale: Record\\","depth":4},{"value":"localFontFamily: string","depth":4},{"value":"localIdeographFontFamily: string","depth":4},{"value":"logoPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"maxParallelImageRequests: number","depth":4},{"value":"maxTileCacheSize: number","depth":4},{"value":"optimizeForTerrain: boolean","depth":4},{"value":"pitchWithRotate: boolean","depth":4},{"value":"preserveDrawingBuffer: boolean","depth":4},{"value":"refreshExpiredTiles: boolean","depth":4},{"value":"reuseMaps: boolean","depth":4},{"value":"RTLTextPlugin: string","depth":4},{"value":"testMode: boolean","depth":4},{"value":"trackResize: boolean","depth":4},{"value":"transformRequest: TransformRequestFunction","depth":4},{"value":"workerClass: object","depth":4},{"value":"workerCount: number","depth":4},{"value":"workerUrl: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/map","title":"default (Map)"},{"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used. Properties Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'center' A string indicating the part of the Marker that should be positioned closest to the coordinate set via longitude and latitude . color : string Default: '#3FB1CE' The color to use for the default marker if the component contains no content. clickTolerance : number Default: null (inherits Map 's clickTolerance ) The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). draggable : boolean Default: false If true , the marker is able to be dragged to a new position on the map. latitude : number Required. The latitude of the anchor location. longitude : number Required. The longitude of the anchor location. offset : PointLike Default: null The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. pitchAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment . rotation : number Default: 0 The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. rotationAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport . scale : number Default: 1 The scale to use for the default marker if the component contains no content.\nThe default scale ( 1 ) corresponds to a height of 41px and a width of 27px . This prop is not reactive (only used when the marker is mounted). style : CSSProperties CSS style override that applies to the marker's container. Callbacks onClick : (evt: MapEvent ) => void Called when the marker is clicked on. onDragStart : (evt: MarkerDragEvent ) => void Called when dragging starts, if draggable is true . onDrag : (evt: MarkerDragEvent ) => void Called while dragging, if draggable is true . onDragEnd : (evt: MarkerDragEvent ) => void Called when dragging ends, if draggable is true . Source marker.ts","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"color: string","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"draggable: boolean","depth":4},{"value":"latitude: number","depth":4},{"value":"longitude: number","depth":4},{"value":"offset: PointLike","depth":4},{"value":"pitchAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"rotation: number","depth":4},{"value":"rotationAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"scale: number","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onClick: (evt: MapEvent) => void","depth":4},{"value":"onDragStart: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDrag: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDragEnd: (evt: MarkerDragEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showCompass : boolean Default: true If true the compass button is included. showZoom : boolean Default: true If true the zoom-in and zoom-out buttons are included. visualizePitch : boolean Default: false If true the pitch is visualized by rotating X-axis of compass. Source navigation-control.ts","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showCompass: boolean","depth":4},{"value":"showZoom: boolean","depth":4},{"value":"visualizePitch: boolean","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude . \nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' . className : string Space-separated CSS class names to add to popup container. closeButton : boolean Default: true If true , a close button will appear in the top right corner of the popup. closeOnClick : boolean Default: true If true , the popup will close when the map is clicked. closeOnMove : boolean Default: false If true , the popup will closed when the map moves. focusAfterOpen : boolean Default: true If true , the popup will try to focus the first focusable element inside the popup. offset : number | PointLike | Record\\ Default: null A pixel offset applied to the popup's location specified as: a single number specifying a distance from the popup's location a PointLike specifying a constant offset an object of Points specifing an offset for each anchor position. Negative offsets indicate left and up. maxWidth : string Default: 240px A string that sets the CSS property of the popup's maximum width. style : CSSProperties CSS style override that applies to the popup's container. Callbacks onOpen : (evt: PopupEvent ) => void Called when the popup is opened manually or programatically. onClose : (evt: PopupEvent ) => void Called when the popup is closed manually or programatically. Source popup.ts","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined","depth":4},{"value":"className: string","depth":4},{"value":"closeButton: boolean","depth":4},{"value":"closeOnClick: boolean","depth":4},{"value":"closeOnMove: boolean","depth":4},{"value":"focusAfterOpen: boolean","depth":4},{"value":"offset: number | PointLike | Record\\","depth":4},{"value":"maxWidth: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onOpen: (evt: PopupEvent) => void","depth":4},{"value":"onClose: (evt: PopupEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control in pixels. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-left' Placement of the control relative to the map. Note that this prop is only used when the component first mounts. style : CSSProperties CSS style override that applies to the control's container. unit : 'imperial' | 'metric' | 'nautical' Default: 'metric' Unit of the distance. Source scale-control.ts","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"unit: 'imperial' | 'metric' | 'nautical'","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props provided to this component should be conforming to the Mapbox source specification or CanvasSourceOptions . When props change shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity. id : string Unique identifier of the source. If not provided, a default id will be assigned. type : string Required. Type of the source. Source source.ts","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance. IControl A mapboxgl.IControl implementation. CustomLayerInterface A custom layer implementation . MapRef Instance ref of a Map component. See Map documentation for details. GeolocateControlRef Instance ref of a GeolocateControl component. See GeolocateControl documentation for details. Styling MapboxStyle An object conforming to the Mapbox Style Specification . Fog An object conforming to the Fog Style Specification . Light An object conforming to the Light Style Specification . TerrainSpecification An object conforming to the Terrain Style Specification . ProjectionSpecification An object with the following fields: name (string): projection name, one of Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). center? ( number, number ): longitude and latitude of the projection center parallels? ( number, number ): the two standard parallels of a conic projection such as Albers and Lambert. BackgroundLayer A JSON object that defines a background layer according to the Mapbox Style Specification . CircleLayer A JSON object that defines a circle layer according to the Mapbox Style Specification . FillExtrusionLayer A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification . FillLayer A JSON object that defines a fill layer according to the Mapbox Style Specification . HeatmapLayer A JSON object that defines a heatmap layer according to the Mapbox Style Specification . HillshadeLayer A JSON object that defines a hillshade layer according to the Mapbox Style Specification . LineLayer A JSON object that defines a line layer according to the Mapbox Style Specification . RasterLayer A JSON object that defines a raster layer according to the Mapbox Style Specification . SymbolLayer A JSON object that defines a symbol layer according to the Mapbox Style Specification . SkyLayer A JSON object that defines a sky layer according to the Mapbox Style Specification . GeoJSONSourceRaw A JSON object that defines a geojson source according to the Mapbox Style Specification . VideoSourceRaw A JSON object that defines a video source according to the Mapbox Style Specification . ImageSourceRaw A JSON object that defines a image source according to the Mapbox Style Specification . VectorSourceRaw A JSON object that defines a vector source according to the Mapbox Style Specification . RasterSource A JSON object that defines a raster source according to the Mapbox Style Specification . RasterDemSource A JSON object that defines a raster-dem source according to the Mapbox Style Specification . CanvasSourceRaw A JSON object that defines a canvas source type. See CanvasSourceOptions . Configurations Anchor One of 'center' , 'left' , 'right' , 'top' , 'bottom' , 'top-left' , 'top-right' , 'bottom-left' and 'bottom-right' . Alignment One of 'map' , 'viewport' and 'auto' . ControlPosition One of 'top-right' , 'top-left' , 'bottom-right' and 'bottom-left' . DragPanOptions An object with the following fields: linearity? : number - The rate at which the speed reduces after the pan ends. easing? : (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function. deceleration? : number - Factor used to scale the drag velocity. Default 0 . maxSpeed? : number - The maximum value of the drag velocity. Default 1400 . See DragPanHandler#enable . FitBoundsOptions An object with the following fields: offset? : PointLike - The center of the given bounds relative to the map's center, measured in pixels. padding? : PaddingOptions - The amount of padding in pixels to add to the given bounds. maxZoom? : number - The maximum zoom level to allow when the map view transitions to the specified bounds. animate? : boolean - When set to false , no animation happens. linear? : boolean - If true , the map transitions using Map#easeTo . If false , the map transitions using Map#flyTo duration? : number - Duration in milliseconds maxDuration? : number - Max duration in milliseconds easing? : (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state. essential? : boolean - If true , then the animation is considered essential and will not be affected by prefers-reduced-motion . Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system. See Map#fitBounds ZoomRotateOptions An object with the following fields: around? : 'center' - If \"center\" is passed, map will zoom around center of map. See ScrollZoomHandler#enable , TouchZoomRotateHandler#enable PaddingOptions An object with the following fields: left : number - in pixels. top : number - in pixels. right : number - in pixels. bottom : number - in pixels. TransformRequestFunction A function that takes the following arguments: url : string resourceType : 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image'; And returns an object with the following fields: url : string - The URL to be requested. credentials? : 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests. headers? : { header: string : any } - The headers to be sent with the request. method? : 'GET' | 'POST' | 'PUT' collectResourceTiming? : boolean See RequestParameters . Data Types LngLat A mapboxgl.LngLat object. LngLatLike A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties. LngLatBounds A mapboxgl.LngLatBounds object. LngLatBoundsLike A LngLatBounds object, an array of LngLatLike objects in sw, ne order, or an array of numbers in west, south, east, north order. Point A mapboxgl.Point object. PointLike A Point or an array of two numbers representing x and y screen coordinates in pixels. MapboxGeoJSONFeature A GeoJSON feature that also contains the following library-specific fields: layer : Layer source : string sourceLayer : string state : { key: string : any } ViewState An object with the following fields: longitude : number - The longitude of the map center. latitude : number - The latitude of the map center. zoom : number - The zoom level. pitch : number - The pitch (tilt) of the map, in degrees. bearing : number - The bearing (rotation) of the map, in degrees. Sources The following are implementations of source types that could be retrieved with Map#getSource . GeoJSONSource A source containing GeoJSON. See GeoJSONSource . VideoSource A source containing video. See VideoSource . ImageSource A source containing image. See ImageSource . CanvasSource A source containing the contents of an HTML canvas. See CanvasSource . VectorTileSource A source containing vector tiles in Mapbox Vector Tile format . See VectorTileSource . Events MapboxEvent An object with the following fields: type : string - Event type target : MapboxMap - The map instance that fired the event originalEvent? : Event MapLayerMouseEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent point : Point lngLat : LngLat preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] MapWheelEvent An object with the following fields: type : string target : MapboxMap originalEvent? : WheelEvent preventDefault : () => void defaultPrevented : boolean MapLayerTouchEvent An object with the following fields: type : string target : MapboxMap originalEvent? : TouchEvent point : Point lngLat : LngLat points : Point [] lngLats : LngLat [] preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] ViewStateChangeEvent An object with the following fields: type : string - Event type target : MapboxMap viewState : ViewState - the next view state that the camera wants to change to based on user input or transition. MapBoxZoomEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent boxZoomBounds : LngLatBounds MapStyleDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'style' MapSourceDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'source' isSourceLoaded : boolean source : string sourceId : string sourceDataType : 'metadata' | 'content' tile : any coord : Coordinate See MapDataEvent . ErrorEvent An object with the following fields: type : 'error' error : Error GeolocateEvent An object with the following fields: type : string target : MapboxMap target : mapboxgl.GeolocateControl GeolocateResultEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl coords : GeolocationCoordinates - the current location. timestamp : number - the time at which the location was retrieved. GeolocateErrorEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl code : PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError message : string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface. MarkerDragEvent An object with the following fields: type : string target : mapboxgl.Marker lngLat : LngLat - the new location of the marker PopupEvent An object with the following fields: type : string target : mapboxgl.Popup","headings":[{"value":"Types","depth":1},{"value":"Components","depth":2},{"value":"MapboxMap","depth":4},{"value":"IControl","depth":4},{"value":"CustomLayerInterface","depth":4},{"value":"MapRef","depth":4},{"value":"GeolocateControlRef","depth":4},{"value":"Styling","depth":2},{"value":"MapboxStyle","depth":4},{"value":"Fog","depth":4},{"value":"Light","depth":4},{"value":"TerrainSpecification","depth":4},{"value":"ProjectionSpecification","depth":4},{"value":"BackgroundLayer","depth":4},{"value":"CircleLayer","depth":4},{"value":"FillExtrusionLayer","depth":4},{"value":"FillLayer","depth":4},{"value":"HeatmapLayer","depth":4},{"value":"HillshadeLayer","depth":4},{"value":"LineLayer","depth":4},{"value":"RasterLayer","depth":4},{"value":"SymbolLayer","depth":4},{"value":"SkyLayer","depth":4},{"value":"GeoJSONSourceRaw","depth":4},{"value":"VideoSourceRaw","depth":4},{"value":"ImageSourceRaw","depth":4},{"value":"VectorSourceRaw","depth":4},{"value":"RasterSource","depth":4},{"value":"RasterDemSource","depth":4},{"value":"CanvasSourceRaw","depth":4},{"value":"Configurations","depth":2},{"value":"Anchor","depth":4},{"value":"Alignment","depth":4},{"value":"ControlPosition","depth":4},{"value":"DragPanOptions","depth":4},{"value":"FitBoundsOptions","depth":4},{"value":"ZoomRotateOptions","depth":4},{"value":"PaddingOptions","depth":4},{"value":"TransformRequestFunction","depth":4},{"value":"Data Types","depth":2},{"value":"LngLat","depth":4},{"value":"LngLatLike","depth":4},{"value":"LngLatBounds","depth":4},{"value":"LngLatBoundsLike","depth":4},{"value":"Point","depth":4},{"value":"PointLike","depth":4},{"value":"MapboxGeoJSONFeature","depth":4},{"value":"ViewState","depth":4},{"value":"Sources","depth":2},{"value":"GeoJSONSource","depth":4},{"value":"VideoSource","depth":4},{"value":"ImageSource","depth":4},{"value":"CanvasSource","depth":4},{"value":"VectorTileSource","depth":4},{"value":"Events","depth":2},{"value":"MapboxEvent","depth":4},{"value":"MapLayerMouseEvent","depth":4},{"value":"MapWheelEvent","depth":4},{"value":"MapLayerTouchEvent","depth":4},{"value":"ViewStateChangeEvent","depth":4},{"value":"MapBoxZoomEvent","depth":4},{"value":"MapStyleDataEvent","depth":4},{"value":"MapSourceDataEvent","depth":4},{"value":"ErrorEvent","depth":4},{"value":"GeolocateEvent","depth":4},{"value":"GeolocateResultEvent","depth":4},{"value":"GeolocateErrorEvent","depth":4},{"value":"MarkerDragEvent","depth":4},{"value":"PopupEvent","depth":4}],"slug":"docs/api-reference/types","title":"Types"},{"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount. Parameters: onCreate : ({map: 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 SVGOverlay ) are removed. Check out this example for implementing similar controls in your own application. LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example . Map documentation Renamed props for better consistency with the wrapped library: mapboxApiAccessToken is now mapboxAccessToken mapboxApiUrl is now baseApiUrl preventStyleDiffing (default false ) is replaced with styleDiffing (default true ) mapStyle should be explicitly specified. The default value has changed from \"mapbox://styles/mapbox/light-v9\" to an empty style. The following props are removed and apps should use style instead: width height visible onViewportChange , onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management . transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example . mapOptions is removed. Almost all of the options for the native Map class are exposed as props. onHover is removed. Use onMouseMove or onMouseEnter . The event argument is changed for all interaction callbacks. See documentation for details. getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover. touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop. Other components capture* props are removed. *label props are removed. Use Map 's locale prop. All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis. Upgrading to v5.3/v6.1 MapContext is now an official API. The experimental _MapContext export will be removed in a future release. react-virtualized-auto-sizer is no longer a dependency. Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options : Source and Layer components no longer expose imperative methods via ref as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call sourceRef.getSource() , it can be replaced with mapRef().getMap().getSource(sourceId) . If you used to call layerRef.getLayer() , it can be replaced with mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of InteractiveMap 's maxPitch prop is changed to 85 from 60 . mapbox-gl v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message m is not defined . Find solutions in this thread . Upgrading to v4 onChangeViewport is removed, use onViewportChange instead Immutable.js is no longer a dependency Export experimental.MapControls is removed, use MapController instead InteractiveMap 's mapControls prop is renamed to controller Removed support for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See Get Started for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The Node Version Requirement for building react-map-gl is now >=v6.4.0 . Using prebuilt react-map-gl does NOT has this limitation. This is introduced by Mapbox GL JS v0.38.0 MapGL Component Two Map Components - v3 now splits the Map component into two React components: StaticMap and InteractiveMap . InteractiveMap is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport callback now includes width and height . The viewport parameter passed to the onChangeViewport callback now includes width and height . Application code that composed the viewport with width and height may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples - Some less frequently used overlays ( DraggablePointsOverlay , ChoroplethOverlay , ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map - Overlays must now be rendered as children of the main react-map-gl component to automatically sync with the map viewport. fitBounds utility function The fitBounds utility has been moved to the math.gl library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old props will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new props as soon as possible. Old Prop New Prop onChangeViewport() onViewportChange() onHoverFeatures() onHover() onClickFeatures() onClick() perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using v1 of react-map-gl, make sure that you first upgrade: Your node version to v4 or higher Your react version to 15.4 or higher. Background: mapbox-gl 0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays - The map overlay components ( HTMLOverlay , CanvasOverlay , SVGOverlay etc) are now named exports. They previously had to be imported via their relative source paths: Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user). This information must be passed back to the react-map-gl component in the next render. To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude , latitude and zoom ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v7.0","depth":2},{"value":"Dependencies","depth":3},{"value":"Module exports","depth":3},{"value":"Map","depth":3},{"value":"Other components","depth":3},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v7.0 Release date: Feb 4, 2022 v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are: Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library Lightweight: the ESM build size is reduced from 219k to 57k Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs ( flyTo , fitBounds etc.) can now be called directly without breaking the React binding. Compatibility: first and third-party plugins! Directly use mapbox-gl-draw , mapbox-gl-geocoder , to name a few. TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported . Visit the upgrade guide if you are trying to upgrade from v5 and v6. react-map-gl v5.3/v6.1 Release date: Jan 27, 2020 Highlights TypeScript and Flow typings are now published with the library More controller customizations. Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated interaction options for details. A new eventRecognizerOptions prop is added for fine-tuning the interaction experience. New component: AttributionControl Promoted to official API: MapContext Resolved React error over attempted state update during render GeolocateControl added supports for showAccuracyCircle All controls now support inline styling with a style prop All components and examples have been rewritten as functional components react-map-gl v6.0 Release date: Dec 16, 2020 What's Changed The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are important changes to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do NOT upgrade to this version, and consider your options discussed in this document . See upgrade guide for a complete list of breaking changes. react-map-gl v5.2 Release date: Jan 6, 2020 Highlights New Components : ScaleControl NavigationControl : new label prop GeolocateControl : new label , onGeolocate , auto props New Export : WebMercatorViewport is re-exported from the viewport-mercator-project library for ease of use. It's recommended to import it from react-map-gl instead to avoid future dependency change. New Example : Clusters react-map-gl v5.1 Release date: Oct 30, 2019 Highlights New Components : Layer and Source have been added to provide better React parity with the Mapbox GL JS API. Viewport transition : transitionDuration can be set to 'auto' when using FlyToInterpolator . New Example : Add an example with drawing library react-map-gl-draw . react-map-gl v5.0 Release date: May 31, 2019 What's Changed The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's changelog and blog post . Alongside Mapbox GL JS's new milestone, we have relaxed the mapbox-gl dependency from locking minor release ( ~0.53.0 ) to major release ( ^1.0.0 ). This will allow developers to upgrade faster without waiting for a new release from react-map-gl. react-map-gl v4.1 Release date: Mar 14, 2019 Highlights New Components : FullscreenControl , GeolocateControl have been added to provide better React parity with the Mapbox GL JS API. New callback props InteractiveMap supports more callbacks: onNativeClick react-map-gl v4.0 Release date: Nov 5, 2018 Highlights Relative dimensions Both InteractiveMap and StaticMap now support CSS strings supplied to map width and height props. New onResize callback is fired when the map resizes. React 16 Upgrade to React 16.3 context and ref patterns Babel 7 Upgrade build system to Babel 7, better support for tree-shaking Style diffing Now use Mapbox's native style diffing. Immutable is no longer required. Draggable Markers Marker component now supports a new prop draggable , along with callbacks onDragStart , onDrag , and onDragEnd . 3d Popups Popup component now supports a new prop sortByDepth to enable proper occlusion when multiple popups are used in a tilted map. Interaction states onViewportChange is now called with richer descriptors of the user interaction, including isPanning , isZooming and isRotating . Interactive layers Dropped the requirement for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. New callback props InteractiveMap supports more callbacks: onDblClick onMouseDown onMouseMove onMouseUp onTouchStart onTouchMove onTouchEnd onMouseEnter onMouseLeave onWheel onMouseOut See upgrade guide for breaking changes. react-map-gl v3.3 Release date: July, 2018 Highlights New viewState Property : Makes it possible to specify all map state properties ( longitude , latitude , zoom , bearing and pitch ) as a single property. New onViewStateChange callback : An alternative callback that matches the new viewState prop. react-map-gl v3.2 Realease date: January, 2018 Highlights Viewport transition : feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl. Better parity of Mapbox interaction : navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning. Support for Map Reuse (experimental) : A new property reuseMaps is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. mapbox-gl 0.42.2 New props of the InteractiveMap component: Map creation: transformRequest , reuseMaps Interaction: touchZoom , touchRotate Transition: transitionDuration , transitionInterpolator , transitionEasing , transitionInterruption , onTransitionStart , onTransitionInterrupt , onTransitionEnd react-map-gl v3.1 Release date: October 19, 2017 Highlights Event handling Support right mouse drag to rotate Support keyboard navigation Allow controls and overlays to block map interactions React 16 - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at >=15.4.x . mapbox-gl v0.40.1 No Token warning : react-map-gl now renders an HTML message if no mapbox token is supplied. react-map-gl v3.0 Release date: July 27th, 2017 Highlights Latest Mapbox GL JS : Bumps Mapbox GL JS to 0.38 . Multi-Touch Support : Full support for multi-touch gestures such as pinch-to-zoom and rotate. New Components : The MapGL component has been split into StaticMap and InteractiveMap (the default). Also, Popup , Marker , NavigationControl have been added to provide better React parity with the Mapbox GL JS API. Improved Overlay Components : Supplying viewport props ( width height zoom longitude and latitude ) are no longer required if you render SVGOverlay , CanvasOverlay or HTMLOverlay as a child of the map. Perspective mode is now supported in all overlays. New Props : maxPitch , minPitch , dragPan , doubleClickZoom , touchZoomRotate ,\n scrollZoom are now provided to allow granular control of map interactivity. Documentation : Significantly expanded and linked with our other geospatial frameworks. Examples : New stand-alone examples to get you started instantly with the new features. Event Handling : New event handling architecture that enables full customization of event handling (experimental). Components InteractiveMap (New, MapGL replacement) This is a wrapper on top of StaticMap . It takes all the props of StaticMap and additional ones such as onViewportChange , scrollZoom , dragRotate , etc. to control interactivity on the map. See Source Code for more information. StaticMap (New) This is the React wrapper around Mapbox GL JS and takes in viewport properties such as width , height , latitude , longitude . Style diffing and updating logic also live here. See Source Code for more information. Overlays Three overlays ( ScatterplotOverlay , DraggablePointsOverlay , ChoroplethOverlay ), have been moved out of the library and are now only provided as examples. Property Changes Property Names - some prop names have been modernized, the old ones will still work for now with a warning. Internal Properties such as isHovering , isDragging , startDragLngLat have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past. Utilities fitBounds : fitBounds has been moved to another repository and has been rewritten to provide a more logical interface. For more information, see the Upgrade Guide . react-map-gl v2.0 Date: Jan 17, 2017 Highlights Latest mapbox-gl : Bump mapbox-gl to v0.31.0 new maxZoom prop - Add maxZoom prop and defaults to 20 New onLoad prop - Add onLoad event handler new onClick prop - Add onClick prop handler (#140) react-map-gl v1.0 Perspective Mode - Now supports bearing and pitch properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided Support for ES6 imports - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'. react-map-gl v0.6 Initial public version","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v7.0","depth":2},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details about data sources and layer configuration, check out the Mapbox style specification . For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples. Custom Overlays You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here . Other vis.gl Libraries For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web. deck.gl - WebGL-powered framework for the visualization of large datasets. loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data. nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Custom Overlays","depth":2},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started examples . Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl . Or embed it in your app by using css-loader with Webpack or postcss with rollup: Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: Then override the mapLib prop of Map : To use the stylesheet from the fork: Or","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use: mapbox-gl@>=2.0.0 and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps. mapbox-gl@1.x or maplibre-gl - requires an access token only if you load the map styles and tiles from Mapbox's data service. See \"Display Maps Without A Mapbox Token\" section below for using non-Mapbox tiles. To get a Mapbox token, you will need to register on their website . The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded. There are several ways to provide a token to your app, as showcased in some of the example folders: Provide a mapboxAccessToken prop to the map component Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App) Provide it in the URL, e.g ?access_token=TOKEN We recommend using an environment variable to minimize leaking risks. See securing Mapbox token for examples. Display Maps Without A Mapbox Token It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are: Stay on mapbox-gl@1.x . react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox. Use a community fork of mapbox-gl, for example maplibre-gl . See using with a mapbox-gl fork for how to configure your project. To use your own map service, you will need a custom Mapbox GL style that points to your own vector tile source , and pass it to Map using the mapStyle prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to Map using the transformRequest prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class. Controlled : The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic. Uncontrolled Map You may clone a full app configuration for this example here . Controlled Map You may clone a full app configuration for this example here . A real-world application likely uses more complicated state flows: Using map with a state store (Redux) example Using map with SSR (Next.js) example Custom Camera Constraints Map offers props that set basic constraints for the camera, e.g. maxBounds , minZoom , maxPitch . If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:","headings":[{"value":"State Management","depth":1},{"value":"Uncontrolled Map","depth":2},{"value":"Controlled Map","depth":2},{"value":"Custom Camera Constraints","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"},{"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused. Never commit your token in clear text into GitHub or other source control. In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable. Create separate tokens for development (often times on http://localhost ), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com ). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own. Add the following to your bundler config: react-map-gl automatically picks up process.env.MapboxAccessToken or process.env.REACT_APP_MAPBOX_ACCESS_TOKEN if they are defined. Alternatively, you can use your own variable name (e.g. __SUPER_SECRET_TOKEN__ ) and pass it in manually with mapboxAccessToken={__SUPER_SECRET_TOKEN__} . Minimize Cost from Frequent Re-mounting In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout: Every time the user clicks the \"table\" tab, the map is unmounted. When they click the \"map\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not idea to get billed for just collapsing and expanding part of the UI. In this case, it is recommended that you set the reuseMaps prop to true : This bypasses the initialization when a map is removed then added back. Performance with Many Markers If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup: This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible. One way to improve the performance is useMemo : This prevents React from rerendering the markers unless they have changed. If your application can do without complicated DOM objects and CSS styling, consider switching to a symbol layer . Layers are rendered in WebGL and are much more performant than markers:","headings":[{"value":"Tips and Tricks","depth":1},{"value":"Securing Mapbox Token","depth":2},{"value":"Minimize Cost from Frequent Re-mounting","depth":2},{"value":"Performance with Many Markers","depth":2}],"slug":"docs/get-started/tips-and-tricks","title":"Tips and Tricks"}]}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of React components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token. Mapbox GL JS v2 The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps. Other mapbox-gl forks It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. For basemaps: You can load map data from Mapbox's own service. You can create and host your own map data using one of the many open source tools . New to react-map-gl? Get Started Want to contribute? See our Developer Guide Design Philosophy react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization . To manage the complexity of these applications, we fully embrace React and reactive programming. The stock mapbox-gl APIs are imperative . That is, you instruct the map to do something (for example, map.flyTo ), and it will execute the command at its own pace. This does not scale when we have many components that need to synchronize with each other. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl . In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. We might store the source of truth in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. Ultimately, in the spirit of the reactive programming paradigm , data always flows down . As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync. react-map-gl creates a fully reactive wrapper for mapbox-gl. The Map component can be fully controlled , that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in state management . Limitations In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants. It is possible to call the native methods directly from the Map instance obtained via getMap . However, doing so may result in the map's state to deviate from its props. For example, calling map.setMaxZoom directly will cause the map's constraint settings to differ from the value of the maxZoom prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"AttributionControl React component that wraps AttributionControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. compact : boolean | undefined If true , force a compact attribution that shows the full attribution on mouse hover. If false , force the full attribution control. If unset, shows a responsive attribution that collapses when the map is less than 640 pixels wide. Note that your attribution must adhere to Mapbox's guidelines . customAttribution : string | string[] String or strings to show in addition to any other attributions. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source attribution-control.ts","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"compact: boolean | undefined","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"FullscreenControl React component that wraps FullscreenControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. containerId : string Id of the DOM element which should be made full screen. By default, the map container element will be made full screen. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. Source fullscreen-control.ts","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"containerId: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl React component that wraps GeolocateControl . Methods Imperative methods are accessible via a React ref hook: trigger() : boolean Trigger a geolocation event. Returns: true if successful. Properties Note that the following properties are not reactive. They are only used when the component first mounts. Tracking options positionOptions : PositionOptions A Geolocation API PositionOptions object trackUserLocation : boolean Default: false If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes. Render options fitBoundsOptions : FitBoundsOptions Default: {maxZoom: 15} A ( fitBounds ) options object to use when the map is panned and zoomed to the user's location. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showAccuracyCircle : boolean Default: true Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. \nThis only has effect if showUserLocation is true . showUserHeading : boolean Default: false If true , an arrow will be drawn next to the user location dot indicating the device's heading.\nThis only has affect when trackUserLocation is true . showUserLocation : boolean Default: true Show a dot on the map at the user's location. Set to false to disable. Callbacks onGeolocate : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success. onError : (evt: GeolocateErrorEvent ) => void Called on each Geolocation API position update that returned as an error. onOutOfMaxBounds : (evt: GeolocateResultEvent ) => void Called on each Geolocation API position update that returned as success but user position is out of map maxBounds . onTrackUserLocationStart : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the active lock state. onTrackUserLocationEnd : (evt: GeolocateEvent ) => void Called when the GeolocateControl changes to the background state. Source geolocate-control.ts","headings":[{"value":"GeolocateControl","depth":1},{"value":"Methods","depth":2},{"value":"trigger(): boolean","depth":4},{"value":"Properties","depth":2},{"value":"Tracking options","depth":3},{"value":"positionOptions: PositionOptions","depth":4},{"value":"trackUserLocation: boolean","depth":4},{"value":"Render options","depth":3},{"value":"fitBoundsOptions: FitBoundsOptions","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showAccuracyCircle: boolean","depth":4},{"value":"showUserHeading: boolean","depth":4},{"value":"showUserLocation: boolean","depth":4},{"value":"Callbacks","depth":3},{"value":"onGeolocate: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onError: (evt: GeolocateErrorEvent) => void","depth":4},{"value":"onOutOfMaxBounds: (evt: GeolocateResultEvent) => void","depth":4},{"value":"onTrackUserLocationStart: (evt: GeolocateEvent) => void","depth":4},{"value":"onTrackUserLocationEnd: (evt: GeolocateEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"Layer This component allows apps to create a map layer using React. Properties The props provided to this component should be conforming to the Mapbox layer specification . When props change shallowly , the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance. Identity Properties Once a is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's key prop to give each element a stable identity. id : string Unique identifier of the layer. If not provided, a default id will be assigned. type : string Required. Type of the layer. Options beforeId : string The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL. Note that layers are added by the order that they mount. They are NOT reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate beforeId for consistent behavior. source : string source is required by some layer types in the Mapbox style specification. If is used as the child of a Source component, this prop will be overwritten by the id of the parent source. Source layer.ts","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Options","depth":3},{"value":"beforeId: string","depth":4},{"value":"source: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"MapProvider A Context.Provider that facilitates map operations outside of the component that directly renders a Map . The component should wrap all nodes in which you may want to access the maps: See useMap for more information. Source use-map.tsx","headings":[{"value":"MapProvider","depth":1},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-provider","title":"MapProvider"},{"excerpt":"default (Map) React component that wraps Map . This is also the default export from react-map-gl. Methods Imperative methods are accessible via a React ref or the useMap hook. The MapRef object exposes Map methods that are safe to call without breaaking the React bindings . For example, setStyle() is hidden from the ref object, because the style is supposed to be changed by updating the mapStyle prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors. You can still access the hidden members via getMap() : getMap() : MapboxMap Returns the native Map instance associated with this component. Properties Layout options id : string Map container id. style : CSSProperties Default: {position: 'relative', width: '100%', height: '100%'} Map container CSS. cursor : string Default: 'auto' The current cursor type . Styling options fog : Fog | null The fog property of the style. Must conform to the Fog Style Specification .\nIf null is provided, removes the fog from the map. light : Light Light properties of the style. Must conform to the Light Style Specification . mapStyle : MapboxStyle | string | Immutable Default: (empty style) The map's Mapbox style. This must be an a JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. projection : string | ProjectionSpecification Default: 'mercator' The projection the map should be rendered in. Available projections are Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). Conic projections such as Albers and Lambert have configurable center and parallels properties that allow developers to define the region in which the projection has minimal distortion; see example . renderWorldCopies : boolean Default: true If true , multiple copies of the world will be rendered, when zoomed out. styleDiffing : boolean Default: true Enable diffing when mapStyle changes. If false , force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update. terrain : TerrainSpecification Terrain property of the style. Must conform to the Terrain Style Specification .\nIf null is provided, removes terrain from the map. Camera options initialViewState : object The initial view state of the map. If specified, longitude , latitude , zoom etc. in props are ignored when constructing the map. Only specify initialViewState if Map is being used as an uncontrolled component . See state management for examples. bounds? : LngLatBoundsLike - The initial bounds of the map. If specified, it overrides the longitude , latitude and zoom options. Default null . fitBoundsOptions : FitBoundsOptions - A fitBounds options object to use only when setting the bounds option. Default null . longitude : number - The initial longitude of the map center. Default 0 . latitude : number - The initial latitude of the map center. Default 0 . zoom : number - The initial zoom level. Default 0 . pitch : number - The initial pitch (tilt) of the map. Default 0 . bearing : number - The initial bearing (rotation) of the map. Default 0 . longitude : number The longitude of the map center. latitude : number The latitude of the map center. zoom : number The zoom level of the map. pitch : number The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). bearing : number The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. padding : PaddingOptions Default: null The padding in pixels around the viewport. minZoom : number Default: 0 The minimum zoom level of the map (0-24). maxZoom : number Default: 22 The maximum zoom level of the map (0-24). minPitch : number Default: 0 The minimum pitch of the map (0-85). maxPitch : number Default: 60 The maximum pitch of the map (0-85). maxBounds : LngLatBoundsLike Default: null If set, the map is constrained to the given bounds. Input handler options boxZoom : boolean Default: true If true , the \"box zoom\" interaction is enabled (see BoxZoomHandler ). doubleClickZoom : boolean Default: true If true , the \"double click to zoom\" interaction is enabled (see DoubleClickZoomHandler ). dragRotate : boolean Default: true If true , the \"drag to rotate\" interaction is enabled (see DragRotateHandler ). dragPan : boolean | DragPanOptions Default: true If true , the \"drag to pan\" interaction is enabled. Optionally accpt an object value that is the options to DragPanHandler#enable . keyboard : boolean Default: true If true , keyboard shortcuts are enabled (see KeyboardHandler ). scrollZoom : boolean | ZoomRotateOptions Default: true If true , the \"scroll to zoom\" interaction is enabled. Optionally accpt an object value that is the options to ScrollZoomHandler#enable . touchPitch : boolean Default: true If true , the \"drag to pitch\" interaction is enabled. Optionally accpt an object value that is the options to TouchPitchHandler#enable . touchZoomRotate : boolean | ZoomRotateOptions Default: true If true , the \"pinch to rotate and zoom\" interaction is enabled. Optionally accpt an object value that is the options to TouchZoomRotateHandler#enable . interactiveLayerIds : string[] Default: null The id(s) of style layer(s). If specified, pointer event ( mousemove , click etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a features property containing an array of the matching features. If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a features property. See the Callbacks section for affected events. Callbacks onResize : (event: MapboxEvent ) => void Called when the map has been resized. onLoad : (event: MapboxEvent ) => void Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. onRender : (event: MapboxEvent ) => void Called whenever the map is drawn to the screen. onIdle : (event: MapboxEvent ) => void Called after the last frame rendered before the map enters an \"idle\" state: No camera transitions are in progress All currently requested tiles have loaded All fade/transition animations have completed onRemove : (event: MapboxEvent ) => void Called when the map has been removed. onError : (event: ErrorEvent ) => void Default: evt => console.error(evt.error) Called when an error occurs. onMouseDown : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is pressed while inside a visible portion of the specifed layer(s). onMouseUp : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is released within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is released while inside a visible portion of the specifed layer(s). onMouseOver : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. onMouseEnter : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by interactiveLayerIds from outside that layer or outside the map canvas. onMouseMove : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. If interactiveLayerIds is specified, the event will fire only when the the cursor is inside a visible portion of the specifed layer(s). onMouseLeave : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by interactiveLayerIds or moves from the layer to outside the map canvas. onMouseOut : (event: MapLayerMouseEvent ) => void Called when a point device (usually a mouse) leaves the map's canvas. onClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released at the same point on the map. If interactiveLayerIds is specified, the event will fire only when the point that is clicked twice contains a visible portion of the specifed layer. onDblClick : (event: MapLayerMouseEvent ) => void Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. If interactiveLayerIds is specified, the event will fire only when the point that is pressed and released contains a visible portion of the specifed layer. onContextMenu : (event: MapLayerMouseEvent ) => void Called when the right button of the mouse is clicked or the context menu key is pressed within the map. If interactiveLayerIds is specified, the event will fire only when the point that is right clicked contains a visible portion of the specifed layer. onWheel : (event: MapWheelEvent ) => void Called when a wheel event occurs within the map. onTouchStart : (event: MapLayerTouchEvent ) => void Called when a touchstart event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchEnd : (event: MapLayerTouchEvent ) => void Called when a touchend event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchMove : (event: MapLayerTouchEvent ) => void Called when a touchmove event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onTouchCancel : (event: MapLayerTouchEvent ) => void Called when a touchcancel event occurs within the map. If interactiveLayerIds is specified, the event will fire only when the point is inside a visible portion of the specifed layer. onMoveStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one view to another. onMove : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one view to another. When Map is used as a controlled component, event.viewState reflects the view state that the camera \"proposes\" to move to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the view state props ( longitude , latitude , zoom etc.).\nSee state management for examples. onMoveEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one view to another. onDragStart : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction starts. onDrag : (event: ViewStateChangeEvent ) => void Called repeatedly during a \"drag to pan\" interaction. onDragEnd : (event: ViewStateChangeEvent ) => void Called when a \"drag to pan\" interaction ends. onZoomStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one zoom level to another. onZoom : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one zoom level to another. When Map is used as a controlled component, event.viewState.zoom reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the zoom prop. onZoomEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one zoom level to another. onRotateStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one bearing (rotation) to another. onRotate : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one bearing (rotation) to another. When Map is used as a controlled component, event.viewState.bearing reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the bearing prop. onRotateEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one bearing (rotation) to another. onPitchStart : (event: ViewStateChangeEvent ) => void Called just before the map begins a transition from one pitch (tilt) to another. onPitch : (event: ViewStateChangeEvent ) => void Called repeatedly during an animated transition from one pitch (tilt) to another. When Map is used as a controlled component, event.viewState.pitch reflects the zoom that the camera \"proposes\" to change to, as a result of either user interaction or methods such as flyTo . The camera does not actually change until the application updates the pitch prop. onPitchEnd : (event: ViewStateChangeEvent ) => void Called just after the map completes a transition from one pitch (tilt) to another. onBoxZoomStart : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction starts. onBoxZoomEnd : (event: MapBoxZoomEvent ) => void Called when a \"box zoom\" interaction ends. onBoxZoomCancel : (event: MapBoxZoomEvent ) => void Called when the user cancels a \"box zoom\" interaction, or when the bounding box does not meet the minimum size threshold. onData : (event: MapStyleDataEvent | MapSourceDataEvent ) => void Called when any map data loads or changes. See MapDataEvent for more information. onStyleData : (event: MapStyleDataEvent ) => void Called when the map's style loads or changes. See MapDataEvent for more information. onSourceData : (event: MapSourceDataEvent ) => void Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information. Other options Props in this section are not reactive. They are only used once when the Map instance is constructed. mapLib : any Override the map library. By default, it loads the mapbox-gl module using dynamic import . This can be used to replace mapbox-gl with a compatible fork: Or to load a pre-bundled version of the library: Default: import('mapbox-gl') mapboxAccessToken : string Token used to access the Mapbox data service. See about map tokens . antialias : boolean Default: false If true , the gl context will be created with MSAA antialiasing , which can be useful for antialiasing custom layers.\nThis is false by default as a performance optimization. attributionControl : boolean Default: true If true , an attribution control will be added to the map. baseApiUrl : string The map's default API URL for requesting tiles, styles, sprites, and glyphs. bearingSnap : number Default: 7 Snap to north threshold in degrees. clickTolerance : number Default: 3 The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag). collectResourceTiming : boolean Default: false If true , Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a resourceTiming property of relevant data events. cooperativeGestures : boolean Default: false If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled. crossSourceCollisions : boolean Default: true If true , symbols from multiple sources can collide with each other during collision detection. If false , collision detection is run separately for the symbols in each source. customAttribution : string | string[] Default: null String or strings to show in an AttributionControl.\nOnly applicable if attributionControl is true . fadeDuration : number Default: 300 Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading. failIfMajorPerformanceCaveat : boolean Default: false If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. hash : boolean | string Default: false If true , the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.\nFor example, http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60 . An additional string may optionally be provided to indicate a parameter-styled hash,\ne.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar , where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash. interactive : boolean Default: true If false , no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input. locale : Record\\ Default: null A patch to apply to the default localization table for UI strings, e.g. control tooltips.\nThe locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs.\nThe object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table). localFontFamily : string Default: null Defines a CSS font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). If set, this option overrides the setting in localIdeographFontFamily. localIdeographFontFamily : string Default: 'sans-serif' Defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. Overrides font settings from the map's style. See example . logoPosition : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'bottom-left' A string representing the position of the Mapbox wordmark on the map. maxParallelImageRequests : number Default: 16 The maximum number of images (raster tiles, sprites, icons) to load in parallel. maxTileCacheSize : number Default: null The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. optimizeForTerrain : boolean Default: true If true, map will prioritize rendering for performance by reordering layers.\nIf false, layers will always be drawn in the specified order. pitchWithRotate : boolean Default: true If false , the map's pitch (tilt) control with \"drag to rotate\" interaction will be disabled. preserveDrawingBuffer : boolean Default: false If true , The maps canvas can be exported to a PNG using map.getCanvas().toDataURL() ;. This is false by default as a performance optimization. refreshExpiredTiles : boolean Default: true If false , the map won't attempt to re-request tiles once they expire per their HTTP cacheControl / expires headers. reuseMaps : boolean Default: false By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed. If reuseMaps is set to true , when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid new billable events triggered by initialization. Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and initialViewState of the new component are respected. RTLTextPlugin : string Default: 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js' Sets the map's RTL text plugin . Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Setting this prop is the equivelant of calling mapboxgl.setRTLTextPlugin with lazy: true . testMode : boolean Default: false Silences errors and warnings generated due to an invalid accessToken, useful when using the library to write unit tests. trackResize : boolean Default: true If true , the map will automatically resize when the browser window resizes. transformRequest : TransformRequestFunction Default: null A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests. workerClass : object Default: null Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\nTakes precedence over workerUrl . workerCount : number Default: 2 The number of web workers instantiated on a page with mapbox-gl maps. workerUrl : string Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. Source map.tsx","headings":[{"value":"default (Map)","depth":1},{"value":"Methods","depth":2},{"value":"getMap(): MapboxMap","depth":4},{"value":"Properties","depth":2},{"value":"Layout options","depth":3},{"value":"id: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"cursor: string","depth":4},{"value":"Styling options","depth":3},{"value":"fog: Fog | null","depth":4},{"value":"light: Light","depth":4},{"value":"mapStyle: MapboxStyle | string | Immutable","depth":4},{"value":"projection: string | ProjectionSpecification","depth":4},{"value":"renderWorldCopies: boolean","depth":4},{"value":"styleDiffing: boolean","depth":4},{"value":"terrain: TerrainSpecification","depth":4},{"value":"Camera options","depth":3},{"value":"initialViewState: object","depth":4},{"value":"longitude: number","depth":4},{"value":"latitude: number","depth":4},{"value":"zoom: number","depth":4},{"value":"pitch: number","depth":4},{"value":"bearing: number","depth":4},{"value":"padding: PaddingOptions","depth":4},{"value":"minZoom: number","depth":4},{"value":"maxZoom: number","depth":4},{"value":"minPitch: number","depth":4},{"value":"maxPitch: number","depth":4},{"value":"maxBounds: LngLatBoundsLike","depth":4},{"value":"Input handler options","depth":3},{"value":"boxZoom: boolean","depth":4},{"value":"doubleClickZoom: boolean","depth":4},{"value":"dragRotate: boolean","depth":4},{"value":"dragPan: boolean | DragPanOptions","depth":4},{"value":"keyboard: boolean","depth":4},{"value":"scrollZoom: boolean | ZoomRotateOptions","depth":4},{"value":"touchPitch: boolean","depth":4},{"value":"touchZoomRotate: boolean | ZoomRotateOptions","depth":4},{"value":"interactiveLayerIds: string[]","depth":4},{"value":"Callbacks","depth":3},{"value":"onResize: (event: MapboxEvent) => void","depth":4},{"value":"onLoad: (event: MapboxEvent) => void","depth":4},{"value":"onRender: (event: MapboxEvent) => void","depth":4},{"value":"onIdle: (event: MapboxEvent) => void","depth":4},{"value":"onRemove: (event: MapboxEvent) => void","depth":4},{"value":"onError: (event: ErrorEvent) => void","depth":4},{"value":"onMouseDown: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseUp: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOver: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseEnter: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseMove: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseLeave: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onMouseOut: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onDblClick: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onContextMenu: (event: MapLayerMouseEvent) => void","depth":4},{"value":"onWheel: (event: MapWheelEvent) => void","depth":4},{"value":"onTouchStart: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchEnd: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchMove: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onTouchCancel: (event: MapLayerTouchEvent) => void","depth":4},{"value":"onMoveStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMove: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onMoveEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDrag: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onDragEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoom: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onZoomEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotate: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onRotateEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchStart: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitch: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onPitchEnd: (event: ViewStateChangeEvent) => void","depth":4},{"value":"onBoxZoomStart: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomEnd: (event: MapBoxZoomEvent) => void","depth":4},{"value":"onBoxZoomCancel: (event:MapBoxZoomEvent) => void","depth":4},{"value":"onData: (event: MapStyleDataEvent | MapSourceDataEvent) => void","depth":4},{"value":"onStyleData: (event: MapStyleDataEvent) => void","depth":4},{"value":"onSourceData: (event: MapSourceDataEvent) => void","depth":4},{"value":"Other options","depth":3},{"value":"mapLib: any","depth":4},{"value":"mapboxAccessToken: string","depth":4},{"value":"antialias: boolean","depth":4},{"value":"attributionControl: boolean","depth":4},{"value":"baseApiUrl: string","depth":4},{"value":"bearingSnap: number","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"collectResourceTiming: boolean","depth":4},{"value":"cooperativeGestures: boolean","depth":4},{"value":"crossSourceCollisions: boolean","depth":4},{"value":"customAttribution: string | string[]","depth":4},{"value":"fadeDuration: number","depth":4},{"value":"failIfMajorPerformanceCaveat: boolean","depth":4},{"value":"hash: boolean | string","depth":4},{"value":"interactive: boolean","depth":4},{"value":"locale: Record\\","depth":4},{"value":"localFontFamily: string","depth":4},{"value":"localIdeographFontFamily: string","depth":4},{"value":"logoPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"maxParallelImageRequests: number","depth":4},{"value":"maxTileCacheSize: number","depth":4},{"value":"optimizeForTerrain: boolean","depth":4},{"value":"pitchWithRotate: boolean","depth":4},{"value":"preserveDrawingBuffer: boolean","depth":4},{"value":"refreshExpiredTiles: boolean","depth":4},{"value":"reuseMaps: boolean","depth":4},{"value":"RTLTextPlugin: string","depth":4},{"value":"testMode: boolean","depth":4},{"value":"trackResize: boolean","depth":4},{"value":"transformRequest: TransformRequestFunction","depth":4},{"value":"workerClass: object","depth":4},{"value":"workerCount: number","depth":4},{"value":"workerUrl: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/map","title":"default (Map)"},{"excerpt":"Marker React component that wraps Marker . If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used. Properties Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default: 'center' A string indicating the part of the Marker that should be positioned closest to the coordinate set via longitude and latitude . color : string Default: '#3FB1CE' The color to use for the default marker if the component contains no content. clickTolerance : number Default: null (inherits Map 's clickTolerance ) The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). draggable : boolean Default: false If true , the marker is able to be dragged to a new position on the map. latitude : number Required. The latitude of the anchor location. longitude : number Required. The longitude of the anchor location. offset : PointLike Default: null The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. pitchAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment . rotation : number Default: 0 The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. rotationAlignment : 'map' | 'viewport' | 'auto' Default: 'auto' map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport . scale : number Default: 1 The scale to use for the default marker if the component contains no content.\nThe default scale ( 1 ) corresponds to a height of 41px and a width of 27px . This prop is not reactive (only used when the marker is mounted). style : CSSProperties CSS style override that applies to the marker's container. Callbacks onClick : (evt: MapEvent ) => void Called when the marker is clicked on. onDragStart : (evt: MarkerDragEvent ) => void Called when dragging starts, if draggable is true . onDrag : (evt: MarkerDragEvent ) => void Called while dragging, if draggable is true . onDragEnd : (evt: MarkerDragEvent ) => void Called when dragging ends, if draggable is true . Source marker.ts","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'","depth":4},{"value":"color: string","depth":4},{"value":"clickTolerance: number","depth":4},{"value":"draggable: boolean","depth":4},{"value":"latitude: number","depth":4},{"value":"longitude: number","depth":4},{"value":"offset: PointLike","depth":4},{"value":"pitchAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"rotation: number","depth":4},{"value":"rotationAlignment: 'map' | 'viewport' | 'auto'","depth":4},{"value":"scale: number","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onClick: (evt: MapEvent) => void","depth":4},{"value":"onDragStart: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDrag: (evt: MarkerDragEvent) => void","depth":4},{"value":"onDragEnd: (evt: MarkerDragEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl React component that wraps NavigationControl . Properties Note that the following properties are not reactive. They are only used when the component first mounts. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'top-right' Placement of the control relative to the map. style : CSSProperties CSS style override that applies to the control's container. showCompass : boolean Default: true If true the compass button is included. showZoom : boolean Default: true If true the zoom-in and zoom-out buttons are included. visualizePitch : boolean Default: false If true the pitch is visualized by rotating X-axis of compass. Source navigation-control.ts","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"showCompass: boolean","depth":4},{"value":"showZoom: boolean","depth":4},{"value":"visualizePitch: boolean","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude . \nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' . className : string Space-separated CSS class names to add to popup container. closeButton : boolean Default: true If true , a close button will appear in the top right corner of the popup. closeOnClick : boolean Default: true If true , the popup will close when the map is clicked. closeOnMove : boolean Default: false If true , the popup will closed when the map moves. focusAfterOpen : boolean Default: true If true , the popup will try to focus the first focusable element inside the popup. offset : number | PointLike | Record\\ Default: null A pixel offset applied to the popup's location specified as: a single number specifying a distance from the popup's location a PointLike specifying a constant offset an object of Points specifing an offset for each anchor position. Negative offsets indicate left and up. maxWidth : string Default: 240px A string that sets the CSS property of the popup's maximum width. style : CSSProperties CSS style override that applies to the popup's container. Callbacks onOpen : (evt: PopupEvent ) => void Called when the popup is opened manually or programatically. onClose : (evt: PopupEvent ) => void Called when the popup is closed manually or programatically. Source popup.ts","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"Render options","depth":3},{"value":"anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined","depth":4},{"value":"className: string","depth":4},{"value":"closeButton: boolean","depth":4},{"value":"closeOnClick: boolean","depth":4},{"value":"closeOnMove: boolean","depth":4},{"value":"focusAfterOpen: boolean","depth":4},{"value":"offset: number | PointLike | Record\\","depth":4},{"value":"maxWidth: string","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"Callbacks","depth":3},{"value":"onOpen: (evt: PopupEvent) => void","depth":4},{"value":"onClose: (evt: PopupEvent) => void","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl React component that wraps ScaleControl . Properties maxWidth : string Default: 100 The maximum length of the scale control in pixels. position : 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' Default: 'bottom-left' Placement of the control relative to the map. Note that this prop is only used when the component first mounts. style : CSSProperties CSS style override that applies to the control's container. unit : 'imperial' | 'metric' | 'nautical' Default: 'metric' Unit of the distance. Source scale-control.ts","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth: string","depth":4},{"value":"position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'","depth":4},{"value":"style: CSSProperties","depth":4},{"value":"unit: 'imperial' | 'metric' | 'nautical'","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a map source using React. It may contain Layer components as children. Properties The props provided to this component should be conforming to the Mapbox source specification or CanvasSourceOptions . When props change shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity. id : string Unique identifier of the source. If not provided, a default id will be assigned. type : string Required. Type of the source. Source source.ts","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id: string","depth":4},{"value":"type: string","depth":4},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"Types The following types can be imported from react-map-gl when using TypeScript. Components MapboxMap A mapboxgl.Map instance. IControl A mapboxgl.IControl implementation. CustomLayerInterface A custom layer implementation . MapRef Instance ref of a Map component. See Map documentation for details. GeolocateControlRef Instance ref of a GeolocateControl component. See GeolocateControl documentation for details. Styling MapboxStyle An object conforming to the Mapbox Style Specification . Fog An object conforming to the Fog Style Specification . Light An object conforming to the Light Style Specification . TerrainSpecification An object conforming to the Terrain Style Specification . ProjectionSpecification An object with the following fields: name (string): projection name, one of Albers ( 'albers' ), Equal Earth ( 'equalEarth' ), Equirectangular/Plate Carrée/WGS84 ( 'equirectangular' ), Lambert ( 'lambertConformalConic' ), Mercator ( 'mercator' ), Natural Earth ( 'naturalEarth' ), and Winkel Tripel ( 'winkelTripel' ). center? ( number, number ): longitude and latitude of the projection center parallels? ( number, number ): the two standard parallels of a conic projection such as Albers and Lambert. BackgroundLayer A JSON object that defines a background layer according to the Mapbox Style Specification . CircleLayer A JSON object that defines a circle layer according to the Mapbox Style Specification . FillExtrusionLayer A JSON object that defines a fill-extrusion layer according to the Mapbox Style Specification . FillLayer A JSON object that defines a fill layer according to the Mapbox Style Specification . HeatmapLayer A JSON object that defines a heatmap layer according to the Mapbox Style Specification . HillshadeLayer A JSON object that defines a hillshade layer according to the Mapbox Style Specification . LineLayer A JSON object that defines a line layer according to the Mapbox Style Specification . RasterLayer A JSON object that defines a raster layer according to the Mapbox Style Specification . SymbolLayer A JSON object that defines a symbol layer according to the Mapbox Style Specification . SkyLayer A JSON object that defines a sky layer according to the Mapbox Style Specification . GeoJSONSourceRaw A JSON object that defines a geojson source according to the Mapbox Style Specification . VideoSourceRaw A JSON object that defines a video source according to the Mapbox Style Specification . ImageSourceRaw A JSON object that defines a image source according to the Mapbox Style Specification . VectorSourceRaw A JSON object that defines a vector source according to the Mapbox Style Specification . RasterSource A JSON object that defines a raster source according to the Mapbox Style Specification . RasterDemSource A JSON object that defines a raster-dem source according to the Mapbox Style Specification . CanvasSourceRaw A JSON object that defines a canvas source type. See CanvasSourceOptions . Configurations Anchor One of 'center' , 'left' , 'right' , 'top' , 'bottom' , 'top-left' , 'top-right' , 'bottom-left' and 'bottom-right' . Alignment One of 'map' , 'viewport' and 'auto' . ControlPosition One of 'top-right' , 'top-left' , 'bottom-right' and 'bottom-left' . DragPanOptions An object with the following fields: linearity? : number - The rate at which the speed reduces after the pan ends. easing? : (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function. deceleration? : number - Factor used to scale the drag velocity. Default 0 . maxSpeed? : number - The maximum value of the drag velocity. Default 1400 . See DragPanHandler#enable . FitBoundsOptions An object with the following fields: offset? : PointLike - The center of the given bounds relative to the map's center, measured in pixels. padding? : PaddingOptions - The amount of padding in pixels to add to the given bounds. maxZoom? : number - The maximum zoom level to allow when the map view transitions to the specified bounds. animate? : boolean - When set to false , no animation happens. linear? : boolean - If true , the map transitions using Map#easeTo . If false , the map transitions using Map#flyTo duration? : number - Duration in milliseconds maxDuration? : number - Max duration in milliseconds easing? : (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state. essential? : boolean - If true , then the animation is considered essential and will not be affected by prefers-reduced-motion . Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system. See Map#fitBounds ZoomRotateOptions An object with the following fields: around? : 'center' - If \"center\" is passed, map will zoom around center of map. See ScrollZoomHandler#enable , TouchZoomRotateHandler#enable PaddingOptions An object with the following fields: left : number - in pixels. top : number - in pixels. right : number - in pixels. bottom : number - in pixels. TransformRequestFunction A function that takes the following arguments: url : string resourceType : 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image'; And returns an object with the following fields: url : string - The URL to be requested. credentials? : 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests. headers? : { header: string : any } - The headers to be sent with the request. method? : 'GET' | 'POST' | 'PUT' collectResourceTiming? : boolean See RequestParameters . Data Types LngLat A mapboxgl.LngLat object. LngLatLike A LngLat object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties. LngLatBounds A mapboxgl.LngLatBounds object. LngLatBoundsLike A LngLatBounds object, an array of LngLatLike objects in sw, ne order, or an array of numbers in west, south, east, north order. Point A mapboxgl.Point object. PointLike A Point or an array of two numbers representing x and y screen coordinates in pixels. MapboxGeoJSONFeature A GeoJSON feature that also contains the following library-specific fields: layer : Layer source : string sourceLayer : string state : { key: string : any } ViewState An object with the following fields: longitude : number - The longitude of the map center. latitude : number - The latitude of the map center. zoom : number - The zoom level. pitch : number - The pitch (tilt) of the map, in degrees. bearing : number - The bearing (rotation) of the map, in degrees. Sources The following are implementations of source types that could be retrieved with Map#getSource . GeoJSONSource A source containing GeoJSON. See GeoJSONSource . VideoSource A source containing video. See VideoSource . ImageSource A source containing image. See ImageSource . CanvasSource A source containing the contents of an HTML canvas. See CanvasSource . VectorTileSource A source containing vector tiles in Mapbox Vector Tile format . See VectorTileSource . Events MapboxEvent An object with the following fields: type : string - Event type target : MapboxMap - The map instance that fired the event originalEvent? : Event MapLayerMouseEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent point : Point lngLat : LngLat preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] MapWheelEvent An object with the following fields: type : string target : MapboxMap originalEvent? : WheelEvent preventDefault : () => void defaultPrevented : boolean MapLayerTouchEvent An object with the following fields: type : string target : MapboxMap originalEvent? : TouchEvent point : Point lngLat : LngLat points : Point [] lngLats : LngLat [] preventDefault : () => void defaultPrevented : boolean features? : MapboxGeoJSONFeature [] ViewStateChangeEvent An object with the following fields: type : string - Event type target : MapboxMap viewState : ViewState - the next view state that the camera wants to change to based on user input or transition. MapBoxZoomEvent An object with the following fields: type : string target : MapboxMap originalEvent? : MouseEvent boxZoomBounds : LngLatBounds MapStyleDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'style' MapSourceDataEvent An object with the following fields: type : string target : MapboxMap dataType : 'source' isSourceLoaded : boolean source : string sourceId : string sourceDataType : 'metadata' | 'content' tile : any coord : Coordinate See MapDataEvent . ErrorEvent An object with the following fields: type : 'error' error : Error GeolocateEvent An object with the following fields: type : string target : MapboxMap target : mapboxgl.GeolocateControl GeolocateResultEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl coords : GeolocationCoordinates - the current location. timestamp : number - the time at which the location was retrieved. GeolocateErrorEvent An object with the following fields: type : string target : mapboxgl.GeolocateControl code : PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see GeolocationPositionError message : string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface. MarkerDragEvent An object with the following fields: type : string target : mapboxgl.Marker lngLat : LngLat - the new location of the marker PopupEvent An object with the following fields: type : string target : mapboxgl.Popup","headings":[{"value":"Types","depth":1},{"value":"Components","depth":2},{"value":"MapboxMap","depth":4},{"value":"IControl","depth":4},{"value":"CustomLayerInterface","depth":4},{"value":"MapRef","depth":4},{"value":"GeolocateControlRef","depth":4},{"value":"Styling","depth":2},{"value":"MapboxStyle","depth":4},{"value":"Fog","depth":4},{"value":"Light","depth":4},{"value":"TerrainSpecification","depth":4},{"value":"ProjectionSpecification","depth":4},{"value":"BackgroundLayer","depth":4},{"value":"CircleLayer","depth":4},{"value":"FillExtrusionLayer","depth":4},{"value":"FillLayer","depth":4},{"value":"HeatmapLayer","depth":4},{"value":"HillshadeLayer","depth":4},{"value":"LineLayer","depth":4},{"value":"RasterLayer","depth":4},{"value":"SymbolLayer","depth":4},{"value":"SkyLayer","depth":4},{"value":"GeoJSONSourceRaw","depth":4},{"value":"VideoSourceRaw","depth":4},{"value":"ImageSourceRaw","depth":4},{"value":"VectorSourceRaw","depth":4},{"value":"RasterSource","depth":4},{"value":"RasterDemSource","depth":4},{"value":"CanvasSourceRaw","depth":4},{"value":"Configurations","depth":2},{"value":"Anchor","depth":4},{"value":"Alignment","depth":4},{"value":"ControlPosition","depth":4},{"value":"DragPanOptions","depth":4},{"value":"FitBoundsOptions","depth":4},{"value":"ZoomRotateOptions","depth":4},{"value":"PaddingOptions","depth":4},{"value":"TransformRequestFunction","depth":4},{"value":"Data Types","depth":2},{"value":"LngLat","depth":4},{"value":"LngLatLike","depth":4},{"value":"LngLatBounds","depth":4},{"value":"LngLatBoundsLike","depth":4},{"value":"Point","depth":4},{"value":"PointLike","depth":4},{"value":"MapboxGeoJSONFeature","depth":4},{"value":"ViewState","depth":4},{"value":"Sources","depth":2},{"value":"GeoJSONSource","depth":4},{"value":"VideoSource","depth":4},{"value":"ImageSource","depth":4},{"value":"CanvasSource","depth":4},{"value":"VectorTileSource","depth":4},{"value":"Events","depth":2},{"value":"MapboxEvent","depth":4},{"value":"MapLayerMouseEvent","depth":4},{"value":"MapWheelEvent","depth":4},{"value":"MapLayerTouchEvent","depth":4},{"value":"ViewStateChangeEvent","depth":4},{"value":"MapBoxZoomEvent","depth":4},{"value":"MapStyleDataEvent","depth":4},{"value":"MapSourceDataEvent","depth":4},{"value":"ErrorEvent","depth":4},{"value":"GeolocateEvent","depth":4},{"value":"GeolocateResultEvent","depth":4},{"value":"GeolocateErrorEvent","depth":4},{"value":"MarkerDragEvent","depth":4},{"value":"PopupEvent","depth":4}],"slug":"docs/api-reference/types","title":"Types"},{"excerpt":"useControl The useControl hook is used to create React wrappers for custom map controls. See a full example here . Signature The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount. Parameters: onCreate : ({map: MapRef, mapLib: mapboxgl}) => IControl - called to create an instance of the control. onRemove : ({map: MapRef, mapLib: mapboxgl}) => void - called when the control is about to be removed. options : object position : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map Returns: IControl - the control instance from onCreate . Source use-control.ts","headings":[{"value":"useControl","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-control","title":"useControl"},{"excerpt":"useMap The useMap hook allows a custom component to reference the Map that contains it. When used with the MapProvider , this hook can also reference maps that are rendered outside of the current component's direct render tree. See a full example here . Signature useMap(): {current?: MapRef, [id: string]: MapRef} The hook returns an object that contains all mounted maps under the closest MapProvider . The keys are each map's id and the values are the MapRef . If the hook is used inside a decendent of a Map component, the returned object also contains a current field that references the containing map. Source use-map.tsx","headings":[{"value":"useMap","depth":1},{"value":"Signature","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/use-map","title":"useMap"},{"excerpt":"Contributing to react-map-gl Thanks for taking the time to contribute! PRs and bug reports are welcome, and we are actively looking for new maintainers. Setting Up Dev Environment The master branch is the active development branch. Building react-map-gl locally from the source requires node.js >=8 .\nWe use yarn to manage the dependencies. Test: Test in Node: Test in browser (can use Chrome dev tools for debugging): Pull Requests Any intended change to the code base must open a pull request and be approved. Generally speaking, all PRs are open against the master branch, unless the feature being affected no longer exists on master. PR Checklist Tests npm run test must be successful. New code should be covered by unit tests whenever possible. Documentation If public APIs are added/modified, update component documentation in docs/api-reference . Breaking changes and deprecations must be added to docs/upgrade-guide.md . Noteworthy new features should be added to docs/whats-new.md . Description on GitHub Link to relevant issue. Label with a milestone (latest release or vNext). If public APIs are added/modified, describe the intended behavior. If visual/interaction is affected, consider attaching a screenshot/GIF. Release react-map-gl follows the Semantic Versioning guidelines. Steps for publishing releases can be found here . Community Governance vis.gl is part of the Urban Computing Foundation . See the organization's Technical Charter . Technical Steering Committee react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC). Maintainers Xiaoji Chen Xintong Xia Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process. If you are interested in becoming a maintainer, read the governance guidelines . The vis.gl TSC meets monthly and publishes meeting notes via a mailing list .\nThis mailing list can also be utilized to reach out to the TSC. Code of Conduct Please be mindful of and adhere to the Linux Foundation's Code of Conduct when contributing to react-map-gl.","headings":[{"value":"Contributing to react-map-gl","depth":1},{"value":"Setting Up Dev Environment","depth":2},{"value":"Pull Requests","depth":2},{"value":"PR Checklist","depth":3},{"value":"Release","depth":2},{"value":"Community Governance","depth":2},{"value":"Technical Steering Committee","depth":3},{"value":"Maintainers","depth":3},{"value":"Code of Conduct","depth":2}],"slug":"docs/contributing","title":"Contributing to react-map-gl"},{"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6. If you are using react-map-gl controls ( Marker , Popup , NavigationControl etc.) with deck.gl's ContextProvider , do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox. Dependencies Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre. viewport-mercator-project (an alias of @math.gl/web-mercator ) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required. Module exports InteractiveMap and StaticMap are removed. Instead, import Map . setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled). MapController is removed. v7.0 has removed its own implementation of user input handling in favor of the native handlers . If you are using a custom implementation of MapController , check if the native handlers offer options to address your application's needs. MapContext and useMapControl are removed. Check out the new API useMap and useControl . The overlay components ( HTMLOverlay , CanvasOverlay and SVGOverlay ) are removed. Check out this example for implementing similar controls in your own application. LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example . Map documentation Renamed props for better consistency with the wrapped library: mapboxApiAccessToken is now mapboxAccessToken mapboxApiUrl is now baseApiUrl preventStyleDiffing (default false ) is replaced with styleDiffing (default true ) mapStyle should be explicitly specified. The default value has changed from \"mapbox://styles/mapbox/light-v9\" to an empty style. The following props are removed and apps should use style instead: width height visible onViewportChange , onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management . transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example . mapOptions is removed. Almost all of the options for the native Map class are exposed as props. onHover is removed. Use onMouseMove or onMouseEnter . The event argument is changed for all interaction callbacks. See documentation for details. getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover. touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop. Other components capture* props are removed. *label props are removed. Use Map 's locale prop. All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis. Upgrading to v5.3/v6.1 MapContext is now an official API. The experimental _MapContext export will be removed in a future release. react-virtualized-auto-sizer is no longer a dependency. Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options : Source and Layer components no longer expose imperative methods via ref as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call sourceRef.getSource() , it can be replaced with mapRef().getMap().getSource(sourceId) . If you used to call layerRef.getLayer() , it can be replaced with mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of InteractiveMap 's maxPitch prop is changed to 85 from 60 . mapbox-gl v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message m is not defined . Find solutions in this thread . Upgrading to v4 onChangeViewport is removed, use onViewportChange instead Immutable.js is no longer a dependency Export experimental.MapControls is removed, use MapController instead InteractiveMap 's mapControls prop is renamed to controller Removed support for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See Get Started for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The Node Version Requirement for building react-map-gl is now >=v6.4.0 . Using prebuilt react-map-gl does NOT has this limitation. This is introduced by Mapbox GL JS v0.38.0 MapGL Component Two Map Components - v3 now splits the Map component into two React components: StaticMap and InteractiveMap . InteractiveMap is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport callback now includes width and height . The viewport parameter passed to the onChangeViewport callback now includes width and height . Application code that composed the viewport with width and height may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples - Some less frequently used overlays ( DraggablePointsOverlay , ChoroplethOverlay , ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map - Overlays must now be rendered as children of the main react-map-gl component to automatically sync with the map viewport. fitBounds utility function The fitBounds utility has been moved to the math.gl library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old props will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new props as soon as possible. Old Prop New Prop onChangeViewport() onViewportChange() onHoverFeatures() onHover() onClickFeatures() onClick() perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using v1 of react-map-gl, make sure that you first upgrade: Your node version to v4 or higher Your react version to 15.4 or higher. Background: mapbox-gl 0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays - The map overlay components ( HTMLOverlay , CanvasOverlay , SVGOverlay etc) are now named exports. They previously had to be imported via their relative source paths: Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user). This information must be passed back to the react-map-gl component in the next render. To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude , latitude and zoom ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v7.0","depth":2},{"value":"Dependencies","depth":3},{"value":"Module exports","depth":3},{"value":"Map","depth":3},{"value":"Other components","depth":3},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v7.0 Release date: Feb 4, 2022 v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are: Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library Lightweight: the ESM build size is reduced from 219k to 57k Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs ( flyTo , fitBounds etc.) can now be called directly without breaking the React binding. Compatibility: first and third-party plugins! Directly use mapbox-gl-draw , mapbox-gl-geocoder , to name a few. TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported . Visit the upgrade guide if you are trying to upgrade from v5 and v6. react-map-gl v5.3/v6.1 Release date: Jan 27, 2020 Highlights TypeScript and Flow typings are now published with the library More controller customizations. Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated interaction options for details. A new eventRecognizerOptions prop is added for fine-tuning the interaction experience. New component: AttributionControl Promoted to official API: MapContext Resolved React error over attempted state update during render GeolocateControl added supports for showAccuracyCircle All controls now support inline styling with a style prop All components and examples have been rewritten as functional components react-map-gl v6.0 Release date: Dec 16, 2020 What's Changed The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are important changes to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do NOT upgrade to this version, and consider your options discussed in this document . See upgrade guide for a complete list of breaking changes. react-map-gl v5.2 Release date: Jan 6, 2020 Highlights New Components : ScaleControl NavigationControl : new label prop GeolocateControl : new label , onGeolocate , auto props New Export : WebMercatorViewport is re-exported from the viewport-mercator-project library for ease of use. It's recommended to import it from react-map-gl instead to avoid future dependency change. New Example : Clusters react-map-gl v5.1 Release date: Oct 30, 2019 Highlights New Components : Layer and Source have been added to provide better React parity with the Mapbox GL JS API. Viewport transition : transitionDuration can be set to 'auto' when using FlyToInterpolator . New Example : Add an example with drawing library react-map-gl-draw . react-map-gl v5.0 Release date: May 31, 2019 What's Changed The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's changelog and blog post . Alongside Mapbox GL JS's new milestone, we have relaxed the mapbox-gl dependency from locking minor release ( ~0.53.0 ) to major release ( ^1.0.0 ). This will allow developers to upgrade faster without waiting for a new release from react-map-gl. react-map-gl v4.1 Release date: Mar 14, 2019 Highlights New Components : FullscreenControl , GeolocateControl have been added to provide better React parity with the Mapbox GL JS API. New callback props InteractiveMap supports more callbacks: onNativeClick react-map-gl v4.0 Release date: Nov 5, 2018 Highlights Relative dimensions Both InteractiveMap and StaticMap now support CSS strings supplied to map width and height props. New onResize callback is fired when the map resizes. React 16 Upgrade to React 16.3 context and ref patterns Babel 7 Upgrade build system to Babel 7, better support for tree-shaking Style diffing Now use Mapbox's native style diffing. Immutable is no longer required. Draggable Markers Marker component now supports a new prop draggable , along with callbacks onDragStart , onDrag , and onDragEnd . 3d Popups Popup component now supports a new prop sortByDepth to enable proper occlusion when multiple popups are used in a tilted map. Interaction states onViewportChange is now called with richer descriptors of the user interaction, including isPanning , isZooming and isRotating . Interactive layers Dropped the requirement for the deprecated interactive property on the layer styles. Use the interactiveLayerIds prop to specify which layers are clickable. New callback props InteractiveMap supports more callbacks: onDblClick onMouseDown onMouseMove onMouseUp onTouchStart onTouchMove onTouchEnd onMouseEnter onMouseLeave onWheel onMouseOut See upgrade guide for breaking changes. react-map-gl v3.3 Release date: July, 2018 Highlights New viewState Property : Makes it possible to specify all map state properties ( longitude , latitude , zoom , bearing and pitch ) as a single property. New onViewStateChange callback : An alternative callback that matches the new viewState prop. react-map-gl v3.2 Realease date: January, 2018 Highlights Viewport transition : feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl. Better parity of Mapbox interaction : navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning. Support for Map Reuse (experimental) : A new property reuseMaps is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. mapbox-gl 0.42.2 New props of the InteractiveMap component: Map creation: transformRequest , reuseMaps Interaction: touchZoom , touchRotate Transition: transitionDuration , transitionInterpolator , transitionEasing , transitionInterruption , onTransitionStart , onTransitionInterrupt , onTransitionEnd react-map-gl v3.1 Release date: October 19, 2017 Highlights Event handling Support right mouse drag to rotate Support keyboard navigation Allow controls and overlays to block map interactions React 16 - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at >=15.4.x . mapbox-gl v0.40.1 No Token warning : react-map-gl now renders an HTML message if no mapbox token is supplied. react-map-gl v3.0 Release date: July 27th, 2017 Highlights Latest Mapbox GL JS : Bumps Mapbox GL JS to 0.38 . Multi-Touch Support : Full support for multi-touch gestures such as pinch-to-zoom and rotate. New Components : The MapGL component has been split into StaticMap and InteractiveMap (the default). Also, Popup , Marker , NavigationControl have been added to provide better React parity with the Mapbox GL JS API. Improved Overlay Components : Supplying viewport props ( width height zoom longitude and latitude ) are no longer required if you render SVGOverlay , CanvasOverlay or HTMLOverlay as a child of the map. Perspective mode is now supported in all overlays. New Props : maxPitch , minPitch , dragPan , doubleClickZoom , touchZoomRotate ,\n scrollZoom are now provided to allow granular control of map interactivity. Documentation : Significantly expanded and linked with our other geospatial frameworks. Examples : New stand-alone examples to get you started instantly with the new features. Event Handling : New event handling architecture that enables full customization of event handling (experimental). Components InteractiveMap (New, MapGL replacement) This is a wrapper on top of StaticMap . It takes all the props of StaticMap and additional ones such as onViewportChange , scrollZoom , dragRotate , etc. to control interactivity on the map. See Source Code for more information. StaticMap (New) This is the React wrapper around Mapbox GL JS and takes in viewport properties such as width , height , latitude , longitude . Style diffing and updating logic also live here. See Source Code for more information. Overlays Three overlays ( ScatterplotOverlay , DraggablePointsOverlay , ChoroplethOverlay ), have been moved out of the library and are now only provided as examples. Property Changes Property Names - some prop names have been modernized, the old ones will still work for now with a warning. Internal Properties such as isHovering , isDragging , startDragLngLat have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past. Utilities fitBounds : fitBounds has been moved to another repository and has been rewritten to provide a more logical interface. For more information, see the Upgrade Guide . react-map-gl v2.0 Date: Jan 17, 2017 Highlights Latest mapbox-gl : Bump mapbox-gl to v0.31.0 new maxZoom prop - Add maxZoom prop and defaults to 20 New onLoad prop - Add onLoad event handler new onClick prop - Add onClick prop handler (#140) react-map-gl v1.0 Perspective Mode - Now supports bearing and pitch properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided Support for ES6 imports - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'. react-map-gl v0.6 Initial public version","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v7.0","depth":2},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the Source and Layer components: For details about data sources and layer configuration, check out the Mapbox style specification . For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples. Custom Overlays You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling map.project() you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example here . Other vis.gl Libraries For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web. deck.gl - WebGL-powered framework for the visualization of large datasets. loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data. nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Custom Overlays","depth":2},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"Get Started Installation Using react-map-gl requires node >= v8 and react >= 16.3 . Example See full project setup in get-started examples . Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl . Or embed it in your app by using css-loader with Webpack or postcss with rollup: Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: Then override the mapLib prop of Map : To use the stylesheet from the fork: Or","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl itself is open source and free. It provides a React wrapper for mapbox-gl or derived projects.\nDepending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use: mapbox-gl@>=2.0.0 and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps. mapbox-gl@1.x or maplibre-gl - requires an access token only if you load the map styles and tiles from Mapbox's data service. See \"Display Maps Without A Mapbox Token\" section below for using non-Mapbox tiles. To get a Mapbox token, you will need to register on their website . The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded. There are several ways to provide a token to your app, as showcased in some of the example folders: Provide a mapboxAccessToken prop to the map component Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App) Provide it in the URL, e.g ?access_token=TOKEN We recommend using an environment variable to minimize leaking risks. See securing Mapbox token for examples. Display Maps Without A Mapbox Token It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are: Stay on mapbox-gl@1.x . react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox. Use a community fork of mapbox-gl, for example maplibre-gl . See using with a mapbox-gl fork for how to configure your project. To use your own map service, you will need a custom Mapbox GL style that points to your own vector tile source , and pass it to Map using the mapStyle prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to Map using the transformRequest prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management There are two ways to use a Map : Uncontrolled : The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl Map class. Controlled : The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic. Uncontrolled Map You may clone a full app configuration for this example here . Controlled Map You may clone a full app configuration for this example here . A real-world application likely uses more complicated state flows: Using map with a state store (Redux) example Using map with SSR (Next.js) example Custom Camera Constraints Map offers props that set basic constraints for the camera, e.g. maxBounds , minZoom , maxPitch . If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:","headings":[{"value":"State Management","depth":1},{"value":"Uncontrolled Map","depth":2},{"value":"Controlled Map","depth":2},{"value":"Custom Camera Constraints","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"},{"excerpt":"Tips and Tricks Securing Mapbox Token Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused. Never commit your token in clear text into GitHub or other source control. In your local dev environment, define the token in an environment variable e.g. MapboxAccessTokenDev=... in the command line, or use something like dotenv and put MapboxAccessTokenDev=... in a .env file. Add .env to .gitignore so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable. Create separate tokens for development (often times on http://localhost ), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com ). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own. Add the following to your bundler config: react-map-gl automatically picks up process.env.MapboxAccessToken or process.env.REACT_APP_MAPBOX_ACCESS_TOKEN if they are defined. Alternatively, you can use your own variable name (e.g. __SUPER_SECRET_TOKEN__ ) and pass it in manually with mapboxAccessToken={__SUPER_SECRET_TOKEN__} . Minimize Cost from Frequent Re-mounting In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout: Every time the user clicks the \"table\" tab, the map is unmounted. When they click the \"map\" tab, the map is mounted again. As of v2.0, mapbox-gl generates a billable event every time a Map object is initialized. It is obviously not idea to get billed for just collapsing and expanding part of the UI. In this case, it is recommended that you set the reuseMaps prop to true : This bypasses the initialization when a map is removed then added back. Performance with Many Markers If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup: This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible. One way to improve the performance is useMemo : This prevents React from rerendering the markers unless they have changed. If your application can do without complicated DOM objects and CSS styling, consider switching to a symbol layer . Layers are rendered in WebGL and are much more performant than markers:","headings":[{"value":"Tips and Tricks","depth":1},{"value":"Securing Mapbox Token","depth":2},{"value":"Minimize Cost from Frequent Re-mounting","depth":2},{"value":"Performance with Many Markers","depth":2}],"slug":"docs/get-started/tips-and-tricks","title":"Tips and Tricks"}]}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/search/index.html b/search/index.html index 13ee08b9..64aca58f 100644 --- a/search/index.html +++ b/search/index.html @@ -64,4 +64,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
Search
23 articles indexed.
\ No newline at end of file +
Search
23 articles indexed.
\ No newline at end of file diff --git a/webpack-runtime-59e0095cd93e7776a1d4.js b/webpack-runtime-90ed2a39a8a927f3d2d9.js similarity index 90% rename from webpack-runtime-59e0095cd93e7776a1d4.js rename to webpack-runtime-90ed2a39a8a927f3d2d9.js index 72d6d205..1b58f559 100644 --- a/webpack-runtime-59e0095cd93e7776a1d4.js +++ b/webpack-runtime-90ed2a39a8a927f3d2d9.js @@ -1 +1 @@ -!function(e){function t(t){for(var o,c,p=t[0],s=t[1],l=t[2],f=0,u=[];f