This tutorial shows how to implement marker deletion functionality in marker.js 3 using MarkerArea.
The MarkerArea component provides two main methods for deleting markers:
Here's how to implement a delete button that removes selected markers:
// Assume you have a button element with id="deleteButton"
const deleteButton = document.querySelector('#deleteButton');
deleteButton?.addEventListener('click', () => {
markerArea.deleteSelectedMarkers();
});
MarkerArea fires events during marker deletion that you can handle:
// Marker about to be deleted
markerArea.addEventListener('markerbeforedelete', (ev) => {
console.log('Deleting marker:', ev.detail.markerEditor.marker.typeName);
});
// Marker deleted
markerArea.addEventListener('markerdelete', (ev) => {
console.log('Marker deleted:', ev.detail.markerEditor.marker.typeName);
});
Here's a complete example showing marker deletion with event handling:
import { MarkerArea } from '@markerjs/markerjs3';
// Create marker area
const markerArea = new MarkerArea();
markerArea.targetImage = targetImg;
document.body.appendChild(markerArea);
// Add delete button
const deleteButton = document.querySelector('#deleteButton');
deleteButton?.addEventListener('click', () => {
markerArea.deleteSelectedMarkers();
});
// Handle deletion events
markerArea.addEventListener('markerbeforedelete', (ev) => {
console.log('About to delete:', ev.detail.markerEditor.marker.typeName);
});
markerArea.addEventListener('markerdelete', (ev) => {
console.log('Deleted marker:', ev.detail.markerEditor.marker.typeName);
});