Change layer z-index in leaflet

Question

I'm using leaflet to trace underground pipes which I create using the polyline methods.

Since the pipes/lines can sometimes overlap I need to be able to highlight the selected line which requires switching the z-index of the line.

Now it seems that leaflet does offer a setZIndex method, but it's not available for individual layers - so I can change it over an entire featureGroup, but that is less helfpul - and making every line into its own separate featureGroup feels like an overkill.

Any suggestions?

https://leafletjs.com/reference-1.5.0.html#path-bringtofront — IvanSanchez, Jul 25 '19 at 12:23

score 0 · Answer 1 · answered Jul 25 '19 at 12:20

0

You could create another layer with a superior z-index that would be empty at start. When the mouse is going over a feature, copy the feature into that layer. When the mouse is going out, just remove it from the layer.

It might be a little bit cpu demanding, so I suggest you to debounce the mouseover function in order to make the mouse to wait 1-2 seconds over a feature before copying it into the top layer.

answered Jul 25 '19 at 12:20

Below the Radar

7,321
11
63
142

Thanks, I guess that's a better solution than creating separate featureGroups. I assume that means that there is no built in support for layer Z-index? – Guy Nesher Jul 25 '19 at 18:23
1

maybe map pane is what you are looking for: https://leafletjs.com/examples/map-panes/ – Below the Radar Jul 25 '19 at 18:34

score 0 · Answer 2 · answered Jul 26 '19 at 06:14

0

As IvanSanchez noted in a comment, the correct answer seems to be a method called bringToFront.

answered Jul 26 '19 at 06:14

Guy Nesher

1,385
2
14
26

Change layer z-index in leaflet

2 Answers2