CODEWITHSUNDEEP
javascriptleaflet
mostafa swify
mostafa swify

Reputation: 35

How can I remove the marker from the map with leaflet?

How can I remove the marker from the map with leaflet? I want to do it without click on the mapjust after click the button that I have created. i already got the coords of the marker that i want to delete.

_deleteWorkout(e){ 
        // check if the clicked target is delete button 
        if(e.path[0].className === 'delete-workout'){
            // determine the list of cilcked button
            const workEl = e.target.closest('.workout');
            const workElId = workEl.dataset.id;
            // find the index of of workout that clicked from the workouts array
            const deletedWorkoutIndx = this.#workouts.findIndex(el => el.id === workElId);
            const workout = this.#workouts[deletedWorkoutIndx];
            const coords = workout.coords;
            // delete the workout object  from workouts array 
            this.#workouts.splice(deletedWorkoutIndx, 1);
            // delete workout from the user interface 
            workEl.parentNode.removeChild(workEl);
            // remove workout from the map 
```}
}

Upvotes: 1

Views: 165

Answers (1)

ghybs
ghybs

Reputation: 53300

A simple and classic solution is to maintain a dictionary of your Markers, so that you can later easily retrieve the Marker associated with data ID.

// A global dictionary
const myMarkers = {};

// When creating your Markers from your data
myMarkers[myDataId] = L.marker(myDataCoords).addTo(map);

// When you want to remove the Marker from the map
myMarkers[workElId].remove();

Upvotes: 1

Related Questions