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 the 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. 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.

Useful links

MapTiler Land schema