This article is part of a series of tutorials that show you how to develop your first application:
Goal
In this tutorial, we use layer scale levels to make layers visible or invisible when users zoom in or out on the map. You can make the data of a layer visible starting from a certain zoom level.
Controlling the visibility of layers has benefits for the performance and usability of your application. For instance, if your vector data set consists of detailed point-of-interest information, it makes sense to show this layer only when the user has zoomed in enough. If you show it any earlier, you visualize all layer objects at once, and the objects just clutter up the map. Because your application needs to visualize so many objects, its performance may also degrade.
Similarly, for a layer showing borders of countries, it may not make sense to keep showing the data when the user zooms in.
Using map scale to show or hide layers
As users zoom in or out on the map, they move from one map scale to another. LuciadRIA layers have scale properties. You can use them to make a layer visible when users zoom into one map scale range, and invisible when they enter another map scale range.
You can configure visibility in other ways, such as layer filtering, using intelligent painters, and clustering. Using those methods, you can display the data in the layer from a certain scale onward. They’re more suitable for hiding only specific objects in a layer, though, and less suited for hiding an entire layer.
Besides, those filtering options only work on layers with vector data. Using the scale properties of the layer, you can set up scale ranges for every layer, no matter the kind of the data in the layer.
Working with the layer scale properties
You can change the visibility of the data on a layer with the scale range you define on the layer. You use the minScale
and maxScale
properties for that:
-
minScale
is the minimum scale at which you want to render the layer. If the map users zooms to a lower scale, LuciadRIA doesn’t show the layer. For example, if you specify 1/1000000 as theminScale
value:-
At scale 1 / 900000, LuciadRIA shows the layer.
-
At scale 1 / 1100000, LuciadRIA doesn’t show the layer at all.
-
-
maxScale
is the maximum scale at which you want to render the layer. LuciadRIA doesn’t show the layer if the scale of the map is higher than this value. For example, if you specify 1/10000 asmaxScale
:-
At scale 1 / 11000, LuciadRIA doesn’t show the layer.
-
At scale 1 / 9000, LuciadRIA shows the layer.
minScale maxScale 1 / 1000000 1 / 10000 ↑ ↑ Zoomed out ←|───────────────────|───────────────────|───────────────────|→ Zoomed in └─────────┬─────────┴─────────┬─────────┴─────────┬─────────┘ ↓ ↓ ↓ invisible visible invisible
-
If you set minimum and maximum scale levels for your layer as shown, LuciadRIA shows your layer only within those two scale level ranges.
You can only configure |
Adding minimum scale to a layer
In this example, we define a minScale
for a layer showing places so that the layer is visible only when you zoom in enough. The place icons disappear again when
you zoom out.
Note that we set minScale
when we create the layer. As mentioned earlier, you can only configure minScale
and maxScale
while you are creating the layer.
import {FeatureModel} from "@luciad/ria/model/feature/FeatureModel.js"; import {WFSFeatureStore} from "@luciad/ria/model/store/WFSFeatureStore.js"; import {FeatureLayer} from "@luciad/ria/view/feature/FeatureLayer.js"; import {LayerType} from "@luciad/ria/view/LayerType.js"; import {WebGLMap} from "@luciad/ria/view/WebGLMap.js"; const url = "https://sampleservices.luciad.com/wfs"; const featureTypeName = "osm_places"; WFSFeatureStore.createFromURL(url, featureTypeName).then((wfsSore) => { const featureModel = new FeatureModel(wfsSore); const featureLayer = new FeatureLayer(featureModel, { label: "OSM Places", layerType: LayerType.STATIC, selectable: true, // Here we set the minScale so that the layer will only be rendered when the map scale is less than 1/350000 minScale: 1 / 350000 }); map.layerTree.addChild(featureLayer); return featureLayer; });
Without the minScale
, the application would load the places layer as soon as it gets added to the map, and show all the data.
The performance of the application would degrade because the application must visualize too many objects.
Instead of showing the layer at each zoom level, we only show the data when the user zooms in enough.
This improves the performance as the total number of visualized objects is a lot smaller.