Masking features in MapTiler Cloud

Masking vector features on the map is a common cartography task. This article explains how to highlight a particular country by masking others using the MapTiler Cloud advanced editor and the Countries tileset.

Step-by-step in the advanced editor

Add the Satellite layer

Create a new empty map from your MapTiler Cloud account, select the Satellite tileset in the data sources window and create a new raster layer using it. Let’s call it Satellite as shown below.

Add the country layer

Add the Countries tileset from the Data Sources pane again, create a new Fill layer using the administrative layer and name it Countries. It will appear as black by default as shown below, and we are going to style it better in the next step.

Style countries with an expression

In the Countries layer panel, scroll down to the color section and write the following match expression to select a particular country. The country code (iso_a2) is used here to select France (FR) and make it transparent using rgba(0,0,0,0). All other countries will appear as semi-transparent white thanks to the rgba(255,255,255,0.65) color used as fallback.

[
  "match",
  ["get", "iso_a2"],
  ["FR"],
  "rgba(0,0,0,0)",
  "rgba(255,255,255,0.65)"
]

You can of course select another country of interest using a different country code (use the inspect mode to find out) and adjust colors as desired.

Highlight the selected country

It is possible to highlight France a bit further using the Countries tileset again but through a new Line layer. You may set a filter using the iso_a2 attribute and the FR code again to visualize the country border and make it stand out in white color with width set to 2 and a blur of 3. The country name label may also be overlayed using the same filter but applied to a symbol layer.

Text label masking (experimental)

It is possible to add more labels to the map, let’s say for every French city, and to mask them according to the shape of the country. From a new symbol layer, use a filter with a within expression including the GeoJSON description of the country polygon. The latter will render labels only for points being inside that polygon, so that would mask all labels outside France in our example.

"filter": [
      "all",
      ["==", ["geometry-type"], "Point"],
      ["==", ["get", "class"], "city"],
      [
        "within",
        {
          "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [[
            [x,y],
            [x,y],
            [x,y],
            .....
            ]]
          },
          "properties": {}
        }
    ]
]

Useful links

MapTiler Cloud Tiles - Satellite
MapTiler Cloud Tiles - Countries
MapTiler Cloud Tiles - Planet