---
title: Map Events
source: https://vjmap.com/en/guide/mapEvents.html
---

# 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:

```js
function customClick(e){
    // Implement custom click event
})
```


Binding custom event example:

```js
map.on("click", customClick);
```


Custom event unbinding example:

```js
map.off("click", customClick);
```

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

```js
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.

```js
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;

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


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

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

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

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


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

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


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

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


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

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


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

```js
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;

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


**2. move event**: Fired during map movement;

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


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

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


### Map Zoom Events

---

**zoomstart event**: Fired when map zoom begins;

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

**zoom event**: Fired during map zoom;

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


**zoomend event**: Fired when map zoom ends;

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

### Map Rotate Events

---

**rotatestart event**: Fired when map rotation begins;

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


**rotate event**: Fired during map rotation;

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

**rotateend event**: Fired when map rotation ends;

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


### Map Pitch Events

---

**pitchstart event**: Fired when map pitch begins;

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


**pitch event**: Fired during map pitch;

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

**pitchend event**: Fired when map pitch ends;

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


### Map Touch Events

---

**touchstart event**: Fired when a finger touches the map;

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


**touchend event**: Fired when a finger leaves the map;

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


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

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