Skip to main content

Types

The following types can be imported from @vis.gl/react-maplibre when using TypeScript.

Components​

IControl​

A custom control implementation.

CustomLayerInterface​

A custom layer implementation.

MapRef​

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

Styling​

MapStyle​

An object conforming to the Maplibre Style Specification.

Sky​

An object conforming to the Sky Style Specification.

Light​

An object conforming to the Light Style Specification.

Terrain​

An object conforming to the Terrain Style Specification.

Projection​

An object conforming to the Projection Style Specification.

BackgroundLayer​

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

CircleLayer​

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

FillExtrusionLayer​

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

FillLayer​

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

HeatmapLayer​

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

HillshadeLayer​

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

LineLayer​

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

RasterLayer​

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

SymbolLayer​

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

GeoJSONSourceRaw​

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

VideoSourceRaw​

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

ImageSourceRaw​

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

VectorSourceRaw​

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

RasterSource​

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

RasterDemSource​

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

CanvasSourceRaw​

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

Configurations​

ControlPosition​

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

PaddingOptions​

An object with the following fields:

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

Data Types​

LngLat​

A Maplibre 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 Maplibre 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 Maplibre Point object.

PointLike​

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

MapGeoJSONFeature​

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 Maplibre Vector Tile format. See VectorTileSource.

RasterTileSource​

A source containing vector tiles in Maplibre Raster format. See RasterTileSource.

RasterDEMTileSource​

A source containing vector tiles in Maplibre Raster DEM format. See RasterDEMTileSource.

Events​

MapEvent​

An object with the following fields:

  • type: string - Event type
  • target: Map
  • originalEvent?: Event

MapLayerMouseEvent​

An object with the following fields:

MapWheelEvent​

An object with the following fields:

  • type: string
  • target: Map
  • 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: Map
  • 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: Map
  • dataType: 'style'

MapSourceDataEvent​

An object with the following fields:

  • type: string
  • target: Map
  • 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'
  • target: Map
  • 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: 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.

MarkerEvent​

An object with the following fields:

MarkerDragEvent​

An object with the following fields:

  • type: string
  • target: Marker
  • lngLat: LngLat - the new location of the marker

PopupEvent​

An object with the following fields:

  • type: string
  • target: Popup