Masking features in MapTiler Cloud

Map design Highlighting features on maps

This set of articles represents a recommended selection of Highlighting features on maps examples.

  1. How to style individual buildings
  2. How to highlight specific national boundary on your map
  3. How to highlight specific country on your map
  4. 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.

countries_mask_1.png

Add the layers

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

countries_mask_3.png

countries_mask_4.png

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.

countries_mask_5.png

Style countries with an expression

In the countries layer, in the Data tab, set the filters iso_a2 != FR and level = 0

countries_mask_6.png

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.

countries_mask_7.png

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.

countries_mask_8.png

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

countries_mask_9.png

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

countries_mask_11.png

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": {}
        }
    ]
]

The more the GeoJSON describes a complex shape, the more the map performance decreases.

Next steps

Continue to Contours and mountain peaks in feet to learn how to switch contour lines and mountain peaks from meters to feet in your MapTiler Cloud map.

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