Interact with the map
This article shows you how to use map events class. The property highlight events on the map and on different layers of the map. You can also highlight events when you interact with an HTML marker.
Interact with the map
Play with the map below, and see the corresponding mouse events highlighted on the right. You can click on the JS tab to view and edit the JavaScript code. You can also click on Edit on CodePen to modify the code on CodePen.
Interact with map layers
The following code highlights the fired event as you interact with the Symbol Layer. The symbol, bubble, line, and polygon layer all support the same set of events. The heat map and tile layers don't support any of these events.
Interact with HTML Marker
The following code adds JavaScript map events to an HTML marker. It also highlights the name of the events that get fired up as you interact with the HTML marker.
The following table lists all supported map class events.
Event | Description |
---|---|
boxzoomend |
Fired when a "box zoom" interaction ends. |
boxzoomstart |
Fired when a "box zoom" interaction starts. |
click |
Fired when a pointing device is pressed and released at the same point on the map. |
close |
Fired when the popup is closed manually or programatically. |
contextmenu |
Fired when the right button of the mouse is clicked. |
data |
Fired when any map data loads or changes. |
dataadded |
Fired when shapes are added to the DataSource . |
dataremoved |
Fired when shapes are removed from the DataSource . |
datasourceupdated |
Fired when the DataSource object is updated. |
dblclick |
Fired when a pointing device is clicked twice at the same point on the map. |
drag |
Fired repeatedly during a "drag to pan" interaction on the map, popup, or HTML marker. |
dragend |
Fired when a "drag to pan" interaction ends on the map, popup, or HTML marker. |
dragstart |
Fired when a "drag to pan" interaction starts on the map, popup, or HTML marker. |
error |
Fired when an error occurs. |
idle |
Fired after the last frame rendered before the map enters an "idle" state:
|
keydown |
Fired when a key is pressed down. |
keypress |
Fired when a key that produces a typable character (an ANSI key) is pressed. |
keyup |
Fired when a key is released. |
layeradded |
Fired when a layer is added to the map. |
layerremoved |
Fired when a layer is removed from the map. |
load |
Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. |
mousedown |
Fired when a pointing device is pressed within the map or when on top of an element. |
mouseenter |
Fired when a pointing device is initially moved over the map or an element. |
mouseleave |
Fired when a pointing device is moved out the map or an element. |
mousemove |
Fired when a pointing device is moved within the map or an element. |
mouseout |
Fired when a point device leaves the map's canvas our leaves an element. |
mouseover |
Fired when a pointing device is moved over the map or an element. |
mouseup |
Fired when a pointing device is released within the map or when on top of an element. |
move |
Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods. |
moveend |
Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods. |
movestart |
Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods. |
open |
Fired when the popup is opened manually or programatically. |
pitch |
Fired whenever the map's pitch (tilt) changes as the result of either user interaction or methods. |
pitchend |
Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods. |
pitchstart |
Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods. |
ready |
Fired when the minimum required map resources are loaded before the map is ready to be programmatically interacted with. |
render |
Fired whenever the map is drawn to the screen, as the result of:
|
resize |
Fired immediately after the map has been resized. |
rotate |
Fired repeatedly during a "drag to rotate" interaction. |
rotateend |
Fired when a "drag to rotate" interaction ends. |
rotatestart |
Fired when a "drag to rotate" interaction starts. |
shapechanged |
Fired when a shape object property is changed. |
sourcedata |
Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. |
sourceadded |
Fired when a DataSource or VectorTileSource is added to the map. |
sourceremoved |
Fired when a DataSource or VectorTileSource is removed from the map. |
styledata |
Fired when the map's style loads or changes. |
styleimagemissing |
Fired when a layer tries to load an image from the image sprite that doesn't exist |
tokenacquired |
Fired when an Azure Active Directory access token is obtained. |
touchcancel |
Fired when a touchcancel event occurs within the map. |
touchend |
Fired when a touchend event occurs within the map. |
touchmove |
Fired when a touchmove event occurs within the map. |
touchstart |
Fired when a touchstart event occurs within the map. |
wheel |
Fired when a mouse wheel event occurs within the map. |
zoom |
Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods. |
zoomend |
Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods. |
zoomstart |
Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods. |
Next steps
See the following articles for full code examples:
Feedback
Submit and view feedback for