Map View Events

An map view instance will trigger several events, such as when the map size or region changes, or when visible layers have changed. You can respond to any of these changes by adding your own event handler on your map instance.

The following events are currently triggered by a MapView instance:

Adding Event Listeners

You add event listeners to your map instance using the on() method. This method requires the event name, as a string, and the handler function to call when the event is triggered.

For example, you may want to perform a certain action when the weather data layers have changed on the map. Just add an event listener for the change:data event:

map.on('change:data', (e) => {
    console.log('data layers changed', e.data);
});

Your event handler function will receive a single argument, which is the Event instance that was triggered by the event. In many cases, this Event object will also contain a data property that is an object with additional data or object references associated with the event.

So in the above event handler for a change:data event, we are outputting the value of e.data to the console as that is the data that was associated with the event. For this particular event, this object will contain a layers property, which is the array of weather layers currently active on the map after the event.

Removing Event Listeners

Similar to adding events, you can remove event listeners from a map instance using the off() method. This method only requires the event name, as a string, and a reference to the original handler function used in on() to be provided.

Suppose we know we will want to remove the event listener at some point in the future. We'd want to store a reference to the event handler so we can remove it later:

// create a reference to the event handler function
const handleDataChange = (e) => {
    console.log('data layers changed', e.data);
}
map.on('change:data', handleDataChange);
 
// later we decide to remove the listener
map.off('change:data', handleDataChange);

If you know you won't need to reference the event handler function later, then you can just provide the handler function as an inline paramter to on() instead.