Markercluster doesn't appear in order in the Layers control as an Overlay

[DaveF63]

Hi
I have various layer groups, but only 'PubsGroup' is created with markercluster. As you can see in the overlays list it's at the bottom, but when I run the code it puts it at the top of the Layer control. If I create Pubsgroup as a standard LayerGroup it remains in its place at the bottom.

Is there solution for this?

Here's snips> of my code:

        var PubsGroup = L.markerClusterGroup({ disableClusteringAtZoom: 18, maxClusterRadius: 40});

        L.geoJson(Pubs,{
            fillColor: "Lightblue ", // style for cafe mapped as polygons
            color: "lightblue",
            weight: 3,
            opacity: 1,
            fillOpacity: 0.2,           

            pointToLayer: function (feature, latlng) {
                if (feature.properties.website !== undefined) {         
                    popupContent = '<a href=' + feature.properties.website + ' target="_blank">' + feature.properties.name + '</a>'
                    } else {popupContent = feature.properties.name}         
                return L.marker(latlng, { // Co-ordinates
                    icon: PubIcon,
                    title: feature.properties.name // Hover over text
                    } 
                ).bindPopup(popupContent)
            }, // pointToLayer
        }).addTo(PubsGroup);
snip>
        //List of all the Overlays layergroups
        var overlays = {
            "Two Tunnels NCN 244": TwoTunnelsGroup,
            "Two Tunnels Circuit": TTCircuitGroup,
            "BikeShops": BikeShopGroup,
            "Cafes":CafesGroup,
            "Parks":ParksGroup,
            "Pubs":PubsGroup,
        };

        // Loads the different base layer maps & overlays 
        L.control.layers(baseLayers,overlays,{autoZIndex:true}).addTo(map);     

        map.addLayer(PubsGroup);    
        map.addLayer(BikeShopGroup);    
        map.addLayer(TTCircuitGroup); // displays two groups (ways & arrows)...
         map.removeLayer(TTCircuitArrowGroup); // but removes arrows as initial zoom is ~17  

[danzel]

overlays is a map not an array, so the ordering isn't guaranteed.
Search the leaflet issues for something like that, it sounds familiar.

[DaveF63]

Excuse my ignorance, but could you expand on what you mean please? Especially 'overlays is a map not an array'.

I'd already checked the leaflet forum & autoZIndex appears to be working as stated with layergroups.
To clarify, I'm describing how they appear in the layer control dialog (see attached image) not how they appear on the map.

As I see it (though probably wrong), overlays are a collection of data in layergroups. (From the Leaflet markercluster blog: "...just replace your existing LayerGroup usage with an L.MarkerClusterGroup").

[danzel]

I mean that the order of items in a {} is not guaranteed. So when you add it to the layers control they can end up in whatever order the JS engine feels like ordering them.

If you want to guarantee ordering I think you need to use these:
http://leafletjs.com/reference.html#control-layers-addbaselayer

[DaveF63]

OK. I maybe misunderstanding. I thought the autoZIndex:true, option was implemented to overcome the order problem.
I've tried the addBaseLayer/addOverlay options & the order is static apart from markerClusterGroup, which is disappointing. I'm sure I'm not the first ot have come across this problem, so I hope someone can point me in the direction of a solution.

[danzel]

autoZIndex is just for making the layers on the map have z-index values that line up with their order in the layers list:
http://leafletjs.com/reference.html#control-layers-autozindex

Does the ordering really not work correctly when adding layers one at a time? A jsfiddle to reproduce this would be good.

[DaveF63]

http://jsfiddle.net/m3vcqxht/2/

The Clustergroup (Pubs) is second in the js code but is first in the control. If Pubs is created with a standard layer group it remains second.

[danzel]

Weird. Definitely seems like a bug somewhere, not sure what is broken though!

[ghybs]

Hi,

Apologies again for commenting an old thread...

Here is the reason for this behaviour:

• Layers Control uses layers' stamp (https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js#L118-L120).
• It re-builds the overlays list each time you add a new one, order is based on id (stamp) (https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js#L135-L140).
• Groups' stamp can be set any time before:
  • LayerGroup has no stamp until Layers Control sets it.
  • FeatureGroup gets stamped on first added marker (https://github.com/Leaflet/Leaflet/blob/master/src/layer/FeatureGroup.js#L13 which ends up in https://github.com/Leaflet/Leaflet/blob/master/src/core/Events.js#L55, it is somehow similar in Leaflet 0.7).
  • MarkerClusterGroup gets stamped at initialization (https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerClusterGroup.js#L49)

Fork of DaveF63's last fiddle to highlight the above behaviour: http://jsfiddle.net/Louh70wa/1/

Forcing a predefined list order in Layers Control could be done by stamping the groups in advance on purpose: http://jsfiddle.net/Louh70wa/2/

[ghybs]

Well, I actually overlooked bullet 2: this ordering still depends on the JavaScript engine good will rather than a spec, so even stamping in advance to try forcing the order may not give the expected result.

Looks like there is no other choice than customizing the Layers Control implementation if we really want to ensure a given order.

[danzel]

Thanks for looking in to this @ghybs

[kirantpatil]

Hi, how to order the markers, even though I added them serially it is not getting displayed in order.

The markers are not arranged like 1,2,4,5,6,7 but 1,2,7,6,5,4. Please find the below screenshot.

How to resolve it ?

 L.marker(cont_ll_1, {
                    icon: new L.AwesomeNumberMarkers({
                      number: position2,
                      markerColor: "blue"
                  })}).addTo(markers).bindTooltip("name:" + device.name).openTooltip();

                       L.marker(cont_ll_2, {
                    icon: new L.AwesomeNumberMarkers({
                      number: position1,
                      markerColor: "blue"
                  })}).addTo(markers).bindTooltip("name:" + name1).openTooltip();

                       L.marker(cont_ll_4, {
                    icon: new L.AwesomeNumberMarkers({
                      number: position4,
                      markerColor: "blue"
                  })}).addTo(markers).bindTooltip("name:" + name4).openTooltip();

                       L.marker(cont_ll_5, {
                    icon: new L.AwesomeNumberMarkers({
                      number: position5,
                      markerColor: "blue"
                  })}).addTo(markers).bindTooltip("name:" + name5).openTooltip();


                       L.marker(cont_ll_6, {
                    icon: new L.AwesomeNumberMarkers({
                      number: position6,
                      markerColor: "blue"
                  })}).addTo(markers).bindTooltip("name:" + name6).openTooltip();