Reputation: 11
I use leaflet 1.9.3. I have a map with several markers with a custom icon.
when i click on a marker i change the icon of clicked marker.
const selectedIcon = L.icon({
iconUrl: '/icones/selected.svg',
iconSize: [22, 29],
iconAnchor: [15, 26],
popupAnchor: [-3, -3]
});
marker.on('click', (event) => {
event.target.setIcon(selectedIcon);
});
This works, but when i click on another icon i want to reset the icon of the previous clicked marker.
i try to use a standard custom event (the code bellow are in function who create and return a L.Marker)
marker.on(RESET_MARKER_ICON_EVENT_NAME, (event) => {
marker.setIcon(selectedIcon);
})
I failed to trigger the event. if i use marker.fire( new Event( ...)); the event are just handled by the marker who emit the event.
I try many solution
event handler
marker.on(RESET_MARKER_ICON_EVENT_NAME, (event) => {
marker.setIcon(selectedIcon);
})
marker.addEventListener(RESET_MARKER_ICON_EVENT_NAME, (event) => {
marker.setIcon(selectedIcon);
});
send event
marker.on('click', (event) => {
event.sourceTarget.getElement().dispatchEvent(createResetMarkerIconEvent());
event.target.getElement().dispatchEvent(createResetMarkerIconEvent());
event.target._icon.dispatchEvent(createResetMarkerIconEvent());
event.target._map._container.dispatchEvent(createResetMarkerIconEvent());
// #carto is the div container use for leaflet map
document.getElementById('carto').dispatchEvent(createResetMarkerIconEvent());
// this active event handler but only on the emitter of the event
marker.fire(createResetMarkerIconEvent());
}
The five first are cathed py
document.addEventListener(RESET_MARKER_ICON_EVENT_NAME, (event) => {
console.log('On document event listener', event);
})
Factory function
function createResetMarkerIconEvent() {
console.log('New event !');
return new Event(RESET_MARKER_ICON_EVENT_NAME, {
bubbles: true,
cancelable: false,
composed: true,
});
}
Question : how can i retrieve this event on a maker ?
ps: I don't want to use a global array containing the markers with a foreach on it to change the icons.
Thank you for your help
Edit : example to reproduce : https://plnkr.co/edit/kPP6JiP2403ckS2D
Upvotes: 1
Views: 438