Optional duration?: numberOptional easing?: ((_) => number)Internal _elevationholds the geographical coordinate of the target
Internal _elevationSaves the current state of the elevation freeze - this is used during map movement to prevent "rocky" camera movement.
Internal _elevationholds the start altitude value, = center elevation before animation begins this value will recalculated during flight in respect of changing _elevationTarget values, so the linear interpolation between start and target keeps smooth and without jumps.
Internal _elevationholds the targ altitude value, = center elevation of the target. This value may changes during flight, because new terrain-tiles loads during flight.
Internal _imageimage queue throttling handle. To be used later when clean up
Optional easeId: stringOptional Internal _requestedUsed to track accumulated changes during continuous interaction
The map's BoxZoomHandler, which implements zooming using a drag gesture with the Shift key pressed.
Find more details and examples using boxZoom in the BoxZoomHandler section.
The map's 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 section.
The map's DoubleClickZoomHandler, which allows the user to zoom by double clicking.
Find more details and examples using doubleClickZoom in the DoubleClickZoomHandler section.
The map's DragPanHandler, which implements dragging the map with a mouse or touch gesture.
Find more details and examples using dragPan in the DragPanHandler section.
The map's 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 section.
The map's 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 section.
The map's ScrollZoomHandler, which implements zooming in and out with a scroll wheel or trackpad.
Find more details and examples using scrollZoom in the ScrollZoomHandler section.
The map's TwoFingersTouchPitchHandler, which allows the user to pitch the map with touch gestures.
Find more details and examples using touchPitch in the TwoFingersTouchPitchHandler section.
The map's TwoFingersTouchZoomRotateHandler, which allows the user to zoom or rotate the map with touch gestures.
Find more details and examples using touchZoomRotate in the TwoFingersTouchZoomRotateHandler section.
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.
Gets and sets a Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.
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.
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.
Gets and sets a Boolean indicating whether the map will visualize the padding offsets.
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.
map.showTileBoundaries = true;
Returns the package version of the library
Package version of the library
Internal Calculate the center of these two points in the viewport and use
the highest zoom level up to and including Map#getMaxZoom() that fits
the points in the viewport at the specified bearing.
First point
Second point
Desired map bearing at end of animation, in degrees
Optional options: CameraForBoundsOptionsthe camera options
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.
let p0 = [-79, 43];
let p1 = [-73, 45];
let bearing = 90;
let newCameraTransform = map._cameraForBoxAndBearing(p0, p1, bearing, {
padding: {top: 10, bottom:25, left: 15, right: 5}
});
Optional boxzoomcancel?: ((e) => void)Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See BoxZoomHandler.
Optional boxzoomend?: ((e) => void)Fired when a "box zoom" interaction ends. See BoxZoomHandler.
Optional boxzoomstart?: ((e) => void)Fired when a "box zoom" interaction starts. See BoxZoomHandler.
Optional click?: ((e) => void)Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.
Optional contextmenu?: ((e) => void)Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.
Optional data?: ((e) => void)Fired when any map data loads or changes. See MapDataEvent for more information.
Optional dataabort?: ((e) => void)Fired when a request for one of the map's sources' tiles or data is aborted.
Optional dataloading?: ((e) => void)Fired when any map data (style, source, tile, etc) begins loading or
changing asynchronously. All dataloading events are followed by a data,
dataabort or error event.
Optional dblclick?: ((e) => void)Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.
Note: Under normal conditions, this event will be preceded by two click events.
Optional drag?: ((e) => void)Fired repeatedly during a "drag to pan" interaction. See DragPanHandler.
Optional dragend?: ((e) => void)Fired when a "drag to pan" interaction ends. See DragPanHandler.
Optional dragstart?: ((e) => void)Fired when a "drag to pan" interaction starts. See DragPanHandler.
Optional error?: ((e) => void)Fired when an error occurs. This is GL JS's primary error reporting
mechanism. We use an event instead of throw to better accommodate
asynchronous operations. If no listeners are bound to the error event, the
error will be printed to the console.
Optional idle?: ((e) => void)Fired after the last frame rendered before the map enters an "idle" state:
Optional load?: ((e) => void)load Fired immediately after all necessary resources have been downloaded
and the first visually complete rendering of the map has occurred.
Optional mousedown?: ((e) => void)Fired when a pointing device (usually a mouse) is pressed within the map.
Optional mousemove?: ((e) => void)Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.
Optional mouseout?: ((e) => void)Fired when a point device (usually a mouse) leaves the map's canvas.
Optional mouseover?: ((e) => void)Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.
Optional mouseup?: ((e) => void)Fired when a pointing device (usually a mouse) is released within the map.
Optional move?: ((e) => void)Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as Map#flyTo.
Optional moveend?: ((e) => void)Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.
Optional movestart?: ((e) => void)Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.
Optional pitch?: ((e) => void)Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as Map#flyTo.
Optional pitchend?: ((e) => void)Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map#flyTo.
Optional pitchstart?: ((e) => void)Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map#flyTo .
Optional remove?: ((e) => void)Fired immediately after the map has been removed with Map#remove.
Optional render?: ((e) => void)Fired whenever the map is drawn to the screen, as the result of
Optional resize?: ((e) => void)Fired immediately after the map has been resized.
Optional rotate?: ((e) => void)Fired repeatedly during a "drag to rotate" interaction. See DragRotateHandler.
Optional rotateend?: ((e) => void)Fired when a "drag to rotate" interaction ends. See DragRotateHandler.
Optional rotatestart?: ((e) => void)Fired when a "drag to rotate" interaction starts. See DragRotateHandler.
Optional sourcedata?: ((e) => void)Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes.
Optional sourcedataabort?: ((e) => void)Fired when a request for one of the map's sources' data is aborted.
Optional sourcedataloading?: ((e) => void)Fired when one of the map's sources begins loading or changing asynchronously.
All sourcedataloading events are followed by a sourcedata, sourcedataabort or error event.
Optional styledata?: ((e) => void)Fired when the map's style loads or changes.
Optional styledataloading?: ((e) => void)Fired when the map's style begins loading or changing asynchronously.
All styledataloading events are followed by a styledata
or error event.
Optional styleimagemissing?: ((e) => void)Fired when an icon or pattern needed by the style is missing. The missing image can be added with Map#addImage within this event listener callback to prevent the image from being skipped. This event can be used to dynamically generate icons and patterns.
Optional terrain?: ((e) => void)Fired when terrain is changed
Optional tiledataloading?: ((e) => void)Optional touchcancel?: ((e) => void)Fired when a touchcancel event occurs within the map.
Optional touchend?: ((e) => void)Fired when a touchend event occurs within the map.
Optional touchmove?: ((e) => void)Fired when a touchmove event occurs within the map.
Optional touchstart?: ((e) => void)Fired when a touchstart event occurs within the map.
Optional webglcontextlost?: ((e) => void)Fired when the WebGL context is lost.
Optional webglcontextrestored?: ((e) => void)Fired when the WebGL context is restored.
Optional wheel?: ((e) => void)Fired when a wheel event occurs within the map.
Optional zoom?: ((e) => void)Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.
Optional zoomend?: ((e) => void)Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.
Optional zoomstart?: ((e) => void)Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.
Optional animate?: booleanOptional duration?: numberOptional easing?: ((_) => number)Internal Called when the camera is about to be manipulated.
If transformCameraUpdate is specified, a copy of the current transform is created to track the accumulated changes.
This underlying transform represents the "desired state" proposed by input handlers / animations / UI controls.
It may differ from the state used for rendering (this.transform).
Transform to apply changes to
Internal Call when a (re-)render of the map is required:
setPaintProperty(), etc.)The time when the animation frame began executing.
this
Adds an IControl to the map, calling control.onAdd(this).
An ErrorEvent will be fired if the image parameter is invald.
The IControl to add.
Optional position: ControlPositionposition 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'.
this
Add zoom and rotation controls to the map.
map.addControl(new NavigationControl());
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,
background-pattern,
fill-pattern,
or line-pattern.
A ErrorEvent event will be fired if the image parameter is invalid or there is not enough space in the sprite to add this image.
The ID of the image.
The image as an HTMLImageElement, ImageData, ImageBitmap or object with width, height, and data
properties with the same format as ImageData.
Optional options: Partial<StyleImageMetadata>Options object.
this
// 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'.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
if (error) throw error;
if (!map.hasImage('cat')) map.addImage('cat', image);
});
// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png', function(error, image) {
if (error) throw error;
if (!map.hasImage('border-image')) {
map.addImage('border-image', image, {
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
});
}
});
HTMLImageElement: Add an icon to the mapImageData: Add a generated icon to the mapAdds a MapLibre style layer 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.
The layer to add, conforming to either the MapLibre Style Specification's layer definition or, less commonly, the 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: stringThe 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.
this
Add a circle layer with a vector source
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
}
});
Define a source before using it to create a new layer
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']
}
});
Add a new symbol layer before an existing layer
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');
Adds a source to the map's style.
Events triggered:
Triggers the source.add event.
The ID of the source to add. Must not conflict with existing sources.
The source object, conforming to the MapLibre Style Specification's source definition or CanvasSourceSpecification.
this
map.addSource('my-data', {
type: 'vector',
url: 'https://demotiles.maplibre.org/tiles/tiles.json'
});
map.addSource('my-data', {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.0323, 38.9131]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "monument"
}
}
});
GeoJSON source: Add live realtime data
Adds a sprite to the map's style. Fires the style event.
The ID of the sprite to add. Must not conflict with existing sprites.
The URL to load the sprite from
Optional options: StyleSetterOptionsOptions object.
this
map.addSprite('sprite-two', 'http://example.com/sprite-two');
Calculate the center for these bounds in the viewport and use
the highest zoom level up to and including Map#getMaxZoom() that fits
in the viewport. LngLatBounds represent a box that is always axis-aligned with bearing 0.
Optional options: CameraForBoundsOptionsOptions object
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.
let bbox = [[-79, 43], [-73, 45]];
let newCameraTransform = map.cameraForBounds(bbox, {
padding: {top: 10, bottom:25, left: 15, right: 5}
});
Changes any combination of center, zoom, bearing, pitch, 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: 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, and rotate.
Options describing the destination and animation of the transition. Accepts CameraOptions and AnimationOptions.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
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.
Center these bounds in the viewport and use the highest
zoom level up to and including Map#getMaxZoom() that fits them in the viewport.
Optional options: FitBoundsOptionsOptions supports all properties from AnimationOptions and CameraOptions in addition to the fields below.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
let bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
padding: {top: 10, bottom:25, left: 15, right: 5}
});
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.
First point on screen, in pixel coordinates
Second point on screen, in pixel coordinates
Desired map bearing at end of animation, in degrees
Optional options: FitBoundsOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
let p0 = [220, 400];
let p1 = [500, 900];
map.fitScreenCoordinates(p0, p1, map.getBearing(), {
padding: {top: 10, bottom:25, left: 15, right: 5}
});
Used by BoxZoomHandler
Changes any combination of center, zoom, bearing, and pitch, 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: 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, and rotate.
Options describing the destination and animation of the transition. Accepts CameraOptions, AnimationOptions, and the following additional options.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
// 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;
}
});
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.
The geographical bounds of the map as LngLatBounds.
let bounds = map.getBounds();
Returns the HTML element containing the map's <canvas> 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 <canvas>, but not from
map controls.
The container of the map's <canvas>.
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.
Feature identifier. Feature objects returned from Map#queryRenderedFeatures or event handlers can be used as feature identifiers.
The state of the feature: a set of key-value pairs that was assigned to the feature at runtime.
When the mouse moves over the my-layer layer,
get the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
if (e.features.length > 0) {
map.getFeatureState({
source: 'my-source',
sourceLayer: 'my-source-layer',
id: e.features[0].id
});
}
});
Returns the filter applied to the specified style layer.
The ID of the style layer whose filter to get.
The layer's filter.
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.
The ID of the image.
An image in the map with the specified ID.
let coffeeShopIcon = map.getImage("coffee_cup");
Returns the layer with the specified ID in the map's style.
The ID of the layer to get.
The layer with the specified ID, or undefined
if the ID corresponds to no existing layers.
let stateDataLayer = map.getLayer('state-data');
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:
The renderWorldCopies
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 Sources.
For example, setting the data for a GeoJSON source or updating the url and coordinates
of an image source.
The ID of the source to get.
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 page.
let sourceObject = map.getSource('points');
Checks if a control exists on the map.
The IControl to check.
true if map contains control.
// 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);
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.
An ErrorEvent will be fired if the image parameter is invald.
The ID of the image.
A Boolean indicating whether the image exists.
Check if an image with the ID 'cat' exists in the style's sprite.
let catIconExists = map.hasImage('cat');
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 event will be fired if there is no source wit the specified ID.
The ID of the source to be checked.
A Boolean indicating whether the source is loaded.
let sourceLoaded = map.isSourceLoaded('bathymetry-data');
Changes any combination of center, zoom, bearing, and pitch, 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, and rotate.
Options object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
// 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
});
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.
An Array of strings containing the names of all sprites/images currently available in the map.
let allImages = map.listImages();
Load an image from an external URL to be used with Map#addImage. External domains must support CORS.
The URL of the image file. Image file must be in png, webp, or jpg format.
a promise that is resolved when the image is loaded
Load an image from an external URL.
const response = await map.loadImage('http://placekitten.com/50/50');
// Add the loaded image to the style's sprite with the ID 'kitten'.
map.addImage('kitten', response.data);
Moves a layer to a different z-position.
The ID of the layer to move.
Optional beforeId: stringThe 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.
this
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.
map.moveLayer('polygon', 'country-label');
Pans the map by the specified offset.
Triggers the following events: movestart and moveend.
x and y coordinates by which to pan the map.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Pans the map to the specified location with an animated transition.
Triggers the following events: movestart and moveend.
The location to pan the map to.
Optional options: AnimationOptionsOptions describing the destination and animation of the transition.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
map.panTo([-74, 38]);
// Specify that the panTo animation should last 5000 milliseconds.
map.panTo([-74, 38], {duration: 5000});
Returns a Point representing pixel coordinates, relative to the map's container,
that correspond to the specified geographical location.
The geographical location to project.
The Point corresponding to lnglat, relative to the map's container.
let coordinate = [-122.420679, 37.772537];
let point = map.project(coordinate);
Returns an array of MapGeoJSONFeature objects representing visible features that satisfy the query parameters.
Optional geometryOrOptions: PointLike | [PointLike, PointLike] | QueryRenderedFeaturesOptions(optional) The geometry of the query region:
either a single point or southwest and northeast points describing a bounding box.
Omitting this parameter (i.e. calling Map#queryRenderedFeatures with zero arguments,
or with only a options argument) is equivalent to passing a bounding box encompassing the entire
map viewport.
The geometryOrOptions can receive a QueryRenderedFeaturesOptions only to support a situation where the function receives only one parameter which is the options parameter.
Optional options: QueryRenderedFeaturesOptions(optional) Options object.
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:
visibility property is "none".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.
Find all features at a point
let features = map.queryRenderedFeatures(
[20, 35],
{ layers: ['my-layer-name'] }
);
Find all features within a static bounding box
let features = map.queryRenderedFeatures(
[[10, 20], [30, 50]],
{ layers: ['my-layer-name'] }
);
Find all features within a bounding box around a point
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'] });
Query all rendered features from a single layer
let features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
Returns an array of MapGeoJSONFeature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.
The ID of the vector tile or GeoJSON source to query.
Optional parameters: QuerySourceFeatureOptionsThe options object.
An array of MapGeoJSONFeature objects.
In contrast to Map#queryRenderedFeatures, this function returns all features matching the query parameters, whether or not they are rendered by the current style (i.e. visible). The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles: this function does not check tiles outside the currently visible viewport.
Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.
Find all features in one source layer in a vector source
let features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});
Get the elevation difference between a given point and a point that is currently in the middle of the screen. This method should be used for proper positioning of custom 3d objects, as explained here Returns null if terrain is not enabled. This method is subject to change in Maplibre GL JS v5.
[x,y] or LngLat coordinates of the location
elevation offset in meters
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.
Removes the control from the map.
An ErrorEvent will be fired if the image parameter is invald.
The IControl to remove.
this
// 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);
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.
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 or event handlers can be used as feature identifiers.
Optional key: string(optional) The key in the feature state to reset.
this
Reset the entire state object for all features in the my-source source
map.removeFeatureState({
source: 'my-source'
});
When the mouse leaves the my-layer layer,
reset the entire state object for the
feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
map.removeFeatureState({
source: 'my-source',
sourceLayer: 'my-source-layer',
id: e.features[0].id
});
});
When the mouse leaves the my-layer layer,
reset only the hover key-value pair in the
state for the feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
map.removeFeatureState({
source: 'my-source',
sourceLayer: 'my-source-layer',
id: e.features[0].id
}, 'hover');
});
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.
The ID of the image.
// If an image with the ID 'cat' exists in
// the style's sprite, remove it.
if (map.hasImage('cat')) map.removeImage('cat');
Removes the layer with the given ID from the map's style.
An ErrorEvent will be fired if the image parameter is invald.
The ID of the layer to remove
this
If a layer with ID 'state-data' exists, remove it.
if (map.getLayer('state-data')) map.removeLayer('state-data');
Removes a source from the map's style.
The ID of the source to remove.
this
map.removeSource('bathymetry-data');
Rotates the map so that north is up (0° bearing), with an animated transition.
Triggers the following events: movestart, moveend, and rotate.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Rotates and pitches the map so that north is up (0° bearing) and pitch is 0°, with an animated transition.
Triggers the following events: movestart, move, moveend, pitchstart, pitch, pitchend, and rotate.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
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.
Optional eventData: anyAdditional 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).
this
Resize the map when the map container is shown after being initially hidden with CSS.
let mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();
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.
The desired bearing.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
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.
The desired bearing.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Rotate the map to 90 degrees
map.setBearing(90);
Sets the map's geographical centerpoint. Equivalent to jumpTo({center: center}).
Triggers the following events: movestart and moveend.
The centerpoint to set.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
map.setCenter([-74, 38]);
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:
id attribute in the original data file.promoteId option at the time the source is defined.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 to access the values in a feature's state object for the purposes of styling.
Feature identifier. Feature objects returned from Map#queryRenderedFeatures or event handlers can be used as feature identifiers.
A set of key-value pairs. The values should be valid JSON types.
this
// When the mouse moves over the `my-layer` layer, update
// the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
if (e.features.length > 0) {
map.setFeatureState({
source: 'my-source',
sourceLayer: 'my-source-layer',
id: e.features[0].id,
}, {
hover: true
});
}
});
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.
The ID of the layer to which the filter will be applied.
Optional filter: FilterSpecificationThe filter, conforming to the MapLibre Style Specification's
filter definition. If null or undefined is provided, the function removes any existing filter from the layer.
Optional options: StyleSetterOptionsOptions object.
this
Display only features with the 'name' property 'USA'
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);
Display only features with five or more 'available-spots'
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);
Remove the filter for the 'bike-docks' style layer
map.setFilter('bike-docks', null);
Sets the value of the style's glyphs property.
Glyph URL to set. Must conform to the MapLibre Style Specification.
Optional options: StyleSetterOptionsOptions object.
this
map.setGlyphs('https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf');
Sets the zoom extent for the specified style layer. The zoom extent includes the minimum zoom level and maximum zoom level) 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.
The ID of the layer to which the zoom extent will be applied.
The minimum zoom to set (0-24).
The maximum zoom to set (0-24).
this
map.setLayerZoomRange('my-layer', 2, 5);
Sets the value of a layout property in the specified style layer.
The ID of the layer to set the layout property in.
The name of the layout property to set.
The value of the layout property. Must be of a type appropriate for the property, as defined in the MapLibre Style Specification.
Optional options: StyleSetterOptionsThe options object.
this
map.setLayoutProperty('my-layer', 'visibility', 'none');
Sets the any combination of light values.
Light properties to set. Must conform to the MapLibre Style Specification.
Optional options: StyleSetterOptionsOptions object.
this
let layerVisibility = map.getLayoutProperty('my-layer', 'visibility');
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.
Optional bounds: LngLatBoundsLikeThe maximum bounds to set. If null or undefined is provided, the function removes the map's maximum bounds.
this
Define bounds that conform to the LngLatBoundsLike object as set the max bounds.
let bounds = [
[-74.04728, 40.68392], // [west, south]
[-73.91058, 40.87764] // [east, north]
];
map.setMaxBounds(bounds);
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.
A ErrorEvent event will be fired if maxPitch is out of bounds.
Optional maxPitch: numberThe maximum pitch to set (0-85). 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).
this
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.
A ErrorEvent event will be fired if minZoom is out of bounds.
Optional maxZoom: numberThe maximum zoom level to set.
If null or undefined is provided, the function removes the current maximum zoom (sets it to 22).
this
map.setMaxZoom(18.75);
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.
A ErrorEvent event will be fired if minPitch is out of bounds.
Optional minPitch: numberThe minimum pitch to set (0-85). 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).
this
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.
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 event will be fired if minZoom is out of bounds.
Optional minZoom: numberThe 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).
this
map.setMinZoom(12.25);
Sets the padding in pixels around the viewport.
Equivalent to jumpTo({padding: padding}).
Triggers the following events: movestart and moveend.
The desired padding.
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Sets a left padding of 300px, and a top padding of 50px
map.setPadding({ left: 300, top: 50 });
Sets the value of a paint property in the specified style layer.
The ID of the layer to set the paint property in.
The name of the paint property to set.
The value of the paint property to set.
Must be of a type appropriate for the property, as defined in the MapLibre Style Specification.
Pass null to unset the existing value.
Optional options: StyleSetterOptionsOptions object.
this
map.setPaintProperty('my-layer', 'fill-color', '#faafee');
Sets the map's pitch (tilt). Equivalent to jumpTo({pitch: pitch}).
Triggers the following events: movestart, moveend, pitchstart, and pitchend.
The pitch to set, measured in degrees away from the plane of the screen (0-60).
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
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.
The pixel ratio.
Sets the state of renderWorldCopies.
Optional renderWorldCopies: booleanIf true, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false:
undefined is treated as true, null is treated as false.
this
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.
A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON.
Optional options: StyleSwapOptions & StyleOptionsThe options object.
this
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;
})
]
})
});
Updates the requestManager's transform request with a new function
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
this
map.setTransformRequest((url: string, resourceType: string) => {});
Sets the map's zoom level. Equivalent to jumpTo({zoom: zoom}).
Triggers the following events: movestart, move, moveend, zoomstart, zoom, and zoomend.
The zoom level to set (0-20).
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Zoom to the zoom level 5 without an animated transition
map.setZoom(5);
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.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Returns a LngLat representing geographical coordinates that correspond to the specified pixel coordinates.
The pixel coordinates to unproject.
The LngLat corresponding to point.
map.on('click', function(e) {
// When the map is clicked, get the geographic coordinate.
let coordinate = map.unproject(e.point);
});
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,
background-pattern,
fill-pattern,
or line-pattern.
An ErrorEvent will be fired if the image parameter is invald.
The ID of the image.
The image as an HTMLImageElement, ImageData, ImageBitmap or object with width, height, and data
properties with the same format as ImageData.
this
// 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');
Increases the map's zoom level by 1.
Triggers the following events: movestart, move, moveend, zoomstart, zoom, and zoomend.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Zoom the map in one level with a custom animation duration
map.zoomIn({duration: 1000});
Decreases the map's zoom level by 1.
Triggers the following events: movestart, move, moveend, zoomstart, zoom, and zoomend.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
Zoom the map out one level with a custom animation offset
map.zoomOut({offset: [80, 60]});
Zooms the map to the specified zoom level, with an animated transition.
Triggers the following events: movestart, move, moveend, zoomstart, zoom, and zoomend.
The zoom level to transition to.
Optional options: AnimationOptionsOptions object
Optional eventData: anyAdditional properties to be added to event objects of events triggered by this method.
this
// 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]
});
Removes an event listener for events previously added with Map#on.
The event type previously used to install the listener.
The layer ID or listener previously used to install the listener.
The function previously installed as a listener.
this
Overload of the off method that allows to listen to events without specifying a layer.
this
Overload of the off method that allows to listen to events without specifying a layer.
The type of the event.
The function previously installed as a listener.
this
Adds a listener for events of a specified type, optionally limited to features in a specified style layer. See MapEventType and 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 |
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.
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.
The function to be called when the event is fired.
this
// Set an event listener that will fire
// when the map has finished loading
map.on('load', function() {
// 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
}
});
});
// 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);
});
Overload of the on method that allows to listen to events without specifying a layer.
this
Overload of the on method that allows to listen to events without specifying a layer.
The type of the event.
The listener callback.
this
Adds a listener that will be called only once to a specified event type, optionally limited to features in a specified style layer.
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.
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) => void)The function to be called when the event is fired.
this if listener is provided, promise otherwise to allow easier usage of async/await
Overload of the once method that allows to listen to events without specifying a layer.
this
Overload of the once method that allows to listen to events without specifying a layer.
The type of the event.
Optional listener: ListenerThe listener callback.
this
The
Mapobject 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
Mapby specifying acontainerand other options, see MapOptions for the full list. Then MapLibre GL JS initializes the map on the page and returns yourMapobject.Example
See
Display a map