how do I set zindex for geojson layers?

[Luca Moiana]

I read that leaflet supports zindex set;
I ma working on this http://lucamoiana.github.io/mdr2015/VI_MDR_index.html
where I have three polyline, imported from external geojson overlapping; I'm trying to set a zindex so the order is top to bottom: corto, medio, lungo

can anybody help?

[Oscar Hidalgo]

You can modify the GeoJson layer order with bringToFront() and bringToBack() methods of the FeatureGoup (GeoJson extends FeatureGroup).

The syntax is: the_geojson_layer.bringToFront()

You can view the API documentation on http://leafletjs.com/reference.html#featuregroup-bringtofront

[Luca Moiana]

hi Oscar, 

thank you for your reply.

I know bringtofront, but working with 3 polyline layers, what should I do? 

thanks

L

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/Bc6E82GNWF0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

If we helped convince you not to print this email, go to www.printgreener.com/saveatree.php.

[Oscar Hidalgo]

If you have for example 3 polyline layers

the_geojson_layer_A

the_geojson_layer_B

the_geojson_layer_C

and you want to order (bottom to top) for example B,C,A then:

the_geojson_layer_B.bringToFront();

the_geojson_layer_C.bringToFront();

the_geojson_layer_A.bringToFront();

or using BringToBack() on reverse secuence:

the_geojson_layer_A.bringToBack();

the_geojson_layer_C.bringToBack();

the_geojson_layer_B.bringToBack();

or with an array:

var OrderLayers = ['the_geojson_layer_B', 'the_geojson_layer_C', 'the_geojson_layer_A'];

for(var i = 0 , len = OrderLayers.length; i < len; i++){

   eval(OrderLayers[i]).bringToFront();

[Luca Moiana]

Hi Oscar,

thank you for your reply.

I think I'm doing something wrong, cause layers seems to get randomly placed... http://lucamoiana.github.io/mdr2015/VI_MDR_index.html

here is the code:

    L.mapbox.accessToken = 'pk.eyJ1IjoibHVjYW1vaWFuYSIsImEiOiJfeUttT1pzIn0.7_LM4jNrpSFn7a9f6QqiYA';

    var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {

      attribution: '<a href="https://www.mapbox.com/about/maps">&copy; Mapbox</a> <a href="http://openstreetmap.org/copyright">&copy; OpenStreetMap</a> | <a href="http://http://www.podismoecazzeggio.it/" class="mapbox-improve-map">gpx data &copy; P&C</a> | <a href="http://mapbox.com/map-feedback/" class="mapbox-improve-map">Improve this map</a>'

    });

    var map = L.map('map')

    .addLayer(mapboxTiles)

    .setView([45.642, 8.954], 14);

    <!--Added track from external geojson -->

    var cortostyle = {

      "color": "pink",

      "weight": 5,

      "opacity": 0.8,

      "z-index": 2

    };

    var mediostyle = {

      "color": "yellow",

      "weight": 5,

      "opacity": 0.8,

      "z-index": 2

    };

    var lungostyle = {

      "color": "blue",

      "weight": 5,

      "opacity": 0.8,

      "z-index": 3

    };

    var lungo;

    $.getJSON("DATA/lungo.geojson", function(json) {

      percorso = L.geoJson(json,

      {

        style: lungostyle

      }

      ).addTo(map);

    });

    var medio;

    $.getJSON("DATA/medio.geojson", function(json) {

      percorso = L.geoJson(json,

      {

        style: mediostyle

      }

      ).addTo(map);

    });

    var corto;

    $.getJSON("DATA/corto.geojson", function(json) {

      percorso = L.geoJson(json,

      {

        style: cortostyle

      }

      ).addTo(map);

    });

    

lungo.bringToFront();

medio.bringToFront();

corto.bringToFront();

    <!--Add scalebar -->

    L.control.scale({

      position: 'bottomright',

      imperial: false

    }).addTo(map);

    <!--Add info -->

    var info = L.control();

    info.onAdd = function (map) {

      this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"

      this.update();

      return this._div;

    };

[Brendan Stone]

The issue is lungo, medio and corto are not layers, they are just empty variables.

Therefore this code doesn't do anything

lungo.bringToFront();

medio.bringToFront();

corto.bringToFront();

Your layers are all given the variable name percorso.

So you need to change your code to:

  var lungo;

    $.getJSON("DATA/lungo.geojson", function(json) {

      lungo = L.geoJson(json,

      {

        style: lungostyle

      }

      ).addTo(map);

    });

    var medio;

    $.getJSON("DATA/medio.geojson", function(json) {

      medio= L.geoJson(json,

      {

        style: mediostyle

      }

      ).addTo(map);

    });

    var corto;

    $.getJSON("DATA/corto.geojson", function(json) {

      corto= L.geoJson(json,

      {

        style: cortostyle

      }

      ).addTo(map);

    });

now this should work:

lungo.bringToFront();

medio.bringToFront();

corto.bringToFront();

Regards,

Brendan

[Luca Moiana]

still not workign, any refresh order changes.

but thank you anyway.

L

[Brendan Stone]

Try this then:

var lungo = L.geoJson(null, {

  style: lungostyle

}).addTo(map).bringToFront();;

$.getJSON("DATA/lungo.geojson", function (data) {

  lungo.addData(data);

});

var medio = L.geoJson(null, {

  style: mediostyle

}).addTo(map).bringToFront();

$.getJSON("DATA/medio.geojson", function (data) {

  medio.addData(data);

});

var corto = L.geoJson(null, {

  style: cortostyle

}).addTo(map).bringToFront();

$.getJSON("DATA/corto.geojson", function (data) {

  corto.addData(data);

});

It's definitely working for me, I can change the order of the pink, blue and yellow layers by changing the order of the layers in the code.

No need to have these lines now as its set when the layer is added to the map:

lungo.bringToFront();

medio.bringToFront();

corto.bringToFront();

[Luca Moiana]

doesn't do for me, on firefox.

Try load http://lucamoiana.github.io/mdr2015/boilerplate.html and refresh