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 Customize and the Countries tileset.

Step-by-step process in the Customize tool

Add the Satellite and Countries data sources

Create a new empty map from your MapTiler Cloud account, and select the Satellite tileset in the data sources window. Add the Countries tileset data source the same way as Satellite.

Add the layers

Add the satellite (Satellite data source with layer Satellite) and countries (Countries data source with layer administrative) layers.

In the Style tab, 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, in the Data tab, set the filters iso_a2 != FR and level = 0

Set the color of the countries layer (in the Style tab) to white (#FFFFFF) and opacity to 65%. All countries except France will appear as semi-transparent white. You can, of course, select another country of interest using a different country code (use the Data tab 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. Right-click on the countries layer and select Duplicate. Rename (right-click on, for now, countries copy) the new layer to the France border. Adjust filter to iso_a2 = FR.

In the Style tab, switch the Visualization value to Line. Set the Width to 2px and Blur to 3px.

The country name label may also be overlayed using MapTiler Planet data source and place layer with filter iso_a2 = FR.

Set up Visualization on Symbol, Fill Color on #FFFFFF and Outline Color on #000000.

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 an 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
MapTiler Countries dataset
MapTiler Countries
MapTiler Countries schema
Join MapTiler Countries with your own custom data and make a choropleth map
How to highlight specific countries on your map
How to style a choropleth map in the Customize