6

I have a Leaflet map with several layers (21) grouped into 7 categories.

Because of the large number of layers, I would like to give up on the standard L.control.layers look and turn it into a Bootstrap panel with tabs, based on my categories.

So I currently have this: enter image description here

And I want to achieve this:

enter image description here

Is is possible to split the Leaflet layer control into a multiple tabs panel?

I have added my code to a JSFiddle. I only used some markers, for simplicity.

-- Edit --

I have tried using Leaflet.StyledLayerControl plugin to group my layers and move them to each tab based on their category.

Result: here.

Problem: After moving the elements, their styling and the click event are lost.

Improve this question

1 Answer 1

Reset to default
5

Yes, it is possible.

I suggest you have a look at the layer switching controls section of the leaflet plugins page; there are several plugins that implement complex layer controls, and maybe you can benefit from one of them.

Ultimately, you can create your own HTML input elements (checkboxes/radio buttons/drop-downs/etc), attach event listeners to their change event, and call layer.addTo(map)/layer.remove() as needed, keeping references to your instances of L.Layer.

Improve this answer
1
  • Thank you for your input, I was also thinking about using the styledLayerControl plugin. I have tried to use it and, while it's been easy to move the layers from the layer-control to each tab based on categories, something odd happens: after moving the elements, they lose their styling and the click event. Fiddle
    – Ralu Bur
    May 26, 2017 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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