--- title: "MapLibreMap | JavaScript maps SDK" description: "Documentation for MapTiler SDK" --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Class MapLibreMap The `Map` object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users interact with it. You create a `Map` by specifying a `container` and other options, see [MapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MapOptions/) for the full list. Then MapLibre GL JS initializes the map on the page and returns your `Map` object. #### Example[](#example) ```typescript let map = new Map({ container: 'map', center: [-122.420679, 37.772537], zoom: 13, style: style_object, hash: true, transformRequest: (url, resourceType)=> { if(resourceType === 'Source' && url.startsWith('http://myHost')) { return { url: url.replace('http', 'https'), headers: { 'my-custom-header': true}, credentials: 'include' // Include cookies for cross-origin requests } } } }); ``` #### See[](#see) [Display a map](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-map/) #### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#MapLibreMap)) - [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/) - MapLibreMap - [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/) ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Properties[](#properties) [boxZoom](#boxzoom) [cameraHelper](#camerahelper) [cancelPendingTileRequestsWhileZooming](#cancelpendingtilerequestswhilezooming) [cooperativeGestures](#cooperativegestures) [doubleClickZoom](#doubleclickzoom) [dragPan](#dragpan) [dragRotate](#dragrotate) [handlers](#handlers) [keyboard](#keyboard) [painter](#painter) [scrollZoom](#scrollzoom) [style](#style) [terrain](#terrain) [touchPitch](#touchpitch) [touchZoomRotate](#touchzoomrotate) [transform](#transform) [transformCameraUpdate](#transformcameraupdate) [transformConstrain](#transformconstrain) ### Accessors[](#accessors) [repaint](#repaint) [showCollisionBoxes](#showcollisionboxes) [showOverdrawInspector](#showoverdrawinspector) [showPadding](#showpadding) [showTileBoundaries](#showtileboundaries) [version](#version) [vertices](#vertices) ### Methods[](#methods) [addControl](#addcontrol) [addImage](#addimage) [addLayer](#addlayer) [addSource](#addsource) [addSprite](#addsprite) [areTilesLoaded](#aretilesloaded) [calculateCameraOptionsFromCameraLngLatAltRotation](#calculatecameraoptionsfromcameralnglataltrotation) [calculateCameraOptionsFromTo](#calculatecameraoptionsfromto) [cameraForBounds](#cameraforbounds) [coveringTiles](#coveringtiles) [easeTo](#easeto) [fire](#fire) [fitBounds](#fitbounds) [fitScreenCoordinates](#fitscreencoordinates) [flyTo](#flyto) [getAnisotropicFilterPitch](#getanisotropicfilterpitch) [getBearing](#getbearing) [getBounds](#getbounds) [getCameraTargetElevation](#getcameratargetelevation) [getCanvas](#getcanvas) [getCanvasContainer](#getcanvascontainer) [getCenter](#getcenter) [getCenterClampedToGround](#getcenterclampedtoground) [getCenterElevation](#getcenterelevation) [getContainer](#getcontainer) [getFeatureState](#getfeaturestate) [getFilter](#getfilter) [getGlobalState](#getglobalstate) [getGlyphs](#getglyphs) [getImage](#getimage) [getLayer](#getlayer) [getLayersOrder](#getlayersorder) [getLayoutProperty](#getlayoutproperty) [getLight](#getlight) [getMaxBounds](#getmaxbounds) [getMaxPitch](#getmaxpitch) [getMaxZoom](#getmaxzoom) [getMinPitch](#getminpitch) [getMinZoom](#getminzoom) [getPadding](#getpadding) [getPaintProperty](#getpaintproperty) [getPitch](#getpitch) [getPixelRatio](#getpixelratio) [getProjection](#getprojection) [getRenderWorldCopies](#getrenderworldcopies) [getRoll](#getroll) [getSky](#getsky) [getSource](#getsource) [getSprite](#getsprite) [getStyle](#getstyle) [getTerrain](#getterrain) [getVerticalFieldOfView](#getverticalfieldofview) [getZoom](#getzoom) [getZoomSnap](#getzoomsnap) [hasControl](#hascontrol) [hasImage](#hasimage) [isEasing](#iseasing) [isMoving](#ismoving) [isRotating](#isrotating) [isSourceLoaded](#issourceloaded) [isStyleLoaded](#isstyleloaded) [isZooming](#iszooming) [jumpTo](#jumpto) [listens](#listens) [listImages](#listimages) [loaded](#loaded) [loadImage](#loadimage) [migrateProjection](#migrateprojection) [moveLayer](#movelayer) [off](#off) [on](#on) [once](#once) [panBy](#panby) [panTo](#panto) [project](#project) [queryRenderedFeatures](#queryrenderedfeatures) [querySourceFeatures](#querysourcefeatures) [queryTerrainElevation](#queryterrainelevation) [redraw](#redraw) [refreshTiles](#refreshtiles) [remove](#remove) [removeControl](#removecontrol) [removeFeatureState](#removefeaturestate) [removeImage](#removeimage) [removeLayer](#removelayer) [removeSource](#removesource) [removeSprite](#removesprite) [resetNorth](#resetnorth) [resetNorthPitch](#resetnorthpitch) [resize](#resize) [rotateTo](#rotateto) [setAnisotropicFilterPitch](#setanisotropicfilterpitch) [setBearing](#setbearing) [setCenter](#setcenter) [setCenterClampedToGround](#setcenterclampedtoground) [setCenterElevation](#setcenterelevation) [setEventedParent](#seteventedparent) [setFeatureState](#setfeaturestate) [setFilter](#setfilter) [setGlobalStateProperty](#setglobalstateproperty) [setGlyphs](#setglyphs) [setLayerZoomRange](#setlayerzoomrange) [setLayoutProperty](#setlayoutproperty) [setLight](#setlight) [setMaxBounds](#setmaxbounds) [setMaxPitch](#setmaxpitch) [setMaxZoom](#setmaxzoom) [setMinPitch](#setminpitch) [setMinZoom](#setminzoom) [setPadding](#setpadding) [setPaintProperty](#setpaintproperty) [setPitch](#setpitch) [setPixelRatio](#setpixelratio) [setProjection](#setprojection) [setRenderWorldCopies](#setrenderworldcopies) [setRoll](#setroll) [setSky](#setsky) [setSourceTileLodParams](#setsourcetilelodparams) [setSprite](#setsprite) [setStyle](#setstyle) [setTerrain](#setterrain) [setTransformConstrain](#settransformconstrain) [setTransformRequest](#settransformrequest) [setVerticalFieldOfView](#setverticalfieldofview) [setZoom](#setzoom) [setZoomSnap](#setzoomsnap) [snapToNorth](#snaptonorth) [stop](#stop) [triggerRepaint](#triggerrepaint) [unproject](#unproject) [updateImage](#updateimage) [zoomIn](#zoomin) [zoomOut](#zoomout) [zoomTo](#zoomto) ## Constructors[](#constructors-1) ### constructor[](#constructor) - new MapLibreMap(options: [MapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MapOptions/)): MapLibreMap[](#constructormaplibremap) #### Parameters - options: [MapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MapOptions/) #### Returns MapLibreMap Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#constructor) ## Properties[](#properties-1) ### boxZoom[](#boxzoom) boxZoom: [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/) The map's [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/), which implements zooming using a drag gesture with the Shift key pressed. Find more details and examples using `boxZoom` in the [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/) section. ### cameraHelper[](#camerahelper) cameraHelper: [ICameraHelper](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ICameraHelper/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[cameraHelper](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#camerahelper) ### cancelPendingTileRequestsWhileZooming[](#cancelpendingtilerequestswhilezooming) cancelPendingTileRequestsWhileZooming: boolean The map's property which determines whether to cancel, or retain, tiles from the current viewport which are still loading but which belong to a farther (smaller) zoom level than the current one. - If `true`, when zooming in, tiles which didn't manage to load for previous zoom levels will become canceled. This might save some computing resources for slower devices, but the map details might appear more abruptly at the end of the zoom. - If `false`, when zooming in, the previous zoom level(s) tiles will progressively appear, giving a smoother map details experience. However, more tiles will be rendered in a short period of time. #### Default Value[](#default-value) ```typescript true ``` ### cooperativeGestures[](#cooperativegestures) cooperativeGestures: [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CooperativeGesturesHandler/) The map's [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CooperativeGesturesHandler/), which allows the user to see cooperative gesture info when user tries to zoom in/out. Find more details and examples using `cooperativeGestures` in the [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CooperativeGesturesHandler/) section. ### doubleClickZoom[](#doubleclickzoom) doubleClickZoom: [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/) The map's [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/), which allows the user to zoom by double clicking. Find more details and examples using `doubleClickZoom` in the [DoubleClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DoubleClickZoomHandler/) section. ### dragPan[](#dragpan) dragPan: [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/) The map's [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/), which implements dragging the map with a mouse or touch gesture. Find more details and examples using `dragPan` in the [DragPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragPanHandler/) section. ### dragRotate[](#dragrotate) dragRotate: [DragRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragRotateHandler/) The map's [DragRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragRotateHandler/), which implements rotating the map while dragging with the right mouse button or with the Control key pressed. Find more details and examples using `dragRotate` in the [DragRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.DragRotateHandler/) section. ### handlers[](#handlers) handlers: [HandlerManager](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HandlerManager/) Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[handlers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#handlers) ### keyboard[](#keyboard) keyboard: [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.KeyboardHandler/) The map's [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.KeyboardHandler/), which allows the user to zoom, rotate, and pan the map using keyboard shortcuts. Find more details and examples using `keyboard` in the [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.KeyboardHandler/) section. ### painter[](#painter) painter: [Painter](https://docs.maptiler.com/sdk-js/api-reference/classes/Painter/) ### scrollZoom[](#scrollzoom) scrollZoom: [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/) The map's [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/), which implements zooming in and out with a scroll wheel or trackpad. Find more details and examples using `scrollZoom` in the [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/) section. ### style[](#style) style: [Style](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Style/) ### terrain[](#terrain) terrain: [Terrain](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Terrain/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[terrain](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#terrain) ### touchPitch[](#touchpitch) touchPitch: [TwoFingersTouchPitchHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchPitchHandler/) The map's [TwoFingersTouchPitchHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchPitchHandler/), which allows the user to pitch the map with touch gestures. Find more details and examples using `touchPitch` in the [TwoFingersTouchPitchHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchPitchHandler/) section. ### touchZoomRotate[](#touchzoomrotate) touchZoomRotate: [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/) The map's [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/), which allows the user to zoom or rotate the map with touch gestures. Find more details and examples using `touchZoomRotate` in the [TwoFingersTouchZoomRotateHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchZoomRotateHandler/) section. ### transform[](#transform) transform: [ITransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ITransform/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[transform](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#transform) ### transformCameraUpdate[](#transformcameraupdate) transformCameraUpdate: [CameraUpdateTransformFunction](https://docs.maptiler.com/sdk-js/api-reference/types/CameraUpdateTransformFunction/) | null A callback used to defer camera updates or apply arbitrary constraints. If specified, this Camera instance can be used as a stateless component in React etc. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[transformCameraUpdate](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#transformcameraupdate) ### transformConstrain[](#transformconstrain) transformConstrain: [TransformConstrainFunction](https://docs.maptiler.com/sdk-js/api-reference/types/TransformConstrainFunction/) | null The map transform's callback that overrides the default constrain function. #### Default Value[](#default-value-1) ```typescript null ``` ## Accessors[](#accessors-1) ### repaint[](#repaint) - get repaint(): boolean Gets and sets a Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance. #### Returns boolean - set repaint(value: boolean): void #### Parameters - value: boolean #### Returns void ### showCollisionBoxes[](#showcollisionboxes) - get showCollisionBoxes(): boolean Gets and sets a Boolean indicating whether the map will render boxes around all symbols in the data source, revealing which symbols were rendered or which were hidden due to collisions. This information is useful for debugging. #### Returns boolean - set showCollisionBoxes(value: boolean): void #### Parameters - value: boolean #### Returns void ### showOverdrawInspector[](#showoverdrawinspector) - get showOverdrawInspector(): boolean Gets and sets a Boolean indicating whether the map should color-code each fragment to show how many times it has been shaded. White fragments have been shaded 8 or more times. Black fragments have been shaded 0 times. This information is useful for debugging. #### Returns boolean - set showOverdrawInspector(value: boolean): void #### Parameters - value: boolean #### Returns void ### showPadding[](#showpadding) - get showPadding(): boolean Gets and sets a Boolean indicating whether the map will visualize the padding offsets. #### Returns boolean - set showPadding(value: boolean): void #### Parameters - value: boolean #### Returns void ### showTileBoundaries[](#showtileboundaries) - get showTileBoundaries(): boolean Gets and sets a Boolean indicating whether the map will render an outline around each tile and the tile ID. These tile boundaries are useful for debugging. The uncompressed file size of the first vector source is drawn in the top left corner of each tile, next to the tile ID. #### Returns boolean #### Example[](#example-1) ```typescript map.showTileBoundaries = true; ``` - set showTileBoundaries(value: boolean): void #### Parameters - value: boolean #### Returns void ### version[](#version) - get version(): string Returns the package version of the library #### Returns string Package version of the library ### vertices[](#vertices) - get vertices(): boolean #### Returns boolean - set vertices(value: boolean): void #### Parameters - value: boolean #### Returns void ## Methods[](#methods-1) ### addControl[](#addcontrol) - addControl(control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/), position?: [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/)): this[](#addcontrol-1) Adds an [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) to the map, calling `control.onAdd(this)`. An [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) will be fired if the control is invalid. #### Parameters - control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) The [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) to add. - `Optional`position: [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/) position on the map to which the control will be added. Valid values are `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`. Defaults to `'top-right'`. #### Returns this #### Example[](#example-2) Add zoom and rotation controls to the map. ```typescript map.addControl(new NavigationControl()); ``` #### See[](#see-1) [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/display-map-navigation-controls/) ### addImage[](#addimage) - addImage(     id: string,     image:         | [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)         | [StyleImageInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/StyleImageInterface/)         | [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)         | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)         | {             data: Uint8Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>             | Uint8ClampedArray<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>;             height: number;             width: number;         },     options?: [Partial](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Partial/)<[StyleImageMetadata](https://docs.maptiler.com/sdk-js/api-reference/types/StyleImageMetadata/)\>, ): this[](#addimage-1) Add an image to the style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with [`icon-image`](https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-image), [`background-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-background-background-pattern), [`fill-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-fill-fill-pattern), or [`line-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-line-line-pattern). A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if the image parameter is invalid or there is not enough space in the sprite to add this image. #### Parameters - id: string The ID of the image. - image:     | [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)     | [StyleImageInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/StyleImageInterface/)     | [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)     | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)     | {         data: Uint8Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>         | Uint8ClampedArray<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>;         height: number;         width: number;     } The image as an `HTMLImageElement`, `ImageData`, `ImageBitmap` or object with `width`, `height`, and `data` properties with the same format as `ImageData`. - `Optional`options: [Partial](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Partial/)<[StyleImageMetadata](https://docs.maptiler.com/sdk-js/api-reference/types/StyleImageMetadata/)\> Options object. #### Returns this #### Example[](#example-3) ```typescript // If the style's sprite does not already contain an image with ID 'cat', // add the image 'cat-icon.png' to the style's sprite with the ID 'cat'. const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png'); if (!map.hasImage('cat')) map.addImage('cat', image.data); // Add a stretchable image that can be used with `icon-text-fit` // In this example, the image is 600px wide by 400px high. const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png'); if (map.hasImage('border-image')) return; map.addImage('border-image', image.data, { content: [16, 16, 300, 384], // place text over left half of image, avoiding the 16px border stretchX: [[16, 584]], // stretch everything horizontally except the 16px border stretchY: [[16, 384]], // stretch everything vertically except the 16px border }); ``` #### See[](#see-2) - Use `HTMLImageElement`: [Add an icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-an-icon-to-the-map/) - Use `ImageData`: [Add a generated icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-generated-icon-to-the-map/) ### addLayer[](#addlayer) - addLayer(layer: [AddLayerObject](https://docs.maptiler.com/sdk-js/api-reference/types/AddLayerObject/), beforeId?: string): this[](#addlayer-1) Adds a [MapLibre style layer](https://maplibre.org/maplibre-style-spec/layers) to the map's style. A layer defines how data from a specified source will be styled. Read more about layer types and available paint and layout properties in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/layers). #### Parameters - layer: [AddLayerObject](https://docs.maptiler.com/sdk-js/api-reference/types/AddLayerObject/) The layer to add, conforming to either the MapLibre Style Specification's [layer definition](https://maplibre.org/maplibre-style-spec/layers) or, less commonly, the [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/) specification. Can also be a layer definition with an embedded source definition. The MapLibre Style Specification's layer definition is appropriate for most layers. - `Optional`beforeId: string The ID of an existing layer to insert the new layer before, resulting in the new layer appearing visually beneath the existing layer. If this argument is not specified, the layer will be appended to the end of the layers array and appear visually above all other layers. #### Returns this #### Example[](#example-4) Add a circle layer with a vector source ```typescript map.addLayer({ id: 'points-of-interest', source: { type: 'vector', url: 'https://demotiles.maplibre.org/tiles/tiles.json' }, 'source-layer': 'poi_label', type: 'circle', paint: { // MapLibre Style Specification paint properties }, layout: { // MapLibre Style Specification layout properties } }); ``` #### Example[](#example-5) Define a source before using it to create a new layer ```typescript map.addSource('state-data', { type: 'geojson', data: 'path/to/data.geojson' }); map.addLayer({ id: 'states', // References the GeoJSON source defined above // and does not require a `source-layer` source: 'state-data', type: 'symbol', layout: { // Set the label content to the // feature's `name` property text-field: ['get', 'name'] } }); ``` #### Example[](#example-6) Add a new symbol layer before an existing layer ```typescript map.addLayer({ id: 'states', // References a source that's already been defined source: 'state-data', type: 'symbol', layout: { // Set the label content to the // feature's `name` property text-field: ['get', 'name'] } // Add the layer before the existing `cities` layer }, 'cities'); ``` #### See[](#see-3) - [Create and style clusters](https://maplibre.org/maplibre-gl-js/docs/examples/create-and-style-clusters/) - [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-vector-tile-source/) - [Add a WMS source](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-wms-source/) ### addSource[](#addsource) - addSource(     id: string,     source: [CanvasSourceSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/CanvasSourceSpecification/) | [SourceSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SourceSpecification/), ): this[](#addsource-1) Adds a source to the map's style. Events triggered: Triggers the `source.add` event. #### Parameters - id: string The ID of the source to add. Must not conflict with existing sources. - source: [CanvasSourceSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/CanvasSourceSpecification/) | [SourceSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SourceSpecification/) The source object, conforming to the MapLibre Style Specification's [source definition](https://maplibre.org/maplibre-style-spec/sources) or [CanvasSourceSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/CanvasSourceSpecification/). #### Returns this #### Example[](#example-7) ```typescript map.addSource('my-data', { type: 'vector', url: 'https://demotiles.maplibre.org/tiles/tiles.json' }); ``` #### Example[](#example-8) ```typescript map.addSource('my-data', { "type": "geojson", "data": { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-77.0323, 38.9131] }, "properties": { "title": "Mapbox DC", "marker-symbol": "monument" } } }); ``` #### See[](#see-4) GeoJSON source: [Add live realtime data](https://maplibre.org/maplibre-gl-js/docs/examples/add-live-realtime-data/) ### addSprite[](#addsprite) - addSprite(id: string, url: string, options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): this[](#addsprite-1) Adds a sprite to the map's style. Fires the `style` event. #### Parameters - id: string The ID of the sprite to add. Must not conflict with existing sprites. - url: string The URL to load the sprite from - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-9) ```typescript map.addSprite('sprite-two', 'http://example.com/sprite-two'); ``` ### areTilesLoaded[](#aretilesloaded) - areTilesLoaded(): boolean[](#aretilesloaded-1) Returns a Boolean indicating whether all tiles in the viewport from all sources on the style are loaded. #### Returns boolean A Boolean indicating whether all tiles are loaded. #### Example[](#example-10) ```typescript let tilesLoaded = map.areTilesLoaded(); ``` ### calculateCameraOptionsFromCameraLngLatAltRotation[](#calculatecameraoptionsfromcameralnglataltrotation) - calculateCameraOptionsFromCameraLngLatAltRotation(     cameraLngLat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/),     cameraAlt: number,     bearing: number,     pitch: number,     roll?: number, ): [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/)[](#calculatecameraoptionsfromcameralnglataltrotation-1) Given a camera position and rotation, calculates zoom and center point and returns them as [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/). #### Parameters - cameraLngLat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/) The lng, lat of the camera to look from - cameraAlt: number The altitude of the camera to look from, in meters above sea level - bearing: number Bearing of the camera, in degrees - pitch: number Pitch of the camera, in degrees - `Optional`roll: number Roll of the camera, in degrees #### Returns [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/) the calculated camera options #### Example[](#example-11) ```typescript // Calculate options to look from camera position(1°, 0°, 1000m) with bearing = 90°, pitch = 30°, and roll = 45° const cameraLngLat = new LngLat(1, 0); const cameraAltitude = 1000; const bearing = 90; const pitch = 30; const roll = 45; const cameraOptions = map.calculateCameraOptionsFromCameraLngLatAltRotation(cameraLngLat, cameraAltitude, bearing, pitch, roll); // Apply calculated options map.jumpTo(cameraOptions); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[calculateCameraOptionsFromCameraLngLatAltRotation](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#calculatecameraoptionsfromcameralnglataltrotation) ### calculateCameraOptionsFromTo[](#calculatecameraoptionsfromto) - calculateCameraOptionsFromTo(     from: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/),     altitudeFrom: number,     to: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/),     altitudeTo?: number, ): [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/)[](#calculatecameraoptionsfromto-1) Given a camera 'from' position and a position to look at (`to`), calculates zoom and camera rotation and returns them as [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/). #### Parameters - from: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The camera to look from - altitudeFrom: number The altitude of the camera to look from - to: [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The center to look at - `Optional`altitudeTo: number Optional altitude of the center to look at. If none given the ground height will be used. #### Returns [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/) the calculated camera options #### Example[](#example-12) ```typescript // Calculate options to look from (1°, 0°, 1000m) to (1°, 1°, 0m) const cameraLngLat = new LngLat(1, 0); const cameraAltitude = 1000; const targetLngLat = new LngLat(1, 1); const targetAltitude = 0; const cameraOptions = map.calculateCameraOptionsFromTo(cameraLngLat, cameraAltitude, targetLngLat, targetAltitude); // Apply calculated options map.jumpTo(cameraOptions); ``` Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[calculateCameraOptionsFromTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#calculatecameraoptionsfromto) ### cameraForBounds[](#cameraforbounds) - cameraForBounds(     bounds: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/),     options?: [CameraForBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraForBoundsOptions/), ): [CenterZoomBearing](https://docs.maptiler.com/sdk-js/api-reference/types/CenterZoomBearing/) | undefined[](#cameraforbounds-1) #### Parameters - bounds: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/) Calculate the center for these bounds in the viewport and use the highest zoom level up to and including [Map.getMaxZoom](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#getmaxzoom) that fits in the viewport. LngLatBounds represent a box that is always axis-aligned with bearing 0. Bounds will be taken in \[sw, ne\] order. Southwest point will always be to the left of the northeast point. - `Optional`options: [CameraForBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraForBoundsOptions/) Options object #### Returns [CenterZoomBearing](https://docs.maptiler.com/sdk-js/api-reference/types/CenterZoomBearing/) | undefined If map is able to fit to provided bounds, returns `center`, `zoom`, and `bearing`. If map is unable to fit, method will warn and return undefined. #### Example[](#example-13) ```typescript let bbox = [[-79, 43], [-73, 45]]; let newCameraTransform = map.cameraForBounds(bbox, { padding: {top: 10, bottom:25, left: 15, right: 5} }); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[cameraForBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#cameraforbounds) ### coveringTiles[](#coveringtiles) - coveringTiles(options: [CoveringTilesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CoveringTilesOptions/)): [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\][](#coveringtiles-1) Returns an array of `OverscaledTileID` objects that cover the current viewport for a given tile size. This method is useful for determining which tiles are visible in the current viewport. #### Parameters - options: [CoveringTilesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CoveringTilesOptions/) Options for calculating the covering tiles. #### Returns [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)\[\] An array of `OverscaledTileID` objects. #### Example[](#example-14) ```typescript // Get the tiles to cover the view for a 512x512px tile source const tiles = map.coveringTiles({tileSize: 512}); ``` ### easeTo[](#easeto) - easeTo(options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/), eventData?: any): this[](#easeto-1) Changes any combination of `center`, `zoom`, `bearing`, `pitch`, `roll`, and `padding` with an animated transition between old and new values. The map will retain its current values for any details not specified in `options`. !!! note "Reduced Motion" The transition will happen instantly if the user has enabled the `reduced motion` accessibility feature enabled in their operating system, unless `options` includes `essential: true`. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, `zoomend`, `pitchstart`, `pitch`, `pitchend`, `rollstart`, `roll`, `rollend`, and `rotate`. #### Parameters - options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) Options describing the destination and animation of the transition. Accepts [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/) and [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/). - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### See[](#see-5) [Navigate the map with game-like controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigate-the-map-with-game-like-controls/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[easeTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#easeto) ### fire[](#fire) - fire(event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/), properties?: any): this[](#fire-1) #### Parameters - event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) - `Optional`properties: any #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[fire](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#fire) ### fitBounds[](#fitbounds) - fitBounds(     bounds: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/),     options?: [FitBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FitBoundsOptions/),     eventData?: any, ): this[](#fitbounds-1) Pans and zooms the map to contain its visible area within the specified geographical bounds. This function will also reset the map's bearing to 0 if bearing is nonzero. Triggers the following events: `movestart` and `moveend`. #### Parameters - bounds: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/) Center these bounds in the viewport and use the highest zoom level up to and including [Map.getMaxZoom](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#getmaxzoom) that fits them in the viewport. Bounds will be taken in \[sw, ne\] order. Southwest point will always be to the left of the northeast point. - `Optional`options: [FitBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FitBoundsOptions/) Options supports all properties from [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) and [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/) in addition to the fields below. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-15) ```typescript let bbox = [[-79, 43], [-73, 45]]; map.fitBounds(bbox, { padding: {top: 10, bottom:25, left: 15, right: 5} }); ``` #### See[](#see-6) [Fit a map to a bounding box](https://maplibre.org/maplibre-gl-js/docs/examples/fit-a-map-to-a-bounding-box/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[fitBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#fitbounds) ### fitScreenCoordinates[](#fitscreencoordinates) - fitScreenCoordinates(     p0: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/),     p1: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/),     bearing: number,     options?: [FitBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FitBoundsOptions/),     eventData?: any, ): this[](#fitscreencoordinates-1) Pans, rotates and zooms the map to to fit the box made by points p0 and p1 once the map is rotated to the specified bearing. To zoom without rotating, pass in the current map bearing. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, `zoomend` and `rotate`. #### Parameters - p0: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) First point on screen, in pixel coordinates - p1: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) Second point on screen, in pixel coordinates - bearing: number Desired map bearing at end of animation, in degrees - `Optional`options: [FitBoundsOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FitBoundsOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-16) ```typescript let p0 = [220, 400]; let p1 = [500, 900]; map.fitScreenCoordinates(p0, p1, map.getBearing(), { padding: {top: 10, bottom:25, left: 15, right: 5} }); ``` #### See[](#see-7) Used by [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[fitScreenCoordinates](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#fitscreencoordinates) ### flyTo[](#flyto) - flyTo(options: [FlyToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FlyToOptions/), eventData?: any): this[](#flyto-1) Changes any combination of center, zoom, bearing, pitch, and roll, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help the user maintain her bearings even after traversing a great distance. !!! note "Reduced Motion" The animation will be skipped, and this will behave equivalently to `jumpTo` if the user has the `reduced motion` accessibility feature enabled in their operating system, unless 'options' includes `essential: true`. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, `zoomend`, `pitchstart`, `pitch`, `pitchend`, `rollstart`, `roll`, `rollend`, and `rotate`. #### Parameters - options: [FlyToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/FlyToOptions/) Options describing the destination and animation of the transition. Accepts [CameraOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CameraOptions/), [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), and the following additional options. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-17) ```typescript // fly with default options to null island map.flyTo({center: [0, 0], zoom: 9}); // using flyTo options map.flyTo({ center: [0, 0], zoom: 9, speed: 0.2, curve: 1, easing(t) { return t; } }); ``` #### See[](#see-8) - [Fly to a location](https://maplibre.org/maplibre-gl-js/docs/examples/fly-to-a-location/) - [Slowly fly to a location](https://maplibre.org/maplibre-gl-js/docs/examples/slowly-fly-to-a-location/) - [Fly to a location based on scroll position](https://maplibre.org/maplibre-gl-js/docs/examples/fly-to-a-location-based-on-scroll-position/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[flyTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#flyto) ### getAnisotropicFilterPitch[](#getanisotropicfilterpitch) - getAnisotropicFilterPitch(): number[](#getanisotropicfilterpitch-1) Returns the map's anisotropic filter pitch. If the map is pitched beyond this threshold, anisotropic filtering will be applied to all raster layers. #### Returns number The anisotropicFilterPitch #### Example[](#example-18) ```typescript let anisotropicFilterPitch = map.getAnisotropicFilterPitch(); ``` ### getBearing[](#getbearing) - getBearing(): number[](#getbearing-1) Returns the map's current bearing. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up. #### Returns number The map's current bearing. #### See[](#see-9) [Navigate the map with game-like controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigate-the-map-with-game-like-controls/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getBearing](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getbearing) ### getBounds[](#getbounds) - getBounds(): [LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/)[](#getbounds-1) Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region. #### Returns [LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/) The geographical bounds of the map as [LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/). #### Example[](#example-19) ```typescript let bounds = map.getBounds(); ``` ### getCameraTargetElevation[](#getcameratargetelevation) - getCameraTargetElevation(): number[](#getcameratargetelevation-1) Returns the elevation for the point where the camera is looking. This value corresponds to: "meters above sea level" \* "exaggeration" #### Returns number The elevation. ### getCanvas[](#getcanvas) - getCanvas(): [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/)[](#getcanvas-1) Returns the map's `` element. #### Returns [HTMLCanvasElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLCanvasElement/) The map's `` element. #### See[](#see-10) - [Measure distances](https://maplibre.org/maplibre-gl-js/docs/examples/measure-distances/) - [Display a popup on hover](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-hover/) - [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-the-map-on-a-clicked-symbol/) ### getCanvasContainer[](#getcanvascontainer) - getCanvasContainer(): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#getcanvascontainer-1) Returns the HTML element containing the map's `` element. If you want to add non-GL overlays to the map, you should append them to this element. This is the element to which event bindings for map interactivity (such as panning and zooming) are attached. It will receive bubbled events from child elements such as the ``, but not from map controls. #### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) The container of the map's ``. #### See[](#see-11) [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/) ### getCenter[](#getcenter) - getCenter(): [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)[](#getcenter-1) Returns the map's geographical centerpoint. #### Returns [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The map's geographical centerpoint. #### Example[](#example-20) Return a LngLat object such as `{lng: 0, lat: 0}` ```typescript let center = map.getCenter(); // access longitude and latitude values directly let {lng, lat} = map.getCenter(); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getCenter](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getcenter) ### getCenterClampedToGround[](#getcenterclampedtoground) - getCenterClampedToGround(): boolean[](#getcenterclampedtoground-1) Returns the value of `centerClampedToGround`. If true, the elevation of the center point will automatically be set to the terrain elevation (or zero if terrain is not enabled). If false, the elevation of the center point will default to sea level and will not automatically update. Defaults to true. Needs to be set to false to keep the camera above ground when pitch > 90 degrees. #### Returns boolean Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getCenterClampedToGround](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getcenterclampedtoground) ### getCenterElevation[](#getcenterelevation) - getCenterElevation(): number[](#getcenterelevation-1) Returns the elevation of the map's center point. #### Returns number The elevation of the map's center point, in meters above sea level. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getCenterElevation](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getcenterelevation) ### getContainer[](#getcontainer) - getContainer(): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#getcontainer-1) Returns the map's containing HTML element. #### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/) The map's container. ### getFeatureState[](#getfeaturestate) - getFeatureState(feature: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/)): any[](#getfeaturestate-1) Gets the `state` of a feature. A feature's `state` is a set of user-defined key-value pairs that are assigned to a feature at runtime. Features are identified by their `feature.id` attribute, which can be any number or string. !!! note To access the values in a feature's state object for the purposes of styling the feature, use the [`feature-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#feature-state). #### Parameters - feature: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/) Feature identifier. Feature objects returned from [Map.queryRenderedFeatures](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#queryrenderedfeatures) or event handlers can be used as feature identifiers. #### Returns any The state of the feature: a set of key-value pairs that was assigned to the feature at runtime. #### Example[](#example-21) When the mouse moves over the `my-layer` layer, get the feature state for the feature under the mouse ```typescript map.on('mousemove', 'my-layer', (e) => { if (e.features.length > 0) { map.getFeatureState({ source: 'my-source', sourceLayer: 'my-source-layer', id: e.features[0].id }); } }); ``` ### getFilter[](#getfilter) - getFilter(layerId: string): void | [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/)[](#getfilter-1) Returns the filter applied to the specified style layer. #### Parameters - layerId: string The ID of the style layer whose filter to get. #### Returns void | [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) The layer's filter. ### getGlobalState[](#getglobalstate) - getGlobalState(): [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)[](#getglobalstate-1) Returns the global map state #### Returns [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/) The map state object. ### getGlyphs[](#getglyphs) - getGlyphs(): string | null[](#getglyphs-1) Returns the value of the style's glyphs URL #### Returns string | null glyphs Style's glyphs url, or `null` if glyphs are unset. ### getImage[](#getimage) - getImage(id: string): [StyleImage](https://docs.maptiler.com/sdk-js/api-reference/types/StyleImage/)[](#getimage-1) Returns an image, specified by ID, currently available in the map. This includes both images from the style's original sprite and any images that have been added at runtime using [Map.addImage](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addimage). #### Parameters - id: string The ID of the image. #### Returns [StyleImage](https://docs.maptiler.com/sdk-js/api-reference/types/StyleImage/) An image in the map with the specified ID. #### Example[](#example-22) ```typescript let coffeeShopIcon = map.getImage("coffee_cup"); ``` ### getLayer[](#getlayer) - getLayer(id: string): [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/) | undefined[](#getlayer-1) Returns the layer with the specified ID in the map's style. #### Parameters - id: string The ID of the layer to get. #### Returns [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/) | undefined The layer with the specified ID, or `undefined` if the ID corresponds to no existing layers. #### Example[](#example-23) ```typescript let stateDataLayer = map.getLayer('state-data'); ``` #### See[](#see-12) - [Filter symbols by toggling a list](https://maplibre.org/maplibre-gl-js/docs/examples/filter-symbols-by-toggling-a-list/) - [Filter symbols by text input](https://maplibre.org/maplibre-gl-js/docs/examples/filter-symbols-by-text-input/) ### getLayersOrder[](#getlayersorder) - getLayersOrder(): string\[\][](#getlayersorder-1) Return the ids of all layers currently in the style, including custom layers, in order. #### Returns string\[\] ids of layers, in order #### Example[](#example-24) ```typescript const orderedLayerIds = map.getLayersOrder(); ``` ### getLayoutProperty[](#getlayoutproperty) - getLayoutProperty(layerId: string, name: string): any[](#getlayoutproperty-1) Returns the value of a layout property in the specified style layer. #### Parameters - layerId: string The ID of the layer to get the layout property from. - name: string The name of the layout property to get. #### Returns any The value of the specified layout property. ### getLight[](#getlight) - getLight(): [LightSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LightSpecification/)[](#getlight-1) Returns the value of the light object. #### Returns [LightSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LightSpecification/) light Light properties of the style. ### getMaxBounds[](#getmaxbounds) - getMaxBounds(): [LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/) | null[](#getmaxbounds-1) Returns the maximum geographical bounds the map is constrained to, or `null` if none set. #### Returns [LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/) | null The map object. #### Example[](#example-25) ```typescript let maxBounds = map.getMaxBounds(); ``` ### getMaxPitch[](#getmaxpitch) - getMaxPitch(): number[](#getmaxpitch-1) Returns the map's maximum allowable pitch. #### Returns number The maxPitch ### getMaxZoom[](#getmaxzoom) - getMaxZoom(): number[](#getmaxzoom-1) Returns the map's maximum allowable zoom level. #### Returns number The maxZoom #### Example[](#example-26) ```typescript let maxZoom = map.getMaxZoom(); ``` ### getMinPitch[](#getminpitch) - getMinPitch(): number[](#getminpitch-1) Returns the map's minimum allowable pitch. #### Returns number The minPitch ### getMinZoom[](#getminzoom) - getMinZoom(): number[](#getminzoom-1) Returns the map's minimum allowable zoom level. #### Returns number minZoom #### Example[](#example-27) ```typescript let minZoom = map.getMinZoom(); ``` ### getPadding[](#getpadding) - getPadding(): [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)[](#getpadding-1) Returns the current padding applied around the map viewport. #### Returns [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/) The current padding around the map viewport. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getPadding](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getpadding) ### getPaintProperty[](#getpaintproperty) - getPaintProperty(layerId: string, name: string): unknown[](#getpaintproperty-1) Returns the value of a paint property in the specified style layer. #### Parameters - layerId: string The ID of the layer to get the paint property from. - name: string The name of a paint property to get. #### Returns unknown The value of the specified paint property. ### getPitch[](#getpitch) - getPitch(): number[](#getpitch-1) Returns the map's current pitch (tilt). #### Returns number The map's current pitch, measured in degrees away from the plane of the screen. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getPitch](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getpitch) ### getPixelRatio[](#getpixelratio) - getPixelRatio(): number[](#getpixelratio-1) Returns the map's pixel ratio. Note that the pixel ratio actually applied may be lower to respect maxCanvasSize. #### Returns number The pixel ratio. ### getProjection[](#getprojection) - getProjection(): [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/)[](#getprojection-1) Gets the [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/). #### Returns [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/) the projection specification. #### Example[](#example-28) ```typescript let projection = map.getProjection(); ``` ### getRenderWorldCopies[](#getrenderworldcopies) - getRenderWorldCopies(): boolean[](#getrenderworldcopies-1) Returns the state of `renderWorldCopies`. If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`: - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude. - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level. #### Returns boolean The renderWorldCopies #### Example[](#example-29) ```typescript let worldCopiesRendered = map.getRenderWorldCopies(); ``` #### See[](#see-13) [Render world copies](https://maplibre.org/maplibre-gl-js/docs/examples/render-world-copies/) ### getRoll[](#getroll) - getRoll(): number[](#getroll-1) Returns the map's current roll angle. #### Returns number The map's current roll, measured in degrees about the camera boresight. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getRoll](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getroll) ### getSky[](#getsky) - getSky(): [SkySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SkySpecification/)[](#getsky-1) Returns the value of the style's sky. #### Returns [SkySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SkySpecification/) the sky properties of the style. #### Example[](#example-30) ```typescript map.getSky(); ``` ### getSource[](#getsource) - getSource<[TSource](#getsourcetsource) extends [Source](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Source/)\>(id: string): [TSource](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#getsourcetsource) | undefined[](#getsource-1) Returns the source with the specified ID in the map's style. This method is often used to update a source using the instance members for the relevant source type as defined in classes that derive from [Source](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Source/). For example, setting the `data` for a GeoJSON source or updating the `url` and `coordinates` of an image source. #### Type Parameters - TSource extends [Source](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Source/) #### Parameters - id: string The ID of the source to get. #### Returns [TSource](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#getsourcetsource) | undefined The style source with the specified ID or `undefined` if the ID corresponds to no existing sources. The shape of the object varies by source type. A list of options for each source type is available on the MapLibre Style Specification's [Sources](https://maplibre.org/maplibre-style-spec/sources/) page. #### Example[](#example-31) ```typescript let sourceObject = map.getSource('points'); ``` #### See[](#see-14) - [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/) - [Animate a point](https://maplibre.org/maplibre-gl-js/docs/examples/animate-a-point/) - [Add live realtime data](https://maplibre.org/maplibre-gl-js/docs/examples/add-live-realtime-data/) ### getSprite[](#getsprite) - getSprite(): { id: string; url: string }\[\][](#getsprite-1) Returns the as-is value of the style's sprite. #### Returns { id: string; url: string }\[\] style's sprite list of id-url pairs ### getStyle[](#getstyle) - getStyle(): [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/)[](#getstyle-1) Returns the map's MapLibre style object, a JSON object which can be used to recreate the map's style. #### Returns [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/) The map's style JSON object. #### Example[](#example-32) ```typescript let styleJson = map.getStyle(); ``` ### getTerrain[](#getterrain) - getTerrain(): [TerrainSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TerrainSpecification/) | null[](#getterrain-1) Get the terrain-options if terrain is loaded #### Returns [TerrainSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TerrainSpecification/) | null the TerrainSpecification passed to setTerrain #### Example[](#example-33) ```typescript map.getTerrain(); // { source: 'terrain' }; ``` ### getVerticalFieldOfView[](#getverticalfieldofview) - getVerticalFieldOfView(): number[](#getverticalfieldofview-1) Returns the map's current vertical field of view, in degrees. #### Returns number The map's current vertical field of view. #### Default Value[](#default-value-2) ```typescript 36.87 ``` #### Example[](#example-34) ```typescript const verticalFieldOfView = map.getVerticalFieldOfView(); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getVerticalFieldOfView](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getverticalfieldofview) ### getZoom[](#getzoom) - getZoom(): number[](#getzoom-1) Returns the map's current zoom level. #### Returns number The map's current zoom level. #### Example[](#example-35) ```typescript map.getZoom(); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getZoom](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getzoom) ### getZoomSnap[](#getzoomsnap) - getZoomSnap(): number[](#getzoomsnap-1) Returns the map's current zoom snap level. #### Returns number The map's current zoom snap level. Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[getZoomSnap](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#getzoomsnap) ### hasControl[](#hascontrol) - hasControl(control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/)): boolean[](#hascontrol-1) Checks if a control exists on the map. #### Parameters - control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) The [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) to check. #### Returns boolean true if map contains control. #### Example[](#example-36) ```typescript // Define a new navigation control. let navigation = new NavigationControl(); // Add zoom and rotation controls to the map. map.addControl(navigation); // Check that the navigation control exists on the map. map.hasControl(navigation); ``` ### hasImage[](#hasimage) - hasImage(id: string): boolean[](#hasimage-1) Check whether or not an image with a specific ID exists in the style. This checks both images in the style's original sprite and any images that have been added at runtime using [Map.addImage](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addimage). An [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) will be fired if the image ID is missing. #### Parameters - id: string The ID of the image. #### Returns boolean A Boolean indicating whether the image exists. #### Example[](#example-37) Check if an image with the ID 'cat' exists in the style's sprite. ```typescript let catIconExists = map.hasImage('cat'); ``` ### isEasing[](#iseasing) - isEasing(): boolean[](#iseasing-1) #### Returns boolean Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[isEasing](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#iseasing) ### isMoving[](#ismoving) - isMoving(): boolean[](#ismoving-1) Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture. #### Returns boolean true if the map is moving. #### Example[](#example-38) ```typescript let isMoving = map.isMoving(); ``` ### isRotating[](#isrotating) - isRotating(): boolean[](#isrotating-1) Returns true if the map is rotating due to a camera animation or user gesture. #### Returns boolean true if the map is rotating. #### Example[](#example-39) ```typescript map.isRotating(); ``` ### isSourceLoaded[](#issourceloaded) - isSourceLoaded(id: string): boolean[](#issourceloaded-1) Returns a Boolean indicating whether the source is loaded. Returns `true` if the source with the given ID in the map's style has no outstanding network requests, otherwise `false`. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if there is no source with the specified ID. #### Parameters - id: string The ID of the source to be checked. #### Returns boolean A Boolean indicating whether the source is loaded. #### Example[](#example-40) ```typescript let sourceLoaded = map.isSourceLoaded('bathymetry-data'); ``` ### isStyleLoaded[](#isstyleloaded) - isStyleLoaded(): boolean | void[](#isstyleloaded-1) Returns a Boolean indicating whether the map's style is fully loaded. #### Returns boolean | void A Boolean indicating whether the style is fully loaded. #### Example[](#example-41) ```typescript let styleLoadStatus = map.isStyleLoaded(); ``` ### isZooming[](#iszooming) - isZooming(): boolean[](#iszooming-1) Returns true if the map is zooming due to a camera animation or user gesture. #### Returns boolean true if the map is zooming. #### Example[](#example-42) ```typescript let isZooming = map.isZooming(); ``` ### jumpTo[](#jumpto) - jumpTo(options: [JumpToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/JumpToOptions/), eventData?: any): this[](#jumpto-1) Changes any combination of center, zoom, bearing, pitch, and roll, without an animated transition. The map will retain its current values for any details not specified in `options`. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, `zoomend`, `pitchstart`, `pitch`, `pitchend`, `rollstart`, `roll`, `rollend` and `rotate`. #### Parameters - options: [JumpToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/JumpToOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-43) ```typescript // jump to coordinates at current zoom map.jumpTo({center: [0, 0]}); // jump with zoom, pitch, and bearing options map.jumpTo({ center: [0, 0], zoom: 8, pitch: 45, bearing: 90 }); ``` #### See[](#see-15) - [Jump to a series of locations](https://maplibre.org/maplibre-gl-js/docs/examples/jump-to-a-series-of-locations/) - [Update a feature in realtime](https://maplibre.org/maplibre-gl-js/docs/examples/update-a-feature-in-realtime/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[jumpTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#jumpto) ### listens[](#listens) - listens(type: string): boolean[](#listens-1) Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. #### Parameters - type: string The event type #### Returns boolean `true` if there is at least one registered listener for specified event type, `false` otherwise Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[listens](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#listens) ### listImages[](#listimages) - listImages(): string\[\][](#listimages-1) Returns an Array of strings containing the IDs of all images currently available in the map. This includes both images from the style's original sprite and any images that have been added at runtime using [Map.addImage](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addimage). #### Returns string\[\] An Array of strings containing the names of all sprites/images currently available in the map. #### Example[](#example-44) ```typescript let allImages = map.listImages(); ``` ### loaded[](#loaded) - loaded(): boolean[](#loaded-1) Returns a Boolean indicating whether the map is fully loaded. Returns `false` if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded. #### Returns boolean A Boolean indicating whether the map is fully loaded. ### loadImage[](#loadimage) - loadImage(     url: string, ): Promise<[GetResourceResponse](https://docs.maptiler.com/sdk-js/api-reference/types/GetResourceResponse/)<[ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/) | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)\>\>[](#loadimage-1) Load an image from an external URL to be used with [Map.addImage](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addimage). External domains must support [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). #### Parameters - url: string The URL of the image file. Image file must be in png, webp, or jpg format. #### Returns Promise<[GetResourceResponse](https://docs.maptiler.com/sdk-js/api-reference/types/GetResourceResponse/)<[ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/) | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)\>\> a promise that is resolved when the image is loaded #### Example[](#example-45) Load an image from an external URL. ```typescript const response = await map.loadImage('https://picsum.photos/50/50'); // Add the loaded image to the style's sprite with the ID 'photo'. map.addImage('photo', response.data); ``` #### See[](#see-16) [Add an icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-an-icon-to-the-map/) ### migrateProjection[](#migrateprojection) - migrateProjection(     newTransform: [ITransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ITransform/),     newCameraHelper: [ICameraHelper](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ICameraHelper/), ): void[](#migrateprojection-1) #### Parameters - newTransform: [ITransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ITransform/) - newCameraHelper: [ICameraHelper](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ICameraHelper/) #### Returns void #### Internal[](#internal) Creates a new specialized transform instance from a projection instance and migrates to this new transform, carrying over all the properties of the old transform (center, pitch, etc.). When the style's projection is changed (or first set), this function should be called. Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[migrateProjection](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#migrateprojection) ### moveLayer[](#movelayer) - moveLayer(id: string, beforeId?: string): this[](#movelayer-1) Moves a layer to a different z-position. #### Parameters - id: string The ID of the layer to move. - `Optional`beforeId: string The ID of an existing layer to insert the new layer before. When viewing the map, the `id` layer will appear beneath the `beforeId` layer. If `beforeId` is omitted, the layer will be appended to the end of the layers array and appear above all other layers on the map. #### Returns this #### Example[](#example-46) Move a layer with ID 'polygon' before the layer with ID 'country-label'. The `polygon` layer will appear beneath the `country-label` layer on the map. ```typescript map.moveLayer('polygon', 'country-label'); ``` ### off[](#off) - off<[T](#offt) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt),     layer: string,     listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): this[](#off-1) Removes an event listener for events previously added with `{@link Map.on}`. #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt) The event type previously used to install the listener. - layer: string The layer ID or listener previously used to install the listener. - listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The function previously installed as a listener. #### Returns this #### Event[](#event) Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[off](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#off) - off<[T](#offt-1) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-1),     layers: string\[\],     listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): this[](#off-2) Overload of the `off` method that allows to remove an event created with multiple layers. Provide the same layer IDs as to `on` or `once`, when the listener was registered. #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-1) The type of the event. - layers: string\[\] The layer IDs previously used to install the listener. - listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The function previously installed as a listener. #### Returns this #### Event[](#event-1) Overrides Camera.off - off<[T](#offt-2) extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-2),     listener: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): this[](#off-3) Overload of the `off` method that allows to remove an event created without specifying a layer. #### Type Parameters - T extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-2) The type of the event. - listener: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#offt-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The function previously installed as a listener. #### Returns this #### Event[](#event-2) Overrides Camera.off - off(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): this[](#off-4) Overload of the `off` method that allows to remove an event created without specifying a layer. #### Parameters - type: string The type of the event. - listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The function previously installed as a listener. #### Returns this #### Event[](#event-3) Overrides Camera.off ### on[](#on) - on<[T](#ont) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont),     layer: string,     listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-1) #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont) The event type to listen for. Events compatible with the optional `layerId` parameter are triggered when the cursor enters a visible portion of the specified layer from outside that layer or outside the map canvas. - layer: string The ID of a style layer or a listener if no ID is provided. Event will only be triggered if its location is within a visible feature in this layer. The event will have a `features` property containing an array of the matching features. If `layer` is not supplied, the event will not have a `features` property. Please note that many event types are not compatible with the optional `layer` parameter. - listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The function to be called when the event is fired. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) #### Event[](#event-4) Adds a listener for events of a specified type, optionally limited to features in a specified style layer(s). See [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/) and [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) for a full list of events and their description. | Event | Compatible with `layerId` | | --- | --- | | `mousedown` | yes | | `mouseup` | yes | | `mouseover` | yes | | `mouseout` | yes | | `mousemove` | yes | | `mouseenter` | yes (required) | | `mouseleave` | yes (required) | | `click` | yes | | `dblclick` | yes | | `contextmenu` | yes | | `touchstart` | yes | | `touchend` | yes | | `touchcancel` | yes | | `wheel` | | | `resize` | | | `remove` | | | `touchmove` | | | `movestart` | | | `move` | | | `moveend` | | | `dragstart` | | | `drag` | | | `dragend` | | | `zoomstart` | | | `zoom` | | | `zoomend` | | | `rotatestart` | | | `rotate` | | | `rotateend` | | | `pitchstart` | | | `pitch` | | | `pitchend` | | | `boxzoomstart` | | | `boxzoomend` | | | `boxzoomcancel` | | | `webglcontextlost` | | | `webglcontextrestored` | | | `load` | | | `render` | | | `idle` | | | `error` | | | `data` | | | `styledata` | | | `sourcedata` | | | `dataloading` | | | `styledataloading` | | | `sourcedataloading` | | | `styleimagemissing` | | | `dataabort` | | | `sourcedataabort` | | #### Example[](#example-47) ```typescript // Set an event listener that will fire // when the map has finished loading map.on('load', () => { // Once the map has finished loading, // add a new layer map.addLayer({ id: 'points-of-interest', source: { type: 'vector', url: 'https://maplibre.org/maplibre-style-spec/' }, 'source-layer': 'poi_label', type: 'circle', paint: { // MapLibre Style Specification paint properties }, layout: { // MapLibre Style Specification layout properties } }); }); ``` #### Example[](#example-48) ```typescript // Set an event listener that will fire // when a feature on the countries layer of the map is clicked map.on('click', 'countries', (e) => { new Popup() .setLngLat(e.lngLat) .setHTML(`Country name: ${e.features[0].properties.name}`) .addTo(map); }); ``` #### See[](#see-17) - [Display popup on click](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-click/) - [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-the-map-on-a-clicked-symbol/) - [Create a hover effect](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-hover-effect/) - [Create a draggable marker](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/) Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[on](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#on) - on<[T](#ont-1) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-1),     layerIds: string\[\],     listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-2) Overload of the `on` method that allows to listen to events specifying multiple layers. #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-1) The type of the event. - layerIds: string\[\] The array of style layer IDs. - listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The listener callback. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) #### Event[](#event-5) Overrides Camera.on - on<[T](#ont-2) extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-2),     listener: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-3) Overload of the `on` method that allows to listen to events without specifying a layer. #### Type Parameters - T extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-2) The type of the event. - listener: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#ont-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The listener callback. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) #### Event[](#event-6) Overrides Camera.on - on(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-4) Overload of the `on` method that allows to listen to events without specifying a layer. #### Parameters - type: string The type of the event. - listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The listener callback. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) #### Event[](#event-7) Overrides Camera.on ### once[](#once) - once<[T](#oncet) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet),     layer: string,     listener?: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): MapLibreMap | Promise<[MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)\>[](#once-1) Adds a listener that will be called only once to a specified event type, optionally limited to features in a specified style layer. #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet) The event type to listen for; one of `'mousedown'`, `'mouseup'`, `'click'`, `'dblclick'`, `'mousemove'`, `'mouseenter'`, `'mouseleave'`, `'mouseover'`, `'mouseout'`, `'contextmenu'`, `'touchstart'`, `'touchend'`, or `'touchcancel'`. `mouseenter` and `mouseover` events are triggered when the cursor enters a visible portion of the specified layer from outside that layer or outside the map canvas. `mouseleave` and `mouseout` events are triggered when the cursor leaves a visible portion of the specified layer, or leaves the map canvas. - layer: string The ID of a style layer or a listener if no ID is provided. Only events whose location is within a visible feature in this layer will trigger the listener. The event will have a `features` property containing an array of the matching features. - `Optional`listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The function to be called when the event is fired. #### Returns MapLibreMap | Promise<[MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)\> `this` if listener is provided, promise otherwise to allow easier usage of async/await #### Event[](#event-8) Overrides [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[once](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#once) - once<[T](#oncet-1) extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-1),     layerIds: string\[\],     listener?: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): MapLibreMap | Promise[](#once-2) Overload of the `once` method that allows to listen to events specifying multiple layers. #### Type Parameters - T extends keyof [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-1) The type of the event. - layerIds: string\[\] The array of style layer IDs. - `Optional`listener: (ev: [MapLayerEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-1)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The listener callback. #### Returns MapLibreMap | Promise #### Event[](#event-9) Overrides Camera.once - once<[T](#oncet-2) extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\>(     type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-2),     listener?: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void, ): MapLibreMap | Promise[](#once-3) Overload of the `once` method that allows to listen to events without specifying a layer. #### Type Parameters - T extends keyof [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/) #### Parameters - type: [T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-2) The type of the event. - `Optional`listener: (ev: [MapEventType](https://docs.maptiler.com/sdk-js/api-reference/types/MapEventType/)\[[T](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#oncet-2)\] & [Object](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Object/)) \=> void The listener callback. #### Returns MapLibreMap | Promise #### Event[](#event-10) Overrides Camera.once - once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): MapLibreMap | Promise[](#once-4) Overload of the `once` method that allows to listen to events without specifying a layer. #### Parameters - type: string The type of the event. - `Optional`listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The listener callback. #### Returns MapLibreMap | Promise #### Event[](#event-11) Overrides Camera.once ### panBy[](#panby) - panBy(offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/), options?: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/), eventData?: any): this[](#panby-1) Pans the map by the specified offset. Triggers the following events: `movestart` and `moveend`. #### Parameters - offset: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) `x` and `y` coordinates by which to pan the map. - `Optional`options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### See[](#see-18) [Navigate the map with game-like controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigate-the-map-with-game-like-controls/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[panBy](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#panby) ### panTo[](#panto) - panTo(lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/), options?: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/), eventData?: any): this[](#panto-1) Pans the map to the specified location with an animated transition. Triggers the following events: `movestart` and `moveend`. #### Parameters - lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/) The location to pan the map to. - `Optional`options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) Options describing the destination and animation of the transition. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-49) ```typescript map.panTo([-74, 38]); // Specify that the panTo animation should last 5000 milliseconds. map.panTo([-74, 38], {duration: 5000}); ``` #### See[](#see-19) [Update a feature in realtime](https://maplibre.org/maplibre-gl-js/docs/examples/update-a-feature-in-realtime/) Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[panTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#panto) ### project[](#project) - project(lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/)): [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)[](#project-1) Returns a [Point](https://github.com/mapbox/point-geometry) representing pixel coordinates, relative to the map's `container`, that correspond to the specified geographical location. #### Parameters - lnglat: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/) The geographical location to project. #### Returns [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) The [Point](https://github.com/mapbox/point-geometry) corresponding to `lnglat`, relative to the map's `container`. #### Example[](#example-50) ```typescript let coordinate = [-122.420679, 37.772537]; let point = map.project(coordinate); ``` ### queryRenderedFeatures[](#queryrenderedfeatures) - queryRenderedFeatures(     geometryOrOptions?:         | [QueryRenderedFeaturesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QueryRenderedFeaturesOptions/)         | [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)         | \[[PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/), [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)\],     options?: [QueryRenderedFeaturesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QueryRenderedFeaturesOptions/), ): [MapGeoJSONFeature](https://docs.maptiler.com/sdk-js/api-reference/types/MapGeoJSONFeature/)\[\][](#queryrenderedfeatures-1) Returns an array of MapGeoJSONFeature objects representing visible features that satisfy the query parameters. #### Parameters - `Optional`geometryOrOptions: [QueryRenderedFeaturesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QueryRenderedFeaturesOptions/) | [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) | \[[PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/), [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)\] (optional) The geometry of the query region in pixel points within the map viewport: either a single pixel point or a pair of top-left and bottom-right pixel points describing a bounding box. The origin of the pixel points is at the top-left of the map viewport. Omitting this parameter (i.e. calling [Map.queryRenderedFeatures](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#queryrenderedfeatures) with zero arguments, or with only a `options` argument) is equivalent to passing a bounding box encompassing the entire map viewport. The geometryOrOptions can receive a [QueryRenderedFeaturesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QueryRenderedFeaturesOptions/) only to support a situation where the function receives only one parameter which is the options parameter. - `Optional`options: [QueryRenderedFeaturesOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QueryRenderedFeaturesOptions/) (optional) Options object. #### Returns [MapGeoJSONFeature](https://docs.maptiler.com/sdk-js/api-reference/types/MapGeoJSONFeature/)\[\] An array of MapGeoJSONFeature objects. 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 antemeridian 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. #### Example[](#example-51) Find all features at a point ```typescript let features = map.queryRenderedFeatures( [20, 35], { layers: ['my-layer-name'] } ); ``` #### Example[](#example-52) Find all features within a static bounding box ```typescript let features = map.queryRenderedFeatures( [[10, 20], [30, 50]], { layers: ['my-layer-name'] } ); ``` #### Example[](#example-53) Find all features within a bounding box around a point ```typescript let width = 10; let height = 20; let features = map.queryRenderedFeatures([ [point.x - width / 2, point.y - height / 2], [point.x + width / 2, point.y + height / 2] ], { layers: ['my-layer-name'] }); ``` #### Example[](#example-54) Query all rendered features from a single layer ```typescript let features = map.queryRenderedFeatures({ layers: ['my-layer-name'] }); ``` #### See[](#see-20) [Get features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/get-features-under-the-mouse-pointer/) ### querySourceFeatures[](#querysourcefeatures) - querySourceFeatures(     sourceId: string,     parameters?: [QuerySourceFeatureOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QuerySourceFeatureOptions/) | null, ): [GeoJSONFeature](https://docs.maptiler.com/sdk-js/api-reference/classes/GeoJSONFeature/)\[\][](#querysourcefeatures-1) Returns an array of MapGeoJSONFeature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters. #### Parameters - sourceId: string The ID of the vector tile or GeoJSON source to query. - `Optional`parameters: [QuerySourceFeatureOptions](https://docs.maptiler.com/sdk-js/api-reference/types/QuerySourceFeatureOptions/) | null The options object. #### Returns [GeoJSONFeature](https://docs.maptiler.com/sdk-js/api-reference/classes/GeoJSONFeature/)\[\] An array of MapGeoJSONFeature objects. In contrast to [Map.queryRenderedFeatures](https://docs.maptiler.com/sdk-js/api-reference/classes/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. #### Example[](#example-55) Find all features in one source layer in a vector source ```typescript let features = map.querySourceFeatures('your-source-id', { sourceLayer: 'your-source-layer' }); ``` ### queryTerrainElevation[](#queryterrainelevation) - queryTerrainElevation(lngLatLike: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/)): number | null[](#queryterrainelevation-1) Gets the elevation at a given location, in meters above sea level. Returns null if terrain is not enabled. If terrain is enabled with some exaggeration value, the value returned here will be reflective of (multiplied by) that exaggeration value. This method should be used for proper positioning of custom 3d objects, as explained [here](https://maplibre.org/maplibre-gl-js/docs/examples/adding-3d-models-using-threejs-on-terrain/) #### Parameters - lngLatLike: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/) \[x,y\] or LngLat coordinates of the location #### Returns number | null elevation in meters Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[queryTerrainElevation](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#queryterrainelevation) ### redraw[](#redraw) - redraw(): this[](#redraw-1) Force a synchronous redraw of the map. #### Returns this #### Example[](#example-56) ```typescript map.redraw(); ``` ### refreshTiles[](#refreshtiles) - refreshTiles(     sourceId: string,     tileIds?: { x: number; y: number; z: number }\[\], ): void[](#refreshtiles-1) Triggers a reload of the selected tiles #### Parameters - sourceId: string The ID of the source - `Optional`tileIds: { x: number; y: number; z: number }\[\] An array of tile IDs to be reloaded. If not defined, all tiles will be reloaded. #### Returns void #### Example[](#example-57) ```typescript map.refreshTiles('satellite', [{x:1024, y: 1023, z: 11}, {x:1023, y: 1023, z: 11}]); ``` ### remove[](#remove) - remove(): void[](#remove-1) Clean up and release all internal resources associated with this map. This includes DOM elements, event bindings, web workers, and WebGL resources. Use this method when you are done using the map and wish to ensure that it no longer consumes browser resources. Afterwards, you must not call any other methods on the map. #### Returns void ### removeControl[](#removecontrol) - removeControl(control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/)): this[](#removecontrol-1) Removes the control from the map. An [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) will be fired if the control is invalid. #### Parameters - control: [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) The [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/) to remove. #### Returns this #### Example[](#example-58) ```typescript // Define a new navigation control. let navigation = new NavigationControl(); // Add zoom and rotation controls to the map. map.addControl(navigation); // Remove zoom and rotation controls from the map. map.removeControl(navigation); ``` ### removeFeatureState[](#removefeaturestate) - removeFeatureState(target: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/), key?: string): this[](#removefeaturestate-1) Removes the `state` of a feature, setting it back to the default behavior. If only a `target.source` is specified, it will remove the state for all features from that source. If `target.id` is also specified, it will remove all keys for that feature's state. If `key` is also specified, it removes only that key from that feature's state. Features are identified by their `feature.id` attribute, which can be any number or string. #### Parameters - target: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/) Identifier of where to remove state. It can be a source, a feature, or a specific key of feature. Feature objects returned from [Map.queryRenderedFeatures](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#queryrenderedfeatures) or event handlers can be used as feature identifiers. - `Optional`key: string (optional) The key in the feature state to reset. #### Returns this #### Example[](#example-59) Reset the entire state object for all features in the `my-source` source ```typescript map.removeFeatureState({ source: 'my-source' }); ``` #### Example[](#example-60) When the mouse leaves the `my-layer` layer, reset the entire state object for the feature under the mouse ```typescript map.on('mouseleave', 'my-layer', (e) => { map.removeFeatureState({ source: 'my-source', sourceLayer: 'my-source-layer', id: e.features[0].id }); }); ``` #### Example[](#example-61) When the mouse leaves the `my-layer` layer, reset only the `hover` key-value pair in the state for the feature under the mouse ```typescript map.on('mouseleave', 'my-layer', (e) => { map.removeFeatureState({ source: 'my-source', sourceLayer: 'my-source-layer', id: e.features[0].id }, 'hover'); }); ``` ### removeImage[](#removeimage) - removeImage(id: string): void[](#removeimage-1) Remove an image from a style. This can be an image from the style's original sprite or any images that have been added at runtime using [Map.addImage](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addimage). #### Parameters - id: string The ID of the image. #### Returns void #### Example[](#example-62) ```typescript // If an image with the ID 'cat' exists in // the style's sprite, remove it. if (map.hasImage('cat')) map.removeImage('cat'); ``` ### removeLayer[](#removelayer) - removeLayer(id: string): this[](#removelayer-1) Removes the layer with the given ID from the map's style. An [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) will be fired if no such layer exists. #### Parameters - id: string The ID of the layer to remove #### Returns this #### Example[](#example-63) If a layer with ID 'state-data' exists, remove it. ```typescript if (map.getLayer('state-data')) map.removeLayer('state-data'); ``` ### removeSource[](#removesource) - removeSource(id: string): this[](#removesource-1) Removes a source from the map's style. #### Parameters - id: string The ID of the source to remove. #### Returns this #### Example[](#example-64) ```typescript map.removeSource('bathymetry-data'); ``` ### removeSprite[](#removesprite) - removeSprite(id: string): this[](#removesprite-1) Removes the sprite from the map's style. Fires the `style` event. #### Parameters - id: string The ID of the sprite to remove. If the sprite is declared as a single URL, the ID must be "default". #### Returns this #### Example[](#example-65) ```typescript map.removeSprite('sprite-two'); map.removeSprite('default'); ``` ### resetNorth[](#resetnorth) - resetNorth(options?: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), eventData?: any): this[](#resetnorth-1) Rotates the map so that north is up (0° bearing), with an animated transition. Triggers the following events: `movestart`, `moveend`, and `rotate`. #### Parameters - `Optional`options: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[resetNorth](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#resetnorth) ### resetNorthPitch[](#resetnorthpitch) - resetNorthPitch(options?: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), eventData?: any): this[](#resetnorthpitch-1) Rotates and pitches the map so that north is up (0° bearing) and pitch and roll are 0°, with an animated transition. Triggers the following events: `movestart`, `move`, `moveend`, `pitchstart`, `pitch`, `pitchend`, `rollstart`, `roll`, `rollend`, and `rotate`. #### Parameters - `Optional`options: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[resetNorthPitch](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#resetnorthpitch) ### resize[](#resize) - resize(eventData?: any, constrainTransform?: boolean): this[](#resize-1) Resizes the map according to the dimensions of its `container` element. Checks if the map container size changed and updates the map if it has changed. This method must be called after the map's `container` is resized programmatically or when the map is shown after being initially hidden with CSS. Triggers the following events: `movestart`, `move`, `moveend`, and `resize`. #### Parameters - `Optional`eventData: any Additional properties to be passed to `movestart`, `move`, `resize`, and `moveend` events that get triggered as a result of resize. This can be useful for differentiating the source of an event (for example, user-initiated or programmatically-triggered events). - `Optional`constrainTransform: boolean #### Returns this #### Example[](#example-66) Resize the map when the map container is shown after being initially hidden with CSS. ```typescript let mapDiv = document.getElementById('map'); if (mapDiv.style.visibility === true) map.resize(); ``` ### rotateTo[](#rotateto) - rotateTo(bearing: number, options?: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/), eventData?: any): this[](#rotateto-1) Rotates the map to the specified bearing, with an animated transition. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up. Triggers the following events: `movestart`, `moveend`, and `rotate`. #### Parameters - bearing: number The desired bearing. - `Optional`options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[rotateTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#rotateto) ### setAnisotropicFilterPitch[](#setanisotropicfilterpitch) - setAnisotropicFilterPitch(anisotropicFilterPitch?: number | null): this[](#setanisotropicfilterpitch-1) Sets the map's anisotropic filter pitch or reverts it to its default. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if anisotropicFilterPitch is out of bounds. #### Parameters - `Optional`anisotropicFilterPitch: number | null The pitch above which to apply anisotropic filtering to the map's raster layers (0-180). If `null` or `undefined` is provided, the function reverts to the default pitch threshold (20). #### Returns this #### Example[](#example-67) ```typescript map.setAnisotropicFilterPitch(85); ``` ### setBearing[](#setbearing) - setBearing(bearing: number, eventData?: any): this[](#setbearing-1) Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up. Equivalent to `jumpTo({bearing: bearing})`. Triggers the following events: `movestart`, `moveend`, and `rotate`. #### Parameters - bearing: number The desired bearing. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-68) Rotate the map to 90 degrees ```typescript map.setBearing(90); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setBearing](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setbearing) ### setCenter[](#setcenter) - setCenter(center: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/), eventData?: any): this[](#setcenter-1) Sets the map's geographical centerpoint. Equivalent to `jumpTo({center: center})`. Triggers the following events: `movestart` and `moveend`. #### Parameters - center: [LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/) The centerpoint to set. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-69) ```typescript map.setCenter([-74, 38]); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setCenter](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setcenter) ### setCenterClampedToGround[](#setcenterclampedtoground) - setCenterClampedToGround(centerClampedToGround: boolean): void[](#setcenterclampedtoground-1) Sets the value of `centerClampedToGround`. If true, the elevation of the center point will automatically be set to the terrain elevation (or zero if terrain is not enabled). If false, the elevation of the center point will default to sea level and will not automatically update. Defaults to true. Needs to be set to false to keep the camera above ground when pitch > 90 degrees. #### Parameters - centerClampedToGround: boolean #### Returns void Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setCenterClampedToGround](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setcenterclampedtoground) ### setCenterElevation[](#setcenterelevation) - setCenterElevation(elevation: number, eventData?: any): this[](#setcenterelevation-1) Sets the elevation of the map's center point, in meters above sea level. Equivalent to `jumpTo({elevation: elevation})`. Triggers the following events: `movestart` and `moveend`. #### Parameters - elevation: number The elevation to set, in meters above sea level. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setCenterElevation](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setcenterelevation) ### setEventedParent[](#seteventedparent) - setEventedParent(parent?: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null, data?: any): this[](#seteventedparent-1) Bubble all events fired by this instance of Evented to this parent instance of Evented. #### Parameters - `Optional`parent: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null - `Optional`data: any #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setEventedParent](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#seteventedparent) ### setFeatureState[](#setfeaturestate) - setFeatureState(feature: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/), state: any): this[](#setfeaturestate-1) Sets the `state` of a feature. A feature's `state` is a set of user-defined key-value pairs that are assigned to a feature at runtime. When using this method, the `state` object is merged with any existing key-value pairs in the feature's state. Features are identified by their `feature.id` attribute, which can be any number or string. This method can only be used with sources that have a `feature.id` attribute. The `feature.id` attribute can be defined in three ways: - For vector or GeoJSON sources, including an `id` attribute in the original data file. - For vector or GeoJSON sources, using the [`promoteId`](https://maplibre.org/maplibre-style-spec/sources/#promoteid) option at the time the source is defined. - For GeoJSON sources, using the [`generateId`](https://maplibre.org/maplibre-style-spec/sources/#generateid) option to auto-assign an `id` based on the feature's index in the source data. If you change feature data using `map.getSource('some id').setData(..)`, you may need to re-apply state taking into account updated `id` values. !!! note You can use the [`feature-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#feature-state) to access the values in a feature's state object for the purposes of styling. #### Parameters - feature: [FeatureIdentifier](https://docs.maptiler.com/sdk-js/api-reference/types/FeatureIdentifier/) Feature identifier. Feature objects returned from [Map.queryRenderedFeatures](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#queryrenderedfeatures) or event handlers can be used as feature identifiers. - state: any A set of key-value pairs. The values should be valid JSON types. #### Returns this #### Example[](#example-70) ```typescript // When the mouse moves over the `my-layer` layer, update // the feature state for the feature under the mouse map.on('mousemove', 'my-layer', (e) => { if (e.features.length > 0) { map.setFeatureState({ source: 'my-source', sourceLayer: 'my-source-layer', id: e.features[0].id, }, { hover: true }); } }); ``` #### See[](#see-21) [Create a hover effect](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-hover-effect/) ### setFilter[](#setfilter) - setFilter(     layerId: string,     filter?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) | null,     options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/), ): this[](#setfilter-1) Sets the filter for the specified style layer. Filters control which features a style layer renders from its source. Any feature for which the filter expression evaluates to `true` will be rendered on the map. Those that are false will be hidden. Use `setFilter` to show a subset of your source data. To clear the filter, pass `null` or `undefined` as the second parameter. #### Parameters - layerId: string The ID of the layer to which the filter will be applied. - `Optional`filter: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) | null The filter, conforming to the MapLibre Style Specification's [filter definition](https://maplibre.org/maplibre-style-spec/layers/#filter). If `null` or `undefined` is provided, the function removes any existing filter from the layer. - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-71) Display only features with the 'name' property 'USA' ```typescript map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']); ``` #### Example[](#example-72) Display only features with five or more 'available-spots' ```typescript map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]); ``` #### Example[](#example-73) Remove the filter for the 'bike-docks' style layer ```typescript map.setFilter('bike-docks', null); ``` #### See[](#see-22) [Create a timeline animation](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-time-slider/) ### setGlobalStateProperty[](#setglobalstateproperty) - setGlobalStateProperty(propertyName: string, value: any): this[](#setglobalstateproperty-1) Sets a global state property that can be retrieved with the [`global-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#global-state). If the value is null, it resets the property to its default value defined in the [`state` style property](https://maplibre.org/maplibre-style-spec/root/#state). #### Parameters - propertyName: string The name of the state property to set. - value: any The value of the state property to set. #### Returns this ### setGlyphs[](#setglyphs) - setGlyphs(     glyphsUrl: string | null | undefined,     options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/), ): this[](#setglyphs-1) Sets the value of the style's glyphs property. Pass a falsy value (null or undefined) to unset glyphs. \* \* #### Parameters - glyphsUrl: string | null | undefined Glyph URL to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/glyphs/). \* - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. \* #### Returns this #### Example[](#example-74) - map.setGlyphs('[https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf](https://demotiles.maplibre.org/font/%7Bfontstack%7D/%7Brange%7D.pbf)'); ### setLayerZoomRange[](#setlayerzoomrange) - setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this[](#setlayerzoomrange-1) Sets the zoom extent for the specified style layer. The zoom extent includes the [minimum zoom level](https://maplibre.org/maplibre-style-spec/layers/#minzoom) and [maximum zoom level](https://maplibre.org/maplibre-style-spec/layers/#maxzoom)) at which the layer will be rendered. !!! note For style layers using vector sources, style layers cannot be rendered at zoom levels lower than the minimum zoom level of the _source layer_ because the data does not exist at those zoom levels. If the minimum zoom level of the source layer is higher than the minimum zoom level defined in the style layer, the style layer will not be rendered at all zoom levels in the zoom range. #### Parameters - layerId: string The ID of the layer to which the zoom extent will be applied. - minzoom: number The minimum zoom to set (0-24). - maxzoom: number The maximum zoom to set (0-24). #### Returns this #### Example[](#example-75) ```typescript map.setLayerZoomRange('my-layer', 2, 5); ``` ### setLayoutProperty[](#setlayoutproperty) - setLayoutProperty(     layerId: string,     name: string,     value: any,     options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/), ): this[](#setlayoutproperty-1) Sets the value of a layout property in the specified style layer. #### Parameters - layerId: string The ID of the layer to set the layout property in. - name: string The name of the layout property to set. - value: any The value of the layout property. Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/). - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) The options object. #### Returns this #### Example[](#example-76) ```typescript map.setLayoutProperty('my-layer', 'visibility', 'none'); ``` ### setLight[](#setlight) - setLight(light: [LightSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LightSpecification/), options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): this[](#setlight-1) Sets the any combination of light values. #### Parameters - light: [LightSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LightSpecification/) Light properties to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/light). - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-77) ```typescript let layerVisibility = map.getLayoutProperty('my-layer', 'visibility'); ``` ### setMaxBounds[](#setmaxbounds) - setMaxBounds(bounds?: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/) | null): this[](#setmaxbounds-1) Sets or clears the map's geographical bounds. Pan and zoom operations are constrained within these bounds. If a pan or zoom is performed that would display regions outside these bounds, the map will instead display a position and zoom level as close as possible to the operation's request while still remaining within the bounds. #### Parameters - `Optional`bounds: [LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/) | null The maximum bounds to set. If `null` or `undefined` is provided, the function removes the map's maximum bounds. #### Returns this #### Example[](#example-78) Define bounds that conform to the `LngLatBoundsLike` object as set the max bounds. ```typescript let bounds = [ [-74.04728, 40.68392], // [west, south] [-73.91058, 40.87764] // [east, north] ]; map.setMaxBounds(bounds); ``` ### setMaxPitch[](#setmaxpitch) - setMaxPitch(maxPitch?: number | null): this[](#setmaxpitch-1) Sets or clears the map's maximum pitch. If the map's current pitch is higher than the new maximum, the map will pitch to the new maximum and trigger the following events: `movestart`, `move`, `moveend`, `pitchstart`, `pitch`, and `pitchend`. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if maxPitch is out of bounds. #### Parameters - `Optional`maxPitch: number | null The maximum pitch to set (0-180). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project. If `null` or `undefined` is provided, the function removes the current maximum pitch (sets it to 60). #### Returns this ### setMaxZoom[](#setmaxzoom) - setMaxZoom(maxZoom?: number | null): this[](#setmaxzoom-1) Sets or clears the map's maximum zoom level. If the map's current zoom level is higher than the new maximum, the map will zoom to the new maximum and trigger the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if minZoom is out of bounds. #### Parameters - `Optional`maxZoom: number | null The maximum zoom level to set. If `null` or `undefined` is provided, the function removes the current maximum zoom (sets it to 22). #### Returns this #### Example[](#example-79) ```typescript map.setMaxZoom(18.75); ``` ### setMinPitch[](#setminpitch) - setMinPitch(minPitch?: number | null): this[](#setminpitch-1) Sets or clears the map's minimum pitch. If the map's current pitch is lower than the new minimum, the map will pitch to the new minimum and trigger the following events: `movestart`, `move`, `moveend`, `pitchstart`, `pitch`, and `pitchend`. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if minPitch is out of bounds. #### Parameters - `Optional`minPitch: number | null The minimum pitch to set (0-180). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project. If `null` or `undefined` is provided, the function removes the current minimum pitch (i.e. sets it to 0). #### Returns this ### setMinZoom[](#setminzoom) - setMinZoom(minZoom?: number | null): this[](#setminzoom-1) Sets or clears the map's minimum zoom level. If the map's current zoom level is lower than the new minimum, the map will zoom to the new minimum and trigger the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. It is not always possible to zoom out and reach the set `minZoom`. Other factors such as map height may restrict zooming. For example, if the map is 512px tall it will not be possible to zoom below zoom 0 no matter what the `minZoom` is set to. A [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) event will be fired if minZoom is out of bounds. #### Parameters - `Optional`minZoom: number | null The minimum zoom level to set (-2 - 24). If `null` or `undefined` is provided, the function removes the current minimum zoom (i.e. sets it to -2). #### Returns this #### Example[](#example-80) ```typescript map.setMinZoom(12.25); ``` ### setPadding[](#setpadding) - setPadding(padding: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/), eventData?: any): this[](#setpadding-1) Sets the padding in pixels around the viewport. Equivalent to `jumpTo({padding: padding})`. Triggers the following events: `movestart` and `moveend`. #### Parameters - padding: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/) The desired padding. - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-81) Sets a left padding of 300px, and a top padding of 50px ```typescript map.setPadding({ left: 300, top: 50 }); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setPadding](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setpadding) ### setPaintProperty[](#setpaintproperty) - setPaintProperty(     layerId: string,     name: string,     value: any,     options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/), ): this[](#setpaintproperty-1) Sets the value of a paint property in the specified style layer. #### Parameters - layerId: string The ID of the layer to set the paint property in. - name: string The name of the paint property to set. - value: any The value of the paint property to set. Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/). Pass `null` to unset the existing value. - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-82) ```typescript map.setPaintProperty('my-layer', 'fill-color', '#faafee'); ``` #### See[](#see-23) - [Change a layer's color with buttons](https://maplibre.org/maplibre-gl-js/docs/examples/change-a-layers-color-with-buttons/) - [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/) ### setPitch[](#setpitch) - setPitch(pitch: number, eventData?: any): this[](#setpitch-1) Sets the map's pitch (tilt). Equivalent to `jumpTo({pitch: pitch})`. Triggers the following events: `movestart`, `moveend`, `pitchstart`, and `pitchend`. #### Parameters - pitch: number The pitch to set, measured in degrees away from the plane of the screen (0-60). - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setPitch](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setpitch) ### setPixelRatio[](#setpixelratio) - setPixelRatio(pixelRatio: number): void[](#setpixelratio-1) Sets the map's pixel ratio. This allows to override `devicePixelRatio`. After this call, the canvas' `width` attribute will be `container.clientWidth * pixelRatio` and its height attribute will be `container.clientHeight * pixelRatio`. Set this to null to disable `devicePixelRatio` override. Note that the pixel ratio actually applied may be lower to respect maxCanvasSize. #### Parameters - pixelRatio: number The pixel ratio. #### Returns void ### setProjection[](#setprojection) - setProjection(projection: [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/)): this[](#setprojection-1) Sets the [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/). #### Parameters - projection: [ProjectionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ProjectionSpecification/) the projection specification to set #### Returns this ### setRenderWorldCopies[](#setrenderworldcopies) - setRenderWorldCopies(renderWorldCopies?: boolean | null): this[](#setrenderworldcopies-1) Sets the state of `renderWorldCopies`. #### Parameters - `Optional`renderWorldCopies: boolean | null If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`: - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude. - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level. `undefined` is treated as `true`, `null` is treated as `false`. #### Returns this #### Example[](#example-83) ```typescript map.setRenderWorldCopies(true); ``` #### See[](#see-24) [Render world copies](https://maplibre.org/maplibre-gl-js/docs/examples/render-world-copies/) ### setRoll[](#setroll) - setRoll(roll: number, eventData?: any): this[](#setroll-1) Sets the map's roll angle. Equivalent to `jumpTo({roll: roll})`. Triggers the following events: `movestart`, `moveend`, `rollstart`, and `rollend`. #### Parameters - roll: number The roll to set, measured in degrees about the camera boresight - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setRoll](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setroll) ### setSky[](#setsky) - setSky(sky: [SkySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SkySpecification/), options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): this[](#setsky-1) Sets the value of style's sky properties. #### Parameters - sky: [SkySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/SkySpecification/) Sky properties to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/sky/). - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-84) ```typescript map.setSky({'atmosphere-blend': 1.0}); ``` ### setSourceTileLodParams[](#setsourcetilelodparams) - setSourceTileLodParams(     maxZoomLevelsOnScreen: number,     tileCountMaxMinRatio: number,     sourceId?: string, ): this[](#setsourcetilelodparams-1) Change the tile Level of Detail behavior of the specified source. These parameters have no effect when pitch == 0, and the largest effect when the horizon is visible on screen. #### Parameters - maxZoomLevelsOnScreen: number The maximum number of distinct zoom levels allowed on screen at a time. There will generally be fewer zoom levels on the screen, the maximum can only be reached when the horizon is at the top of the screen. Increasing the maximum number of zoom levels causes the zoom level to decay faster toward the horizon. - tileCountMaxMinRatio: number The ratio of the maximum number of tiles loaded (at high pitch) to the minimum number of tiles loaded. Increasing this ratio allows more tiles to be loaded at high pitch angles. If the ratio would otherwise be exceeded, the zoom level is reduced uniformly to keep the number of tiles within the limit. - `Optional`sourceId: string The ID of the source to set tile LOD parameters for. All sources will be updated if unspecified. If `sourceId` is specified but a corresponding source does not exist, an error is thrown. #### Returns this #### Example[](#example-85) ```typescript map.setSourceTileLodParams(4.0, 3.0, 'terrain'); ``` #### See[](#see-25) [Modify Level of Detail behavior](https://maplibre.org/maplibre-gl-js/docs/examples/level-of-detail-control/) ### setSprite[](#setsprite) - setSprite(spriteUrl: string | null, options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): this[](#setsprite-1) Sets the value of the style's sprite property. #### Parameters - spriteUrl: string | null Sprite URL to set. - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) Options object. #### Returns this #### Example[](#example-86) ```typescript map.setSprite('YOUR_SPRITE_URL'); ``` ### setStyle[](#setstyle) - setStyle(     style: string | [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/) | null,     options?: [StyleSwapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSwapOptions/) & [StyleOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleOptions/), ): this[](#setstyle-1) Updates the map's MapLibre style object with a new value. If a style is already set when this is used and options.diff is set to true, the map renderer will attempt to compare the given style against the map's current state and perform only the changes necessary to make the map style match the desired state. Changes in sprites (images used for icons and patterns) and glyphs (fonts for label text) **cannot** be diffed. If the sprites or fonts used in the current style and the given style are different in any way, the map renderer will force a full update, removing the current style and building the given one from scratch. #### Parameters - style: string | [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/) | null A JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL to such JSON. - `Optional`options: [StyleSwapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSwapOptions/) & [StyleOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleOptions/) The options object. #### Returns this #### Example[](#example-87) ```typescript map.setStyle("https://demotiles.maplibre.org/style.json"); map.setStyle('https://demotiles.maplibre.org/style.json', { transformStyle: (previousStyle, nextStyle) => ({ ...nextStyle, sources: { ...nextStyle.sources, // copy a source from previous style 'osm': previousStyle.sources.osm }, layers: [ // background layer nextStyle.layers[0], // copy a layer from previous style previousStyle.layers[0], // other layers from the next style ...nextStyle.layers.slice(1).map(layer => { // hide the layers we don't need from demotiles style if (layer.id.startsWith('geolines')) { layer.layout = {...layer.layout || {}, visibility: 'none'}; // filter out US polygons } else if (layer.id.startsWith('coastline') || layer.id.startsWith('countries')) { layer.filter = ['!=', ['get', 'ADM0_A3'], 'USA']; } return layer; }) ] }) }); ``` ### setTerrain[](#setterrain) - setTerrain(options: [TerrainSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TerrainSpecification/) | null): this[](#setterrain-1) Loads a 3D terrain mesh, based on a "raster-dem" source. Triggers the `terrain` event. #### Parameters - options: [TerrainSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TerrainSpecification/) | null Options object. #### Returns this #### Example[](#example-88) ```typescript map.setTerrain({ source: 'terrain' }); ``` ### setTransformConstrain[](#settransformconstrain) - setTransformConstrain(constrain?: [TransformConstrainFunction](https://docs.maptiler.com/sdk-js/api-reference/types/TransformConstrainFunction/) | null): this[](#settransformconstrain-1) Sets or clears the callback overriding how the map constrains the viewport's lnglat and zoom to respect the longitude and latitude bounds. #### Parameters - `Optional`constrain: [TransformConstrainFunction](https://docs.maptiler.com/sdk-js/api-reference/types/TransformConstrainFunction/) | null A [TransformConstrainFunction](https://docs.maptiler.com/sdk-js/api-reference/types/TransformConstrainFunction/) callback defining how the viewport should respect the bounds. `null` clears the callback and reverts the constrain to the map transform's default constrain function. #### Returns this #### Example[](#example-89) ```typescript function customTransformConstrain(lngLat, zoom) { return {center: lngLat, zoom: zoom ?? 0}; }; map.setTransformConstrain(customTransformConstrain); ``` #### See[](#see-26) [Customize the map transform constrain](https://maplibre.org/maplibre-gl-js/docs/examples/customize-the-map-transform-constrain/) ### setTransformRequest[](#settransformrequest) - setTransformRequest(transformRequest: [RequestTransformFunction](https://docs.maptiler.com/sdk-js/api-reference/types/RequestTransformFunction/) | null): this[](#settransformrequest-1) Updates the requestManager's transform request with a new function #### Parameters - transformRequest: [RequestTransformFunction](https://docs.maptiler.com/sdk-js/api-reference/types/RequestTransformFunction/) | null 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. Expected to return an object with a `url` property and optionally `headers` and `credentials` properties #### Returns this #### Example[](#example-90) ```typescript map.setTransformRequest((url: string, resourceType: string) => {}); ``` ### setVerticalFieldOfView[](#setverticalfieldofview) - setVerticalFieldOfView(fov: number, eventData?: any): this[](#setverticalfieldofview-1) Sets the map's vertical field of view, in degrees. Triggers the following events: `movestart`, `move`, and `moveend`. #### Parameters - fov: number The vertical field of view to set, in degrees (0-180). - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Default Value[](#default-value-3) ```typescript 36.87 ``` #### Example[](#example-91) Change vertical field of view to 30 degrees ```typescript map.setVerticalFieldOfView(30); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setVerticalFieldOfView](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setverticalfieldofview) ### setZoom[](#setzoom) - setZoom(zoom: number, eventData?: any): this[](#setzoom-1) Sets the map's zoom level. Equivalent to `jumpTo({zoom: zoom})`. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. #### Parameters - zoom: number The zoom level to set (0-20). - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-92) Zoom to the zoom level 5 without an animated transition ```typescript map.setZoom(5); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setZoom](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setzoom) ### setZoomSnap[](#setzoomsnap) - setZoomSnap(snap: number): this[](#setzoomsnap-1) Sets the map's zoom snap level. #### Parameters - snap: number The zoom snap level to set. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[setZoomSnap](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#setzoomsnap) ### snapToNorth[](#snaptonorth) - snapToNorth(options?: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), eventData?: any): this[](#snaptonorth-1) Snaps the map so that north is up (0° bearing), if the current bearing is close enough to it (i.e. within the `bearingSnap` threshold). Triggers the following events: `movestart`, `moveend`, and `rotate`. #### Parameters - `Optional`options: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[snapToNorth](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#snaptonorth) ### stop[](#stop) - stop(): this[](#stop-1) Stops any animated transition underway. #### Returns this Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[stop](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#stop) ### triggerRepaint[](#triggerrepaint) - triggerRepaint(): void[](#triggerrepaint-1) Trigger the rendering of a single frame. Use this method with custom layers to repaint the map when the layer changes. Calling this multiple times before the next frame is rendered will still result in only a single frame being rendered. #### Returns void #### Example[](#example-93) ```typescript map.triggerRepaint(); ``` #### See[](#see-27) - [Add a 3D model](https://maplibre.org/maplibre-gl-js/docs/examples/add-a-3d-model-using-threejs/) - [Add an animated icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-an-animated-icon-to-the-map/) ### unproject[](#unproject) - unproject(point: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)): [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)[](#unproject-1) Returns a [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) representing geographical coordinates that correspond to the specified pixel coordinates. #### Parameters - point: [PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/) The pixel coordinates to unproject. #### Returns [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) The [LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/) corresponding to `point`. #### Example[](#example-94) ```typescript map.on('click', (e) => { // When the map is clicked, get the geographic coordinate. let coordinate = map.unproject(e.point); }); ``` ### updateImage[](#updateimage) - updateImage(     id: string,     image:         | [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)         | [StyleImageInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/StyleImageInterface/)         | [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)         | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)         | {             data: Uint8Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>             | Uint8ClampedArray<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>;             height: number;             width: number;         }, ): this[](#updateimage-1) Update an existing image in a style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with [`icon-image`](https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-image), [`background-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-background-background-pattern), [`fill-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-fill-fill-pattern), or [`line-pattern`](https://maplibre.org/maplibre-style-spec/layers/#paint-line-line-pattern). An [ErrorEvent](https://docs.maptiler.com/sdk-js/api-reference/classes/ErrorEvent/) will be fired if the image parameter is invalid. #### Parameters - id: string The ID of the image. - image:     | [ImageBitmap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageBitmap/)     | [StyleImageInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/StyleImageInterface/)     | [ImageData](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ImageData/)     | [HTMLImageElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLImageElement/)     | {         data: Uint8Array<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>         | Uint8ClampedArray<[ArrayBufferLike](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ArrayBufferLike/)\>;         height: number;         width: number;     } The image as an `HTMLImageElement`, `ImageData`, `ImageBitmap` or object with `width`, `height`, and `data` properties with the same format as `ImageData`. #### Returns this #### Example[](#example-95) ```typescript // If an image with the ID 'cat' already exists in the style's sprite, // replace that image with a new image, 'other-cat-icon.png'. if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png'); ``` ### zoomIn[](#zoomin) - zoomIn(options?: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), eventData?: any): this[](#zoomin-1) Incrementally increases the map's zoom level by 1, first snapping to the nearest `zoomSnap` increment. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. #### Parameters - `Optional`options: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-96) Zoom the map in one level with a custom animation duration ```typescript map.zoomIn({duration: 1000}); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[zoomIn](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#zoomin) ### zoomOut[](#zoomout) - zoomOut(options?: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/), eventData?: any): this[](#zoomout-1) Decreases the map's zoom level by 1, first snapping to the nearest `zoomSnap` increment. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. #### Parameters - `Optional`options: [AnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationOptions/) Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-97) Zoom the map out one level with a custom animation offset ```typescript map.zoomOut({offset: [80, 60]}); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[zoomOut](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#zoomout) ### zoomTo[](#zoomto) - zoomTo(zoom: number, options?: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) | null, eventData?: any): this[](#zoomto-1) Zooms the map to the specified zoom level, with an animated transition. Triggers the following events: `movestart`, `move`, `moveend`, `zoomstart`, `zoom`, and `zoomend`. #### Parameters - zoom: number The zoom level to transition to. - `Optional`options: [EaseToOptions](https://docs.maptiler.com/sdk-js/api-reference/types/EaseToOptions/) | null Options object - `Optional`eventData: any Additional properties to be added to event objects of events triggered by this method. #### Returns this #### Example[](#example-98) ```typescript // Zoom to the zoom level 5 without an animated transition map.zoomTo(5); // Zoom to the zoom level 8 with an animated transition map.zoomTo(8, { duration: 2000, offset: [100, 50] }); ``` Inherited from [Camera](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/).[zoomTo](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Camera/#zoomto)