@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