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
})

Binding custom event example:

map.on("click", customClick);

Custom event unbinding example:

map.off("click", customClick);

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);
});

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
});

Map Mouse Events

mouseout event: Fired when the mouse leaves the map;

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

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

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

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

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

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

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

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

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

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

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

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

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

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");
});

2. move event: Fired during map movement;

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

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

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

Map Zoom Events

---

zoomstart event: Fired when map zoom begins;

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

zoom event: Fired during map zoom;

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

zoomend event: Fired when map zoom ends;

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

Map Rotate Events

---

rotatestart event: Fired when map rotation begins;

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

rotate event: Fired during map rotation;

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

rotateend event: Fired when map rotation ends;

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

Map Pitch Events

---

pitchstart event: Fired when map pitch begins;

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

pitch event: Fired during map pitch;

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

pitchend event: Fired when map pitch ends;

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

Map Touch Events

---

touchstart event: Fired when a finger touches the map;

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

touchend event: Fired when a finger leaves the map;

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

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

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