## File: README.md

react-map-gl | [Docs](https://visgl.github.io/react-map-gl)

`react-map-gl` is a suite of [React](https://react.dev/) components designed to provide a React API for [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) or [maplibre-gl](https://maplibre.org/maplibre-gl-js/docs/). More information in the online documentation. See our [Design Philosophy](docs/README.md#design-philosophy). ### Installation Using `react-map-gl` requires `react >= 16.3`. ```sh # Using Maplibre npm install react-map-gl maplibre-gl ``` _or_ ```sh # Using Mapbox npm install react-map-gl mapbox-gl ``` ### Example ```js // Using Maplibre import * as React from 'react'; import Map from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ( ); } ``` _or_ ```js // Using Mapbox import * as React from 'react'; import Map from 'react-map-gl/mapbox'; import 'mapbox-gl/dist/mapbox-gl.css'; function App() { return ( ); } ``` Learn more with in our [Getting Started](https://visgl.github.io/react-map-gl/docs/get-started) guide. ### Contribute See [contribution guide](/CONTRIBUTING.md). ### Attributions react-map-gl is part of vis.gl, an [OpenJS Foundation](https://openjsf.org) project. Development is also supported by --- ## File: docs/api-reference/maplibre/attribution-control.md # AttributionControl React component that wraps maplibre-gl's [AttributionControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/AttributionControl/) class. ```tsx import * as React from 'react'; import {Map, AttributionControl} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` ## Properties ### Reactive Properties #### `style`: CSSProperties {#style} CSS style override that applies to the control's container. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/AttributionControlOptions/) supported by the `AttributionControl` class, such as - `compact` - `customAttribution` Plus the following: #### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position} Default: `'bottom-right'` Placement of the control relative to the map. ## Source [attribution-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/attribution-control.ts) --- ## File: docs/api-reference/maplibre/fullscreen-control.md # FullscreenControl React component that wraps maplibre-gl's [FullscreenControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/FullscreenControl/) class. ```tsx import * as React from 'react'; import {Map, FullscreenControl} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` ## Properties ### Reactive Properties #### `style`: CSSProperties {#style} CSS style override that applies to the control's container. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. #### `containerId`: string {#containerid} 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' {#position} Default: `'top-right'` Placement of the control relative to the map. ## Source [fullscreen-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/fullscreen-control.ts) --- ## File: docs/api-reference/maplibre/geolocate-control.md # GeolocateControl React component that wraps maplibre-gl's [GeolocateControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/) class. ```tsx import * as React from 'react'; import {Map, GeolocateControl} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` ## Properties ### Reactive Properties #### `style`: CSSProperties {#style} CSS style override that applies to the control's container. ### Callbacks #### `onGeolocate`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#ongeolocate} Called on each Geolocation API position update that returned as success. #### `onError`: (evt: [GeolocateErrorEvent](./types.md#geolocateerrorevent)) => void {#onerror} Called on each Geolocation API position update that returned as an error. #### `onOutOfMaxBounds`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#onoutofmaxbounds} Called on each Geolocation API position update that returned as success but user position is out of map `maxBounds`. #### `onTrackUserLocationStart`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationstart} Called when the GeolocateControl changes to the active lock state. #### `onTrackUserLocationEnd`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationend} Called when the GeolocateControl changes to the background state. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeolocateControlOptions/) supported by the `GeolocateControl` class, such as - `positionOptions` - `fitBoundsOptions` - `trackUserLocation` - `showAccuracyCircle` - `showUserLocation` Plus the following: #### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position} Default: `'bottom-right'` Placement of the control relative to the map. ## Methods The underlying native `GeolocateControl` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook. You may use it to call any imperative methods: ```tsx import * as React from 'react'; import {useRef, useEffect} from 'react'; import {Map, GeolocateControl} from 'react-map-gl/maplibre'; import type * as maplibregl from 'maplibre-gl'; function App() { const geoControlRef = useRef(); useEffect(() => { // Activate as soon as the control is loaded geoControlRef.current?.trigger(); }, [geoControlRef.current]); return ; } ``` ## Source [geolocate-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/geolocate-control.ts) --- ## File: docs/api-reference/maplibre/layer.md # Layer This component allows apps to create a [map layer](https://maplibre.org/maplibre-style-spec/layers/) using React. ```tsx import * as React from 'react'; import {Map, Layer} from 'react-map-gl/maplibre'; import type {FillLayer} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; const parkLayer: FillLayer = { id: 'landuse_park', type: 'fill', source: 'vector', 'source-layer': 'landuse', filter: ['==', 'class', 'park'], paint: { 'fill-color': '#4E3FC8' } }; function App() { return ; } ``` ## Properties The props provided to this component should be conforming to the [Maplibre layer specification](https://maplibre.org/maplibre-style-spec/layers/). When props change *shallowly*, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance. ### Identity Properties Once a `` is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity. #### `id`: string {#id} Unique identifier of the layer. If not provided, a default id will be assigned. #### `type`: string {#type} Required. Type of the layer. ### Options #### `beforeId`: string {#beforeid} 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} `source` is required by some layer types in the Mapbox style specification. If `` is used as the immediate child of a [Source](./source.md) component, this prop will be overwritten by the id of the parent source. If the `` component is not an immediate descendant of ``, e.g wrapped inside a helper component, source property needs to be provided same as the id of the `` component for the `` component to show. ## Source [layer.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/layer.ts) --- ## File: docs/api-reference/maplibre/logo-control.md # LogoControl React component that wraps maplibre-gl's [LogoControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/LogoControl/) class. ```tsx import * as React from 'react'; import {Map, LogoControl} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` ## Properties ### Reactive Properties #### `style`: CSSProperties {#style} CSS style override that applies to the control's container. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LogoControlOptions/) supported by the `LogoControl` class, such as - `compact` Plus the following: #### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position} Default: `'top-right'` Placement of the control relative to the map. ## Source [logo-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/logo-control.ts) --- ## File: docs/api-reference/maplibre/map.md # default (Map) React component that wraps maplibre-gl's [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) class. This is also the default export from `react-map-gl/maplibre`. ```tsx import * as React from 'react'; import {Map} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ( ); } ``` ## Properties Aside from the props listed below, the `Map` component supports all [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) of the `Map` class constructor. Beware that this is not an exhaustive list of all props. Different base map libraries may offer different options and default values. When in doubt, refer to your base map library's documentation. ### Layout options #### `id`: string {#id} Map container id. #### `style`: CSSProperties {#style} Default: `{position: 'relative', width: '100%', height: '100%'}` Map container CSS. #### `cursor`: string {#cursor} Default: `'auto'` The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor). ### Styling options #### `light`: [Light](./types.md#light) {#light} Light properties of the style. Must conform to the [Light Style Specification](https://maplibre.org/maplibre-style-spec/light/). #### `mapStyle`: [MapStyle](./types.md#mapstyle) | string | Immutable {#mapstyle} Default: (empty style) The map's Maplibre style. This must be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL to such JSON. #### `projection`: string | [Projection](./types.md#projection) {#projection} Default: `'mercator'` The projection the map should be rendered in. See [Projection Specification](https://maplibre.org/maplibre-style-spec/projection/). #### `renderWorldCopies`: boolean {#renderworldcopies} Default: `true` If `true`, multiple copies of the world will be rendered, when zoomed out. #### `sky`: [Sky](./types.md#sky) {#sky} The sky property of the style. Must conform to the [Sky Style Specification](https://maplibre.org/maplibre-style-spec/sky/). #### `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)|null {#terrain} Terrain property of the style. Must conform to the [Terrain Style Specification](https://maplibre.org/maplibre-style-spec/terrain/). If `null` is provided, removes terrain from the map. ### Camera options #### `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. - `bounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) - The initial bounds of the map. If specified, it overrides the `longitude`, `latitude` and `zoom` options. Default `null`. - `fitBoundsOptions` - An object to use only when setting the `bounds` option. Default `null`. + `fitBoundsOptions.offset`: [PointLike](./types.md#pointlike) + `fitBoundsOptions.minZoom`: number + `fitBoundsOptions.maxZoom`: number + `fitBoundsOptions.padding`: [PaddingOptions](./types.md#paddingoptions) - `longitude`: number - The initial longitude of the map center. Default `0`. - `latitude`: number - The initial latitude of the map center. Default `0`. - `zoom`: number - The initial zoom level. Default `0`. - `pitch`: number - The initial pitch (tilt) of the map. Default `0`. - `bearing`: number - The initial bearing (rotation) of the map. Default `0`. #### `longitude`: number {#longitude} The longitude of the map center. #### `latitude`: number {#latitude} The latitude of the map center. #### `zoom`: number {#zoom} The [zoom level](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#zoom) of the map. #### `pitch`: number {#pitch} The initial [pitch](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#pitch) (tilt) of the map, measured in degrees away from the plane of the screen (0-85). #### `bearing`: number {#bearing} The initial [bearing](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#bearing) (rotation) of the map, measured in degrees counter-clockwise from north. #### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding} Default: `null` The padding in pixels around the viewport. #### `minZoom`: number {#minzoom} Default: `0` The minimum zoom level of the map (0-24). #### `maxZoom`: number {#maxzoom} Default: `22` The maximum zoom level of the map (0-24). #### `minPitch`: number {#minpitch} Default: `0` The minimum pitch of the map (0-85). #### `maxPitch`: number {#maxpitch} Default: `60` The maximum pitch of the map (0-85). #### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds} Default: `null` If set, the map is constrained to the given bounds. ### Input handler options #### `boxZoom`: boolean {#boxzoom} Default: `true` If `true`, the "box zoom" interaction is enabled. See [BoxZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/BoxZoomHandler/). #### `doubleClickZoom`: boolean {#doubleclickzoom} Default: `true` If `true`, the "double click to zoom" interaction is enabled. See [DoubleClickZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DoubleClickZoomHandler/). #### `dragRotate`: boolean {#dragrotate} Default: `true` If `true`, the "drag to rotate" interaction is enabled. See [DragRotateHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragRotateHandler/). #### `dragPan`: boolean | Object {#dragpan} Default: `true` If `true`, the "drag to pan" interaction is enabled. Optionally accept an object value that is the options to [DragPanHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragPanHandler/). #### `keyboard`: boolean {#keyboard} Default: `true` If `true`, keyboard shortcuts are enabled. See [KeyboardHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/KeyboardHandler/). #### `scrollZoom`: boolean | Object {#scrollzoom} Default: `true` If `true`, the "scroll to zoom" interaction is enabled. Optionally accept an object value that is the options to [ScrollZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/ScrollZoomHandler/). #### `touchPitch`: boolean | Object {#touchpitch} Default: `true` If `true`, the "drag to pitch" interaction is enabled. Optionally accept an object value that is the options to [TwoFingersTouchPitchHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchPitchHandler/). #### `touchZoomRotate`: boolean | Object {#touchzoomrotate} Default: `true` If `true`, the "pinch to rotate and zoom" interaction is enabled. Optionally accept an object value that is the options to [TwoFingersTouchZoomRotateHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchZoomRotateHandler/). #### `interactiveLayerIds`: string[] {#interactivelayerids} Default: `null` The id(s) of style layer(s). If specified, pointer event (`mousemove`, `click` etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a `features` property containing an array of the matching features. If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a `features` property. See the [Callbacks](#callbacks) section for affected events. ### Callbacks #### `onResize`: (event: [MapEvent](./types.md#mapevent)) => void {#onresize} Called when the map has been resized. #### `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} Called whenever the map is drawn to the screen. #### `onIdle`: (event: [MapEvent](./types.md#mapevent))) => void {#onidle} Called after the last frame rendered before the map enters an "idle" state: - No camera transitions are in progress - All currently requested tiles have loaded - All fade/transition animations have completed #### `onRemove`: (event: [MapEvent](./types.md#mapevent))) => void {#onremove} Called when the map has been removed. #### `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} 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} 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} 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} 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} 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} 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} Called when a point device (usually a mouse) leaves the map's canvas. #### `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} 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} 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} Called when a wheel event occurs within the map. #### `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} 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} 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} 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} Called just before the map begins a transition from one view to another. #### `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://maplibre.org/maplibre-gl-js/docs/API/classes/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} Called just after the map completes a transition from one view to another. #### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart} Called when a "drag to pan" interaction starts. #### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag} Called repeatedly during a "drag to pan" interaction. #### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend} Called when a "drag to pan" interaction ends. #### `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} 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://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `zoom` prop. #### `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} Called just before the map begins a transition from one bearing (rotation) to another. #### `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://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `bearing` prop. #### `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} Called just before the map begins a transition from one pitch (tilt) to another. #### `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://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `pitch` prop. #### `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} Called when a "box zoom" interaction starts. #### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend} Called when a "box zoom" interaction ends. #### `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} Called when any map data loads or changes. See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information. #### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata} Called when the map's style loads or changes. See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information. #### `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://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information. ### Other options The following props, along with any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) of the `Map` class not listed above, can be specified to construct the underlying `Map` instance. Note: props in this section are not reactive. They are only used once when the Map instance is constructed. #### `mapLib`: any {#maplib} Default: - `import('maplibre-gl')` Specify the underlying base map library for the Map component. The value can be provided with several options: By module import (and embedding in the final bundle): ```tsx import * as React from 'react'; import {Map} from 'react-map-gl/maplibre'; import * as maplibregl from 'maplibre-gl'; function App() { return ; } ``` By dynamic import (thus enable bundle splitting): ```tsx import * as React from 'react'; import {Map} from 'react-map-gl/maplibre'; function App() { return ; } ``` Or to load a pre-bundled version of the library: ```html title="index.html" ``` ```tsx title="app.tsx" import * as React from 'react'; import {Map} from 'react-map-gl/maplibre'; function App() { return ; } ``` #### `maxParallelImageRequests`: number {#maxparallelimagerequests} Default: `16` The maximum number of images (raster tiles, sprites, icons) to load in parallel. #### `reuseMaps`: boolean {#reusemaps} Default: `false` By default, every time a map component is unmounted, all internal resources associated with the underlying `Map` instance are released. If the map gets mounted again, a new `Map` instance is constructed. If `reuseMaps` is set to `true`, when a map component is unmounted, the underlying `Map` instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid recreating the Map and its data cache triggered by initialization. Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and `initialViewState` of the new component are respected. #### `RTLTextPlugin`: string | object {#rtltextplugin} - `pluginUrl`: `string` URL to the plugin JS file. - `lazy`: `boolean` When true, the plugin is only loaded when the map first encounters Hebrew or Arabic text. Default `true`. Sets the map's RTL text plugin via [setRTLTextPlugin](https://maplibre.org/maplibre-gl-js/docs/API/functions/setRTLTextPlugin/). Can be used with [mapbox-gl-rtl-text](https://github.com/mapbox/mapbox-gl-rtl-text). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. #### `workerCount`: number {#workercount} Default: `2` The number of web workers instantiated on a page with maplibre-gl maps. #### `workerUrl`: string {#workerurl} Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL. MapLibre GL JS v6 applications that use a bundler must configure the worker before rendering a map. Follow MapLibre's [installation instructions](https://maplibre.org/maplibre-gl-js/docs/#installation) to generate the appropriate worker URL for your bundler. ## Methods Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or the [useMap](./use-map.md) hook. ```tsx import * as React from 'react'; import {useRef, useCallback} from 'react'; import {Map} from 'react-map-gl/maplibre'; import type {MapRef} from 'react-map-gl/maplibre'; function App() { const mapRef = useRef(); const onMapLoad = useCallback(() => { mapRef.current.on('move', () => { // do something }); }, []); return ; } ``` The [MapRef](./types.md#mapref) object exposes [Map methods](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#methods) that **are safe to call without breaking the React bindings**. For example, `setStyle()` is hidden from the ref object, because the style is supposed to be changed by updating the `mapStyle` prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors. You can still access the hidden members via `getMap()`: #### `getMap()` {#getmap} Returns the native [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) instance associated with this component. ## Source [map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/map.tsx) --- ## File: docs/api-reference/maplibre/map-provider.md # MapProvider A [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operations outside of the component that directly renders a [Map](./map.md). The component should wrap all nodes in which you may want to access the maps: ```tsx import {MapProvider} from 'react-map-gl/maplibre'; function Root() { return ( { // Application tree, somewhere one or more component(s) are rendered } ); } ``` See [useMap](./use-map.md) for more information. ## Source [use-map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/use-map.tsx) --- ## File: docs/api-reference/maplibre/marker.md # Marker React component that wraps maplibre-gl's [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/) class. ```tsx import * as React from 'react'; import {Map, Marker} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` 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 ### Reactive Properties #### `draggable`: boolean {#draggable} Default: `false` If `true`, the marker is able to be dragged to a new position on the map. #### `latitude`: number {#latitude} Required. The latitude of the anchor location. #### `longitude`: number {#longitude} Required. The longitude of the anchor location. #### `offset`: [PointLike](./types.md#pointlike) {#offset} Default: `null` The offset in pixels as a [PointLike](./types.md#pointlike) object to apply relative to the element's center. Negatives indicate left and up. #### `pitchAlignment`: 'map' | 'viewport' | 'auto' {#pitchalignment} 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`. #### `popup`: Popup | null {#popup} An instance of the [Popup](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/) class to attach to this marker. If undefined or null, any popup set on this Marker instance is unset. #### `rotation`: number {#rotation} 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' {#rotationalignment} 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`. #### `style`: CSSProperties {#style} CSS style override that applies to the marker's container. ### Callbacks #### `onClick`: (evt: [MapEvent](./types.md#mapevent)) => void {#onclick} Called when the marker is clicked on. #### `onDragStart`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragstart} Called when dragging starts, if `draggable` is `true`. #### `onDrag`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondrag} Called while dragging, if `draggable` is `true`. #### `onDragEnd`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragend} Called when dragging ends, if `draggable` is `true`. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/) supported by the `Marker` class, such as - `anchor` - `color` - `scale` - `clickTolerance` ## Methods The underlying native `Marker` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook. You may use it to call any imperative methods: ```tsx import * as React from 'react'; import {useRef, useMemo, useCallback} from 'react'; import {Map, Marker} from 'react-map-gl/maplibre'; import * as maplibregl from 'maplibre-gl'; function App() { const markerRef = useRef(); const popup = useMemo(() => { return maplibregl.Popup().setText('Hello world!'); }, []) const togglePopup = useCallback(() => { markerRef.current?.togglePopup(); }, []); return <> Toggle popup ; } ``` ## Source [marker.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/marker.ts) --- ## File: docs/api-reference/maplibre/navigation-control.md # NavigationControl React component that wraps maplibre-gl's [NavigationControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/NavigationControl/) class. ```tsx import * as React from 'react'; import {Map, NavigationControl} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; function App() { return ; } ``` ## Properties ### Reactive Properties #### `style`: CSSProperties {#style} CSS style override that applies to the control's container. ### Other Properties The properties in this section are not reactive. They are only used when the component first mounts. Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/NavigationControlOptions/) supported by the `NavigationControl` class, such as - `showCompass` - `showZoom` - `visualizePitch` Plus the following: #### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position} Default: `'top-right'` Placement of the control relative to the map. ## Source [navigation-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/navigation-control.ts)