How to drag a polygon when dragging a marker inside of it?

Question

I have a map with polygons and markers, and a sidebar with tools buttons (like in this demo : https://geoman.io/demo). My markers are linked to my polygons in my database and if I use the 'Drag layers' tool on a polygon, all its linked markers will be moved accordingly.

What I'd like to achieve too is to be able to use the 'Drag layers' tool on a marker and dragging the polygon behind it (my code would handle moving all the markers afterward) instead of the marker itself.

Is there any built in and clean way to do this or should I find a way to do this with React ?

Answer 1

Since I haven't found any built in method and I didn't want to add too much JS, I used a simple trick.

When activating the 'Drag layers' tool, I move the markers behind the polygons like this :

  const moveMarkersToTheBack = (): void => {
    const markersToMove = document.getElementsByClassName(
      "leaflet-marker-pane",
    ) as HTMLCollectionOf<HTMLElement>;
    for (const singleMarker of markersToMove) {
      singleMarker.style.zIndex = "300";
    }
  };

This way, I can only drag the polygon with the tool.

And I move them back to the front when the tool is unselected.