Leaflet.StyledLayerControl

Leaflet.StyledLayerControl copied to clipboard

Thanks for this Leaflet plugin--it's great. One thing I've had difficulty with, however, is trying to put the layers and groups into a specific order. Regardless of the order in which I define them inside my overlayMaps object, they show up in the layer control in seemingly arbitrary fashion. Thoughts?

I've got the same problem, but at least I found a way to work around it:

I think, the groups with layers, that were added to the map in the Javascript-Code (map.addLayer(var);) are placed over the groups only with layers that were not added to the map:

I have 1 or 2 layers in each group, in groups with 2 layers, the first one is added to the map, in groups with 1 layer, nothing is added to the map. Result: The groups with only one layer are shown below the groups with 2 layers. If I also add the layer in the 1-layer-groups to the map, the order is OK.

For now, I have to add at least one layer from each group or only one layer from the first group, then it works. Thats no problem in my project, but of course it would be easier if the order of the groups would only be defined by their order in the overlay-layers-list.

I found the same problem in regards to the display order of the layers. In my case, the easiest solution was to create my feature groups in the order that I would want to see them. There was then no issue with the display ordering.

Thanks to Davi for providing a nice layer control, it provides a much more professional finish in one's application.

peterb-2795, thanks for the encouragement. Lately I have not had time to improve StyledLayerControl. If you see volunteers interested in advancing the tool, I'd appreciate it. Could you please provide us with a webgis the url that you are developing to have idea of how you can get a real application using the control? If you prefer not to publish here, could send to my email in off?

Thank you.

Hi Davi, replied via your gmail account.

I dont have any URL yet, until now its all local. But if I have something official including the nice layer-controll, I'll post the link here. :)

Same problem here. Looked at the DOM structure and I used

$("#leaflet-control-accordion-layers-1").insertBefore("#leaflet-control-accordion-layers-2")

in a case like below:

<div class="leaflet-control-layers-overlays">
<div id=​ "leaflet-control-accordion-layers-2">​…​</div>​,
<div id=​ "leaflet-control-accordion-layers-3">​…​</div>​,
<div id=​ "leaflet-control-accordion-layers-1">​…​</div>​,
<div id=​ "leaflet-control-accordion-layers-4">​…​</div>​,
</div>

Works for me..

Ca-Ac, You could create a pull request for this fix?

In my case, I used the L.stamp().