diff --git a/834b8338ea35f2c3d17eb82aef29032efb222d04-4316beb9f8432cab5047.js b/834b8338ea35f2c3d17eb82aef29032efb222d04-4316beb9f8432cab5047.js deleted file mode 100644 index da974be3..00000000 --- a/834b8338ea35f2c3d17eb82aef29032efb222d04-4316beb9f8432cab5047.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{"+M/S":function(t,e,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(t){var e=Object(a.a)((function(e){return new e.mapLib.ScaleControl(t)}),{position:t.position});return e.options.unit===t.unit&&e.options.maxWidth===t.maxWidth||(e.options.maxWidth=t.maxWidth,e.setUnit(t.unit)),Object(n.useEffect)((function(){Object(o.a)(e._container,t.style)}),[t.style]),null}i.defaultProps={unit:"metric",maxWidth:100},e.a=n.memo(i)},"+t2D":function(t,e,r){"use strict";function n(t,e){var r=Array.isArray(t)?t[0]:t?t.x:0,n=Array.isArray(t)?t[1]:t?t.y:0,o=Array.isArray(e)?e[0]:e?e.x:0,a=Array.isArray(e)?e[1]:e?e.y:0;return r===o&&n===a}function o(t,e){if(t===e)return!0;if(!t||!e)return!1;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var r=0;r prop: "+n);else t.setCoordinates(e.coordinates)}}(f,t,r.current):f=l(e,c,t),r.current=t,f&&o.Children.map(t.children,(function(t){return t&&Object(o.cloneElement)(t,{source:c})}))||null}},OSzm:function(t,e,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(t){var e=Object(a.a)((function(e){return new e.mapLib.NavigationControl(t)}),{position:t.position});return Object(n.useEffect)((function(){Object(o.a)(e._container,t.style)}),[t.style]),null}e.a=n.memo(i)},SA6Z:function(t,e,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function b(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(t.point,{layers:e.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(t.type="mouseleave",this._onPointerEvent(t)),this._hoveredFeatures=n,i&&!a&&(t.type="mouseenter",this._onPointerEvent(t)),t.type=o}else this._hoveredFeatures=null},e._fireEvent=function(t,e,r){var n=this._map,o=n.transform,a="string"==typeof e?e:e.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof e&&(e.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,t.call(n,e,r),n.transform=o,n):(t.call(n,e,r),n)},e._onBeforeRepaint=function(){var t=this,e=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&e.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){t._map.transform=n}},Object(i.a)(t,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),t}();function E(){var t=null;if("undefined"!=typeof location){var e=/access_token=([^&\/]*)/.exec(location.search);t=e&&e[1]}try{t=t||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{t=t||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return t}function C(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return L(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function L(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function I(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r prop: "+n);else t.setCoordinates(e.coordinates)}}(f,t,r.current):f=l(e,c,t),r.current=t,f&&o.Children.map(t.children,(function(t){return t&&Object(o.cloneElement)(t,{source:c})}))||null}},OSzm:function(t,e,r){"use strict";var n=r("q1tI"),o=r("zCpp"),a=r("nTsD");function i(t){var e=Object(a.a)((function(e){return new e.mapLib.NavigationControl(t)}),{position:t.position});return Object(n.useEffect)((function(){Object(o.a)(e._container,t.style)}),[t.style]),null}e.a=n.memo(i)},SA6Z:function(t,e,r){"use strict";var n=r("rePB"),o=r("q1tI"),a=r("i8i4"),i=r("zCpp"),u=r("tP6N"),c=r("+t2D");function s(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function b(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0;if("mousemove"===o)try{n=this._map.queryRenderedFeatures(t.point,{layers:e.interactiveLayerIds})}catch(u){n=[]}else n=[];var i=n.length>0;!i&&a&&(t.type="mouseleave",this._onPointerEvent(t)),this._hoveredFeatures=n,i&&!a&&(t.type="mouseenter",this._onPointerEvent(t)),t.type=o}else this._hoveredFeatures=null},e._fireEvent=function(t,e,r){var n=this._map,o=n.transform,a="string"==typeof e?e:e.type;return"move"===a&&this._updateViewState(this.props,!1),a in j&&("object"==typeof e&&(e.viewState=u(o)),this._map.isMoving())?(n.transform=this._renderTransform,t.call(n,e,r),n.transform=o,n):(t.call(n,e,r),n)},e._onBeforeRepaint=function(){var t=this,e=this._map;for(var r in this._internalUpdate=!0,this._deferredEvents)this._deferredEvents[r]&&e.fire(r);this._internalUpdate=!1;var n=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=function(){t._map.transform=n}},Object(i.a)(t,[{key:"map",get:function(){return this._map}},{key:"transform",get:function(){return this._renderTransform}}]),t}();function E(){var t=null;if("undefined"!=typeof location){var e=/access_token=([^&\/]*)/.exec(location.search);t=e&&e[1]}try{t=t||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ"}catch(r){}try{t=t||{}.REACT_APP_MAPBOX_ACCESS_TOKEN}catch(n){}return t}function C(t,e){var r;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return L(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return L(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function L(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(r=t[Symbol.iterator]()).next.bind(r)}function I(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);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 9d686e0a..446f7ebc 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 2b7b9e32..6fdfff99 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 0996c673..500502cc 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 44f01baa..2b02f197 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 f5f42607..6422a50d 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.
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 6d2d0792..06ac41e2 100644 --- a/docs/api-reference/marker/index.html +++ b/docs/api-reference/marker/index.html @@ -92,7 +92,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Marker

React component that wraps Marker.

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

\ No newline at end of file
+The default scale (1) corresponds to a height of 41px and a width of 27px.
This prop is not reactive (only used when the marker is mounted).
style: CSSProperties
CSS style override that applies to the marker's container.
Callbacks
onDragStart: (evt: MarkerDragEvent) => void
Called when dragging starts, if draggable is true.
onDrag: (evt: MarkerDragEvent) => void
Called while dragging, if draggable is true.
onDragEnd: (evt: MarkerDragEvent) => void
Called when dragging ends, if draggable is true.
Source
marker.ts
\ No newline at end of file diff --git a/docs/api-reference/navigation-control/index.html b/docs/api-reference/navigation-control/index.html index 656e16a7..dcab15b0 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 c1884445..6af51730 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() {
@@ -111,7 +111,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         anchor="bottom"
         onClose={() => setShowPopup(false)}>
         You are here
-      </Popup>}
+      </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 1510430c..d5a76ce6 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 a9a84ade..ca05fe87 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 527921a1..8583fbef 100644 --- a/docs/api-reference/types/index.html +++ b/docs/api-reference/types/index.html @@ -88,4 +88,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Types

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

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

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

GeolocateControlRef

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

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

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

BackgroundLayer

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

CircleLayer

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

FillExtrusionLayer

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

FillLayer

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

HeatmapLayer

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

HillshadeLayer

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

LineLayer

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

RasterLayer

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

SymbolLayer

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

SkyLayer

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

GeoJSONSourceRaw

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

VideoSourceRaw

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

ImageSourceRaw

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

VectorSourceRaw

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

RasterSource

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

RasterDemSource

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

CanvasSourceRaw

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

Configurations

Anchor

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

Alignment

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

ControlPosition

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

DragPanOptions

An object with the following fields:

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

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

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

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

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

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

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

TransformRequestFunction

A function that takes the following arguments:

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

And returns an object with the following fields:

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

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

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

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

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

Point

A mapboxgl.Point object.

PointLike

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

MapboxGeoJSONFeature

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

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

ViewState

An object with the following fields:

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

Sources

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

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

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

VectorTileSource

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

Events

MapboxEvent

An object with the following fields:

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

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

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

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

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

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

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

MapSourceDataEvent

An object with the following fields:

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

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

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

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

\ No newline at end of file +

Types

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

Components

MapboxMap

A mapboxgl.Map instance.

IControl

A mapboxgl.IControl implementation.

CustomLayerInterface

A custom layer implementation.

MapRef

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

GeolocateControlRef

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

Styling

MapboxStyle

An object conforming to the Mapbox Style Specification.

Fog

An object conforming to the Fog Style Specification.

Light

An object conforming to the Light Style Specification.

TerrainSpecification

An object conforming to the Terrain Style Specification.

ProjectionSpecification

An object with the following fields:

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

BackgroundLayer

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

CircleLayer

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

FillExtrusionLayer

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

FillLayer

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

HeatmapLayer

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

HillshadeLayer

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

LineLayer

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

RasterLayer

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

SymbolLayer

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

SkyLayer

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

GeoJSONSourceRaw

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

VideoSourceRaw

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

ImageSourceRaw

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

VectorSourceRaw

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

RasterSource

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

RasterDemSource

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

CanvasSourceRaw

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

Configurations

Anchor

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

Alignment

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

ControlPosition

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

DragPanOptions

An object with the following fields:

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

See DragPanHandler#enable.

FitBoundsOptions

An object with the following fields:

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

See Map#fitBounds

ZoomRotateOptions

An object with the following fields:

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

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions

An object with the following fields:

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

TransformRequestFunction

A function that takes the following arguments:

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

And returns an object with the following fields:

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

See RequestParameters.

Data Types

LngLat

A mapboxgl.LngLat object.

LngLatLike

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

LngLatBounds

A mapboxgl.LngLatBounds object.

LngLatBoundsLike

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

Point

A mapboxgl.Point object.

PointLike

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

MapboxGeoJSONFeature

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

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

ViewState

An object with the following fields:

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

Sources

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

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource.

VideoSource

A source containing video. See VideoSource.

ImageSource

A source containing image. See ImageSource.

CanvasSource

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

VectorTileSource

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

Events

MapboxEvent

An object with the following fields:

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

MapLayerMouseEvent

An object with the following fields:

MapWheelEvent

An object with the following fields:

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

MapLayerTouchEvent

An object with the following fields:

ViewStateChangeEvent

An object with the following fields:

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

MapBoxZoomEvent

An object with the following fields:

MapStyleDataEvent

An object with the following fields:

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

MapSourceDataEvent

An object with the following fields:

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

See MapDataEvent.

ErrorEvent

An object with the following fields:

  • type: 'error'
  • error: Error

GeolocateEvent

An object with the following fields:

GeolocateResultEvent

An object with the following fields:

GeolocateErrorEvent

An object with the following fields:

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

MarkerDragEvent

An object with the following fields:

PopupEvent

An object with the following fields:

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

useControl

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

import MapboxDraw from '@mapbox/mapbox-gl-draw';
+  
useControl
The useControl hook is used to create React wrappers for custom map controls.
import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import Map, {useControl} from 'react-map-gl';
 
 function DrawControl(props: DrawControlProps) {
@@ -132,4 +132,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   options?: {
     position?: ControlPosition;
   }
-): IControl
The hook creates an IControl instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
  • onCreate: ({map: MapboxMap, mapLib: mapboxgl}) => IControl - called to create an instance of the control.
  • onRemove: ({map: MapboxMap, mapLib: mapboxgl}) => void - called when the control is about to be removed.
  • options: object
    • position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map
Returns:
IControl - the control instance from onCreate.
Source
use-control.ts

\ No newline at end of file
+): IControl

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

Parameters:

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

Returns:

IControl - the control instance from onCreate.

Source

use-control.ts

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

useMap

The useMap hook, used with the MapProvider, helps an app to perform map operations outside of the component that directly renders a Map.

import {MapProvider, Map, useMap} from 'react-map-gl';
+  
useMap
The useMap hook, used with the MapProvider, helps an app to perform map operations outside of the component that directly renders a Map.
import {MapProvider, Map, useMap} from 'react-map-gl';
 
 function Root() {
   return (
@@ -105,4 +105,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   };
 
   return <button onClick={onClick}>Go</button>;
-}
See a full example here.
Signature
useMap(): {[id: string]: MapRef}
The hook returns an object that contains all mounted maps under the closest MapProvider. The keys are each map's id and the values are the MapRef.
Source
use-map.tsx

\ No newline at end of file
+}

See a full example here.

Signature

useMap(): {[id: string]: MapRef}

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

Source

use-map.tsx

\ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index d35080c2..036650bf 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 d55657fa..e853c2c6 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.
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.

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 aa46d665..6739edbc 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 5fb6ff2a..a3727a00 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 mapboxApiAccessToken prop to the map component
  • Set the MapboxAccessToken environment variable (or set REACT_APP_MAPBOX_ACCESS_TOKEN if you are using Create React App)
  • Provide it in the URL, e.g ?access_token=TOKEN

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

Display Maps Without A Mapbox Token

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

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

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

Open source tile schemas include:

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 ea459b76..ba26b7bf 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/index.html b/docs/index.html index 5647c740..5442ab91 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 c383ce7b..5d58e00d 100644 --- a/docs/upgrade-guide/index.html +++ b/docs/upgrade-guide/index.html @@ -100,7 +100,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -

Upgrade Guide

Upgrading to v7.0

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

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

Dependencies

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

Module exports

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

Map

documentation

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

Other components

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

Upgrading to v5.3/v6.1

  • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
  • react-virtualized-auto-sizer is no longer a dependency.
  • Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
const CONTROLLER_OPTS = {
+  
Upgrade Guide
Upgrading to v7.0
v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.
If you are using react-map-gl controls (Marker, Popup, NavigationControl etc.) with deck.gl's ContextProvider, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.
Dependencies
  • Add mapbox-gl (or a compatible fork) to your package.json. react-map-gl no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.
  • viewport-mercator-project (an alias of @math.gl/web-mercator) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.
Module exports
  • InteractiveMap and StaticMap are removed. Instead, import Map.
  • setRTLTextPlugin is removed. Use the Map component's RTLTextPlugin prop (default enabled).
  • MapController is removed.  v7.0 has removed its own implementation of user input handling in favor of the native handlers. If you are using a custom implementation of MapController, check if the native handlers offer options to address your application's needs.
  • MapContext and useMapControl are removed. Check out the new API useMap and useControl.
  • The overlay components (HTMLOverlay, CanvasOverlay and SVGOveray) are removed. Check out this example for implementing similar controls in your own application.
  • LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo() instead, see this example.
Map
documentation
  • Renamed props for better consistency with the wrapped library:
    • mapboxApiAccessToken is now mapboxAccessToken
    • mapboxApiUrl is now baseApiUrl
    • preventStyleDiffing (default false) is replaced with styleDiffing (default true)
  • mapStyle should be explicitly specified. The default value has changed fro "mapbox://styles/mapbox/light-v9" to an empty style.
  • The following props are removed and apps should use style instead:
    • width
    • height
    • visible
  • onViewportChange, onViewStateChange and onInteractionStateChange are removed. You can either use Map as an uncontrolled component with the new initialViewState prop, or if you need to manage the camera state externally (e.g. in Redux), use the onMove callback instead. See examples in state management.
  • transition* props are removed. Use map.easeTo() and map.flyTo() instead, see this example.
  • mapOptions is removed. Almost all of the options for the native Map class are exposed as props. 
  • onHover is removed. Use onMouseMove or onMouseEnter.
  • The event argument is changed for all interaction callbacks. See documentation for details.
  • getCursor is removed as part of the effort to get Map behave the same as the native component. To set the cursor, use the cursor prop. Follow this example to change cursor on hover.
  • touchAction and eventRecognizerOptions are removed. Check out the cooperativeGestures prop.
Other components
  • capture* props are removed.
  • *label props are removed. Use Map's locale prop.
  • All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.
Upgrading to v5.3/v6.1
  • MapContext is now an official API. The experimental _MapContext export will be removed in a future release.
  • react-virtualized-auto-sizer is no longer a dependency.
  • Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the interaction options:
const CONTROLLER_OPTS = {
   dragPan: {inertia: 0},
   dragRotate: {inertia: 0},
   touchZoom: {inertia: 0}
@@ -121,4 +121,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 
 // v0.6
 import MapGL from 'react-map-gl';
-import SVGOverlay from 'react-map-gl/src/api-reference/svg-overlay';.
  • Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user).
    • This information must be passed back to the react-map-gl component in the next render.
    • To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude, latitude and zoom).

\ No newline at end of file
+import SVGOverlay from 'react-map-gl/src/api-reference/svg-overlay';.
  • Map State - The map state reported by onViewportChanged will now contain additional state fields (tracking not only pitch and bearing needed for perspective mode, but also transient information about how the projection is being changed by the user).
    • This information must be passed back to the react-map-gl component in the next render.
    • To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like longitude, latitude and zoom).
\ No newline at end of file diff --git a/docs/whats-new/index.html b/docs/whats-new/index.html index d8c5c724..4a2e0733 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 0abb5c6c..a27c52e1 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 70b4a5b4..d5c564ef 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 335bf104..c7b984f5 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 f138eaf0..53b1b555 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 48cafcb6..39ee20d5 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 eb68977b..6be9eddb 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 3d1ccb80..327ff67a 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 862d3bc8..17fbaaa1 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 4cb476cd..d9c0013a 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 9ee95c81..0b98a882 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 6beec0c0..d21e2c58 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 c849719c..6ec5c020 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 c1814f48..296464be 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 6dbe848f..b9c66755 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 ca7df9b7..d1dac124 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 4925a8ee..76b13252 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 4e652479..a6aa09ce 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 840b3c53..4e87c3d3 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 d7238b4a..8d078516 100644 --- a/page-data/app-data.json +++ b/page-data/app-data.json @@ -1 +1 @@ -{"webpackCompilationHash":"96aaeb684d6c1e953510"} +{"webpackCompilationHash":"2ab0e5216235f97d7bbe"} diff --git a/page-data/docs/api-reference/popup/page-data.json b/page-data/docs/api-reference/popup/page-data.json index e5bdc8a0..1ad289d6 100644 --- a/page-data/docs/api-reference/popup/page-data.json +++ b/page-data/docs/api-reference/popup/page-data.json @@ -1 +1 @@ -{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/popup","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"popup\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#popup\",\n \"aria-label\": \"popup permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Popup\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Properties\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"Popup\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"showPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setShowPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"showPopup \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Popup longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \"\\n onClose\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setShowPopup\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n You are here\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined\"), mdx(\"p\", null, \"A string indicating the part of the popup that should be positioned closest to the coordinate, set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclassnamecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclassnamecode-string\",\n \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"className\"), \": string\"), mdx(\"p\", null, \"Space-separated CSS class names to add to popup container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclosebuttoncode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclosebuttoncode-boolean\",\n \"aria-label\": \"code classlanguage textclosebuttoncode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeButton\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", a close button will appear in the top right corner of the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonclickcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonclickcode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonclickcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnClick\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will close when the map is clicked.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonmovecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonmovecode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonmovecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnMove\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will closed when the map moves.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfocusafteropencode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfocusafteropencode-boolean\",\n \"aria-label\": \"code classlanguage textfocusafteropencode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"focusAfterOpen\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will try to focus the first focusable element inside the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode number pointlike recordstring pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": number | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\"), \" | Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A pixel offset applied to the popup's location specified as:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"a single number specifying a distance from the popup's location\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"a PointLike specifying a constant offset\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"an object of Points specifing an offset for each anchor position.\")), mdx(\"p\", null, \"Negative offsets indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"240px\")), mdx(\"p\", null, \"A string that sets the CSS property of the popup's maximum width.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the popup's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonopencode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonopencode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonopencode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOpen\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is opened manually or programatically.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonclosecode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClose\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is closed manually or programatically.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/popup.ts\"\n }, \"popup.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left…","frontmatter":{"title":"Popup"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management"},"title":"Popup","slug":"docs/api-reference/popup","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file +{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/popup","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"popup\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#popup\",\n \"aria-label\": \"popup permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Popup\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Properties\"), mdx(\"p\", null, \"React component that wraps \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup\"\n }, \"Popup\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"showPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setShowPopup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"true\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Map\\n initialViewState\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3.5\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n mapStyle\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"mapbox://styles/mapbox/streets-v9\\\"\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"showPopup \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"&&\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Popup longitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"100\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n anchor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"bottom\\\"\"), \"\\n onClose\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setShowPopup\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token boolean\"\n }, \"false\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n You are here\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Popup\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"Map\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Render options\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textanchorcode-center--left--right--top--bottom--top-left--top-right--bottom-left--bottom-right--undefined\",\n \"aria-label\": \"code classlanguage textanchorcode center left right top bottom top left top right bottom left bottom right undefined permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"anchor\"), \": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined\"), mdx(\"p\", null, \"A string indicating the part of the popup that should be positioned closest to the coordinate, set via \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"longitude\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"latitude\"), \".\\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"'bottom'\"), \".\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclassnamecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclassnamecode-string\",\n \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"className\"), \": string\"), mdx(\"p\", null, \"Space-separated CSS class names to add to popup container.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textclosebuttoncode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textclosebuttoncode-boolean\",\n \"aria-label\": \"code classlanguage textclosebuttoncode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeButton\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", a close button will appear in the top right corner of the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonclickcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonclickcode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonclickcode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnClick\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will close when the map is clicked.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textcloseonmovecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textcloseonmovecode-boolean\",\n \"aria-label\": \"code classlanguage textcloseonmovecode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"closeOnMove\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"false\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will closed when the map moves.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textfocusafteropencode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textfocusafteropencode-boolean\",\n \"aria-label\": \"code classlanguage textfocusafteropencode boolean permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"focusAfterOpen\"), \": boolean\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\")), mdx(\"p\", null, \"If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"true\"), \", the popup will try to focus the first focusable element inside the popup.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textoffsetcode-number--pointlike--recordstring-pointlike\",\n \"aria-label\": \"code classlanguage textoffsetcode number pointlike recordstring pointlike permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"offset\"), \": number | \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#pointlike\"\n }, \"PointLike\"), \" | Record\\\\\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"null\")), mdx(\"p\", null, \"A pixel offset applied to the popup's location specified as:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"a single number specifying a distance from the popup's location\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"a PointLike specifying a constant offset\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"an object of Points specifing an offset for each anchor position.\")), mdx(\"p\", null, \"Negative offsets indicate left and up.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textmaxwidthcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textmaxwidthcode-string\",\n \"aria-label\": \"code classlanguage textmaxwidthcode string permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"maxWidth\"), \": string\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"240px\")), mdx(\"p\", null, \"A string that sets the CSS property of the popup's maximum width.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textstylecode-cssproperties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textstylecode-cssproperties\",\n \"aria-label\": \"code classlanguage textstylecode cssproperties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"style\"), \": CSSProperties\"), mdx(\"p\", null, \"CSS style override that applies to the popup's container.\"), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Callbacks\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonopencode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonopencode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonopencode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onOpen\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is opened manually or programatically.\"), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonclosecode-evt-popupevent--void\",\n \"aria-label\": \"code classlanguage textonclosecode evt popupevent void permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onClose\"), \": (evt: \", mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"/react-map-gl/docs/api-reference/types.md#popupevent\"\n }, \"PopupEvent\"), \") => void\"), mdx(\"p\", null, \"Called when the popup is closed manually or programatically.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/popup.ts\"\n }, \"popup.ts\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Popup Properties React component that wraps Popup . Render options anchor : 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left…","frontmatter":{"title":"Popup"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../use-map":"/docs/api-reference/use-map","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management"},"title":"Popup","slug":"docs/api-reference/popup","toc":"docs"}},"staticQueryHashes":["484347790"]} \ No newline at end of file diff --git a/search/index.html b/search/index.html index 204cb860..1e47c86d 100644 --- a/search/index.html +++ b/search/index.html @@ -64,4 +64,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor } } }) -
Search
22 articles indexed.
\ No newline at end of file +
Search
22 articles indexed.
\ No newline at end of file diff --git a/webpack-runtime-8ed972e2d4a72317d3e3.js b/webpack-runtime-ad40530292517ad7aca7.js similarity index 96% rename from webpack-runtime-8ed972e2d4a72317d3e3.js rename to webpack-runtime-ad40530292517ad7aca7.js index b0d021e5..439e4a1a 100644 --- a/webpack-runtime-8ed972e2d4a72317d3e3.js +++ b/webpack-runtime-ad40530292517ad7aca7.js @@ -1 +1 @@ -!function(e){function t(t){for(var o,c,p=t[0],s=t[1],l=t[2],u=0,f=[];u