VJMAP

# Map Events

This chapter introduces the use of event types in vjmap (Weijie Map).

# Event Binding and Unbinding

Events are bound via the map instance's on() method and unbound via the map instance's off() method.

Event definition example:

function customClick(e){
    // Implement custom click event
})
1
2
3

Binding custom event example:

map.on("click", customClick);
1

Custom event unbinding example:

map.off("click", customClick);
1

Listen for a specific event only once. The binding is automatically removed after the event fires.

map.once('click', (e) => {
    console.log('One-time click event:', e.lngLat);
});
1
2
3

# Common Map Events

# Map Load Events

load event: Fired when map resources have finished loading after the map object is created and begins loading map resources.

map.on("load", function() {
  // Fired when map resources have finished loading
  // Add custom data sources, custom layers
});
1
2
3
4

# Map Mouse Events

mouseout event: Fired when the mouse leaves the map;

map.on("mouseout", function() {
  console.log("Mouse has left the map");
});
1
2
3

2. mousedown event: Fired when the mouse button is pressed;

map.on("mousedown", function() {
  console.log("Mouse button pressed");
});
1
2
3

3. mouseup event: Fired when the mouse button is released;

map.on("mouseup", function() {
  console.log("Mouse button released");
});
1
2
3

4. mousemove event: Fired when the mouse moves within the map;

map.on("mousemove", function() {
  console.log("Mouse is moving within the map");
});
1
2
3

5. click event: Fired when the mouse clicks anywhere on the map;

map.on("click", function() {
  console.log("Map clicked");
});
1
2
3

6. dblclick event: Fired when the mouse double-clicks anywhere on the map;

map.on("dblclick", function() {
  console.log("Map double-clicked");
});
1
2
3

7. contextmenu event: Fired when the mouse right-clicks anywhere on the map;

map.on("contextmenu", function() {
  console.log("Map right-clicked");
});
1
2
3

# Map Move Events

1. movestart event: Fired when the map is about to start moving but has not yet moved; not fired during map movement;

map.on("movestart", function() {
  console.log("Map is about to start moving");
});
1
2
3

2. move event: Fired during map movement;

map.on("move", function() {
  console.log("Map is moving");
});
1
2
3

moveend event: Fired when a single map move ends; not fired during map movement;

map.on("moveend", function() {
  console.log("Map move ended");
});
1
2
3

# Map Zoom Events

zoomstart event: Fired when map zoom begins;

map.on("zoomstart", function() {
  console.log("Map is about to start zooming");
});
1
2
3

zoom event: Fired during map zoom;

map.on("zoom", function() {
  console.log("Map is zooming");
});
1
2
3

zoomend event: Fired when map zoom ends;

map.on("zoomend", function() {
  console.log("Map zoom ended");
});
1
2
3

# Map Rotate Events

rotatestart event: Fired when map rotation begins;

map.on("rotatestart", function() {
  console.log("Map is about to start rotating");
});
1
2
3

rotate event: Fired during map rotation;

map.on("rotate", function() {
  console.log("Map is rotating");
});
1
2
3

rotateend event: Fired when map rotation ends;

map.on("rotateend", function() {
  console.log("Map rotation ended");
});
1
2
3

# Map Pitch Events

pitchstart event: Fired when map pitch begins;

map.on("pitchstart", function() {
  console.log("Map is about to start pitching");
});
1
2
3

pitch event: Fired during map pitch;

map.on("pitch", function() {
  console.log("Map is pitching");
});
1
2
3

pitchend event: Fired when map pitch ends;

map.on("pitchend", function() {
  console.log("Map pitch ended");
});
1
2
3

# Map Touch Events

touchstart event: Fired when a finger touches the map;

map.on("touchstart", function() {
  console.log("Finger started touching the map");
});
1
2
3

touchend event: Fired when a finger leaves the map;

map.on("touchend", function() {
  console.log("Finger touch on map ended");
});
1
2
3

touchcancel event: Fired when finger touch on the map is interrupted;

map.on("touchcancel", function() {
  console.log("Finger touch on map was cancelled");
});
1
2
3

← Map Projection →