8

I have two geoJson layers being loaded - both layers are the same data for testing purposes, but being drawn from two different json files. When I turn the layers on and off in the layer controller, the draw order of the layers change.

Any ideas why this is happening?

I have put my code into a JSFiddle: http://jsfiddle.net/lprashad/ph5y9/10/ and the JS is below:

//styling for watersheds_copy
var Orange = {
    "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
};

var Water_Orange = L.geoJson(watersheds_copy, {
    style: Orange
});

Water_Orange.addData(watersheds_copy);

//these are blue
var Water_blue = L.geoJson(watersheds, {});
Water_blue.addData(watersheds);

//This sets the inital order - last in layer list being on top. Except minimal   - tile layer is always on bottom
var map = L.map('map', {
    center: [41.609, -74.028],
    zoom: 8,
    layers: [minimal, Water_Orange, Water_blue]
});

var baseLayers = {
    "Minimal": minimal,
        "Night View": midnight
};

//This controls the order in the layer switcher. This does not change draw order
var overlays = {
    "Water_Orange": Water_Orange,
        "Water_blue": Water_blue
};
L.control.layers(baseLayers, overlays).addTo(map);

LP

Eduardo M
  • 1,007
  • 11
  • 17
Lee
  • 93
  • 1
  • 5
  • I don't see anything on your jsfiddle. – L. Sanna May 30 '13 at 11:15
  • Your JSFiddle does not work. However, your layers should not change order when switching on/off with the Layers control. See the `autoZIndex` option in the L.Control.Layers section in the API: http://leafletjs.com/reference.html#control-layers . Is there any chance you are changing the layers outside of this control? – Patrick D May 31 '13 at 13:31
  • I fixed the JSFiddle: http://jsfiddle.net/lprashad/ph5y9/ , thank you. I also tried the autoZindex set to true, but this does not help. If you turn off both the watershed layers, then turn on the blue layer, then the orange layer in the Layer Control - you'll see that the layers end up in a different draw order than when the map initializes. – Lee Jun 01 '13 at 21:10
  • 1
    Not an answer, but - this problem seems specific to L.GeoJson layers. It may be a bug. I cannot reproduce this issue with any other type of layer (I've tried with L.layerGroup and L.TileLayer) - in those cases the layer zIndex is correctly preserved. My suggestion would be to debug through the Leaflet source for these L.GeoJson layers and see what might be different in their case. – Patrick D Jun 04 '13 at 11:37
  • 1
    I've been looking for an answer to this or a while with no luck. I'd at least like the option of controlling the draw order explicitly. Some layers belong on the bottom of the stack and should return there if they are toggled of then on. – JasonRDalton Apr 02 '14 at 18:01

3 Answers3

2

While searching I happened upon this site that shows some of the Leaflet code: http://ruby-doc.org/gems/docs/l/leaflet-js-0.7.0.3/lib/leaflet/src/control/Control_Layers_js.html

In it I found this condition for the application of autoZIndex:

    if (this.options.autoZIndex && layer.setZIndex) {
            this._lastZIndex++;
            layer.setZIndex(this._lastZIndex);
    }

TileLayer is the only layer type that has a setZIndex function, so apparently autoZIndex only works there.

I'm not sure which annoys me more. This incredible limitation or the fact that Leafet documentation doesn't point it out.

Rikaelus
  • 574
  • 1
  • 5
  • 15
1

At least on 0.7.2, I had to use bringToFront in the callback of map.on('overlayadd'). autoZIndex: false did not work in my case neither. A comment on this issue may explain the reason.

Nobu
  • 9,965
  • 4
  • 40
  • 47
0

It's not specific to L.GeoJson layers. As far as I can tell, it's true of all Leaflet layers with layer control. The last layer turned on is simply on top. I don't think this is a bug either. It's predictable behavior which I use and depend on when I'm designing maps with layer control...

user3233010
  • 91
  • 6
  • 2
    I think the user would find that very confusing when trying to click points that are on the bottom of a polygon. Layers on top in the list are expected by users to draw on top (as in a GIS desktop software product). – jbchurchill Jan 05 '17 at 15:52