Skip to main content

Types

The following types can be imported from react-map-gl when using TypeScript.

Components​

MapboxMap​

A mapboxgl.Map instance.

IControl​

A mapboxgl.IControl implementation.

CustomLayerInterface​

A custom layer implementation.

MapRef​

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

GeolocateControlRef​

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

Styling​

MapboxStyle​

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.

TerrainSpecification​

An object conforming to the Terrain Style Specification.

ProjectionSpecification​

An object with the following fields:

  • name (string): projection name, one of Albers ('albers'), Equal Earth ('equalEarth'), Equirectangular/Plate Carrée/WGS84 ('equirectangular'), Lambert ('lambertConformalConic'), Mercator ('mercator'), Natural Earth ('naturalEarth'), and Winkel Tripel ('winkelTripel').
  • center? ([number, number]): longitude and latitude of the projection center
  • parallels? ([number, number]): the two standard parallels of a conic projection such as Albers and Lambert.

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​

Anchor​

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

Alignment​

One of 'map', 'viewport' and 'auto'.

ControlPosition​

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

DragPanOptions​

An object with the following fields:

  • linearity?: number - The rate at which the speed reduces after the pan ends.
  • easing?: (t: number) => number - Optional easing function when applying the drag. Defaults to bezier function.
  • deceleration?: number - Factor used to scale the drag velocity. Default 0.
  • maxSpeed?: number - The maximum value of the drag velocity. Default 1400.

See DragPanHandler#enable.

FitBoundsOptions​

An object with the following fields:

  • offset?: PointLike - The center of the given bounds relative to the map's center, measured in pixels.
  • padding?: PaddingOptions - The amount of padding in pixels to add to the given bounds.
  • maxZoom?: number - The maximum zoom level to allow when the map fits to the specified bounds.
  • maxZoom?: number - The minimum zoom level to allow when the map fits to the specified bounds.

See Map#fitBounds

ZoomRotateOptions​

An object with the following fields:

  • around?: 'center' - If "center" is passed, map will zoom around center of map.

See ScrollZoomHandler#enable, TouchZoomRotateHandler#enable

PaddingOptions​

An object with the following fields:

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

TransformRequestFunction​

A function that takes the following arguments:

  • url: string
  • resourceType: 'Unknown' | 'Style' | 'Source' | 'Tile' | 'Glyphs' | 'SpriteImage' | 'SpriteJSON' | 'Image';

And returns an object with the following fields:

  • url: string - The URL to be requested.
  • credentials?: 'same-origin' | 'include' - Use 'include' to send cookies with cross-origin requests.
  • headers?: { [header: string]: any } - The headers to be sent with the request.
  • method?: 'GET' | 'POST' | 'PUT'
  • collectResourceTiming?: boolean

See RequestParameters.

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.

MapboxGeoJSONFeature​

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

Events​

MapboxEvent​

An object with the following fields:

  • type: string - Event type
  • target: MapboxMap - The map instance that fired the event
  • originalEvent?: Event

MapLayerMouseEvent​

An object with the following fields:

MapWheelEvent​

An object with the following fields:

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

MapSourceDataEvent​

An object with the following fields:

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

MarkerDragEvent​

An object with the following fields:

PopupEvent​

An object with the following fields: