Question :
How can I rearrage the order of layers in the layer tree of my Web App without it affecting the superposition managed by said order ?
Answer :
As mentioned in the question, the ordering of the layers in the layer tree is what manages the superposition of the data sources in the map. For example, if you have a layer with Points data and another layer with Polygon data, you would, in most cases, place the Points layers on top to avoid hiding them under a polygon.
Since the platform uses this order as its default way to manage superposition, we will have to create a "workaround" through Javascript.
For illustration purposes, let's use the map of the city of Guelph with two different layers : Streets (lines) and Wards (polygons).
In this example, the reason why we would want the Streets layer appearing on top of the Wards layer is pretty obvious, since it would be hidden were it not the case. But let's pretend that it is very important for our client that the Wards layer would appear first in the Layer Tree without changing the superposition order.
Now, it will get a bit technical since we will have to manually change the order of our layers through some coding. To achieve this, we will have to identify the ID of both our layers to be able to manipulate them.
Inside you Web App, right click the layer of your choice, then click the "Inspect" button, which will pop up the code editor. Find the ID of your layer, which typically follows the following syntax :
- mg-lyr-LayerName
Repeat the step for the layer you wish to move (Wards), as well as the layer you wish to put under it (Streets). In my case, their name is:
- mg-lyr-streets
- mg-lyr-wards
With those IDs in hand, we will now have to manipulate the code to achieve the desired effect. We will return to the Web Apps catalog, then edit our app by selecting it and clicking on the "Edit" button.
Then, we will scroll down to the "Advanced..." button and go into the "Script" control. This is where we will type our Javascript.
As far as the code goes, we will insert our desired layer (Wards) on top of our less important layer (Streets), which will look like this:
$(document).ready(function(){
$('.mg-lyr-wards').insertBefore($('.mg-lyr-streets'));
});
We will save this, then go back to "Play" our application through the catalog. And there we have it! Our Wards layer is now on top of the Streets layer, without modifying the superposition!
0 Comments