0

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.

shoban m.r
  • 36
  • 6

1 Answers1

0

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.

reblace
  • 4,115
  • 16
  • 16
  • My question is not about ordering the layers. My question is how to make the rendering inverted I mean if we have [1,2,3] layers in the map layers it will display the same order and render the 1st layer first and on top of it will display the 2nd layer and so on. But I want to render the last(3) layer first and then on top of it 2nd layer and so on. – shoban m.r Mar 10 '22 at 08:31
  • The reason I answered the way I did is that the layer order determines the render order. If you want them to render in a specific order, the "right" way is to order them correctly in the array or in the DOM. Otherwise, you'll have to manually manipulate the z-index of each layer, which is prob not a very maintainable approach. – reblace Jul 15 '22 at 14:25