T1p0un3t
T1p0un3t

Reputation: 11

Leaflet using custom event on marker clik handler

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

Answers (0)

Related Questions