Skip to content
MangoMap Help Centre
Esc
↑↓navigate↵open⌘Jpreview
On this page

How to change marker colour by zoom level

Blend circle markers from one colour to another as viewers zoom the map, using up to six zoom stops. This is scale-dependent colour for point layers.

Set Colour markers by to Colour by zoom, and circle markers blend between your chosen colours as viewers zoom in. Only Circle markers have the option, and a layer can colour by zoom or by a field, not both.

See it on an example map

Open the World Point Styling Lab. In the legend, turn on the Zoom Styling folder. This also turns on Major Cities — Zoom Styling. Turn off the Size and Colour folder, then zoom in. The markers change from pale to dark purple. In the Two Fields folder, Major Cities — Colour by Zoom and Size adds an outline per stop and a size from a field.

Before you start

  • The layer must be a point layer with Marker type set to Circle. Colour by zoom isn’t offered for Icon, Custom Icon, or Heatmap markers.
  • You need edit access to the map.
  • Colour by zoom replaces any field-based colour on the layer. To colour by category or quantity, see How to style features by category or How to style features by quantity.

Open the Style tab

In the layer panel, select your point layer. Click the Style tab.

Choose Colour by zoom

In Colour markers by, pick Colour by zoom.

A list of zoom stops appears. A zoom stop is a zoom level and the marker colour at that zoom. You start with three stops, at zoom 1, 12, and 22. Their colours come from the Teal gradient, so markers get darker as viewers zoom in.

Style section of the Major Cities — Zoom Styling layer with Colour markers by set to Colour by zoom, the Colour gradient dropdown showing a light-to-dark teal ramp and the Reverse colour ramp button, and three zoom stops at zoom 1, 12, and 22 with Fill, Outline, and Width controls, followed by Add stop

Pick a gradient

  1. Open Colour gradient and pick a gradient.
  2. To run the colours the other way, click Reverse colour ramp.

Picking a gradient recolours the stops and spreads them evenly between the first and last stop’s zoom. Pick the gradient first, then adjust each stop.

Set each stop

For each stop:

  1. Type the zoom level in the Zoom box. Use a value from 1 to 22, in steps of 0.5.
  2. Click the Fill swatch and pick the marker colour for that zoom.

The transparency you set in the Fill colour picker sets the marker opacity at that zoom. Use it to fade markers in or out.

To add a stop, click Add stop. To remove a stop, click its Remove stop button. A layer needs at least 2 stops and can have up to 6. Stops stay in zoom order, at least 0.5 zoom levels apart.

A new stop takes the colour already shown at its zoom.

Between two stops, the colour blends smoothly. Zoomed out past the first stop, markers keep the first stop’s colour. Zoomed in past the last stop, markers keep the last stop’s colour.

(Optional) Set an outline for each stop

Each stop has its own Outline colour and outline Width, from 0 to 8 px. While Colour by zoom is on, the stops are the only outline control. The layer’s own fill and outline controls are hidden.

A stop shows 0px until you give it an outline, and markers have no outline at that zoom. To outline markers at every zoom, set a Width above 0 on every stop.

Between two stops, the outline colour and width blend in the same way as the fill.

Save

Click Save at the bottom of the panel. Zoom the map in and out between your first and last stop to check the colours.

If the map doesn’t update, you probably didn’t click Save. See Troubleshooting: my style change isn’t appearing on the map.

What viewers see in the legend

The legend shows one circle for each stop, in zoom order, with a tooltip for viewers who point to it. A circle has an outline only when its stop has one. The same symbol appears in the legend of a printed map.

Legend of World Point Styling Lab as a viewer sees it: the Major Cities — Zoom Styling entry shows three overlapping circles from light to dark purple, with the tooltip Colour changes as you zoom in., beside a world map of small light purple city markers

Combine colour by zoom with size

Colour by zoom works with every size setting on a circle layer:

A layer with both: three colour stops, an outline that grows from 0 to 1.5 px, and markers sized by population.

Style section of the Major Cities — Colour by Zoom and Size layer with Colour markers by set to Colour by zoom, three stops at zoom 2, 6, and 10 from light to dark teal with Width 0, 1, and 1.5 px, and Size markers by set to population with sizes 3 px to 16 px

If you switch to a single colour or a field

Picking Single colour or a field in Colour markers by deletes the zoom stops and their outlines. If you pick Colour by zoom again, you start from the three default stops.

With Single colour, the layer’s Fill colour, Outline colour, and Outline width come back. They keep the values you set before you chose Colour by zoom.

Troubleshooting

Colour by zoom isn’t in the list. Set Marker type to Circle.

Markers have no outline at some zoom levels. Those stops have a Width of 0px. The layer’s own outline isn’t used with Colour by zoom. Set an Outline colour and a Width above 0 on every stop.

I changed the marker type and my colours are gone. Switching away from Circle deletes every zoom stop on the layer. It also sets Colour markers by back to Single colour. If you haven’t clicked Save, close the layer settings to discard the change.