How to create a land polygon with a drop shadow effect

A land polygon tileset is available in the Standard Tiles section of your MapTiler Cloud account. This article shows how to style land features with a drop-shadow effect. The land polygon tileset can be accessed from MapTiler Cloud Tiles.

1. Open any map style in the MapTiler Cloud maps section.
2. Hide all blocks except “Water” and “Background” (click the little eye icon).
3. Add a new layer (“Plus” sign top-left).

4. Add the data source called “Land” (geometry “polygon,” layer name “Land”).

5. Change the color of the “Land” layer to HSL (49, 47, 91).

6. Open the “Water” block and the “Water” layer.
7. Change the color of the “Water” layer to HSL (49, 47, 91).

8. Duplicate the layer “Land.”

9. Rename the new layer to “Land_polygon_shadow”.
10. Change the color of the “Land_polygon_shadow” layer to HSL (203, 65, 40).

11. For “Land_polygon_shadow” adjust layer opacity to 50% at ZL14.

12. For “Land_polygon_shadow” adjust the "Fill" settings.
Open “Advanced fill properties”, click “Layout”, click “Translate” and enable “Zoom range styling” (see picture). Use the following values:
ZL2 (1px, 1px)
ZL6 (1.5px, 1.5px)
ZL11 (2px, 2px)
ZL14 (2.2px, 2.2px)
ZL17 (1.6px, 1.6px)
ZL18 (1px, 1px)

13. To achieve the final result, you have to re-arrange the order of layers.
14. Click “Verticality” (Bottom-left)
15. Move the layer “Land_polygon_shadow” under the layer “Land.”

Congratulations, you have successfully created the drop shadow effect!
Bonus tip: You can view the JSON code by clicking the “{}” icon at the bottom left.

16. Save and publish your new map by clicking the top-right “Save” and “Publish” buttons.
The final result will look like this (see above) in the detail of your map styles library preview.

Hit the Create Style button to start using it. Give it a specific style name, for example, ‘Land’, and click the Save button. This will save the style under the My Maps section and open it in the MapTiler Cloud advanced editor. Four layers are already created by default (see the schema page): background, land_line, land_point, and land_polygon as shown below:

We are not going to use the land-point layer in this example, we can thus delete it permanently from the style by clicking on the trash icon. We can also hide the land_line layer for now.

Next, we set the background layer color to rgba(194, 218, 226, 1) in order to fill the oceans with light blue. Next, we click on the land_polygon layer and use rgba(243, 239, 222, 1) as the color parameter. This will fill the land polygon in light beige color and the map should now look like this:

Now duplicate the land_polygon layer and rename it as land_polygon_shadow. Select a darker blue for color like rgba(36, 119, 170, 1) and lower the layer opacity with a zoom function down to 0.5 at zoom 14. 

In order to actually create the drop-shadow effect, you need to create another zoom function for the fill-translate parameter, increasing translate up to 2.2 at zoom 14 and then decreasing it down to 1 again at zoom 18. Example code is shown below:

{
  "id": "land_polygon_shadow",
  "type": "fill",
  "paint": {
    "fill-color": "rgba(36, 119, 170, 1)",
    "fill-opacity": {
      "stops": [[6, 1], [14, 0.5]]
    },
    "fill-antialias": true,
    "fill-translate": {
      "stops": [
        [2, [1, 1]],
        [6, [1.5, 1.5]],
        [11, [2, 2]],
        [14, [2.2, 2.2]],
        [17, [1.6, 1.6]],
        [18, [1, 1]]
      ]
    }
  },
  "layout": {"visibility": "visible"},
  "source": "land",
  "source-layer": "land"
}

The map should now look like this:

The drop-shadow finally needs to be consistent across all zoom levels, and it can be further improved using the land_line layer, especially for large-scale rendering. Show the layer again and fill it with rgba(36, 119, 170, 1) as well. Set the zoom functions for the fill-opacity, line-width, and line-blur parameters, for example as follows:

View a live example.

Useful links

MapTiler Land schema