Reputation: 5217
Is it possible to order overlays within the layers control?
Here's my issue. When I do this with my overlays:
var overlays = {
"Apples": apples,
"Bananas": bananas,
"Peaches": peaches
};
L.control.layers(baseLayers, overlays).addTo(map);
Leaflet adds the overlays to the layer control on the map in a random fashion (due to iteration):
- Bananas
- Apples
- Peaches
Is it possible to specificy the order I want to show the overlays? *(In my case, I'd like to have it alphabetical. Also, I am using the Mapbox API)
Thank you.
Upvotes: 2
Views: 978
Reputation: 53185
I am not sure if Mapbox API has changed the default Layers Control code / behaviour, but the latter does not provide a 100% reliable way of displaying overlays in a specific order. See that post for details.
The explanation is that the Layers Control iterates overlays by their "stamp" (a unique identifying integer that is created using L.stamp(myLayer)
). Depending on your type of layer, this stamp is assigned automatically but at different moments.
You can force its creation right after having instantiated your layer. For example in your case:
var apples = L.layerGroup();
L.stamp(apples);
var bananas = L.layerGroup();
L.stamp(bananas);
var peaches = L.layerGroup();
L.stamp(peaches);
Unfortunately the order of iteration is not guaranteed as per JS spec, hence the impossibility to have a 100% reliability in this behaviour.
That being said, in all browsers I have tested, the order is in accordance with the natural number order, so as of today, this trick works.
If you want more confidence, you should look for Control plugins that explicitly provide you with the functionality to specify manually the order of listing.
Upvotes: 1