Events
The different types of events that MapLibre GL JS can raise.
You can also find additional event documentation for: Map, Marker, Popup, and GeolocationControl.
Evented
Methods mixed in to other classes for event capabilities.
Instance Members
Adds a listener to a specified event type.
Parameters
(Function)The
function to be called when the event is fired.
The listener function is called with the data object passed to
fire
,
extended with
target
and
type
properties.
Returns
Object:
this
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered.
Parameters
Returns
Object:
this
MapMouseEvent
MapMouseEvent is the event type for mouse-related map events.
Example
Instance Members
The geographic location on the map of the mouse cursor.
The DOM event which caused the map event.
The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the following default map behaviors:
- On
mousedownevents, the behavior of DragPanHandler - On
mousedownevents, the behavior of DragRotateHandler - On
mousedownevents, the behavior of BoxZoomHandler - On
dblclickevents, the behavior of DoubleClickZoomHandler
The Map object that fired the event.
MapTouchEvent
MapTouchEvent is the event type for touch-related map events.
Instance Members
The geographic location on the map of the center of the touch event points.
The geographical locations on the map corresponding to a
touch event's
touches property.
The DOM event which caused the map event.
The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left corner.
The array of pixel coordinates corresponding to a
touch event's
touches property.
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the following default map behaviors:
- On
touchstartevents, the behavior of DragPanHandler - On
touchstartevents, the behavior of TouchZoomRotateHandler
The Map object that fired the event.
The event type.
MapLibreZoomEvent
A MapLibreZoomEvent is the event type for the boxzoom-related map events emitted by the BoxZoomHandler.
Properties
(MouseEvent):
The DOM event that triggered the boxzoom event. Can be a
MouseEvent
or
KeyboardEvent
MapDataEvent
A MapDataEvent object is emitted with the Map.event:data
and Map.event:dataloading events. Possible
values for
dataTypes are:
'source': The non-tile data associated with any source'style': The style used by the map
Properties
(boolean?):
True if the event has a
dataType
of
source
and the source has no outstanding network requests.
(Object?):
The
style spec representation of the
source
if the event has a
dataType
of
source
.
(string?):
Included if the event has a
dataType
of
source
and the event signals
that internal data has been received or changed. Possible values are
metadata
,
content
and
visibility
.
(Object?):
The tile being loaded or changed, if the event has a
dataType
of
source
and
the event is related to loading of a tile.
(Coordinates?):
The coordinate of the tile if the event has a
dataType
of
source
and
the event is related to loading of a tile.
Example
MapWheelEvent
MapWheelEvent is the event type for the wheel map event.
Instance Members
The DOM event which caused the map event.
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the the behavior of ScrollZoomHandler.
The Map object that fired the event.
The event type.
JavaScript Maps API
Tutorials
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Geocoding
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend
Examples
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density