types.md

Types

The following types can be imported from react-map-gl 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 Mapbox Style Specification.

Fog

An object conforming to the Fog 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 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

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 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.

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 (Mapbox | Maplibre).

GeoJSONSource

A source containing GeoJSON. See GeoJSONSource (Mapbox | Maplibre).

VideoSource

A source containing video. See VideoSource (Mapbox | Maplibre).

ImageSource

A source containing image. See ImageSource (Mapbox | Maplibre).

CanvasSource

A source containing the contents of an HTML canvas. See CanvasSource(Mapbox | Maplibre).

VectorTileSource

A source containing vector tiles in Mapbox Vector Tile format. See VectorTileSource (Mapbox | Maplibre).

Events

MapEvent

An object with the following fields:

• type: string - Event type
• target: Map (Mapbox | Maplibre)
• originalEvent?: Event

MapLayerMouseEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• originalEvent?: MouseEvent
• point: Point
• lngLat: LngLat
• preventDefault: () => void
• defaultPrevented: boolean
• features?: MapGeoJSONFeature[]

MapWheelEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• originalEvent?: WheelEvent
• preventDefault: () => void
• defaultPrevented: boolean

MapLayerTouchEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• originalEvent?: TouchEvent
• point: Point
• lngLat: LngLat
• points: Point[]
• lngLats: LngLat[]
• preventDefault: () => void
• defaultPrevented: boolean
• features?: MapGeoJSONFeature[]

ViewStateChangeEvent

An object with the following fields:

• type: string - Event type
• target: Map (Mapbox | Maplibre)
• 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:

• type: string
• target: Map (Mapbox | Maplibre)
• originalEvent?: MouseEvent
• boxZoomBounds: LngLatBounds

MapStyleDataEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• dataType: 'style'

MapSourceDataEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• 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 (Mapbox | Maplibre)
• error: Error

GeolocateEvent

An object with the following fields:

• type: string
• target: Map (Mapbox | Maplibre)
• target: GeolocateControl (Mapbox | Maplibre)

GeolocateResultEvent

An object with the following fields:

• type: string
• target: GeolocateControl (Mapbox | Maplibre)
• coords: GeolocationCoordinates - the current location.
• timestamp: number - the time at which the location was retrieved.

GeolocateErrorEvent

An object with the following fields:

• type: string
• target: GeolocateControl (Mapbox | Maplibre)
• 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:

• type: string
• target: Marker (Mapbox | Maplibre)

MarkerDragEvent

An object with the following fields:

• type: string
• target: Marker (Mapbox | Maplibre)
• lngLat: LngLat - the new location of the marker

PopupEvent

An object with the following fields:

• type: string
• target: Popup (Mapbox | Maplibre)