1

I have a layer control with 8 layers in it. I also have a legend control in lower right. A few layers have the legend tall. Now my issue is on smaller monitors the legend control is on top of the layer control, making it hard to turn on/off layers.

I've looked at panes but didn't see a reference to either control, so I've played with CSS and tried to set the z-index but with no luck. I'm sure it can be done as the legend know how to draw on top of the layer control but where is the setting?

.leaflet-control-layers{ z-index: 500; } .legend { z-index: 100; }

Improve this question
2
  • In the leaflet.css file there's a .leaflet-control {z-index: 800}, In order to get the leaflet-control-layers on top of the legend, use something like .leaflet-control-layers{ z-index: 1000 !important; } . Edit: probably the legend is in the bottom and the layer control is in another position, so preferably play with .leaflet-top/.leaflet-bottom in your CSS – NettaB Jul 7 '17 at 7:45
  • .leaflet-bottom {z-index: 800 !important;} was the answer, as in the CSS it was at 1000, changed this to 800 and the layer control opens on top of the legend. Only thing left to figure out is how to mark your comment as an answer. Thanks, – Bill Chappell Jul 7 '17 at 11:39
2

The leaflet.css file contains a .leaflet-control {z-index: 800}. Probably the legend is in the bottom and the layer control is in another position, so you can override the CSS with z-index: new_index !important in .leaflet-top{} or .leaflet-bottom{}.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.