Handling Events
Learn how to deal with user events and state change notifications triggered when a user interact with the map.
- Events Triggered by User Interaction
- Handling Events
- Attaching Data within Events
- Removing Event Listeners
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.
List of events are available through the Map JavaScript API Reference 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 getProperty 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.
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.
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 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.
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.
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.
map.addListener('click', () => {...})
map.addListener('click', () => {...})
woosmap.map.event.clearListeners(map, 'click');
Check the reference documentation for the woosmap.map.event namespace for more information.
