Skip to content

Latest commit

 

History

History
401 lines (238 loc) · 14.8 KB

types.md

File metadata and controls

401 lines (238 loc) · 14.8 KB

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 view transitions to the specified bounds.
  • animate?: boolean - When set to false, no animation happens.
  • linear?: boolean - If true, the map transitions using Map#easeTo. If false, the map transitions using Map#flyTo
  • duration?: number - Duration in milliseconds
  • maxDuration?: number - Max duration in milliseconds
  • easing?: (t: number) => number - A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state.
  • essential?: boolean - If true, then the animation is considered essential and will not be affected by prefers-reduced-motion. Otherwise, the transition will happen instantly if the user has enabled the reduced motion accesibility feature in their operating system.

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

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: