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 the minScale 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 as maxScale:

    • 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 minScale and maxScale values when you are creating the layer. You can’t configure them afterward.

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.

Creating places layer with minScale
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";
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.