Skip to main content

default (Map)

React component that wraps the base library's Map class. This is also the default export from @vis.gl/react-maplibre.

import * as React from 'react';
import {Map} from '@vis.gl/react-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14
      }}
      style={{width: 600, height: 400}}
      mapStyle="https://demotiles.maplibre.org/style.json"
    />
  );
}

Properties​

Aside from the props listed below, the Map component supports all options 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​

Map container id.

style: CSSProperties​

Default: {position: 'relative', width: '100%', height: '100%'}

Map container CSS.

cursor: string​

Default: 'auto'

The current cursor type.

Styling options​

light: Light​

Light properties of the style. Must conform to the Light Style Specification.

mapStyle: MapStyle | string | Immutable​

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, or a URL to such JSON.

projection: string | Projection​

Default: 'mercator'

The projection the map should be rendered in. See Projection Specification.

renderWorldCopies: boolean​

Default: true

If true, multiple copies of the world will be rendered, when zoomed out.

sky: Sky​

The sky property of the style. Must conform to the Sky Style Specification.

styleDiffing: boolean​

Default: true

Enable diffing when mapStyle changes. If false, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.

terrain: Terrain|null​

Terrain property of the style. Must conform to the Terrain Style Specification. If null is provided, removes terrain from the map.

Camera options​

initialViewState: object​

The initial view state of the map. If specified, longitude, latitude, zoom etc. in props are ignored when constructing the map. Only specify initialViewState if Map is being used as an uncontrolled component. See state management for examples.

  • bounds: LngLatBoundsLike - The initial bounds of the map. If specified, it overrides the longitude, latitude and zoom options. Default null.
  • fitBoundsOptions - An object to use only when setting the bounds option. Default null.
    • fitBoundsOptions.offset: PointLike
    • fitBoundsOptions.minZoom: number
    • fitBoundsOptions.maxZoom: number
    • fitBoundsOptions.padding: 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​

The longitude of the map center.

latitude: number​

The latitude of the map center.

zoom: number​

The zoom level of the map.

pitch: number​

The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85).

bearing: number​

The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north.

padding: PaddingOptions​

Default: null

The padding in pixels around the viewport.

minZoom: number​

Default: 0

The minimum zoom level of the map (0-24).

maxZoom: number​

Default: 22

The maximum zoom level of the map (0-24).

minPitch: number​

Default: 0

The minimum pitch of the map (0-85).

maxPitch: number​

Default: 60

The maximum pitch of the map (0-85).

maxBounds: LngLatBoundsLike​

Default: null

If set, the map is constrained to the given bounds.

Input handler options​

boxZoom: boolean​

Default: true

If true, the "box zoom" interaction is enabled. See BoxZoomHandler.

doubleClickZoom: boolean​

Default: true

If true, the "double click to zoom" interaction is enabled. See DoubleClickZoomHandler.

dragRotate: boolean​

Default: true

If true, the "drag to rotate" interaction is enabled. See DragRotateHandler.

dragPan: boolean | Object​

Default: true

If true, the "drag to pan" interaction is enabled. Optionally accpt an object value that is the options to DragPanHandler.

keyboard: boolean​

Default: true

If true, keyboard shortcuts are enabled. See KeyboardHandler.

scrollZoom: boolean | Object​

Default: true

If true, the "scroll to zoom" interaction is enabled. Optionally accpt an object value that is the options to ScrollZoomHandler.

touchPitch: boolean | Object​

Default: true

If true, the "drag to pitch" interaction is enabled. Optionally accpt an object value that is the options to TwoFingersTouchPitchHandler.

touchZoomRotate: boolean | Object​

Default: true

If true, the "pinch to rotate and zoom" interaction is enabled. Optionally accpt an object value that is the options to TwoFingersTouchZoomRotateHandler.

interactiveLayerIds: string[]​

Default: null

The id(s) of style layer(s).

If specified, pointer event (mousemove, click etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a features property containing an array of the matching features.

If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a features property.

See the Callbacks section for affected events.

Callbacks​

onResize: (event: MapEvent) => void​

Called when the map has been resized.

onLoad: (event: MapEvent) => void​

Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

onRender: (event: MapEvent)) => void​

Called whenever the map is drawn to the screen.

onIdle: (event: MapEvent)) => void​

Called after the last frame rendered before the map enters an "idle" state:

  • No camera transitions are in progress
  • All currently requested tiles have loaded
  • All fade/transition animations have completed

onRemove: (event: MapEvent)) => void​

Called when the map has been removed.

onError: (event: ErrorEvent) => void​

Default: evt => console.error(evt.error)

Called when an error occurs.

onMouseDown: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) is pressed within the map.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onMouseUp: (event: MapLayerMouseEvent) => void​

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) => void​

Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.

onMouseEnter: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by interactiveLayerIds from outside that layer or outside the map canvas.

onMouseMove: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onMouseLeave: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by interactiveLayerIds or moves from the layer to outside the map canvas.

onMouseOut: (event: MapLayerMouseEvent) => void​

Called when a point device (usually a mouse) leaves the map's canvas.

onClick: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onDblClick: (event: MapLayerMouseEvent) => void​

Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onContextMenu: (event: MapLayerMouseEvent) => void​

Called when the right button of the mouse is clicked or the context menu key is pressed within the map.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onWheel: (event: MapWheelEvent) => void​

Called when a wheel event occurs within the map.

onTouchStart: (event: MapLayerTouchEvent) => void​

Called when a touchstart event occurs within the map.

If interactiveLayerIds is specified, the event will contain an additional features field that contains features under the cursor from the specified layer.

onTouchEnd: (event: MapLayerTouchEvent) => void​

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) => void​

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) => void​

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) => void​

Called just before the map begins a transition from one view to another.

onMove: (event: ViewStateChangeEvent) => void​

Called repeatedly during an animated transition from one view to another.

When Map is used as a controlled component, event.viewState reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as flyTo. The camera does not actually change until the application updates the view state props (longitude, latitude, zoom etc.). See state management for examples.

onMoveEnd: (event: ViewStateChangeEvent) => void​

Called just after the map completes a transition from one view to another.

onDragStart: (event: ViewStateChangeEvent) => void​

Called when a "drag to pan" interaction starts.

onDrag: (event: ViewStateChangeEvent) => void​

Called repeatedly during a "drag to pan" interaction.

onDragEnd: (event: ViewStateChangeEvent) => void​

Called when a "drag to pan" interaction ends.

onZoomStart: (event: ViewStateChangeEvent) => void​

Called just before the map begins a transition from one zoom level to another.

onZoom: (event: ViewStateChangeEvent) => void​

Called repeatedly during an animated transition from one zoom level to another.

When Map is used as a controlled component, event.viewState.zoom reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as flyTo. The camera does not actually change until the application updates the zoom prop.

onZoomEnd: (event: ViewStateChangeEvent) => void​

Called just after the map completes a transition from one zoom level to another.

onRotateStart: (event: ViewStateChangeEvent) => void​

Called just before the map begins a transition from one bearing (rotation) to another.

onRotate: (event: ViewStateChangeEvent) => void​

Called repeatedly during an animated transition from one bearing (rotation) to another.

When Map is used as a controlled component, event.viewState.bearing reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as flyTo. The camera does not actually change until the application updates the bearing prop.

onRotateEnd: (event: ViewStateChangeEvent) => void​

Called just after the map completes a transition from one bearing (rotation) to another.

onPitchStart: (event: ViewStateChangeEvent) => void​

Called just before the map begins a transition from one pitch (tilt) to another.

onPitch: (event: ViewStateChangeEvent) => void​

Called repeatedly during an animated transition from one pitch (tilt) to another.

When Map is used as a controlled component, event.viewState.pitch reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as flyTo. The camera does not actually change until the application updates the pitch prop.

onPitchEnd: (event: ViewStateChangeEvent) => void​

Called just after the map completes a transition from one pitch (tilt) to another.

onBoxZoomStart: (event: MapBoxZoomEvent) => void​

Called when a "box zoom" interaction starts.

onBoxZoomEnd: (event: MapBoxZoomEvent) => void​

Called when a "box zoom" interaction ends.

onBoxZoomCancel: (event:MapBoxZoomEvent) => void​

Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.

onData: (event: MapStyleDataEvent | MapSourceDataEvent) => void​

Called when any map data loads or changes. See MapDataEvent for more information.

onStyleData: (event: MapStyleDataEvent) => void​

Called when the map's style loads or changes. See MapDataEvent for more information.

onSourceData: (event: MapSourceDataEvent) => void​

Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information.

Other options​

The following props, along with any options 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​

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):

import * as React from 'react';
import {Map} from '@vis.gl/react-maplibre';
import maplibregl from 'maplibre-gl';

function App() {
  return <Map mapLib={maplibregl} />;
}

By dynamic import (thus enable bundle splitting):

import * as React from 'react';
import {Map} from '@vis.gl/react-maplibre';

function App() {
  return <Map mapLib={import('maplibre-gl')} />;
}

Or to load a pre-bundled version of the library:

index.html
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js" ></script>
app.tsx
import * as React from 'react';
import {Map} from '@vis.gl/react-maplibre';

function App() {
  return <Map mapLib={window.maplibregl} />;
}

maxParallelImageRequests: number​

Default: 16

The maximum number of images (raster tiles, sprites, icons) to load in parallel.

reuseMaps: boolean​

Default: false

By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed.

If reuseMaps is set to true, when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid 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 | false​

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 equivalent of calling setRTLTextPlugin with lazy: true. Set to false to disable loading the RTL text plugin.

workerCount: number​

Default: 2

The number of web workers instantiated on a page with maplibre-gl maps.

workerUrl: string​

Provides an interface for loading maplibre-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.

Methods​

Imperative methods are accessible via a React ref or the useMap hook.

import * as React from 'react';
import {useRef, useCallback} from 'react';
import {Map} from '@vis.gl/react-maplibre';
import type {MapRef} from '@vis.gl/react-maplibre';

function App() {
  const mapRef = useRef<MapRef>();

  const onMapLoad = useCallback(() => {
    mapRef.current.on('move', () => {
      // do something
    });
  }, []);

  return <Map ref={mapRef} onLoad={onMapLoad} ... />;
}

The MapRef object exposes 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()​

Returns the native Map instance associated with this component.

Source​

map.tsx