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.

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:

{
  "id": "land-shadow-line",
  "type": "line",
  "paint": {
    "line-blur": {
      "stops": [
        [1, 32],
        [16, 15],
        [17, 16]
      ]
    },
    "line-color": "rgba(36, 119, 170, 1)",
    "line-width": {
      "stops": [
        [1, 3],
        [6, 4],
        [9, 5],
        [12, 8],
        [16, 10],
        [17, 12]
      ]
    },
    "line-opacity": {
      "stops": [
        [1, 1],
        [6, 1],
        [9, 0.6],
        [12, 0.75],
        [16, 0.85],
        [17, 0.45],
        [22, 0.25]
      ]
    },
    "line-translate": [0, 1.5]
  },
  "layout": {
    "line-cap": "round",
    "line-join": "round",
    "visibility": "none",
    "line-miter-limit": 0,
    "line-round-limit": 0
  },
  "maxzoom": 24,
  "source": "land",
  "source-layer": "land"
}

Save the style and view the result once published. Further, customize and use it as a base for your next map! View a live example.

MapTiler Land schema