PolylineDecorator always top layer even when calling bringToBack()

[TLDC]

Got an issue using polylineDecorator with arrowHead symbols as sometimes the arrows heads can overlap other layers on the map and prevent you from being able to hover them to read an associated tooltip. I've tried to use bringToBack() on the polylineDecorator layer but it just seems to do absolutely nothing, the arrow heads are always the very top layer.

[stharvey]

Hello @TLDC did you find a solution to this? I am having the same issue.

[Michael-372]

@TLDC @stharvey
I think this had to do with the way the polyline decorator works. It appears to be drawing each pattern on a map level layer. So doing something like myDecorator.addTo(myFeatureGroup) is essentially doing nothing.

For my use case, I want the decorators at the bottom of the layer stack at all times so I was able to resolve this issue by overriding the "onAdd" function. More specifically, the this._map.on('moveend') event:

    const myDecorator = L.polylineDecorator(yourOptions);
    
    myDecorator.onAdd = function(map) {
      this._map = map;
      this._draw();

      // original line:
      // this._map.on('moveend', this.redraw, this)

      // new line:
      this._map.on('moveend', () => { this.redraw(); this.bringToBack(); }, this);  
    }
    
    myDecorator.addTo(myLayer);

The polyline decorator attempts to redraw on pan/zoom which moves everything back to the top of the stack but if you make this change, it will send it all back to the bottom.

I admit this is a hacky solution, and probably 3 years too late, but Im using this tool and just hit the snag

[RoboVij]

The above workaround isn't working. Is there any solution for this?