Render polygons behind points and lines

[rainitesh]

I am trying to use leaflet method bringToBack( ) for polygons in order to place them behind points and lines.

It does work in the first instance of time but overtime the polygon features with future dates overlap on top of points and lines. Is this because we are adding the features on map based on time and not as one complete layer? I did look into layer.geojson.js to check if there a way to handle this but couldn't find much info atm.

Any help is appreciated.

[bielfrontera]

Hi @rainitesh,
you could create a new class that extends TD.layer.geojson (as in example 15) and overwrite the method _update:

L.TimeDimension.Layer.GeoJson.CustomLayer = L.TimeDimension.Layer.GeoJson.extend({

    _update: function() {
        L.TimeDimension.Layer.prototype._update.call(this);
        this._currentLayer.bringToBack();        
    },
    
});

L.timeDimension.layer.geojson.customLayer = function(layer, options) {
    return new L.TimeDimension.Layer.GeoJson.CustomLayer(layer, options);
};

You could also try to use the timeload event.

[rainitesh]

@bielfrontera this really didn't work for me. I tried few things but I keep gettin _currentlayer as undefined.
I did try printing _baselayer in the console, this is defined with the feature values but using bringToBack() doesn't make any difference.

[rainitesh]

I also tried using timeload in this way but didn't work.

map.timeDimension.on('timeload', function(data) {
    console.log(data);
    map.eachLayer(function (layer) {
      if (layer.feature != undefined) {
        if (layer.feature.geometry.type == 'MultiPolygon') {
            if (layer.feature.properties.Type == 'landuse') {
                console.log(layer.feature);
                landuseLayer.bringToBack();
            }
        } 
    }
})

[bielfrontera]

@rainitesh,
I've prepared this example where two different GeoJson are loaded: a linestring without time and a collection of polygons and points with time. As you can see, the linestring is always on top because bringToBack is called after _update.

[rainitesh]

@bielfrontera that worked, Thanks heaps. The issue was here
L.TimeDimension.Layer.prototype._update.call(this); where I missed GeoJson

I also had one other quick question on time slider. The slider speed is very much dependent on the number of features on map during run time. I do have close to 14 features with toggling option for each of them but specially for large polygon features the slider gets very slow. Is there a way to make the slider speed consistent irrespective of the feature load? Thanks.

[bielfrontera]

@rainitesh,
the player uses window.setInterval function, which generates periodic calls to the method that updates the slider. This method moves to the next time unless the player is paused (occurs if current layers aren't loaded yet). You can check if your layers are loaded, or if the player has to wait for them. And adjust the transitionTime option of the player accordingly.