Handling events in marker.js 3

marker.js 3 provides a robust event system that allows you to respond to various actions within the marker area, such as marker creation, deletion, and updates. This guide will help you understand how to handle these events effectively.

Listening to events

MarkerArea and MarkerView are standard Web Components that emit custom events. You can listen to these events using the standard DOM event listener methods. You can add event listeners to the marker area or marker view elements in your application code the same way you would with any other DOM element using addEventListener.

marker.js 3 events follow the Custom Events specification, which means you can use the detail property of the event to access additional information about the event.

Available events

marker.js 3 provides several events that you can listen to. Here are some of the most commonly used events for the MarkerArea component:

You can always find the complete list of events in the API Reference:

• Marker Area events
• Marker View events

Usage examples

Implementing continuous marker creation

When a marker is created, the marker area switches to select mode automatically. Alternatively, you can initiate another marker creation when handling the markercreate event:

// create another marker of the same type
markerArea.addEventListener("markercreate", (ev) => {
  markerArea.createMarker(ev.detail.markerEditor.marker.typeName);
});
Copy

Auto-saving state on changes

You can listen to the areastatechange event to implement auto-saving or other state management logic:

markerArea.addEventListener("areastatechange", (ev) => {
  const newState = ev.detail.markerArea.getState();
  console.log("Marker area state changed:", newState);
  // Implement your auto-save logic here
});
Copy