4

I am developing a web application that brings in a number of tileLayers and geoJSON layers. For the tile layers I have been able to do similar to this JSFiddle in that the layers appear depening on their zIndex value regardless of which layer was called in last.

I thought I would be able to do the same for geoJSONS, however when i add/ remove the layers, the last layer that is added in appears on the top, despite which order they have been written in.

After checking through the documentation I am to understand that the zIndex parameter only applies to tileLayers and at least in version 0.7.5 cannot be used with geoJSON.

I have read that a potential workaround is to use the bringToFront/Back() method, however this does not appear to work and I can't imagine will provide the best solution for reading in a large amount of geoJSONS.

If there is no official method with 0.7.5 is there at least a workaround? I have been bringing in the geoJSONS as below. 

var testLayer = new L.geoJson(json_testdata, {
style: testStyle
});
testLayer.addData(json_testdata);

Update: This is a JSFiddle that shows the tileLayers working with a ZIndex, however when the GeoJSON layers are added and removed the last one to be added goes on top. Is it possible to maintain the layers position? i.e. the order it is written or assigning an equivalent to a ZIndex?

Improve this question
3
  • According to the leaflet creator, vector data are rendered with SVG, which does not natively support layer ordering. This also means that yes, setZIndex does not work on GeoJSON layers (only tile layers). You need to think of a workaround that either uses bringtoFront/Back or adds layers to the map in a creative fashion Maybe a function that iterates over an array/list of all GeoJSON layers, adding them to the map in the order that you want to see them every time, although not adding layers that are disabled or hidden.
    – Thomas
    Oct 14, 2015 at 16:04
  • Your question is very specific about using 0.7.5, but is using the 1.0 beta an option for you? Because this problem is solved in the beta using panes. For example, like this. As it is now, panes render in the order they are added, regardless of when layers are added or removed. Though the zIndex for each pane can also be specified manually, there is no documentation for it (yet?), so the low-level implementation of that may still be evolving.
    – nathansnider
    Oct 14, 2015 at 19:32
  • @nathansnider using the 1.0 beta version is an option yes, however I hadn't checked it's functionality with the rest of my application so wanted to first see if someone had come up with an effective workaround for 0.7.5
    – Joshua Dickerson
    Oct 14, 2015 at 19:51

1 Answer 1

Reset to default
1

As Thomas and nathansnider pointed out in the comments, vector layers are limited in terms of manipulation of stack order because of the use of SVG rendering in Leaflet 0.7.x.

But basically, SVG renders the vectors the way they are in the DOM, and bringToFront/Back() do nothing else than appending/prepending the paths within the DOM.

If you are ready to fiddle with Leaflet internal objects, it should then be possible to insert your vectors in the desired position.

Demo: https://jsfiddle.net/x36qkk3c/8/

The demo emulates the use of "zIndex" to re-order vectors. Since it is built on top of your example, it uses the ID to determine a zIndex.

You could optimize the sorting algorithm so that it is faster for big collections of features. You could even consider making a small plugin to help other people facing a similar need.

Improve this answer
1
  • Thanks Ghybs, this works well and should help others out looking to do similar, as Leaflet 0.7.X is still being widely used I think it would be a worthwhile plugin. For the sake of this project however I have updated the rest of my app to work with Leaflet 1.0 as @nathansnider suggested to make use of the ZIndex function and Layer Panes already in place.
    – Joshua Dickerson
    Oct 27, 2015 at 10:21

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.