Source: https://developers.woosmap.com/products/map-api/guides/events/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Handling Events



## Events Triggered by User Interaction

The Woosmap Map Javascript API lets you register event listeners triggered when users interact with the map and object within it. There are two kinds of events: **user events** (such as map `click` event) and **MVC events** which reflect changes in Map objects properties (such as map `zoom_changed`).

To register for an event listener and execute code when that event is triggered, use the `addListener()` event handler on dedicated object.

The below sample will show you what events are triggered by the `woosmap.map.Map` as you interact with the map.

https://demo.woosmap.com/js-samples/samples/map-events/app/dist/
[](https://demo.woosmap.com/js-samples/samples/map-events/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-events/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-events/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-events)

List of events are available through the [Map JavaScript API Reference](/products/map-api/reference/1.4/) in a separate section for each object which contains events (e.g, `Map`, `Marker`, `StoresOverlay`, …)

Generally, user events pass arguments within the event whereas MVC events don’t. To get the property that changed on an MVC state change you’ll need to call the appropriate get_Property_ object method (`map.getZoom()` on a `zoom_changed` event for example)

## Handling Events

To register for event listeners, call the `addListener()` event handler on dedicated object. It takes an event string name parameter to listen for, and a function to call when the specified event is triggered.

The following sample combines map events with marker events. On `click` on the map, we pan to the clicked position. This pan leads to an `idle` event here used to set the marker position centered on the map. Finally, on marker `click`, we change its icon.

https://demo.woosmap.com/js-samples/samples/event-simple/app/dist/
[](https://demo.woosmap.com/js-samples/samples/event-simple/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/event-simple/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/event-simple/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/event-simple)

```javascript
map.addListener("click", (e) => {
  map.panTo(e.latlng);
});
map.addListener("idle", () => {
  marker.setPosition(map.getCenter());
});
marker.addListener("click", () => {
  marker.setIcon({
    url: 'https://images.woosmap.com/icons/pin-green.png'
  });
})
```

## Attaching Data within Events

It can be useful to access outer variables within event listeners when an event occurs, for example, link data to a marker and retrieve it when a user click on it. Closures in javascript let you associate data with a function that operates on that data.

```javascript
const markerData = {
  cityname: "Osaka",
  citizens: "16,800,000"
}
const markerOsaka = new woosmap.map.Marker({
  map,
  position: { lat: 34.6937378, lng: 135.5021651 },
  icon: {...}
});
markerOsaka.addListener("click", function() {
  console.log(markerData.cityname + ": " + markerData.citizens);
})
```

Check the [Marker Click Event sample](/products/map-api/guides/markers/#marker-click-event) for a more detailed implementation of this.

## Removing Event Listeners

To be able to remove a specific event listener, you will first need to assign it to a variable. Then you can call the `remove()` method of the listener.

```javascript
const listenerClick = map.addListener('click', () => {...})
listenerClick.remove();
// equivalent to 
// woosmap.map.event.removeListener(listenerClick);
```

When using `addListenerOnce()`, no need to manage deletion as it removes itself after handling the first event.

To remove all listeners attached to a specific object instance, call `clearInstanceListeners()`, passing the instance name.

```javascript
map.addListener('click', () => {...})
map.addListener('zoom_changed', () => {...})
woosmap.map.event.clearInstanceListeners(map);
```

To remove all listeners for a specific event type attached to a specific object instance, call `clearListeners()`, passing the instance name and the event name.

```javascript
map.addListener('click', () => {...})
map.addListener('click', () => {...})
woosmap.map.event.clearListeners(map, 'click');
```

Check the reference documentation for the [woosmap.map.event](/products/map-api/reference/1.4/#woosmap.map.event) namespace for more information.