diff --git a/docs/api-reference/map.md b/docs/api-reference/map.md index 9552cb8f6..7f1b5c20a 100644 --- a/docs/api-reference/map.md +++ b/docs/api-reference/map.md @@ -60,17 +60,17 @@ Aside from the props listed below, the `Map` component supports all parameters o ### Layout options -#### `id`: string {#id} +#### `id`: string {#id} Map container id. -#### `style`: CSSProperties {#style} +#### `style`: CSSProperties {#style} Default: `{position: 'relative', width: '100%', height: '100%'}` Map container CSS. -#### `cursor`: string {#cursor} +#### `cursor`: string {#cursor} Default: `'auto'` @@ -78,40 +78,40 @@ The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/curso ### Styling options -#### `fog`: [Fog](./types.md#fog) {#fog} +#### `fog`: [Fog](./types.md#fog) {#fog} The fog property of the style. Must conform to the [Fog Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/). If `undefined` is provided, removes the fog from the map. -#### `light`: [Light](./types.md#light) {#light} +#### `light`: [Light](./types.md#light) {#light} Light properties of the style. Must conform to the [Light Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#light). -#### `mapStyle`: [MapboxStyle](./types.md#mapboxstyle) | string | Immutable {#mapstyle} +#### `mapStyle`: [MapStyle](./types.md#mapstyle) | string | Immutable {#mapstyle} Default: (empty style) The map's Mapbox style. This must be an a JSON object conforming to the schema described in the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON. -#### `projection`: string | [Projection](./types.md#projection) {#projection} +#### `projection`: string | [Projection](./types.md#projection) {#projection} Default: `'mercator'` The projection the map should be rendered in. Available projections are Albers (`'albers'`), Equal Earth (`'equalEarth'`), Equirectangular/Plate Carrée/WGS84 (`'equirectangular'`), Lambert (`'lambertConformalConic'`), Mercator (`'mercator'`), Natural Earth (`'naturalEarth'`), and Winkel Tripel (`'winkelTripel'`). Conic projections such as Albers and Lambert have configurable `center` and `parallels` properties that allow developers to define the region in which the projection has minimal distortion; see [example](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection). -#### `renderWorldCopies`: boolean {#renderworldcopies} +#### `renderWorldCopies`: boolean {#renderworldcopies} Default: `true` If `true`, multiple copies of the world will be rendered, when zoomed out. -#### `styleDiffing`: boolean {#stylediffing} +#### `styleDiffing`: boolean {#stylediffing} Default: `true` Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update. -#### `terrain`: [Terrain](./types.md#terrain) {#terrain} +#### `terrain`: [Terrain](./types.md#terrain) {#terrain} Terrain property of the style. Must conform to the [Terrain Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/). If `undefined` is provided, removes terrain from the map. @@ -119,7 +119,7 @@ If `undefined` is provided, removes terrain from the map. ### Camera options -#### `initialViewState`: object {#initialviewstate} +#### `initialViewState`: object {#initialviewstate} The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` etc. in props are ignored when constructing the map. Only specify `initialViewState` if `Map` is being used as an **uncontrolled component**. See [state management](../get-started/state-management.md) for examples. @@ -135,57 +135,57 @@ The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` - `pitch`: number - The initial pitch (tilt) of the map. Default `0`. - `bearing`: number - The initial bearing (rotation) of the map. Default `0`. -#### `longitude`: number {#longitude} +#### `longitude`: number {#longitude} The longitude of the map center. -#### `latitude`: number {#latitude} +#### `latitude`: number {#latitude} The latitude of the map center. -#### `zoom`: number {#zoom} +#### `zoom`: number {#zoom} The [zoom level](https://docs.mapbox.com/help/glossary/camera/#zoom-level) of the map. -#### `pitch`: number {#pitch} +#### `pitch`: number {#pitch} The initial [pitch](https://docs.mapbox.com/help/glossary/camera/#pitch) (tilt) of the map, measured in degrees away from the plane of the screen (0-85). -#### `bearing`: number {#bearing} +#### `bearing`: number {#bearing} The initial [bearing](https://docs.mapbox.com/help/glossary/camera/#bearing) (rotation) of the map, measured in degrees counter-clockwise from north. -#### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding} +#### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding} Default: `null` The padding in pixels around the viewport. -#### `minZoom`: number {#minzoom} +#### `minZoom`: number {#minzoom} Default: `0` The minimum zoom level of the map (0-24). -#### `maxZoom`: number {#maxzoom} +#### `maxZoom`: number {#maxzoom} Default: `22` The maximum zoom level of the map (0-24). -#### `minPitch`: number {#minpitch} +#### `minPitch`: number {#minpitch} Default: `0` The minimum pitch of the map (0-85). -#### `maxPitch`: number {#maxpitch} +#### `maxPitch`: number {#maxpitch} Default: `60` The maximum pitch of the map (0-85). -#### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds} +#### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds} Default: `null` @@ -193,56 +193,56 @@ If set, the map is constrained to the given bounds. ### Input handler options -#### `boxZoom`: boolean {#boxzoom} +#### `boxZoom`: boolean {#boxzoom} Default: `true` If `true`, the "box zoom" interaction is enabled. See `BoxZoomHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.BoxZoomHandler/)) -#### `doubleClickZoom`: boolean {#doubleclickzoom} +#### `doubleClickZoom`: boolean {#doubleclickzoom} Default: `true` If `true`, the "double click to zoom" interaction is enabled. See `DoubleClickZoomHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.DoubleClickZoomHandler/)). -#### `dragRotate`: boolean {#dragrotate} +#### `dragRotate`: boolean {#dragrotate} Default: `true` If `true`, the "drag to rotate" interaction is enabled. See `DragRotateHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.DragRotateHandler/)). -#### `dragPan`: boolean | Object {#dragpan} +#### `dragPan`: boolean | Object {#dragpan} Default: `true` If `true`, the "drag to pan" interaction is enabled. Optionally accpt an object value that is the options to `DragPanHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.DragPanHandler/#enable)). -#### `keyboard`: boolean {#keyboard} +#### `keyboard`: boolean {#keyboard} Default: `true` If `true`, keyboard shortcuts are enabled. See `KeyboardHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.KeyboardHandler/)). -#### `scrollZoom`: boolean | Object {#scrollzoom} +#### `scrollZoom`: boolean | Object {#scrollzoom} Default: `true` If `true`, the "scroll to zoom" interaction is enabled. Optionally accpt an object value that is the options to `ScrollZoomHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.ScrollZoomHandler/#enable)) -#### `touchPitch`: boolean | Object {#touchpitch} +#### `touchPitch`: boolean | Object {#touchpitch} Default: `true` If `true`, the "drag to pitch" interaction is enabled. Optionally accpt an object value that is the options to `TouchPitchHandler.enable`([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.TwoFingersTouchPitchHandler/#enable)). -#### `touchZoomRotate`: boolean | Object {#touchzoomrotate} +#### `touchZoomRotate`: boolean | Object {#touchzoomrotate} Default: `true` If `true`, the "pinch to rotate and zoom" interaction is enabled. Optionally accpt an object value that is the options to `TouchZoomRotateHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.TwoFingersTouchZoomHandler/#enable)). -#### `interactiveLayerIds`: string[] {#interactivelayerids} +#### `interactiveLayerIds`: string[] {#interactivelayerids} Default: `null` @@ -256,19 +256,19 @@ See the [Callbacks](#callbacks) section for affected events. ### Callbacks -#### `onResize`: (event: [MapEvent](./types.md#mapevent)) => void {#onresize} +#### `onResize`: (event: [MapEvent](./types.md#mapevent)) => void {#onresize} Called when the map has been resized. -#### `onLoad`: (event: [MapEvent](./types.md#mapevent)) => void {#onload} +#### `onLoad`: (event: [MapEvent](./types.md#mapevent)) => void {#onload} Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. -#### `onRender`: (event: [MapEvent](./types.md#mapevent))) => void {#onrender} +#### `onRender`: (event: [MapEvent](./types.md#mapevent))) => void {#onrender} Called whenever the map is drawn to the screen. -#### `onIdle`: (event: [MapEvent](./types.md#mapevent))) => void {#onidle} +#### `onIdle`: (event: [MapEvent](./types.md#mapevent))) => void {#onidle} Called after the last frame rendered before the map enters an "idle" state: @@ -276,186 +276,186 @@ Called after the last frame rendered before the map enters an "idle" state: - All currently requested tiles have loaded - All fade/transition animations have completed -#### `onRemove`: (event: [MapEvent](./types.md#mapevent))) => void {#onremove} +#### `onRemove`: (event: [MapEvent](./types.md#mapevent))) => void {#onremove} Called when the map has been removed. -#### `onError`: (event: [ErrorEvent](./types.md#errorevent)) => void {#onerror} +#### `onError`: (event: [ErrorEvent](./types.md#errorevent)) => void {#onerror} Default: `evt => console.error(evt.error)` Called when an error occurs. -#### `onMouseDown`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousedown} +#### `onMouseDown`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousedown} Called when a pointing device (usually a mouse) is pressed within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onMouseUp`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseup} +#### `onMouseUp`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseup} Called when a pointing device (usually a mouse) is released within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onMouseOver`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseover} +#### `onMouseOver`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseover} Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. -#### `onMouseEnter`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseenter} +#### `onMouseEnter`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseenter} Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by `interactiveLayerIds` from outside that layer or outside the map canvas. -#### `onMouseMove`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousemove} +#### `onMouseMove`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousemove} Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onMouseLeave`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseleave} +#### `onMouseLeave`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseleave} Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by `interactiveLayerIds` or moves from the layer to outside the map canvas. -#### `onMouseOut`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseout} +#### `onMouseOut`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseout} Called when a point device (usually a mouse) leaves the map's canvas. -#### `onClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onclick} +#### `onClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onclick} Called when a pointing device (usually a mouse) is pressed and released at the same point on the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onDblClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#ondblclick} +#### `onDblClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#ondblclick} Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onContextMenu`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#oncontextmenu} +#### `onContextMenu`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#oncontextmenu} Called when the right button of the mouse is clicked or the context menu key is pressed within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onWheel`: (event: [MapWheelEvent](./types.md#mapwheelevent)) => void {#onwheel} +#### `onWheel`: (event: [MapWheelEvent](./types.md#mapwheelevent)) => void {#onwheel} Called when a wheel event occurs within the map. -#### `onTouchStart`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchstart} +#### `onTouchStart`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchstart} Called when a `touchstart` event occurs within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onTouchEnd`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchend} +#### `onTouchEnd`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchend} Called when a `touchend` event occurs within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onTouchMove`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchmove} +#### `onTouchMove`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchmove} Called when a `touchmove` event occurs within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onTouchCancel`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchcancel} +#### `onTouchCancel`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchcancel} Called when a `touchcancel` event occurs within the map. If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer. -#### `onMoveStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmovestart} +#### `onMoveStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmovestart} Called just before the map begins a transition from one view to another. -#### `onMove`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmove} +#### `onMove`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmove} Called repeatedly during an animated transition from one view to another. When `Map` is used as a controlled component, `event.viewState` reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the view state props (`longitude`, `latitude`, `zoom` etc.). See [state management](../get-started/state-management.md) for examples. -#### `onMoveEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmoveend} +#### `onMoveEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmoveend} Called just after the map completes a transition from one view to another. -#### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart} +#### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart} Called when a "drag to pan" interaction starts. -#### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag} +#### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag} Called repeatedly during a "drag to pan" interaction. -#### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend} +#### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend} Called when a "drag to pan" interaction ends. -#### `onZoomStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomstart} +#### `onZoomStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomstart} Called just before the map begins a transition from one zoom level to another. -#### `onZoom`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoom} +#### `onZoom`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoom} Called repeatedly during an animated transition from one zoom level to another. When `Map` is used as a controlled component, `event.viewState.zoom` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `zoom` prop. -#### `onZoomEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomend} +#### `onZoomEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomend} Called just after the map completes a transition from one zoom level to another. -#### `onRotateStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotatestart} +#### `onRotateStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotatestart} Called just before the map begins a transition from one bearing (rotation) to another. -#### `onRotate`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotate} +#### `onRotate`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotate} Called repeatedly during an animated transition from one bearing (rotation) to another. When `Map` is used as a controlled component, `event.viewState.bearing` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `bearing` prop. -#### `onRotateEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotateend} +#### `onRotateEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotateend} Called just after the map completes a transition from one bearing (rotation) to another. -#### `onPitchStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchstart} +#### `onPitchStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchstart} Called just before the map begins a transition from one pitch (tilt) to another. -#### `onPitch`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitch} +#### `onPitch`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitch} Called repeatedly during an animated transition from one pitch (tilt) to another. When `Map` is used as a controlled component, `event.viewState.pitch` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `pitch` prop. -#### `onPitchEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchend} +#### `onPitchEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchend} Called just after the map completes a transition from one pitch (tilt) to another. -#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomstart} +#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomstart} Called when a "box zoom" interaction starts. -#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend} +#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend} Called when a "box zoom" interaction ends. -#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomcancel} +#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomcancel} Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. -#### `onData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent) | [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#ondata} +#### `onData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent) | [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#ondata} Called when any map data loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information. -#### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata} +#### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata} Called when the map's style loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information. -#### `onSourceData`: (event: [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#onsourcedata} +#### `onSourceData`: (event: [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#onsourcedata} Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information. @@ -465,7 +465,7 @@ The following props, along with any options of the `Map` class ([Mapbox](https:/ Note: props in this section are not reactive. They are only used once when the Map instance is constructed. -#### `mapLib`: any {#maplib} +#### `mapLib`: any {#maplib} Default: - `import('mapbox-gl')` if imported from `react-map-gl` @@ -512,21 +512,21 @@ function App() { ``` -#### `mapboxAccessToken`: string {#mapboxaccesstoken} +#### `mapboxAccessToken`: string {#mapboxaccesstoken} Token used to access the Mapbox data service. See [about map tokens](../get-started/mapbox-tokens.md). -#### `baseApiUrl`: string {#baseapiurl} +#### `baseApiUrl`: string {#baseapiurl} The map's default API URL for requesting tiles, styles, sprites, and glyphs. -#### `maxParallelImageRequests`: number {#maxparallelimagerequests} +#### `maxParallelImageRequests`: number {#maxparallelimagerequests} Default: `16` The maximum number of images (raster tiles, sprites, icons) to load in parallel. -#### `reuseMaps`: boolean {#reusemaps} +#### `reuseMaps`: boolean {#reusemaps} Default: `false` @@ -544,20 +544,20 @@ Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#ma Setting this prop is the equivalent of calling [mapboxgl.setRTLTextPlugin](https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin) with `lazy: true`. Set to `false` to disable loading the RTL text plugin. -#### `workerClass`: object {#workerclass} +#### `workerClass`: object {#workerclass} 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 {#workercount} +#### `workerCount`: number {#workercount} Default: `2` The number of web workers instantiated on a page with mapbox-gl maps. -#### `workerUrl`: string {#workerurl} +#### `workerUrl`: string {#workerurl} 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. @@ -620,7 +620,7 @@ The [MapRef](./types.md#mapref) object exposes Map methods ([Mapbox](https://doc You can still access the hidden members via `getMap()`: -#### `getMap()` {#getmap} +#### `getMap()` {#getmap} Returns the native `Map` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/) | [Maplibre](https://maplibre.org/maplibre-gl-js-docs/api/map/)) instance associated with this component.