@types/mapbox-gl

Version 3.1.0
Published 1 month ago
102 kB
1 dependency
MIT license

Install

npm i @types/mapbox-gl

yarn add @types/mapbox-gl

pnpm add @types/mapbox-gl

Overview

TypeScript definitions for mapbox-gl

Index

Variables

variable accessToken

let accessToken: string;

variable baseApiUrl

let baseApiUrl: string;

variable maxParallelImageRequests

let maxParallelImageRequests: number;

Maximum number of images (raster tiles, sprites, icons) to load in parallel, which affects performance in raster-heavy maps. 16 by default.

variable version

let version: string;

variable workerCount

let workerCount: number;

Number of web workers instantiated on a page with GL JS maps. By default, it is set to half the number of CPU cores (capped at 6).

Functions

function clearPrewarmedResources

clearPrewarmedResources: () => void;

Clears up resources that have previously been created by mapboxgl.prewarm(). Note that this is typically not necessary. You should only call this function if you expect the user of your app to not return to a Map view at any point in your application.

function clearStorage

clearStorage: (callback?: (err?: Error) => void) => void;

Clears browser storage used by this library. Using this method flushes the Mapbox tile cache that is managed by this library. Tiles may still be cached by the browser in some cases.

function getRTLTextPluginStatus

getRTLTextPluginStatus: () => PluginStatus;

function prewarm

prewarm: () => void;

Initializes resources like WebWorkers that can be shared across maps to lower load times in some situations. mapboxgl.workerUrl and mapboxgl.workerCount, if being used, must be set before prewarm() is called to have an effect.
By default, the lifecycle of these resources is managed automatically, and they are lazily initialized when a Map is first created. By invoking prewarm(), these resources will be created ahead of time, and will not be cleared when the last Map is removed from the page. This allows them to be re-used by new Map instances that are created later. They can be manually cleared by calling mapboxgl.clearPrewarmedResources(). This is only necessary if your web page remains active but stops using maps altogether.
This is primarily useful when using GL-JS maps in a single page app, wherein a user would navigate between various views that can cause Map instances to constantly be created and destroyed.

function setRTLTextPlugin

setRTLTextPlugin: (
    pluginURL: string,
    callback: (error: Error) => void,
    deferred?: boolean
) => void;

function supported

supported: (options?: {
    failIfMajorPerformanceCaveat?: boolean | undefined;
}) => boolean;

Classes

class AttributionControl

class AttributionControl extends Control {}

Attribution

constructor

constructor(options?: {
    compact?: boolean | undefined;
    customAttribution?: string | string[] | undefined;
});

class BoxZoomHandler

class BoxZoomHandler {}

BoxZoomHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method enable

enable: () => void;

method isActive

isActive: () => boolean;

method isEnabled

isEnabled: () => boolean;

class CanvasSource

class CanvasSource implements CanvasSourceRaw {}

property canvas

canvas: string | HTMLCanvasElement;

property coordinates

coordinates: number[][];

property type

type: string;

method getCanvas

getCanvas: () => HTMLCanvasElement;

method pause

pause: () => void;

method play

play: () => void;

method setCoordinates

setCoordinates: (coordinates: number[][]) => this;

class Control

class Control extends Evented implements IControl {}

Control

property getDefaultPosition

getDefaultPosition?: () => string;

method onAdd

onAdd: (map: Map) => HTMLElement;

method onRemove

onRemove: (map: Map) => void;

class DoubleClickZoomHandler

class DoubleClickZoomHandler {}

DoubleClickZoomHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method enable

enable: () => void;

method isEnabled

isEnabled: () => boolean;

class DragPanHandler

class DragPanHandler {}

DragPenHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method enable

enable: (options?: DragPanOptions) => void;

method isActive

isActive: () => boolean;

method isEnabled

isEnabled: () => boolean;

class DragRotateHandler

class DragRotateHandler {}

DragRotateHandler

constructor

constructor(
    map: Map,
    options?: {
        bearingSnap?: number | undefined;
        pitchWithRotate?: boolean | undefined;
    }
);

method disable

disable: () => void;

method enable

enable: () => void;

method isActive

isActive: () => boolean;

method isEnabled

isEnabled: () => boolean;

class ErrorEvent

class ErrorEvent extends MapboxEvent {}

property error

error: Error;

property type

type: string;

class Evented

class Evented {}

Evented

method fire

fire: (type: string, properties?: { [key: string]: any }) => this;

method off

off: (type?: string | any, listener?: EventedListener) => this;

method on

on: (type: string, listener: EventedListener) => this;

method once

once: (type: string, listener: EventedListener) => this;

class FreeCameraOptions

class FreeCameraOptions {}

Various options for accessing physical properties of the underlying camera entity. A direct access to these properties allows more flexible and precise controlling of the camera while also being fully compatible and interchangeable with CameraOptions. All fields are optional. See Camera#setFreeCameraOptions and Camera#getFreeCameraOptions
Parameter position
Position of the camera in slightly modified web mercator coordinates - The size of 1 unit is the width of the projected world instead of the "mercator meter". Coordinate [0, 0, 0] is the north-west corner and [1, 1, 0] is the south-east corner. - Z coordinate is conformal and must respect minimum and maximum zoom values. - Zoom is automatically computed from the altitude (z)
Parameter orientation
Orientation of the camera represented as a unit quaternion [x, y, z, w] in a left-handed coordinate space. Direction of the rotation is clockwise around the respective axis. The default pose of the camera is such that the forward vector is looking up the -Z axis and the up vector is aligned with north orientation of the map: forward: [0, 0, -1] up: [0, -1, 0] right [1, 0, 0] Orientation can be set freely but certain constraints still apply - Orientation must be representable with only pitch and bearing. - Pitch has an upper limit

constructor

constructor(position?: MercatorCoordinate, orientation?: quat);

property position

position: MercatorCoordinate;

method lookAtPoint

lookAtPoint: (location: LngLatLike, up?: vec3) => void;

Helper function for setting orientation of the camera by defining a focus point on the map.
Parameter location
Location of the focus point on the map
Parameter up
Up vector of the camera is required in certain scenarios where bearing can't be deduced from the viewing direction.

method setPitchBearing

setPitchBearing: (pitch: number, bearing: number) => void;

Helper function for setting the orientation of the camera as a pitch and a bearing.
Parameter pitch
Pitch angle in degrees
Parameter bearing
Bearing angle in degrees

class FullscreenControl

class FullscreenControl extends Control {}

FullscreenControl

constructor

constructor(options?: FullscreenControlOptions);

class GeoJSONSource

class GeoJSONSource implements GeoJSONSourceRaw {}

constructor

constructor(options?: GeoJSONSourceOptions);

property type

type: string;

method getClusterChildren

getClusterChildren: (
    clusterId: number,
    callback: (
        error: any,
        features: Array<GeoJSON.Feature<GeoJSON.Geometry>>
    ) => void
) => this;

method getClusterExpansionZoom

getClusterExpansionZoom: (
    clusterId: number,
    callback: (error: any, zoom: number) => void
) => this;

method getClusterLeaves

getClusterLeaves: (
    cluserId: number,
    limit: number,
    offset: number,
    callback: (
        error: any,
        features: Array<GeoJSON.Feature<GeoJSON.Geometry>>
    ) => void
) => this;

method setData

setData: (
    data:
        | GeoJSON.Feature<GeoJSON.Geometry>
        | GeoJSON.FeatureCollection<GeoJSON.Geometry>
        | String
) => this;

class GeolocateControl

class GeolocateControl extends Control {}

Geolocate

constructor

constructor(options?: {
    positionOptions?: PositionOptions;
    fitBoundsOptions?: FitBoundsOptions | undefined;
    trackUserLocation?: boolean | undefined;
    showAccuracyCircle?: boolean | undefined;
    showUserLocation?: boolean | undefined;
    showUserHeading?: boolean | undefined;
    geolocation?: Geolocation | undefined;
});

method trigger

trigger: () => boolean;

class ImageSource

class ImageSource implements ImageSourceRaw {}

constructor

constructor(options?: ImageSourceOptions);

property type

type: string;

method setCoordinates

setCoordinates: (coordinates: number[][]) => this;

method updateImage

updateImage: (options: ImageSourceOptions) => this;

class KeyboardHandler

class KeyboardHandler {}

KeyboardHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method disableRotation

disableRotation: () => void;

Disables the "keyboard pan/rotate" interaction, leaving the "keyboard zoom" interaction enabled.
Example 1
map.keyboard.disableRotation();

method enable

enable: () => void;

method enableRotation

enableRotation: () => void;

Enables the "keyboard pan/rotate" interaction.
Example 1
map.keyboard.enable(); map.keyboard.enableRotation();

method isActive

isActive: () => boolean;

Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
Returns
{boolean} true if the handler is enabled and has detected the start of a zoom/rotate gesture.

method isEnabled

isEnabled: () => boolean;

class LngLat

class LngLat {}

LngLat

constructor

constructor(lng: number, lat: number);

property lat

lat: number;

property lng

lng: number;

method convert

static convert: (input: LngLatLike) => LngLat;

method distanceTo

distanceTo: (lngLat: LngLat) => number;

Returns the approximate distance between a pair of coordinates in meters Uses the Haversine Formula (from R.W. Sinnott, "Virtues of the Haversine", Sky and Telescope, vol. 68, no. 2, 1984, p. 159)

method toArray

toArray: () => number[];

Return a LngLat as an array

method toBounds

toBounds: (radius: number) => LngLatBounds;

method toString

toString: () => string;

Return a LngLat as a string

method wrap

wrap: () => LngLat;

Return a new LngLat object whose longitude is wrapped to the range (-180, 180).

class LngLatBounds

class LngLatBounds {}

LngLatBounds

constructor

constructor(
    boundsLike?: [number, number, number, number] | [LngLatLike, LngLatLike]
);

constructor

constructor(sw: LngLatLike, ne: LngLatLike);

property ne

ne: LngLatLike;

property sw

sw: LngLatLike;

method contains

contains: (lnglat: LngLatLike) => boolean;

Check if the point is within the bounding box.

method convert

static convert: (input: LngLatBoundsLike) => LngLatBounds;

Convert an array to a LngLatBounds object, or return an existing LngLatBounds object unchanged.

method extend

extend: (obj: mapboxgl.LngLatLike | mapboxgl.LngLatBoundsLike) => this;

Extend the bounds to include a given LngLat or LngLatBounds.

method getCenter

getCenter: () => LngLat;

Get the point equidistant from this box's corners

method getEast

getEast: () => number;

Get east edge longitude

method getNorth

getNorth: () => number;

Get north edge latitude

method getNorthEast

getNorthEast: () => LngLat;

Get northeast corner

method getNorthWest

getNorthWest: () => LngLat;

Get northwest corner

method getSouth

getSouth: () => number;

Get south edge latitude

method getSouthEast

getSouthEast: () => LngLat;

Get southeast corner

method getSouthWest

getSouthWest: () => LngLat;

Get southwest corner

method getWest

getWest: () => number;

Get west edge longitude

method isEmpty

isEmpty: () => boolean;

Returns a boolean

method setNorthEast

setNorthEast: (ne: LngLatLike) => this;

method setSouthWest

setSouthWest: (sw: LngLatLike) => this;

method toArray

toArray: () => number[][];

Returns a LngLatBounds as an array

method toString

toString: () => string;

Return a LngLatBounds as a string

class Map

class Map extends Evented {}

constructor

constructor(options?: MapboxOptions);

property boxZoom

boxZoom: BoxZoomHandler;

property doubleClickZoom

doubleClickZoom: DoubleClickZoomHandler;

property dragPan

dragPan: DragPanHandler;

property dragRotate

dragRotate: DragRotateHandler;

property keyboard

keyboard: KeyboardHandler;

property repaint

repaint: boolean;

property scrollZoom

scrollZoom: ScrollZoomHandler;

property showCollisionBoxes

showCollisionBoxes: boolean;

property showPadding

showPadding: boolean;

Gets and sets a Boolean indicating whether the map will visualize the padding offsets.
showPadding Map

property showTerrainWireframe

showTerrainWireframe: boolean;

property showTileBoundaries

showTileBoundaries: boolean;

property touchPitch

touchPitch: TouchPitchHandler;

property touchZoomRotate

touchZoomRotate: TouchZoomRotateHandler;

method addControl

addControl: (
    control: Control | IControl,
    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
) => this;

method addImage

addImage: (
    name: string,
    image:
        | HTMLImageElement
        | ArrayBufferView
        | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }
        | ImageData
        | ImageBitmap,
    options?: {
        pixelRatio?: number | undefined;
        sdf?: boolean | undefined;
        stretchX?: Array<[number, number]> | undefined;
        stretchY?: Array<[number, number]> | undefined;
        content?: [number, number, number, number] | undefined;
    }
) => void;

method addLayer

addLayer: (layer: mapboxgl.AnyLayer, before?: string) => this;

method addSource

addSource: (id: string, source: AnySourceData) => this;

method areTilesLoaded

areTilesLoaded: () => boolean;

method cameraForBounds

cameraForBounds: (
    bounds: LngLatBoundsLike,
    options?: CameraForBoundsOptions
) => CameraForBoundsResult | undefined;

method easeTo

easeTo: (
    options: mapboxgl.EaseToOptions,
    eventData?: mapboxgl.EventData
) => this;

method fitBounds

fitBounds: (
    bounds: LngLatBoundsLike,
    options?: mapboxgl.FitBoundsOptions,
    eventData?: mapboxgl.EventData
) => this;

method fitScreenCoordinates

fitScreenCoordinates: (
    p0: PointLike,
    p1: PointLike,
    bearing: number,
    options?: AnimationOptions & CameraOptions,
    eventData?: EventData
) => this;

method flyTo

flyTo: (options: mapboxgl.FlyToOptions, eventData?: mapboxgl.EventData) => this;

method getBearing

getBearing: () => number;

method getBounds

getBounds: () => LngLatBounds;

method getCanvas

getCanvas: () => HTMLCanvasElement;

method getCanvasContainer

getCanvasContainer: () => HTMLElement;

method getCenter

getCenter: () => LngLat;

method getConfigProperty

getConfigProperty: (importId: string, configName: string) => any;

Returns the value of a configuration property in the imported style.
Parameter importId
The name of the imported style to set the config for (e.g. basemap).
Parameter configName
The name of the configuration property from the style.
Returns
{*} Returns the value of the configuration property.
Example 1
map.getConfigProperty('basemap', 'showLabels');

method getContainer

getContainer: () => HTMLElement;

method getFeatureState

getFeatureState: (
    feature: FeatureIdentifier | mapboxgl.MapboxGeoJSONFeature
) => { [key: string]: any };

method getFilter

getFilter: (layer: string) => any[];

method getFog

getFog: () => Fog | null;

method getFreeCameraOptions

getFreeCameraOptions: () => FreeCameraOptions;

Returns position and orientation of the camera entity.
Map#
Returns
{FreeCameraOptions} The camera state

method getLayer

getLayer: (id: string) => mapboxgl.AnyLayer;

method getLayoutProperty

getLayoutProperty: (layer: string, name: string) => any;

method getLight

getLight: () => mapboxgl.Light;

method getMaxBounds

getMaxBounds: () => LngLatBounds;

method getMaxPitch

getMaxPitch: () => number;

method getMaxZoom

getMaxZoom: () => number;

method getMinPitch

getMinPitch: () => number;

method getMinZoom

getMinZoom: () => number;

method getPadding

getPadding: () => PaddingOptions;

Returns the current padding applied around the map viewport.
Map#
Returns
The current padding around the map viewport.

method getPaintProperty

getPaintProperty: (layer: string, name: string) => any;

method getPitch

getPitch: () => number;

method getProjection

getProjection: () => Projection;

method getRenderWorldCopies

getRenderWorldCopies: () => boolean;

method getSource

getSource: (id: string) => AnySourceImpl;

method getStyle

getStyle: () => mapboxgl.Style;

method getTerrain

getTerrain: () => TerrainSpecification | null;

method getZoom

getZoom: () => number;

method hasControl

hasControl: (control: IControl) => boolean;

Checks if a control exists on the map.
Parameter control
The IControl to check.
Returns
{boolean} True if map contains control.
Example 1

method hasImage

hasImage: (name: string) => boolean;

method isEasing

isEasing: () => boolean;

method isMoving

isMoving: () => boolean;

method isRotating

isRotating: () => boolean;

method isSourceLoaded

isSourceLoaded: (id: string) => boolean;

method isStyleLoaded

isStyleLoaded: () => boolean;

method isZooming

isZooming: () => boolean;

method jumpTo

jumpTo: (
    options: mapboxgl.CameraOptions,
    eventData?: mapboxgl.EventData
) => this;

method listImages

listImages: () => string[];

method loaded

loaded: () => boolean;

method loadImage

loadImage: (
    url: string,
    callback: (error?: Error, result?: HTMLImageElement | ImageBitmap) => void
) => void;

method moveLayer

moveLayer: (id: string, beforeId?: string) => this;

method off

off: {
    <T extends keyof MapLayerEventType>(
        type: T,
        layer: string | readonly string[],
        listener: (ev: MapLayerEventType[T] & EventData) => void
    ): this;
    <T extends keyof MapEventType>(
        type: T,
        listener: (ev: MapEventType[T] & EventData) => void
    ): this;
    (type: string, listener: (ev: any) => void): this;
};

method on

on: {
    <T extends keyof MapLayerEventType>(
        type: T,
        layer: string | readonly string[],
        listener: (ev: MapLayerEventType[T] & EventData) => void
    ): this;
    <T extends keyof MapEventType>(
        type: T,
        listener: (ev: MapEventType[T] & EventData) => void
    ): this;
    (type: string, listener: (ev: any) => void): this;
};

method once

once: {
    <T extends keyof MapLayerEventType>(
        type: T,
        layer: string | readonly string[],
        listener: (ev: MapLayerEventType[T] & EventData) => void
    ): this;
    <T extends keyof MapEventType>(
        type: T,
        listener: (ev: MapEventType[T] & EventData) => void
    ): this;
    (type: string, listener: (ev: any) => void): this;
    <T extends keyof MapEventType>(type: T): Promise<MapEventType[T]>;
};

method panBy

panBy: (
    offset: PointLike,
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

method panTo

panTo: (
    lnglat: LngLatLike,
    options?: mapboxgl.AnimationOptions,
    eventdata?: mapboxgl.EventData
) => this;

method project

project: (lnglat: LngLatLike) => Point;

method queryRenderedFeatures

queryRenderedFeatures: (
    pointOrBox?: PointLike | [PointLike, PointLike],
    options?: {
        layers?: string[] | undefined;
        filter?: any[] | undefined;
    } & FilterOptions
) => MapboxGeoJSONFeature[];

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.
The properties value of each returned feature object contains the properties of its source feature. For GeoJSON sources, only string and numeric property values are supported (i.e. null, Array, and Object values are not supported).
Each feature includes top-level layer, source, and sourceLayer properties. The layer property is an object representing the style layer to which the feature belongs. Layout and paint properties in this object contain values which are fully evaluated for the given zoom level and feature.
Only features that are currently rendered are included. Some features will not be included, like:
- Features from layers whose visibility property is "none". - Features from layers whose zoom range excludes the current zoom level. - Symbol features that have been hidden due to text or icon collision.
Features from all other layers are included, including features that may have no visible contribution to the rendered result; for example, because the layer's opacity or color alpha component is set to 0.
The topmost rendered feature appears first in the returned array, and subsequent features are sorted by descending z-order. Features that are rendered multiple times (due to wrapping across the antimeridian at low zoom levels) are returned only once (though subject to the following caveat).
Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.
Parameter pointOrBox
The geometry of the query region: either a single point or southwest and northeast points describing a bounding box. Omitting this parameter (i.e. calling Map#queryRenderedFeatures with zero arguments, or with only a options argument) is equivalent to passing a bounding box encompassing the entire map viewport.
Parameter options

method querySourceFeatures

querySourceFeatures: (
    sourceID: string,
    parameters?: {
        sourceLayer?: string | undefined;
        filter?: any[] | undefined;
    } & FilterOptions
) => MapboxGeoJSONFeature[];

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.
In contrast to Map#queryRenderedFeatures, this function returns all features matching the query parameters, whether or not they are rendered by the current style (i.e. visible). The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles: this function does not check tiles outside the currently visible viewport.
Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.
Parameter sourceID
The ID of the vector tile or GeoJSON source to query.
Parameter parameters

method queryTerrainElevation

queryTerrainElevation: (
    lngLat: mapboxgl.LngLatLike,
    options?: ElevationQueryOptions
) => number | null;

Parameter lngLat
The coordinate to query
Parameter options
Optional {ElevationQueryOptions}
Returns
The elevation in meters at mean sea level or null

method remove

remove: () => void;

method removeControl

removeControl: (control: Control | IControl) => this;

method removeFeatureState

removeFeatureState: (
    target: FeatureIdentifier | mapboxgl.MapboxGeoJSONFeature,
    key?: string
) => void;

method removeImage

removeImage: (name: string) => void;

method removeLayer

removeLayer: (id: string) => this;

method removeSource

removeSource: (id: string) => this;

method resetNorth

resetNorth: (
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

method resetNorthPitch

resetNorthPitch: (
    options?: mapboxgl.AnimationOptions | null,
    eventData?: mapboxgl.EventData | null
) => this;

method resize

resize: (eventData?: EventData) => this;

method rotateTo

rotateTo: (
    bearing: number,
    options?: AnimationOptions & CameraOptions,
    eventData?: EventData
) => this;

method setBearing

setBearing: (bearing: number, eventData?: mapboxgl.EventData) => this;

method setCenter

setCenter: (center: LngLatLike, eventData?: mapboxgl.EventData) => this;

method setConfigProperty

setConfigProperty: (importId: string, configName: string, value: any) => this;

Sets the value of a configuration property in the currently set style.
Parameter importId
The name of the imported style to set the config for (e.g. basemap).
Parameter configName
The name of the configuration property from the style.
Parameter value
The value of the configuration property. Must be of a type appropriate for the property, as defined by the style configuration schema.
Returns
{Map} Returns itself to allow for method chaining.
Example 1
map.setConfigProperty('basemap', 'showLabels', false);

method setFeatureState

setFeatureState: (
    feature: FeatureIdentifier | mapboxgl.MapboxGeoJSONFeature,
    state: { [key: string]: any }
) => void;

method setFilter

setFilter: (
    layer: string,
    filter?: any[] | boolean | null,
    options?: FilterOptions | null
) => this;

method setFog

setFog: (fog: Fog | null | undefined) => this;

Parameter fog
If null or undefined is provided, function removes fog from the map.

method setFreeCameraOptions

setFreeCameraOptions: (options: FreeCameraOptions, eventData?: Object) => this;

FreeCameraOptions provides more direct access to the underlying camera entity. For backwards compatibility the state set using this API must be representable with CameraOptions as well. Parameters are clamped into a valid range or discarded as invalid if the conversion to the pitch and bearing presentation is ambiguous. For example orientation can be invalid if it leads to the camera being upside down, the quaternion has zero length, or the pitch is over the maximum pitch limit.
Map#
Parameter options
FreeCameraOptions object
Parameter eventData
Additional properties to be added to event objects of events triggered by this method. movestart zoomstart pitchstart rotate move zoom pitch moveend zoomend pitchend
Returns
{Map} this

method setLayerZoomRange

setLayerZoomRange: (layerId: string, minzoom: number, maxzoom: number) => this;

method setLayoutProperty

setLayoutProperty: (
    layer: string,
    name: string,
    value: any,
    options?: FilterOptions
) => this;

method setLight

setLight: (light: mapboxgl.Light, options?: FilterOptions) => this;

method setMaxBounds

setMaxBounds: (lnglatbounds?: LngLatBoundsLike) => this;

method setMaxPitch

setMaxPitch: (maxPitch?: number | null) => this;

method setMaxZoom

setMaxZoom: (maxZoom?: number | null) => this;

method setMinPitch

setMinPitch: (minPitch?: number | null) => this;

method setMinZoom

setMinZoom: (minZoom?: number | null) => this;

method setPadding

setPadding: (padding: PaddingOptions, eventData?: EventData) => this;

Sets the padding in pixels around the viewport.
Equivalent to jumpTo({padding: padding}).
Map#
Parameter padding
The desired padding. Format: { left: number, right: number, top: number, bottom: number }
Parameter eventData
Additional properties to be added to event objects of events triggered by this method. movestart moveend
Returns
{Map} this
Example 1
// Sets a left padding of 300px, and a top padding of 50px map.setPadding({ left: 300, top: 50 });

method setPaintProperty

setPaintProperty: (
    layer: string,
    name: string,
    value: any,
    options?: FilterOptions
) => this;

method setPitch

setPitch: (pitch: number, eventData?: EventData) => this;

method setProjection

setProjection: (projection: Projection | string) => this;

method setRenderWorldCopies

setRenderWorldCopies: (renderWorldCopies?: boolean) => this;

method setStyle

setStyle: (
    style: mapboxgl.Style | string,
    options?: {
        diff?: boolean | undefined;
        localIdeographFontFamily?: string | undefined;
    }
) => this;

method setTerrain

setTerrain: (terrain?: TerrainSpecification | null) => this;

Sets the terrain property of the style.
Parameter terrain
Terrain properties to set. Must conform to the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#terrain). If null or undefined is provided, function removes terrain.
Returns
{Map} this
Example 1
map.addSource('mapbox-dem', { 'type': 'raster-dem', 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1', 'tileSize': 512, 'maxzoom': 14 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

method setZoom

setZoom: (zoom: number, eventData?: mapboxgl.EventData) => this;

method snapToNorth

snapToNorth: (
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

method stop

stop: () => this;

method triggerRepaint

triggerRepaint: () => void;

method unproject

unproject: (point: PointLike) => LngLat;

method updateImage

updateImage: (
    name: string,
    image:
        | HTMLImageElement
        | ArrayBufferView
        | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }
        | ImageData
        | ImageBitmap
) => void;

method zoomIn

zoomIn: (
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

method zoomOut

zoomOut: (
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

method zoomTo

zoomTo: (
    zoom: number,
    options?: mapboxgl.AnimationOptions,
    eventData?: mapboxgl.EventData
) => this;

class MapboxEvent

class MapboxEvent<TOrig = undefined> {}

property originalEvent

originalEvent: {};

property target

target: Map;

property type

type: string;

class MapMouseEvent

class MapMouseEvent extends MapboxEvent<MouseEvent> {}

property defaultPrevented

defaultPrevented: boolean;

property lngLat

lngLat: LngLat;

property point

point: Point;

property type

type:
    | 'click'
    | 'dblclick'
    | 'mousedown'
    | 'mouseup'
    | 'mousemove'
    | 'mouseenter'
    | 'mouseleave'
    | 'mouseover'
    | 'mouseout'
    | 'contextmenu';

method preventDefault

preventDefault: () => void;

class MapTouchEvent

class MapTouchEvent extends MapboxEvent<TouchEvent> {}

property defaultPrevented

defaultPrevented: boolean;

property lngLat

lngLat: LngLat;

property lngLats

lngLats: LngLat[];

property point

point: Point;

property points

points: Point[];

property type

type: 'touchstart' | 'touchend' | 'touchcancel';

method preventDefault

preventDefault: () => void;

class MapWheelEvent

class MapWheelEvent extends MapboxEvent<WheelEvent> {}

property defaultPrevented

defaultPrevented: boolean;

property type

type: string;

method preventDefault

preventDefault: () => void;

class Marker

class Marker extends Evented {}

Marker

constructor

constructor(options?: MarkerOptions);

constructor

constructor(element?: HTMLElement, options?: MarkerOptions);

method addTo

addTo: (map: Map) => this;

method getElement

getElement: () => HTMLElement;

method getLngLat

getLngLat: () => LngLat;

method getOccludedOpacity

getOccludedOpacity: () => number;

method getOffset

getOffset: () => PointLike;

method getPitchAlignment

getPitchAlignment: () => Alignment;

method getPopup

getPopup: () => Popup;

method getRotation

getRotation: () => number;

method getRotationAlignment

getRotationAlignment: () => Alignment;

method isDraggable

isDraggable: () => boolean;

method remove

remove: () => this;

method setDraggable

setDraggable: (shouldBeDraggable: boolean) => this;

method setLngLat

setLngLat: (lngLat: LngLatLike) => this;

method setOccludedOpacity

setOccludedOpacity: (opacity: number) => this;

method setOffset

setOffset: (offset: PointLike) => this;

method setPitchAlignment

setPitchAlignment: (alignment: Alignment) => this;

method setPopup

setPopup: (popup?: Popup) => this;

method setRotation

setRotation: (rotation: number) => this;

method setRotationAlignment

setRotationAlignment: (alignment: Alignment) => this;

method togglePopup

togglePopup: () => this;

class MercatorCoordinate

class MercatorCoordinate {}

MercatorCoordinate

constructor

constructor(x: number, y: number, z?: number);

property x

x: number;

The x component of the position.

property y

y: number;

The y component of the position.

property z

z?: number;

The z component of the position.
0

method fromLngLat

static fromLngLat: (
    lngLatLike: LngLatLike,
    altitude?: number
) => MercatorCoordinate;

Project a LngLat to a MercatorCoordinate.

method meterInMercatorCoordinateUnits

meterInMercatorCoordinateUnits: () => number;

Returns the distance of 1 meter in MercatorCoordinate units at this latitude.
For coordinates in real world units using meters, this naturally provides the scale to transform into MercatorCoordinates.

method toAltitude

toAltitude: () => number;

Returns the altitude in meters of the coordinate.

method toLngLat

toLngLat: () => LngLat;

Returns the LngLat for the coordinate.

class NavigationControl

class NavigationControl extends Control {}

Navigation

constructor

constructor(options?: {
    showCompass?: boolean | undefined;
    showZoom?: boolean | undefined;
    visualizePitch?: boolean | undefined;
});

class Point

class Point {}

Point

constructor

constructor(x: number, y: number);

property x

x: number;

property y

y: number;

method add

add: (p: Point) => Point;

method angle

angle: () => number;

method angleTo

angleTo: (p: Point) => number;

method angleWidth

angleWidth: (p: Point) => number;

method angleWithSep

angleWithSep: (x: number, y: number) => number;

method clone

clone: () => Point;

method convert

static convert: (a: PointLike) => Point;

method dist

dist: (p: Point) => number;

method distSqr

distSqr: (p: Point) => number;

method div

div: (k: number) => Point;

method equals

equals: (p: Point) => boolean;

method mag

mag: () => number;

method matMult

matMult: (m: number) => Point;

method mult

mult: (k: number) => Point;

method perp

perp: () => Point;

method rotate

rotate: (a: number) => Point;

method round

round: () => Point;

method sub

sub: (p: Point) => Point;

method unit

unit: () => Point;

class Popup extends Evented {}

Popup

constructor(options?: PopupOptions);

addClassName: (className: string) => void;

Adds a CSS class to the popup container element.
Parameter className
Non-empty string with CSS class name to add to popup container
Example 1
let popup = new mapboxgl.Popup() popup.addClassName('some-class')

addTo: (map: Map) => this;

getElement: () => HTMLElement;

Returns the Popup's HTML element.

getLngLat: () => LngLat;

getMaxWidth: () => string;

isOpen: () => boolean;

remove: () => this;

removeClassName: (className: string) => void;

Removes a CSS class from the popup container element.
Parameter className
Non-empty string with CSS class name to remove from popup container
Example 1
let popup = new mapboxgl.Popup() popup.removeClassName('some-class')

setDOMContent: (htmlNode: Node) => this;

setHTML: (html: string) => this;

setLngLat: (lnglat: LngLatLike) => this;

Sets the geographical location of the popup's anchor, and moves the popup to it. Replaces trackPointer() behavior.
Parameter lnglat
The geographical location to set as the popup's anchor.

setMaxWidth: (maxWidth: string) => this;

setOffset: (offset?: Offset | null) => this;

Sets the popup's offset.
Parameter offset
Sets the popup's offset.
Returns
{Popup} this

setText: (text: string) => this;

toggleClassName: (className: string) => void;

Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
Parameter className
Non-empty string with CSS class name to add/remove
Returns
{boolean} if the class was removed return false, if class was added, then return true
Example 1
let popup = new mapboxgl.Popup() popup.toggleClassName('toggleClass')

trackPointer: () => this;

Tracks the popup anchor to the cursor position, on screens with a pointer device (will be hidden on touchscreens). Replaces the setLngLat behavior. For most use cases, closeOnClick and closeButton should also be set to false here.

class PositionOptions

class PositionOptions {}

property enableHighAccuracy

enableHighAccuracy?: boolean;

property maximumAge

maximumAge?: number;

property timeout

timeout?: number;

class ScaleControl

class ScaleControl extends Control {}

Scale

constructor

constructor(options?: {
    maxWidth?: number | undefined;
    unit?: string | undefined;
});

method setUnit

setUnit: (unit: 'imperial' | 'metric' | 'nautical') => void;

class ScrollZoomHandler

class ScrollZoomHandler {}

ScrollZoomHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method enable

enable: (options?: InteractiveOptions) => void;

method isEnabled

isEnabled: () => boolean;

method setWheelZoomRate

setWheelZoomRate: (wheelZoomRate: number) => void;

method setZoomRate

setZoomRate: (zoomRate: number) => void;

class TouchPitchHandler

class TouchPitchHandler {}

constructor

constructor(map: Map);

method disable

disable: () => void;

method enable

enable: (options?: InteractiveOptions) => void;

method isActive

isActive: () => boolean;

method isEnabled

isEnabled: () => boolean;

class TouchZoomRotateHandler

class TouchZoomRotateHandler {}

TouchZoomRotateHandler

constructor

constructor(map: Map);

method disable

disable: () => void;

method disableRotation

disableRotation: () => void;

method enable

enable: (options?: InteractiveOptions) => void;

method enableRotation

enableRotation: () => void;

method isEnabled

isEnabled: () => boolean;

class VideoSource

class VideoSource implements VideoSourceRaw {}

constructor

constructor(options?: VideoSourceOptions);

property type

type: string;

method getVideo

getVideo: () => HTMLVideoElement;

method setCoordinates

setCoordinates: (coordinates: number[][]) => this;

Interfaces

interface AnimationOptions

interface AnimationOptions {}

AnimationOptions

property animate

animate?: boolean | undefined;

When set to false, no animation happens

property duration

duration?: number | undefined;

Number in milliseconds

property easing

easing?: ((time: number) => number) | undefined;

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.

property essential

essential?: boolean | undefined;

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.

property offset

offset?: PointLike | undefined;

point, origin of movement relative to map center

interface BackgroundLayer

interface BackgroundLayer extends Layer {}

property layout

layout?: BackgroundLayout | undefined;

property paint

paint?: BackgroundPaint | undefined;

property type

type: 'background';

interface BackgroundLayout

interface BackgroundLayout extends Layout {}

interface BackgroundPaint

interface BackgroundPaint {}

property "background-color-transition"

'background-color-transition'?: Transition | undefined;

property "background-color"

'background-color'?: string | Expression | undefined;

property "background-emissive-strength"

'background-emissive-strength'?: number | Expression | undefined;

property "background-opacity-transition"

'background-opacity-transition'?: Transition | undefined;

property "background-opacity"

'background-opacity'?: number | Expression | undefined;

property "background-pattern-transition"

'background-pattern-transition'?: Transition | undefined;

property "background-pattern"

'background-pattern'?: string | undefined;

interface CameraForBoundsOptions

interface CameraForBoundsOptions extends CameraOptions {}

property maxZoom

maxZoom?: number | undefined;

property offset

offset?: PointLike | undefined;

interface CameraOptions

interface CameraOptions {}

CameraOptions

property around

around?: LngLatLike | undefined;

If zooming, the zoom center (defaults to map center)

property bearing

bearing?: number | undefined;

Map rotation bearing in degrees counter-clockwise from north

property center

center?: LngLatLike | undefined;

Map center

property padding

padding?: number | PaddingOptions | undefined;

Dimensions in pixels applied on each side of the viewport for shifting the vanishing point.

property pitch

pitch?: number | undefined;

Map angle in degrees at which the camera is looking at the ground

property zoom

zoom?: number | undefined;

Map zoom level

interface CanonicalCoordinate

interface CanonicalCoordinate {}

property key

key: number;

property x

x: number;

property y

y: number;

property z

z: number;

method equals

equals: (coord: CanonicalCoordinate) => boolean;

interface CanvasSourceOptions

interface CanvasSourceOptions {}

property animate

animate?: boolean | undefined;

property canvas

canvas: string | HTMLCanvasElement;

property coordinates

coordinates: number[][];

interface CanvasSourceRaw

interface CanvasSourceRaw extends Source, CanvasSourceOptions {}

CanvasSource

property type

type: 'canvas';

interface CircleLayer

interface CircleLayer extends Layer {}

property layout

layout?: CircleLayout | undefined;

property paint

paint?: CirclePaint | undefined;

property type

type: 'circle';

interface CircleLayout

interface CircleLayout extends Layout {}

property "circle-sort-key"

'circle-sort-key'?: number | Expression | undefined;

interface CirclePaint

interface CirclePaint {}

property "circle-blur-transition"

'circle-blur-transition'?: Transition | undefined;

property "circle-blur"

'circle-blur'?: number | StyleFunction | Expression | undefined;

property "circle-color-transition"

'circle-color-transition'?: Transition | undefined;

property "circle-color"

'circle-color'?: string | StyleFunction | Expression | undefined;

property "circle-emissive-strength"

'circle-emissive-strength'?: number | StyleFunction | Expression | undefined;

property "circle-opacity-transition"

'circle-opacity-transition'?: Transition | undefined;

property "circle-opacity"

'circle-opacity'?: number | StyleFunction | Expression | undefined;

property "circle-pitch-alignment"

'circle-pitch-alignment'?: 'map' | 'viewport' | undefined;

property "circle-pitch-scale"

'circle-pitch-scale'?: 'map' | 'viewport' | undefined;

property "circle-radius-transition"

'circle-radius-transition'?: Transition | undefined;

property "circle-radius"

'circle-radius'?: number | StyleFunction | Expression | undefined;

property "circle-stroke-color-transition"

'circle-stroke-color-transition'?: Transition | undefined;

property "circle-stroke-color"

'circle-stroke-color'?: string | StyleFunction | Expression | undefined;

property "circle-stroke-opacity-transition"

'circle-stroke-opacity-transition'?: Transition | undefined;

property "circle-stroke-opacity"

'circle-stroke-opacity'?: number | StyleFunction | Expression | undefined;

property "circle-stroke-width-transition"

'circle-stroke-width-transition'?: Transition | undefined;

property "circle-stroke-width"

'circle-stroke-width'?: number | StyleFunction | Expression | undefined;

property "circle-translate-anchor"

'circle-translate-anchor'?: 'map' | 'viewport' | undefined;

property "circle-translate-transition"

'circle-translate-transition'?: Transition | undefined;

property "circle-translate"

'circle-translate'?: number[] | Expression | undefined;

interface Coordinate

interface Coordinate {}

property canonical

canonical: CanonicalCoordinate;

property key

key: number;

property wrap

wrap: number;

interface CustomLayerInterface

interface CustomLayerInterface {}

property id

id: string;

A unique layer id.

property renderingMode

renderingMode?: '2d' | '3d' | undefined;

property type

type: 'custom';

method onAdd

onAdd: (map: Map, gl: WebGLRenderingContext) => void;

Optional method called when the layer has been added to the Map with Map#addLayer. This gives the layer a chance to initialize gl resources and register event listeners.
Parameter map
The Map this custom layer was just added to.
Parameter gl
The gl context for the map.

method onRemove

onRemove: (map: Map, gl: WebGLRenderingContext) => void;

Optional method called when the layer has been removed from the Map with Map#removeLayer. This gives the layer a chance to clean up gl resources and event listeners.
Parameter map
The Map this custom layer was just added to.
Parameter gl
The gl context for the map.

method prerender

prerender: (gl: WebGLRenderingContext, matrix: number[]) => void;

Optional method called during a render frame to allow a layer to prepare resources or render into a texture.
The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.
Parameter gl
The map's gl context.
Parameter matrix
The map's camera matrix. It projects spherical mercator coordinates to gl coordinates. The mercator coordinate [0, 0] represents the top left corner of the mercator world and [1, 1] represents the bottom right corner. When the renderingMode is "3d" , the z coordinate is conformal. A box with identical x, y, and z lengths in mercator units would be rendered as a cube. MercatorCoordinate .fromLatLng can be used to project a LngLat to a mercator coordinate.

method render

render: (gl: WebGLRenderingContext, matrix: number[]) => void;

Called during a render frame allowing the layer to draw into the GL context.
The layer can assume blending and depth state is set to allow the layer to properly blend and clip other layers. The layer cannot make any other assumptions about the current GL state.
If the layer needs to render to a texture, it should implement the prerender method to do this and only use the render method for drawing directly into the main framebuffer.
The blend function is set to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA). This expects colors to be provided in premultiplied alpha form where the r, g and b values are already multiplied by the a value. If you are unable to provide colors in premultiplied form you may want to change the blend function to gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA).
Parameter gl
The map's gl context.
Parameter matrix
The map's camera matrix. It projects spherical mercator coordinates to gl coordinates. The mercator coordinate [0, 0] represents the top left corner of the mercator world and [1, 1] represents the bottom right corner. When the renderingMode is "3d" , the z coordinate is conformal. A box with identical x, y, and z lengths in mercator units would be rendered as a cube. MercatorCoordinate .fromLatLng can be used to project a LngLat to a mercator coordinate.

interface CustomSource

interface CustomSource<T> extends Source {}

property attribution

attribution: string;

property id

id: string;

property maxzoom

maxzoom: number;

property minzoom

minzoom: number;

property scheme

scheme: string;

property tileSize

tileSize: number;

property type

type: 'custom';

interface CustomSourceInterface

interface CustomSourceInterface<T> {}

property attribution

attribution?: string;

property bounds

bounds?: [number, number, number, number];

property dataType

dataType: 'raster';

property hasTile

hasTile?: (tileID: { z: number; x: number; y: number }) => boolean;

property id

id: string;

property loadTile

loadTile: (
    tileID: { z: number; x: number; y: number },
    options: { signal: AbortSignal }
) => Promise<T>;

property maxzoom

maxzoom?: number;

property minzoom

minzoom?: number;

property onAdd

onAdd?: (map: Map) => void;

property onRemove

onRemove?: (map: Map) => void;

property prepareTile

prepareTile?: (tileID: { z: number; x: number; y: number }) => T | undefined;

property scheme

scheme?: string;

property tileSize

tileSize?: number;

property type

type: 'custom';

property unloadTile

unloadTile?: (tileID: { z: number; x: number; y: number }) => void;

interface EaseToOptions

interface EaseToOptions extends AnimationOptions, CameraOptions {}

EaseToOptions

property delayEndEvents

delayEndEvents?: number | undefined;

interface FeatureIdentifier

interface FeatureIdentifier {}

property id

id?: string | number | undefined;

property source

source: string;

property sourceLayer

sourceLayer?: string | undefined;

interface FillExtrusionLayer

interface FillExtrusionLayer extends Layer {}

property layout

layout?: FillExtrusionLayout | undefined;

property paint

paint?: FillExtrusionPaint | undefined;

property type

type: 'fill-extrusion';

interface FillExtrusionLayout

interface FillExtrusionLayout extends Layout {}

interface FillExtrusionPaint

interface FillExtrusionPaint {}

property "fill-extrusion-base-transition"

'fill-extrusion-base-transition'?: Transition | undefined;

property "fill-extrusion-base"

'fill-extrusion-base'?: number | StyleFunction | Expression | undefined;

property "fill-extrusion-color-transition"

'fill-extrusion-color-transition'?: Transition | undefined;

property "fill-extrusion-color"

'fill-extrusion-color'?: string | StyleFunction | Expression | undefined;

property "fill-extrusion-height-transition"

'fill-extrusion-height-transition'?: Transition | undefined;

property "fill-extrusion-height"

'fill-extrusion-height'?: number | StyleFunction | Expression | undefined;

property "fill-extrusion-opacity-transition"

'fill-extrusion-opacity-transition'?: Transition | undefined;

property "fill-extrusion-opacity"

'fill-extrusion-opacity'?: number | Expression | undefined;

property "fill-extrusion-pattern-transition"

'fill-extrusion-pattern-transition'?: Transition | undefined;

property "fill-extrusion-pattern"

'fill-extrusion-pattern'?: string | Expression | undefined;

property "fill-extrusion-translate-anchor"

'fill-extrusion-translate-anchor'?: 'map' | 'viewport' | undefined;

property "fill-extrusion-translate-transition"

'fill-extrusion-translate-transition'?: Transition | undefined;

property "fill-extrusion-translate"

'fill-extrusion-translate'?: number[] | Expression | undefined;

property "fill-extrusion-vertical-gradient"

'fill-extrusion-vertical-gradient'?: boolean | undefined;

interface FillLayer

interface FillLayer extends Layer {}

property layout

layout?: FillLayout | undefined;

property paint

paint?: FillPaint | undefined;

property type

type: 'fill';

interface FillLayout

interface FillLayout extends Layout {}

property "fill-sort-key"

'fill-sort-key'?: number | Expression | undefined;

interface FillPaint

interface FillPaint {}

property "fill-antialias"

'fill-antialias'?: boolean | Expression | undefined;

property "fill-color-transition"

'fill-color-transition'?: Transition | undefined;

property "fill-color"

'fill-color'?: string | StyleFunction | Expression | undefined;

property "fill-emissive-strength"

'fill-emissive-strength'?: number | Expression | undefined;

property "fill-extrusion-ambient-occlusion-ground-attenuation"

'fill-extrusion-ambient-occlusion-ground-attenuation'?:
    | number
    | Expression
    | undefined;

property "fill-extrusion-ambient-occlusion-ground-radius"

'fill-extrusion-ambient-occlusion-ground-radius'?:
    | number
    | Expression
    | undefined;

property "fill-extrusion-ambient-occlusion-wall-radius"

'fill-extrusion-ambient-occlusion-wall-radius'?: number | Expression | undefined;

property "fill-extrusion-flood-light-color"

'fill-extrusion-flood-light-color'?:
    | string
    | StyleFunction
    | Expression
    | undefined;

property "fill-extrusion-flood-light-ground-attenuation"

'fill-extrusion-flood-light-ground-attenuation'?:
    | number
    | Expression
    | undefined;

property "fill-extrusion-flood-light-ground-radius"

'fill-extrusion-flood-light-ground-radius'?: number | Expression | undefined;

property "fill-extrusion-flood-light-intensity"

'fill-extrusion-flood-light-intensity'?: number | Expression | undefined;

property "fill-extrusion-flood-light-wall-radius"

'fill-extrusion-flood-light-wall-radius'?: number | Expression | undefined;

property "fill-extrusion-vertical-scale"

'fill-extrusion-vertical-scale'?: number | Expression | undefined;

property "fill-opacity-transition"

'fill-opacity-transition'?: Transition | undefined;

property "fill-opacity"

'fill-opacity'?: number | StyleFunction | Expression | undefined;

property "fill-outline-color-transition"

'fill-outline-color-transition'?: Transition | undefined;

property "fill-outline-color"

'fill-outline-color'?: string | StyleFunction | Expression | undefined;

property "fill-pattern-transition"

'fill-pattern-transition'?: Transition | undefined;

property "fill-pattern"

'fill-pattern'?: string | Expression | undefined;

property "fill-translate-anchor"

'fill-translate-anchor'?: 'map' | 'viewport' | undefined;

property "fill-translate-transition"

'fill-translate-transition'?: Transition | undefined;

property "fill-translate"

'fill-translate'?: number[] | undefined;

interface FilterOptions {}

FilterOptions

validate?: boolean | null | undefined;

Whether to check if the filter conforms to the Mapbox GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.

interface FitBoundsOptions

interface FitBoundsOptions extends mapboxgl.FlyToOptions {}

property linear

linear?: boolean | undefined;

property maxDuration

maxDuration?: number | undefined;

property maxZoom

maxZoom?: number | undefined;

property offset

offset?: mapboxgl.PointLike | undefined;

interface FlyToOptions

interface FlyToOptions extends AnimationOptions, CameraOptions {}

FlyToOptions

property curve

curve?: number | undefined;

property maxDuration

maxDuration?: number | undefined;

property minZoom

minZoom?: number | undefined;

property screenSpeed

screenSpeed?: number | undefined;

property speed

speed?: number | undefined;

interface Fog

interface Fog {}

property "high-color"

'high-color'?: string | Expression | undefined;

property "horizon-blend"

'horizon-blend'?: number | Expression | undefined;

property "space-color"

'space-color'?: string | Expression | undefined;

property "star-intensity"

'star-intensity'?: number | Expression | undefined;

property color

color?: string | Expression | undefined;

property range

range?: number[] | Expression | undefined;

interface FullscreenControlOptions

interface FullscreenControlOptions {}

property container

container?: HTMLElement | null | undefined;

A compatible DOM element which should be made full screen. By default, the map container element will be made full screen.

interface GeoJSONSourceOptions

interface GeoJSONSourceOptions {}

property attribution

attribution?: string | undefined;

property buffer

buffer?: number | undefined;

property cluster

cluster?: number | boolean | undefined;

property clusterMaxZoom

clusterMaxZoom?: number | undefined;

property clusterMinPoints

clusterMinPoints?: number | undefined;

Minimum number of points necessary to form a cluster if clustering is enabled. Defaults to 2.

property clusterProperties

clusterProperties?: object | undefined;

property clusterRadius

clusterRadius?: number | undefined;

property data

data?:
    | GeoJSON.Feature<GeoJSON.Geometry>
    | GeoJSON.FeatureCollection<GeoJSON.Geometry>
    | GeoJSON.Geometry
    | string
    | undefined;

property filter

filter?: any;

property generateId

generateId?: boolean | undefined;

property lineMetrics

lineMetrics?: boolean | undefined;

property maxzoom

maxzoom?: number | undefined;

property promoteId

promoteId?: PromoteIdSpecification | undefined;

property tolerance

tolerance?: number | undefined;

interface GeoJSONSourceRaw

interface GeoJSONSourceRaw extends Source, GeoJSONSourceOptions {}

GeoJSONSource

property type

type: 'geojson';

interface HeatmapLayer

interface HeatmapLayer extends Layer {}

property layout

layout?: HeatmapLayout | undefined;

property paint

paint?: HeatmapPaint | undefined;

property type

type: 'heatmap';

interface HeatmapLayout

interface HeatmapLayout extends Layout {}

interface HeatmapPaint

interface HeatmapPaint {}

property "heatmap-color"

'heatmap-color'?: string | StyleFunction | Expression | undefined;

property "heatmap-intensity-transition"

'heatmap-intensity-transition'?: Transition | undefined;

property "heatmap-intensity"

'heatmap-intensity'?: number | StyleFunction | Expression | undefined;

property "heatmap-opacity-transition"

'heatmap-opacity-transition'?: Transition | undefined;

property "heatmap-opacity"

'heatmap-opacity'?: number | StyleFunction | Expression | undefined;

property "heatmap-radius-transition"

'heatmap-radius-transition'?: Transition | undefined;

property "heatmap-radius"

'heatmap-radius'?: number | StyleFunction | Expression | undefined;

property "heatmap-weight"

'heatmap-weight'?: number | StyleFunction | Expression | undefined;

interface HillshadeLayer

interface HillshadeLayer extends Layer {}

property layout

layout?: HillshadeLayout | undefined;

property paint

paint?: HillshadePaint | undefined;

property type

type: 'hillshade';

interface HillshadeLayout

interface HillshadeLayout extends Layout {}

interface HillshadePaint

interface HillshadePaint {}

property "hillshade-accent-color-transition"

'hillshade-accent-color-transition'?: Transition | undefined;

property "hillshade-accent-color"

'hillshade-accent-color'?: string | Expression | undefined;

property "hillshade-exaggeration-transition"

'hillshade-exaggeration-transition'?: Transition | undefined;

property "hillshade-exaggeration"

'hillshade-exaggeration'?: number | Expression | undefined;

property "hillshade-highlight-color-transition"

'hillshade-highlight-color-transition'?: Transition | undefined;

property "hillshade-highlight-color"

'hillshade-highlight-color'?: string | Expression | undefined;

property "hillshade-illumination-anchor"

'hillshade-illumination-anchor'?: 'map' | 'viewport' | undefined;

property "hillshade-illumination-direction"

'hillshade-illumination-direction'?: number | Expression | undefined;

property "hillshade-shadow-color-transition"

'hillshade-shadow-color-transition'?: Transition | undefined;

property "hillshade-shadow-color"

'hillshade-shadow-color'?: string | Expression | undefined;

interface IControl

interface IControl {}

property getDefaultPosition

getDefaultPosition?: (() => string) | undefined;

method onAdd

onAdd: (map: Map) => HTMLElement;

method onRemove

onRemove: (map: Map) => void;

interface ImageSourceOptions

interface ImageSourceOptions {}

property coordinates

coordinates?: number[][] | undefined;

property url

url?: string | undefined;

interface ImageSourceRaw

interface ImageSourceRaw extends Source, ImageSourceOptions {}

ImageSource

property type

type: 'image';

interface Layer

interface Layer {}

property "source-layer"

'source-layer'?: string | undefined;

property filter

filter?: any[] | undefined;

property id

id: string;

property interactive

interactive?: boolean | undefined;

property layout

layout?: AnyLayout | undefined;

property maxzoom

maxzoom?: number | undefined;

property metadata

metadata?: any;

property minzoom

minzoom?: number | undefined;

property paint

paint?: AnyPaint | undefined;

property ref

ref?: string | undefined;

property source

source?: string | AnySourceData | undefined;

property type

type: string;

interface Layout

interface Layout {}

property visibility

visibility?: Visibility | undefined;

interface Light

interface Light {}

property "color-transition"

'color-transition'?: Transition | undefined;

property "intensity-transition"

'intensity-transition'?: Transition | undefined;

property "position-transition"

'position-transition'?: Transition | undefined;

property anchor

anchor?: 'map' | 'viewport' | undefined;

property color

color?: string | undefined;

property intensity

intensity?: number | undefined;

property position

position?: number[] | undefined;

interface LineLayer

interface LineLayer extends Layer {}

property layout

layout?: LineLayout | undefined;

property paint

paint?: LinePaint | undefined;

property type

type: 'line';

interface LineLayout

interface LineLayout extends Layout {}

property "line-cap"

'line-cap'?: 'butt' | 'round' | 'square' | Expression | undefined;

property "line-join"

'line-join'?: 'bevel' | 'round' | 'miter' | Expression | undefined;

property "line-miter-limit"

'line-miter-limit'?: number | Expression | undefined;

property "line-round-limit"

'line-round-limit'?: number | Expression | undefined;

property "line-sort-key"

'line-sort-key'?: number | Expression | undefined;

interface LinePaint

interface LinePaint {}

property "line-blur-transition"

'line-blur-transition'?: Transition | undefined;

property "line-blur"

'line-blur'?: number | StyleFunction | Expression | undefined;

property "line-color-transition"

'line-color-transition'?: Transition | undefined;

property "line-color"

'line-color'?: string | StyleFunction | Expression | undefined;

property "line-dasharray-transition"

'line-dasharray-transition'?: Transition | undefined;

property "line-dasharray"

'line-dasharray'?: number[] | Expression | undefined;

property "line-emissive-strength"

'line-emissive-strength'?: number | Expression | undefined;

property "line-gap-width-transition"

'line-gap-width-transition'?: Transition | undefined;

property "line-gap-width"

'line-gap-width'?: number | StyleFunction | Expression | undefined;

property "line-gradient"

'line-gradient'?: Expression | undefined;

property "line-offset-transition"

'line-offset-transition'?: Transition | undefined;

property "line-offset"

'line-offset'?: number | StyleFunction | Expression | undefined;

property "line-opacity-transition"

'line-opacity-transition'?: Transition | undefined;

property "line-opacity"

'line-opacity'?: number | StyleFunction | Expression | undefined;

property "line-pattern-transition"

'line-pattern-transition'?: Transition | undefined;

property "line-pattern"

'line-pattern'?: string | Expression | undefined;

property "line-translate-anchor"

'line-translate-anchor'?: 'map' | 'viewport' | undefined;

property "line-translate-transition"

'line-translate-transition'?: Transition | undefined;

property "line-translate"

'line-translate'?: number[] | Expression | undefined;

property "line-width-transition"

'line-width-transition'?: Transition | undefined;

property "line-width"

'line-width'?: number | StyleFunction | Expression | undefined;

interface MapboxOptions

interface MapboxOptions {}

property accessToken

accessToken?: string | undefined;

If specified, map will use this token instead of the one defined in mapboxgl.accessToken.
null

property antialias

antialias?: boolean | undefined;

If true, the gl context will be created with MSA antialiasing, which can be useful for antialiasing custom layers. This is false by default as a performance optimization.

property attributionControl

attributionControl?: boolean | undefined;

If true, an attribution control will be added to the map.

property bearing

bearing?: number | undefined;

property bearingSnap

bearingSnap?: number | undefined;

Snap to north threshold in degrees.

property bounds

bounds?: LngLatBoundsLike | undefined;

The initial bounds of the map. If bounds is specified, it overrides center and zoom constructor options.

property boxZoom

boxZoom?: boolean | undefined;

If true, enable the "box zoom" interaction (see BoxZoomHandler)

property center

center?: LngLatLike | undefined;

initial map center

property clickTolerance

clickTolerance?: number | undefined;

The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).
3

property collectResourceTiming

collectResourceTiming?: boolean | undefined;

If true, Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a resourceTiming property of relevant data events.
false

property container

container: string | HTMLElement;

ID of the container element

property cooperativeGestures

cooperativeGestures?: boolean;

If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.

property crossSourceCollisions

crossSourceCollisions?: boolean | undefined;

If true, symbols from multiple sources can collide with each other during collision detection. If false, collision detection is run separately for the symbols in each source.
true

property customAttribution

customAttribution?: string | string[] | undefined;

String or strings to show in an AttributionControl. Only applicable if options.attributionControl is true.

property doubleClickZoom

doubleClickZoom?: boolean | undefined;

If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler).

property dragPan

dragPan?: boolean | DragPanOptions | undefined;

If true, the "drag to pan" interaction is enabled. An Object value is passed as options to DragPanHandler#enable.

property dragRotate

dragRotate?: boolean | undefined;

If true, enable the "drag to rotate" interaction (see DragRotateHandler).

property fadeDuration

fadeDuration?: number | undefined;

Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
300

property failIfMajorPerformanceCaveat

failIfMajorPerformanceCaveat?: boolean | undefined;

If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.

property fitBoundsOptions

fitBoundsOptions?: FitBoundsOptions | undefined;

A fitBounds options object to use only when setting the bounds option.

property hash

hash?: boolean | string | undefined;

If true, the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL. For example, http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60. An additional string may optionally be provided to indicate a parameter-styled hash, e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar, where foo is a custom parameter and bar is an arbitrary hash distinct from the map hash.

property interactive

interactive?: boolean | undefined;

If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input

property keyboard

keyboard?: boolean | undefined;

If true, enable keyboard shortcuts (see KeyboardHandler).

property locale

locale?: { [key: string]: string } | undefined;

A patch to apply to the default localization table for UI strings, e.g. control tooltips. The locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs. The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table).

property localFontFamily

localFontFamily?: string | undefined;

Overrides the generation of all glyphs and font settings except font-weight keywords Also overrides localIdeographFontFamily null

property localIdeographFontFamily

localIdeographFontFamily?: string | undefined;

If specified, defines a CSS font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). The purpose of this option is to avoid bandwidth-intensive glyph server requests.
null

property logoPosition

logoPosition?:
    | 'top-left'
    | 'top-right'
    | 'bottom-left'
    | 'bottom-right'
    | undefined;

A string representing the position of the Mapbox wordmark on the map.
"bottom-left"

property maxBounds

maxBounds?: LngLatBoundsLike | undefined;

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

property maxPitch

maxPitch?: number | undefined;

Maximum pitch of the map.

property maxTileCacheSize

maxTileCacheSize?: number | undefined;

The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
null

property maxZoom

maxZoom?: number | undefined;

Maximum zoom of the map.

property minPitch

minPitch?: number | undefined;

Minimum pitch of the map.

property minZoom

minZoom?: number | undefined;

Minimum zoom of the map.

property pitch

pitch?: number | undefined;

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

property pitchWithRotate

pitchWithRotate?: boolean | undefined;

If false, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
true

property preserveDrawingBuffer

preserveDrawingBuffer?: boolean | undefined;

If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization.

property projection

projection?: Projection;

A style's projection property sets which projection a map is rendered in.
'mercator'

property refreshExpiredTiles

refreshExpiredTiles?: boolean | undefined;

If false, the map won't attempt to re-request tiles once they expire per their HTTP cacheControl/expires headers.
true

property renderWorldCopies

renderWorldCopies?: boolean | undefined;

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

property scrollZoom

scrollZoom?: boolean | InteractiveOptions | undefined;

If true, the "scroll to zoom" interaction is enabled. An Object value is passed as options to ScrollZoomHandler#enable.

property style

style?: mapboxgl.Style | string | undefined;

stylesheet location

property testMode

testMode?: boolean | undefined;

Allows for the usage of the map in automated tests without an accessToken with custom self-hosted test fixtures.
null

property touchPitch

touchPitch?: boolean | InteractiveOptions | undefined;

If true, the "drag to pitch" interaction is enabled. An Object value is passed as options to TouchPitchHandler#enable.

property touchZoomRotate

touchZoomRotate?: boolean | InteractiveOptions | undefined;

If true, the "pinch to rotate and zoom" interaction is enabled. An Object value is passed as options to TouchZoomRotateHandler#enable.

property trackResize

trackResize?: boolean | undefined;

If true, the map will automatically resize when the browser window resizes

property transformRequest

transformRequest?: TransformRequestFunction | undefined;

A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
null

property worldview

worldview?: string | undefined;

Sets the map's worldview. A worldview determines the way that certain disputed boundaries are rendered. By default, GL JS will not set a worldview so that the worldview of Mapbox tiles will be determined by the vector tile source's TileJSON. Valid worldview strings must be an ISO alpha-2 country code.
null

property zoom

zoom?: number | undefined;

Initial zoom level

interface MapBoxZoomEvent

interface MapBoxZoomEvent extends MapboxEvent<MouseEvent> {}

property boxZoomBounds

boxZoomBounds: LngLatBounds;

property type

type: 'boxzoomstart' | 'boxzoomend' | 'boxzoomcancel';

interface MapContextEvent

interface MapContextEvent extends MapboxEvent<WebGLContextEvent> {}

property type

type: 'webglcontextlost' | 'webglcontextrestored';

interface MapSourceDataEvent

interface MapSourceDataEvent extends MapboxEvent {}

property coord

coord: Coordinate;

property dataType

dataType: 'source';

property isSourceLoaded

isSourceLoaded: boolean;

property source

source: Source;

property sourceDataType

sourceDataType: 'metadata' | 'content';

property sourceId

sourceId: string;

property tile

tile: any;

interface MapStyleDataEvent

interface MapStyleDataEvent extends MapboxEvent {}

property dataType

dataType: 'style';

interface MarkerOptions

interface MarkerOptions {}

property anchor

anchor?: Anchor | undefined;

A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker.setLngLat. Options are 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', and 'bottom-right'. The default value os 'center'

property clickTolerance

clickTolerance?: number | null | undefined;

The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default (0) is to inherit map's clickTolerance.

property color

color?: string | undefined;

The color to use for the default marker if options.element is not provided. The default is light blue (#3FB1CE).

property draggable

draggable?: boolean | undefined;

A boolean indicating whether or not a marker is able to be dragged to a new position on the map. The default value is false

property element

element?: HTMLElement | undefined;

DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker

property occludedOpacity

occludedOpacity?: number | undefined;

The opacity of a marker that's occluded by 3D terrain. Number between 0 and 1.

property offset

offset?: PointLike | undefined;

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.

property pitchAlignment

pitchAlignment?: Alignment | undefined;

map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment. The default value is auto.

property rotation

rotation?: number | undefined;

The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. The default value is 0.

property rotationAlignment

rotationAlignment?: Alignment | undefined;

map aligns the Marker's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport. The default value is auto

property scale

scale?: number | undefined;

The scale to use for the default marker if options.element is not provided. The default scale (1) corresponds to a height of 41px and a width of 27px.

interface PaddingOptions

interface PaddingOptions {}

property bottom

bottom: number;

property left

left: number;

property right

right: number;

property top

top: number;

interface PopupOptions

interface PopupOptions {}

property anchor

anchor?: Anchor | undefined;

property className

className?: string | undefined;

property closeButton

closeButton?: boolean | undefined;

property closeOnClick

closeOnClick?: boolean | undefined;

property closeOnMove

closeOnMove?: boolean | undefined;

Parameter
{boolean} [options.closeOnMove=false] If true, the popup will closed when the map moves.

property focusAfterOpen

focusAfterOpen?: boolean | null | undefined;

Parameter
{boolean} [options.focusAfterOpen=true] If true, the popup will try to focus the first focusable element inside the popup.

property maxWidth

maxWidth?: string | undefined;

property offset

offset?: Offset | null | undefined;

interface Projection

interface Projection {}

property center

center?: [number, number];

property name

name:
    | 'albers'
    | 'equalEarth'
    | 'equirectangular'
    | 'lambertConformalConic'
    | 'mercator'
    | 'naturalEarth'
    | 'winkelTripel'
    | 'globe';

property parallels

parallels?: [number, number];

interface RasterDemSource

interface RasterDemSource extends Source {}

property attribution

attribution?: string | undefined;

property bounds

bounds?: number[] | undefined;

property encoding

encoding?: 'terrarium' | 'mapbox' | undefined;

property id

id?: string;

property maxzoom

maxzoom?: number | undefined;

property minzoom

minzoom?: number | undefined;

property name

name?: string;

property tiles

tiles?: string[] | undefined;

property tileSize

tileSize?: number | undefined;

property type

type: 'raster-dem';

property url

url?: string | undefined;

interface RasterLayer

interface RasterLayer extends Layer {}

property layout

layout?: RasterLayout | undefined;

property paint

paint?: RasterPaint | undefined;

property type

type: 'raster';

interface RasterLayout

interface RasterLayout extends Layout {}

interface RasterPaint

interface RasterPaint {}

property "raster-brightness-max-transition"

'raster-brightness-max-transition'?: Transition | undefined;

property "raster-brightness-max"

'raster-brightness-max'?: number | Expression | undefined;

property "raster-brightness-min-transition"

'raster-brightness-min-transition'?: Transition | undefined;

property "raster-brightness-min"

'raster-brightness-min'?: number | Expression | undefined;

property "raster-color-mix"

'raster-color-mix'?: [number, number, number, number] | Expression | undefined;

property "raster-color-range"

'raster-color-range'?: [number, number] | Expression | undefined;

property "raster-color"

'raster-color'?: string | Expression | undefined;

property "raster-contrast-transition"

'raster-contrast-transition'?: Transition | undefined;

property "raster-contrast"

'raster-contrast'?: number | Expression | undefined;

property "raster-fade-duration"

'raster-fade-duration'?: number | Expression | undefined;

property "raster-hue-rotate-transition"

'raster-hue-rotate-transition'?: Transition | undefined;

property "raster-hue-rotate"

'raster-hue-rotate'?: number | Expression | undefined;

property "raster-opacity-transition"

'raster-opacity-transition'?: Transition | undefined;

property "raster-opacity"

'raster-opacity'?: number | Expression | undefined;

property "raster-resampling"

'raster-resampling'?: 'linear' | 'nearest' | undefined;

property "raster-saturation-transition"

'raster-saturation-transition'?: Transition | undefined;

property "raster-saturation"

'raster-saturation'?: number | Expression | undefined;

interface RasterSource

interface RasterSource extends Source {}

property attribution

attribution?: string | undefined;

property bounds

bounds?: number[] | undefined;

property format

format?: 'webp' | string;

property id

id?: string;

property maxzoom

maxzoom?: number | undefined;

property minzoom

minzoom?: number | undefined;

property name

name?: string;

property scheme

scheme?: 'xyz' | 'tms' | undefined;

property tiles

tiles?: string[] | undefined;

property tileSize

tileSize?: number | undefined;

property type

type: 'raster';

property url

url?: string | undefined;

interface RasterSourceImpl

interface RasterSourceImpl extends RasterSource {}

method reload

reload: () => void;

Reloads the source data and re-renders the map.

method setTiles

setTiles: (tiles: readonly string[]) => RasterSourceImpl;

Sets the source tiles property and re-renders the map.
Parameter tiles
An array of one or more tile source URLs, as in the TileJSON spec.
Returns
{RasterTileSource} this

method setUrl

setUrl: (url: string) => RasterSourceImpl;

Sets the source url property and re-renders the map.
Parameter url
A URL to a TileJSON resource. Supported protocols are http:, https:, and mapbox://<Tileset ID>.
Returns
{RasterTileSource} this

interface RequestParameters

interface RequestParameters {}

property collectResourceTiming

collectResourceTiming?: boolean | undefined;

property credentials

credentials?: 'same-origin' | 'include' | undefined;

Use 'include' to send cookies with cross-origin requests.

property headers

headers?: { [header: string]: any } | undefined;

The headers to be sent with the request.

property method

method?: 'GET' | 'POST' | 'PUT' | undefined;

property url

url: string;

The URL to be requested.

interface SkyLayer

interface SkyLayer extends Layer {}

property layout

layout?: SkyLayout | undefined;

property paint

paint?: SkyPaint | undefined;

property type

type: 'sky';

interface SkyLayout

interface SkyLayout extends Layout {}

interface SkyPaint

interface SkyPaint {}

property "sky-atmosphere-color"

'sky-atmosphere-color'?: string | Expression | undefined;

property "sky-atmosphere-halo-color"

'sky-atmosphere-halo-color'?: string | Expression | undefined;

property "sky-atmosphere-sun-intensity"

'sky-atmosphere-sun-intensity'?: number | Expression | undefined;

property "sky-atmosphere-sun"

'sky-atmosphere-sun'?: number[] | Expression | undefined;

property "sky-gradient-center"

'sky-gradient-center'?: number[] | Expression | undefined;

property "sky-gradient-radius"

'sky-gradient-radius'?: number | Expression | undefined;

property "sky-gradient"

'sky-gradient'?: string | Expression | undefined;

property "sky-opacity"

'sky-opacity'?: number | Expression | undefined;

property "sky-type"

'sky-type'?: 'gradient' | 'atmosphere' | undefined;

interface Source

interface Source {}

property type

type:
    | 'vector'
    | 'raster'
    | 'raster-dem'
    | 'geojson'
    | 'image'
    | 'video'
    | 'canvas'
    | 'custom';

interface Sources

interface Sources {}

index signature

[sourceName: string]: AnySourceData;

interface Style

interface Style {}

property bearing

bearing?: number | undefined;

property center

center?: number[] | undefined;

property fog

fog?: Fog | undefined;

property glyphs

glyphs?: string | undefined;

property layers

layers: AnyLayer[];

property light

light?: Light | undefined;

property metadata

metadata?: any;

property name

name?: string | undefined;

property pitch

pitch?: number | undefined;

property sources

sources: Sources;

property sprite

sprite?: string | undefined;

property terrain

terrain?: TerrainSpecification | undefined;

property transition

transition?: Transition | undefined;

property version

version: number;

property zoom

zoom?: number | undefined;

interface StyleFunction

interface StyleFunction {}

property base

base?: number | undefined;

property colorSpace

colorSpace?: 'rgb' | 'lab' | 'hcl' | undefined;

property default

default?: any;

property property

property?: string | undefined;

property stops

stops?: any[][] | undefined;

property type

type?: 'identity' | 'exponential' | 'interval' | 'categorical' | undefined;

interface StyleOptions

interface StyleOptions {}

StyleOptions

property transition

transition?: boolean | undefined;

interface SymbolLayer

interface SymbolLayer extends Layer {}

property layout

layout?: SymbolLayout | undefined;

property paint

paint?: SymbolPaint | undefined;

property type

type: 'symbol';

interface SymbolLayout

interface SymbolLayout extends Layout {}

property "icon-allow-overlap"

'icon-allow-overlap'?: boolean | StyleFunction | Expression | undefined;

property "icon-anchor"

'icon-anchor'?: Anchor | StyleFunction | Expression | undefined;

property "icon-ignore-placement"

'icon-ignore-placement'?: boolean | Expression | undefined;

property "icon-image"

'icon-image'?: string | StyleFunction | Expression | undefined;

property "icon-keep-upright"

'icon-keep-upright'?: boolean | undefined;

property "icon-offset"

'icon-offset'?: number[] | StyleFunction | Expression | undefined;

property "icon-optional"

'icon-optional'?: boolean | undefined;

property "icon-padding"

'icon-padding'?: number | Expression | undefined;

property "icon-pitch-alignment"

'icon-pitch-alignment'?: 'map' | 'viewport' | 'auto' | undefined;

property "icon-rotate"

'icon-rotate'?: number | StyleFunction | Expression | undefined;

property "icon-rotation-alignment"

'icon-rotation-alignment'?: 'map' | 'viewport' | 'auto' | undefined;

property "icon-size"

'icon-size'?: number | StyleFunction | Expression | undefined;

property "icon-text-fit-padding"

'icon-text-fit-padding'?: number[] | Expression | undefined;

property "icon-text-fit"

'icon-text-fit'?: 'none' | 'both' | 'width' | 'height' | undefined;

property "symbol-avoid-edges"

'symbol-avoid-edges'?: boolean | undefined;

property "symbol-placement"

'symbol-placement'?: 'point' | 'line' | 'line-center' | undefined;

property "symbol-sort-key"

'symbol-sort-key'?: number | Expression | undefined;

property "symbol-spacing"

'symbol-spacing'?: number | Expression | undefined;

property "symbol-z-order"

'symbol-z-order'?: 'viewport-y' | 'source' | undefined;

property "text-allow-overlap"

'text-allow-overlap'?: boolean | undefined;

property "text-anchor"

'text-anchor'?: Anchor | StyleFunction | Expression | undefined;

property "text-field"

'text-field'?: string | StyleFunction | Expression | undefined;

property "text-font"

'text-font'?: string[] | Expression | undefined;

property "text-ignore-placement"

'text-ignore-placement'?: boolean | undefined;

property "text-justify"

'text-justify'?: 'auto' | 'left' | 'center' | 'right' | Expression | undefined;

property "text-keep-upright"

'text-keep-upright'?: boolean | undefined;

property "text-letter-spacing"

'text-letter-spacing'?: number | Expression | undefined;

property "text-line-height"

'text-line-height'?: number | Expression | undefined;

property "text-max-angle"

'text-max-angle'?: number | Expression | undefined;

property "text-max-width"

'text-max-width'?: number | StyleFunction | Expression | undefined;

property "text-offset"

'text-offset'?: number[] | Expression | undefined;

property "text-optional"

'text-optional'?: boolean | undefined;

property "text-padding"

'text-padding'?: number | Expression | undefined;

property "text-pitch-alignment"

'text-pitch-alignment'?: 'map' | 'viewport' | 'auto' | undefined;

property "text-radial-offset"

'text-radial-offset'?: number | Expression | undefined;

property "text-rotate"

'text-rotate'?: number | StyleFunction | Expression | undefined;

property "text-rotation-alignment"

'text-rotation-alignment'?: 'map' | 'viewport' | 'auto' | undefined;

property "text-size"

'text-size'?: number | StyleFunction | Expression | undefined;

property "text-transform"

'text-transform'?:
    | 'none'
    | 'uppercase'
    | 'lowercase'
    | StyleFunction
    | Expression
    | undefined;

property "text-variable-anchor"

'text-variable-anchor'?: Anchor[] | undefined;

property "text-writing-mode"

'text-writing-mode'?: Array<'horizontal' | 'vertical'> | undefined;

interface SymbolPaint

interface SymbolPaint {}

property "icon-color-transition"

'icon-color-transition'?: Transition | undefined;

property "icon-color"

'icon-color'?: string | StyleFunction | Expression | undefined;

property "icon-emissive-strength"

'icon-emissive-strength'?: number | StyleFunction | Expression | undefined;

property "icon-halo-blur-transition"

'icon-halo-blur-transition'?: Transition | undefined;

property "icon-halo-blur"

'icon-halo-blur'?: number | StyleFunction | Expression | undefined;

property "icon-halo-color-transition"

'icon-halo-color-transition'?: Transition | undefined;

property "icon-halo-color"

'icon-halo-color'?: string | StyleFunction | Expression | undefined;

property "icon-halo-width-transition"

'icon-halo-width-transition'?: Transition | undefined;

property "icon-halo-width"

'icon-halo-width'?: number | StyleFunction | Expression | undefined;

property "icon-image-cross-fade"

'icon-image-cross-fade'?: number | StyleFunction | Expression | undefined;

property "icon-opacity-transition"

'icon-opacity-transition'?: Transition | undefined;

property "icon-opacity"

'icon-opacity'?: number | StyleFunction | Expression | undefined;

property "icon-translate-anchor"

'icon-translate-anchor'?: 'map' | 'viewport' | undefined;

property "icon-translate-transition"

'icon-translate-transition'?: Transition | undefined;

property "icon-translate"

'icon-translate'?: number[] | Expression | undefined;

property "text-color-transition"

'text-color-transition'?: Transition | undefined;

property "text-color"

'text-color'?: string | StyleFunction | Expression | undefined;

property "text-emissive-strength"

'text-emissive-strength'?: number | StyleFunction | Expression | undefined;

property "text-halo-blur-transition"

'text-halo-blur-transition'?: Transition | undefined;

property "text-halo-blur"

'text-halo-blur'?: number | StyleFunction | Expression | undefined;

property "text-halo-color-transition"

'text-halo-color-transition'?: Transition | undefined;

property "text-halo-color"

'text-halo-color'?: string | StyleFunction | Expression | undefined;

property "text-halo-width-transition"

'text-halo-width-transition'?: Transition | undefined;

property "text-halo-width"

'text-halo-width'?: number | StyleFunction | Expression | undefined;

property "text-opacity-transition"

'text-opacity-transition'?: Transition | undefined;

property "text-opacity"

'text-opacity'?: number | StyleFunction | Expression | undefined;

property "text-translate-anchor"

'text-translate-anchor'?: 'map' | 'viewport' | undefined;

property "text-translate-transition"

'text-translate-transition'?: Transition | undefined;

property "text-translate"

'text-translate'?: number[] | Expression | undefined;

interface TerrainSpecification

interface TerrainSpecification {}

property exaggeration

exaggeration?: PropertyValueSpecification<number> | undefined;

property source

source: string;

interface Transition

interface Transition {}

property delay

delay?: number | undefined;

property duration

duration?: number | undefined;

interface VectorSource

interface VectorSource extends Source {}

property attribution

attribution?: string | undefined;

property bounds

bounds?: number[] | undefined;

property format

format?: 'pbf';

property id

id?: string;

property maxzoom

maxzoom?: number | undefined;

property minzoom

minzoom?: number | undefined;

property name

name?: string;

property promoteId

promoteId?: PromoteIdSpecification | undefined;

property scheme

scheme?: 'xyz' | 'tms' | undefined;

property tiles

tiles?: string[] | undefined;

property type

type: 'vector';

property url

url?: string | undefined;

property vector_layers

vector_layers?: SourceVectorLayer[];

interface VectorSourceImpl

interface VectorSourceImpl extends VectorSource {}

method reload

reload: () => void;

Reloads the source data and re-renders the map.

method setTiles

setTiles: (tiles: readonly string[]) => VectorSourceImpl;

Sets the source tiles property and re-renders the map.
Parameter tiles
An array of one or more tile source URLs, as in the TileJSON spec.
Returns
{VectorTileSource} this

method setUrl

setUrl: (url: string) => VectorSourceImpl;

Sets the source url property and re-renders the map.
Parameter url
A URL to a TileJSON resource. Supported protocols are http:, https:, and mapbox://<Tileset ID>.
Returns
{VectorTileSource} this

interface VideoSourceOptions

interface VideoSourceOptions {}

property coordinates

coordinates?: number[][] | undefined;

property urls

urls?: string[] | undefined;

interface VideoSourceRaw

interface VideoSourceRaw extends Source, VideoSourceOptions {}

VideoSource

property type

type: 'video';

Type Aliases

type Alignment

type Alignment = 'map' | 'viewport' | 'auto';

type Anchor

type Anchor =
    | 'center'
    | 'left'
    | 'right'
    | 'top'
    | 'bottom'
    | 'top-left'
    | 'top-right'
    | 'bottom-left'
    | 'bottom-right';

type AnyLayer

type AnyLayer =
    | BackgroundLayer
    | CircleLayer
    | FillExtrusionLayer
    | FillLayer
    | HeatmapLayer
    | HillshadeLayer
    | LineLayer
    | RasterLayer
    | SymbolLayer
    | CustomLayerInterface
    | SkyLayer;

type AnyLayout

type AnyLayout =
    | BackgroundLayout
    | FillLayout
    | FillExtrusionLayout
    | LineLayout
    | SymbolLayout
    | RasterLayout
    | CircleLayout
    | HeatmapLayout
    | HillshadeLayout
    | SkyLayout;

type AnyPaint

type AnyPaint =
    | BackgroundPaint
    | FillPaint
    | FillExtrusionPaint
    | LinePaint
    | SymbolPaint
    | RasterPaint
    | CirclePaint
    | HeatmapPaint
    | HillshadePaint
    | SkyPaint;

type AnySourceData

type AnySourceData =
    | GeoJSONSourceRaw
    | VideoSourceRaw
    | ImageSourceRaw
    | CanvasSourceRaw
    | VectorSource
    | RasterSource
    | RasterDemSource
    | CustomSourceInterface<HTMLImageElement | ImageData | ImageBitmap>;

type AnySourceImpl

type AnySourceImpl =
    | GeoJSONSource
    | VideoSource
    | ImageSource
    | CanvasSource
    | VectorSourceImpl
    | RasterSourceImpl
    | RasterDemSource
    | CustomSource<HTMLImageElement | ImageData | ImageBitmap>;

type CameraForBoundsResult

type CameraForBoundsResult = Required<Pick<CameraOptions, 'zoom' | 'bearing'>> & {
    /** Map center */
    center: { lng: number; lat: number };
};

type CameraFunctionSpecification

type CameraFunctionSpecification<T> =
    | { type: 'exponential'; stops: Array<[number, T]> }
    | { type: 'interval'; stops: Array<[number, T]> };

type DragPanOptions

type DragPanOptions = {
    linearity?: number;
    easing?: (t: number) => number;
    deceleration?: number;
    maxSpeed?: number;
};

type ElevationQueryOptions

type ElevationQueryOptions = {
    exaggerated: boolean;
};

type EventData

type EventData = { [key: string]: any };

type EventedListener

type EventedListener = (object?: Object) => any;

type Expression

type Expression = [ExpressionName, ...any[]];

type ExpressionName

type ExpressionName =
    // Types
    | 'array'
    | 'boolean'
    | 'collator'
    | 'format'
    | 'literal'
    | 'number'
    | 'number-format'
    | 'object'
    | 'string'
    | 'image'
    | 'to-boolean'
    | 'to-color'
    | 'to-number'
    | 'to-string'
    | 'typeof'
    // Feature data
    | 'feature-state'
    | 'geometry-type'
    | 'id'
    | 'line-progress'
    | 'properties'
    // Lookup
    | 'at'
    | 'get'
    | 'has'
    | 'in'
    | 'index-of'
    | 'length'
    | 'slice'
    | 'config'
    // Decision
    | '!'
    | '!='
    | '<'
    | '<='
    | '=='
    | '>'
    | '>='
    | 'all'
    | 'any'
    | 'case'
    | 'match'
    | 'coalesce'
    | 'within'
    // Ramps, scales, curves
    | 'interpolate'
    | 'interpolate-hcl'
    | 'interpolate-lab'
    | 'step'
    // Variable binding
    | 'let'
    | 'var'
    // String
    | 'concat'
    | 'downcase'
    | 'is-supported-script'
    | 'resolved-locale'
    | 'upcase'
    // Color
    | 'hsl'
    | 'hsla'
    | 'rgb'
    | 'rgba'
    | 'to-rgba'
    // Math
    | '-'
    | '*'
    | '/'
    | '%'
    | '^'
    | '+'
    | 'abs'
    | 'acos'
    | 'asin'
    | 'atan'
    | 'ceil'
    | 'cos'
    | 'distance'
    | 'e'
    | 'floor'
    | 'ln'
    | 'ln2'
    | 'log10'
    | 'log2'
    | 'max'
    | 'min'
    | 'pi'
    | 'random'
    | 'round'
    | 'sin'
    | 'sqrt'
    | 'tan'
    // Camera
    | 'distance-from-center'
    | 'pitch'
    | 'zoom'
    | 'raster-value'
    // Lights
    | 'measure-light'
    // Heatmap
    | 'heatmap-density';

type ExpressionSpecification

type ExpressionSpecification = unknown[];

type InteractiveOptions

type InteractiveOptions = { around?: 'center' };

type LngLatBoundsLike

type LngLatBoundsLike =
    | LngLatBounds
    | [LngLatLike, LngLatLike]
    | [number, number, number, number]
    | LngLatLike;

type LngLatLike

type LngLatLike =
    | [number, number]
    | LngLat
    | { lng: number; lat: number }
    | { lon: number; lat: number };

type MapboxGeoJSONFeature

type MapboxGeoJSONFeature = GeoJSON.Feature<GeoJSON.Geometry> & {
    layer: Layer;
    source: string;
    sourceLayer: string;
    state: { [key: string]: any };
};

type MapDataEvent

type MapDataEvent = MapSourceDataEvent | MapStyleDataEvent;

type MapEventType

type MapEventType = {
    error: ErrorEvent;

    load: MapboxEvent;
    idle: MapboxEvent;
    remove: MapboxEvent;
    render: MapboxEvent;
    resize: MapboxEvent;

    webglcontextlost: MapContextEvent;
    webglcontextrestored: MapContextEvent;

    dataloading: MapDataEvent;
    data: MapDataEvent;
    tiledataloading: MapDataEvent;
    sourcedataloading: MapSourceDataEvent;
    styledataloading: MapStyleDataEvent;
    sourcedata: MapSourceDataEvent;
    styledata: MapStyleDataEvent;
    'style.load': MapboxEvent;
    'style.import.load': MapboxEvent;

    boxzoomcancel: MapBoxZoomEvent;
    boxzoomstart: MapBoxZoomEvent;
    boxzoomend: MapBoxZoomEvent;

    touchcancel: MapTouchEvent;
    touchmove: MapTouchEvent;
    touchend: MapTouchEvent;
    touchstart: MapTouchEvent;

    click: MapMouseEvent;
    contextmenu: MapMouseEvent;
    dblclick: MapMouseEvent;
    mousemove: MapMouseEvent;
    mouseup: MapMouseEvent;
    mousedown: MapMouseEvent;
    mouseout: MapMouseEvent;
    mouseover: MapMouseEvent;

    movestart: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
    move: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
    moveend: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;

    zoomstart: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
    zoom: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
    zoomend: MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;

    rotatestart: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    rotate: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    rotateend: MapboxEvent<MouseEvent | TouchEvent | undefined>;

    dragstart: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    drag: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    dragend: MapboxEvent<MouseEvent | TouchEvent | undefined>;

    pitchstart: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    pitch: MapboxEvent<MouseEvent | TouchEvent | undefined>;
    pitchend: MapboxEvent<MouseEvent | TouchEvent | undefined>;

    wheel: MapWheelEvent;
};

MapEvent

type MapLayerEventType

type MapLayerEventType = {
    click: MapLayerMouseEvent;
    dblclick: MapLayerMouseEvent;
    mousedown: MapLayerMouseEvent;
    mouseup: MapLayerMouseEvent;
    mousemove: MapLayerMouseEvent;
    mouseenter: MapLayerMouseEvent;
    mouseleave: MapLayerMouseEvent;
    mouseover: MapLayerMouseEvent;
    mouseout: MapLayerMouseEvent;
    contextmenu: MapLayerMouseEvent;

    touchstart: MapLayerTouchEvent;
    touchend: MapLayerTouchEvent;
    touchcancel: MapLayerTouchEvent;
};

type MapLayerMouseEvent

type MapLayerMouseEvent = MapMouseEvent & {
    features?: MapboxGeoJSONFeature[] | undefined;
};

type MapLayerTouchEvent

type MapLayerTouchEvent = MapTouchEvent & {
    features?: MapboxGeoJSONFeature[] | undefined;
};

type Offset

type Offset = number | PointLike | { [_: string]: PointLike };

type PluginStatus

type PluginStatus = 'unavailable' | 'loading' | 'loaded' | 'error';

type PointLike

type PointLike = Point | [number, number];

type PromoteIdSpecification

type PromoteIdSpecification = { [key: string]: string } | string;

type PropertyValueSpecification

type PropertyValueSpecification<T> =
    | T
    | CameraFunctionSpecification<T>
    | ExpressionSpecification;

type quat

type quat = number[];

type ResourceType

type ResourceType =
    | 'Unknown'
    | 'Style'
    | 'Source'
    | 'Tile'
    | 'Glyphs'
    | 'SpriteImage'
    | 'SpriteJSON'
    | 'Image';

type SourceVectorLayer

type SourceVectorLayer = {
    id: string;
    fields?: Record<string, string>;
    description?: string;
    minzoom?: number;
    maxzoom?: number;

    // Non standard extensions that are valid in a Mapbox context.
    source?: string;
    source_name?: string;
};

See Also
- https://github.com/mapbox/tilejson-spec/tree/master/3.0.0#33-vector_layers

type TransformRequestFunction

type TransformRequestFunction = (
    url: string,
    resourceType: ResourceType
) => RequestParameters;

type vec3

type vec3 = number[];

type Visibility

type Visibility = 'visible' | 'none';

Package Files (1)

index.d.ts

Dependencies (1)

@types/geojson

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/mapbox-gl.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/mapbox-gl)

HTML

<a href="https://www.jsdocs.io/package/@types/mapbox-gl"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 9071 ms.
Missing or incorrect documentation? Open an issue for this package.

@types/mapbox-gl

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable accessToken

variable baseApiUrl

variable maxParallelImageRequests

variable version

variable workerCount

Functions

function clearPrewarmedResources

function clearStorage

function getRTLTextPluginStatus

function prewarm

function setRTLTextPlugin

function supported

Classes

class AttributionControl

class BoxZoomHandler

method disable

method enable

method isActive

method isEnabled

class CanvasSource

property canvas

property coordinates

property type

method getCanvas

method pause

method play

method setCoordinates

class Control

property getDefaultPosition

method onAdd

method onRemove

class DoubleClickZoomHandler

method disable

method enable

method isEnabled

class DragPanHandler

method disable

method enable

method isActive

method isEnabled

class DragRotateHandler

method disable

method enable

method isActive

method isEnabled

class ErrorEvent

property error

property type

class Evented

method fire

method off

method on

method once

class FreeCameraOptions

Parameter position

Parameter orientation

property position

method lookAtPoint

Parameter location

Parameter up

method setPitchBearing

Parameter pitch

Parameter bearing

class FullscreenControl

class GeoJSONSource

property type

method getClusterChildren

method getClusterExpansionZoom

method getClusterLeaves

method setData