Zoom level styling examples

Select platform: Android iOS JavaScript Web Service

Here are some examples of complex element styling on different zoom levels. Some types of element styling might only be visible at certain zoom levels, like 3D buildings or points of interest (POIs).

Yellow roads with green outlines

Customize all roads to have a pale yellow fill and a dark green outline as the base style. A screenshot of a custom-styled map, showing several roads. The roads are pale yellow with a green outline.

  1. On the Features pane, select the feature Roads. This opens the Element Type pane.
  2. On the Element Type pane, under Geometry, select element type Fill. This opens the Stylers pane.
  3. On the Stylers pane, select a light yellow color (such as hex code #eeeec8.)
  4. On the Element Type pane, under Geometry, select element type Stroke.
  5. On the Stylers pane, select a dark green color (such as hex code #155304.)
  6. On the Stylers pane, set the Stroke Width to 3.

As you zoom in and out, different roads show this style as they appear and disappear. Once roads get too small to show the outline, they display only the lighter yellow color.

Building appearance

Show all buildings in medium-dark red.

Individual building outlines are visible starting at zoom level 17. Not all buildings have 3D display options.

  1. On the Features pane, select the feature Buildings. This opens the Element Type pane.
  2. On the Element Type pane, select building style Footprints.
    If you want to see 3D buildings on your map style, select 3D and stop here. Adding color to buildings overrides any 3D display.
  3. On the Element Type pane, select All. This opens the Stylers pane.
  4. On the Stylers pane, select a medium-dark red color (such as hex code #c23a00.) All buildings on the map display in red.
Two screenshots of a custom-styled map, zoomed in to level 19 magnification. On the left, buildings have a three dimensional appearance, with slight shadows on some sides. On the right, the buildings are colored dark red and have no dimensions or shading.

Different colors of water

Add a style such that the water appears dark blue zoomed out to maximum (z0), medium blue when zoomed in to the level of a state or province (zoom level 6 on a laptop), and pale blue with a dark blue border when zoomed in just above the tightest zoom level (z19). Two screenshots of a custom-styled map. The left side shows land surrounded by medium-dark blue water. The right side shows the same area on the map, zoomed in one level. The water is slightly lighter blue than the map on the left.

  1. On the Features pane, select the feature Water. This opens the Element Type pane.
  2. Set the darkest water color at maximum zoom.
    1. On the Element Type pane, select Geometry. This opens the Stylers pane.
    2. On the Stylers pane, select a dark blue color.
    3. Check Customize across zooms, and check the Add Stop: box for level z0.
  3. Change the water color to medium-blue starting at zoom level 6.
    1. On the Stylers pane, move the zoom level slider to the right, to level z6.
    2. Check the Add Stop: box for level z6.
    3. Select a medium blue color.
  4. Change the water to light blue fill with a dark blue 2-point wide outline at zoom level 19.
    1. On the Stylers pane, move the zoom level slider to the right, to level z19.
    2. On the Element Type pane, under Geometry, select Fill.
    3. On the Stylers pane, select Customize across zooms and check the Add Stop: box for level z19.
    4. Select a light blue color.
    5. On the Element Type pane, under Geometry, select Stroke.
    6. Select Customize across zooms, and check the Add Stop: box for level z19.
    7. Select a dark blue color.
    8. On the Stylers pane, move the slider to the right to set the Stroke Width to 2.

On creeks and streams and many smaller rivers, only the body color is visible even zoomed all the way in. The difference between stroke and fill is visible on large ponds, lakes, and larger bodies of water.