@types/mapbox-gl
- Version 3.4.1
- Published
- 104 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
Functions
Classes
Map
- addControl()
- addImage()
- addLayer()
- addSource()
- areTilesLoaded()
- boxZoom
- cameraForBounds()
- doubleClickZoom
- dragPan
- dragRotate
- easeTo()
- fitBounds()
- fitScreenCoordinates()
- flyTo()
- getBearing()
- getBounds()
- getCanvas()
- getCanvasContainer()
- getCenter()
- getConfigProperty()
- getContainer()
- getFeatureState()
- getFilter()
- getFog()
- getFreeCameraOptions()
- getLayer()
- getLayoutProperty()
- getLight()
- getMaxBounds()
- getMaxPitch()
- getMaxZoom()
- getMinPitch()
- getMinZoom()
- getPadding()
- getPaintProperty()
- getPitch()
- getProjection()
- getRenderWorldCopies()
- getSource()
- getStyle()
- getTerrain()
- getZoom()
- hasControl()
- hasImage()
- isEasing()
- isMoving()
- isRotating()
- isSourceLoaded()
- isStyleLoaded()
- isZooming()
- jumpTo()
- keyboard
- listImages()
- loaded()
- loadImage()
- moveLayer()
- off()
- on()
- once()
- panBy()
- panTo()
- project()
- queryRenderedFeatures()
- querySourceFeatures()
- queryTerrainElevation()
- remove()
- removeControl()
- removeFeatureState()
- removeImage()
- removeLayer()
- removeSource()
- repaint
- resetNorth()
- resetNorthPitch()
- resize()
- rotateTo()
- scrollZoom
- setBearing()
- setCenter()
- setConfigProperty()
- setFeatureState()
- setFilter()
- setFog()
- setFreeCameraOptions()
- setLayerZoomRange()
- setLayoutProperty()
- setLight()
- setMaxBounds()
- setMaxPitch()
- setMaxZoom()
- setMinPitch()
- setMinZoom()
- setPadding()
- setPaintProperty()
- setPitch()
- setProjection()
- setRenderWorldCopies()
- setStyle()
- setTerrain()
- setZoom()
- showCollisionBoxes
- showPadding
- showTerrainWireframe
- showTileBoundaries
- snapToNorth()
- stop()
- touchPitch
- touchZoomRotate
- triggerRepaint()
- unproject()
- updateImage()
- zoomIn()
- zoomOut()
- zoomTo()
Interfaces
CirclePaint
- "circle-blur-transition"
- "circle-blur"
- "circle-color-transition"
- "circle-color"
- "circle-emissive-strength"
- "circle-opacity-transition"
- "circle-opacity"
- "circle-pitch-alignment"
- "circle-pitch-scale"
- "circle-radius-transition"
- "circle-radius"
- "circle-stroke-color-transition"
- "circle-stroke-color"
- "circle-stroke-opacity-transition"
- "circle-stroke-opacity"
- "circle-stroke-width-transition"
- "circle-stroke-width"
- "circle-translate-anchor"
- "circle-translate-transition"
- "circle-translate"
FillExtrusionPaint
- "fill-extrusion-base-transition"
- "fill-extrusion-base"
- "fill-extrusion-color-transition"
- "fill-extrusion-color"
- "fill-extrusion-height-transition"
- "fill-extrusion-height"
- "fill-extrusion-opacity-transition"
- "fill-extrusion-opacity"
- "fill-extrusion-pattern-transition"
- "fill-extrusion-pattern"
- "fill-extrusion-translate-anchor"
- "fill-extrusion-translate-transition"
- "fill-extrusion-translate"
- "fill-extrusion-vertical-gradient"
FillPaint
- "fill-antialias"
- "fill-color-transition"
- "fill-color"
- "fill-emissive-strength"
- "fill-extrusion-ambient-occlusion-ground-attenuation"
- "fill-extrusion-ambient-occlusion-ground-radius"
- "fill-extrusion-ambient-occlusion-wall-radius"
- "fill-extrusion-flood-light-color"
- "fill-extrusion-flood-light-ground-attenuation"
- "fill-extrusion-flood-light-ground-radius"
- "fill-extrusion-flood-light-intensity"
- "fill-extrusion-flood-light-wall-radius"
- "fill-extrusion-vertical-scale"
- "fill-opacity-transition"
- "fill-opacity"
- "fill-outline-color-transition"
- "fill-outline-color"
- "fill-pattern-transition"
- "fill-pattern"
- "fill-translate-anchor"
- "fill-translate-transition"
- "fill-translate"
HillshadePaint
- "hillshade-accent-color-transition"
- "hillshade-accent-color"
- "hillshade-exaggeration-transition"
- "hillshade-exaggeration"
- "hillshade-highlight-color-transition"
- "hillshade-highlight-color"
- "hillshade-illumination-anchor"
- "hillshade-illumination-direction"
- "hillshade-shadow-color-transition"
- "hillshade-shadow-color"
LinePaint
- "line-blur-transition"
- "line-blur"
- "line-color-transition"
- "line-color"
- "line-dasharray-transition"
- "line-dasharray"
- "line-emissive-strength"
- "line-gap-width-transition"
- "line-gap-width"
- "line-gradient"
- "line-offset-transition"
- "line-offset"
- "line-opacity-transition"
- "line-opacity"
- "line-pattern-transition"
- "line-pattern"
- "line-translate-anchor"
- "line-translate-transition"
- "line-translate"
- "line-width-transition"
- "line-width"
MapboxOptions
- accessToken
- antialias
- attributionControl
- bearing
- bearingSnap
- bounds
- boxZoom
- center
- clickTolerance
- collectResourceTiming
- config
- container
- cooperativeGestures
- crossSourceCollisions
- customAttribution
- doubleClickZoom
- dragPan
- dragRotate
- fadeDuration
- failIfMajorPerformanceCaveat
- fitBoundsOptions
- hash
- interactive
- keyboard
- language
- locale
- localFontFamily
- localIdeographFontFamily
- logoPosition
- maxBounds
- maxPitch
- maxTileCacheSize
- maxZoom
- minPitch
- minTileCacheSize
- minZoom
- performanceMetricsCollection
- pitch
- pitchWithRotate
- preserveDrawingBuffer
- projection
- refreshExpiredTiles
- renderWorldCopies
- respectPrefersReducedMotion
- scrollZoom
- style
- testMode
- touchPitch
- touchZoomRotate
- trackResize
- transformRequest
- worldview
- zoom
RasterPaint
- "raster-brightness-max-transition"
- "raster-brightness-max"
- "raster-brightness-min-transition"
- "raster-brightness-min"
- "raster-color-mix"
- "raster-color-range"
- "raster-color"
- "raster-contrast-transition"
- "raster-contrast"
- "raster-fade-duration"
- "raster-hue-rotate-transition"
- "raster-hue-rotate"
- "raster-opacity-transition"
- "raster-opacity"
- "raster-resampling"
- "raster-saturation-transition"
- "raster-saturation"
SymbolLayout
- "icon-allow-overlap"
- "icon-anchor"
- "icon-ignore-placement"
- "icon-image"
- "icon-keep-upright"
- "icon-offset"
- "icon-optional"
- "icon-padding"
- "icon-pitch-alignment"
- "icon-rotate"
- "icon-rotation-alignment"
- "icon-size"
- "icon-text-fit-padding"
- "icon-text-fit"
- "symbol-avoid-edges"
- "symbol-placement"
- "symbol-sort-key"
- "symbol-spacing"
- "symbol-z-order"
- "text-allow-overlap"
- "text-anchor"
- "text-field"
- "text-font"
- "text-ignore-placement"
- "text-justify"
- "text-keep-upright"
- "text-letter-spacing"
- "text-line-height"
- "text-max-angle"
- "text-max-width"
- "text-offset"
- "text-optional"
- "text-padding"
- "text-pitch-alignment"
- "text-radial-offset"
- "text-rotate"
- "text-rotation-alignment"
- "text-size"
- "text-transform"
- "text-variable-anchor"
- "text-writing-mode"
SymbolPaint
- "icon-color-transition"
- "icon-color"
- "icon-emissive-strength"
- "icon-halo-blur-transition"
- "icon-halo-blur"
- "icon-halo-color-transition"
- "icon-halo-color"
- "icon-halo-width-transition"
- "icon-halo-width"
- "icon-image-cross-fade"
- "icon-opacity-transition"
- "icon-opacity"
- "icon-translate-anchor"
- "icon-translate-transition"
- "icon-translate"
- "text-color-transition"
- "text-color"
- "text-emissive-strength"
- "text-halo-blur-transition"
- "text-halo-blur"
- "text-halo-color-transition"
- "text-halo-color"
- "text-halo-width-transition"
- "text-halo-width"
- "text-opacity-transition"
- "text-opacity"
- "text-translate-anchor"
- "text-translate-transition"
- "text-translate"
Type Aliases
- Alignment
- Anchor
- AnyLayer
- AnyLayout
- AnyPaint
- AnySourceData
- AnySourceImpl
- CameraForBoundsResult
- CameraFunctionSpecification
- DragPanOptions
- ElevationQueryOptions
- EventData
- EventedListener
- Expression
- ExpressionName
- ExpressionSpecification
- InteractiveOptions
- LngLatBoundsLike
- LngLatLike
- MapboxGeoJSONFeature
- MapDataEvent
- MapEventType
- MapLayerEventType
- MapLayerMouseEvent
- MapLayerTouchEvent
- Offset
- PluginStatus
- PointLike
- PromoteIdSpecification
- PropertyValueSpecification
- quat
- ResourceType
- SourceVectorLayer
- TransformRequestFunction
- vec3
- Visibility
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
andmapboxgl.workerCount
, if being used, must be set beforeprewarm()
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 callingmapboxgl.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 {}
class Evented
class Evented {}
Evented
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 {}
Map
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
orundefined
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
orundefined
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> {}
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
class Popup extends Evented {}
Popup
constructor
constructor(options?: PopupOptions);
method addClassName
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')
method addTo
addTo: (map: Map) => this;
method getElement
getElement: () => HTMLElement;
Returns the
Popup
's HTML element.
method getLngLat
getLngLat: () => LngLat;
method getMaxWidth
getMaxWidth: () => string;
method isOpen
isOpen: () => boolean;
method remove
remove: () => this;
method removeClassName
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')
method setDOMContent
setDOMContent: (htmlNode: Node) => this;
method setHTML
setHTML: (html: string) => this;
method setLngLat
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.
method setMaxWidth
setMaxWidth: (maxWidth: string) => this;
method setOffset
setOffset: (offset?: Offset | null) => this;
Sets the popup's offset.
Parameter offset
Sets the popup's offset.
Returns
{Popup}
this
method setText
setText: (text: string) => this;
method toggleClassName
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')
method trackPointer
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
andcloseButton
should also be set tofalse
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 byprefers-reduced-motion
. Otherwise, the transition will happen instantly if the user has enabled thereduced 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 {}
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 {}
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 {}
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 {}
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 {}
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 {}
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 {}
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 {}
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
interface FilterOptions {}
FilterOptions
property validate
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 {}
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 {}
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 {}
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 aresourceTiming
property of relevantdata
events.false
property config
config?: Record<string, unknown>;
The initial configuration options for the style fragments. Each key in the object is a fragment ID (e.g.,
basemap
) and each value is a configuration object.null
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. Iffalse
, 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. AnObject
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 language
language?: 'auto' | string | string[];
A string with a BCP 47 language tag, or an array of such strings representing the desired languages used for the map's labels and UI components.
null
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; seesrc/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 minTileCacheSize
minTileCacheSize?: number | undefined;
The minimum 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 minZoom
minZoom?: number | undefined;
Minimum zoom of the map.
property performanceMetricsCollection
performanceMetricsCollection?: boolean;
If
true
, mapbox-gl will collect and send performance metrics.true
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 | Projection['name'];
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 HTTPcacheControl
/expires
headers.true
property renderWorldCopies
renderWorldCopies?: boolean | undefined;
If
true
, multiple copies of the world will be rendered, when zoomed out.true
property respectPrefersReducedMotion
respectPrefersReducedMotion?: boolean;
If set to
true
, the map will respect the user'sprefers-reduced-motion
browser setting and apply a reduced motion mode, minimizing animations and transitions. When set tofalse
, the map will always ignore theprefers-reduced-motion
settings, regardless of the user's preference, making all animations essential.true
property scrollZoom
scrollZoom?: boolean | InteractiveOptions | undefined;
If
true
, the "scroll to zoom" interaction is enabled. AnObject
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. AnObject
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. AnObject
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 {}
See Also
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-parameters
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 className
className?: string | undefined;
Space-separated CSS class names to add to marker element.
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 theMarker
to the plane of the map.viewport
aligns theMarker
to the plane of the viewport.auto
automatically matches the value ofrotationAlignment
. The default value isauto
.
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 theMarker
's rotation relative to the map, maintaining a bearing as the map rotates.viewport
aligns theMarker
's rotation relative to the viewport, agnostic to map rotations.auto
is equivalent toviewport
. The default value isauto
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 of27px
.
interface PaddingOptions
interface PaddingOptions {}
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 {}
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 {}
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:
, andmapbox://<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 {}
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 {}
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 {}
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:
, andmapbox://<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)
Dependencies (1)
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 .
Package analyzed in 10233 ms. - Missing or incorrect documentation? Open an issue for this package.