Ngx-Leaflet: Invert the layer rendering on map

Question

I'm using the ngx-leaflet package for map in angular application. I have configured some layers in geoserver and applied those layers in the map. Example Layers:

1. Current
2. Pending
3. Historic

While rendering these layers in map. At first it renders Current layer and it renders Pending on top of Current and Historic is renders on top of Pending.

Can it be reversed ?

I mean the Historic needs to be at the bottom and then Pending on top of Historic and Current layer on top of Pending.

Answer 1

Leaflet layers are added to the map in ascending order. So, if you call map.addto(layer) several times, the first layer added will be on the bottom, with each subsequent layer stacked on top.

There are several ways to control how the layers are added such that their order is explicit.

First, order them explicitly in the DOM:

<div leaflet ... >
   <div [leafletLayer]="..."/> // bottom layer
   <div [leafletLayer]="..."/> // middle layer
   <div [leafletLayer]="..."/> // top layer
</div>

Second, you could arrange them in the right order in the bound array:

layers: Layer[] = [ bottomLayer, middleLayer, topLayer ]
...
<div leaflet [leafletLayers]="layers" ... >
</div>

These aren't the only way to accomplish what you're trying to do. Just showing you there are options.

An important note to make is that this only enforces the order of the layers on initial load. Once you start adding/removing layers (using controls or programmatically altering the DOM or bound layers array), the layer ordering no longer matches the order in the DOM/array. This is because the data binding is only adding/removing layers as needed, it isn't trying to maintain order. If it was going to do that, it'd need to remove all the layers and re-add them in the correct order.

Since there are so many ways to interact with features on the map (e.g., controls, programmatically, via data binding), it's difficult to enforce order when adding/removing the layers dynamically.