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

How to vary marker size by zoom level

Make circle markers grow or shrink as viewers zoom the map, using up to six zoom stops. This is scale-dependent sizing for point layers.

Turn on Vary size by zoom level, and circle markers change size as viewers zoom: small at country level, larger at street level. It works only on Circle markers, and switching the layer to another marker type deletes your zoom stops.

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 grow. In the Two Fields folder, Major Cities — Population, Zoom Scaled is the saved version of the scale stops on a sized layer.

Before you start

  • The layer must be a point layer with Marker type set to Circle. Icon, Custom Icon, and Heatmap markers can’t vary their size by zoom.
  • You need edit access to the map.
  • Decide roughly how big markers should be when the map is zoomed out and when it’s zoomed in. For typical zoom levels, see How to set the zoom range a layer is visible at.

Open the Style tab

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

Turn on zoom sizing

  1. Check that Size markers by is set to Uniform size.
  2. At the end of the marker size row, click the Vary size by zoom level button.

If Size markers by is set to a field, see “If you also size markers by a field” below.

The size slider is replaced by a list of zoom stops. A zoom stop is a zoom level and the marker size at that zoom. You start with two stops. With the default 8 px marker, that is 4 px at zoom 1 and 8 px at zoom 12.

Style section of the Major Cities — Zoom Styling layer with Size markers by set to Uniform size and the note Size varies by zoom level, the Curve slider at 1.0, a curve chart rising from 4px at z1 to 8px at z12, two zoom stops (zoom 1 at 4 px, zoom 12 at 8 px), Add stop, and Save

Set the size at 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. Drag the slider to set the marker size, from 3 to 40 px.

To add a stop, click Add stop, then set its zoom and size. 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 zoom that is too close to a neighbouring stop moves to the nearest allowed value when you leave the box.

Between two stops, the marker size changes gradually. Zoomed out past the first stop, markers keep the first stop’s size. Zoomed in past the last stop, markers keep the last stop’s size.

(Optional) Shape the curve

The Curve slider sets how quickly the size changes between each pair of stops. The chart shows the result, with a dashed line for a steady change.

  • 1 (the default) — the size changes at a steady rate.
  • Above 1, up to 4 — the size changes slowly at first, then quickly near the higher zoom.
  • Below 1, down to −3 — the size changes quickly near the lower zoom, then levels off.

The chart below shows three stops: 4 px at zoom 6, 20 px at zoom 12, and 40 px at zoom 14. It compares a Curve of 1 with a Curve of 2, and shows the size staying fixed before the first stop and after the last.

Marker size at each zoomLine chart of marker size against map zoom for three stops, 4 px at zoom 6, 20 px at zoom 12 and 40 px at zoom 14: markers stay 4 px below zoom 6 and 40 px above zoom 14, and between stops the size changes steadily at Curve 1.0, or slowly at first and then quickly at Curve 2.0.010203040MARKER SIZE (PX)146810121416182022MAP ZOOMBEFORE THEFIRST STOPPAST THE LAST STOPBETWEEN STOPSstays 4 pxstays 40 px20 px at zoom 124 px at zoom 640 px at zoom 14Curve 2.0: slowly at first, then quicklyCurve 1.0: a steady change

Save

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

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

If you also size markers by a field

When Size markers by is set to a numeric field, the same button scales the whole size range with zoom. Each stop holds a Scale value instead of a size in pixels:

  • At ×1.0, markers use the Minimum size and Maximum size you set.
  • At ×0.5, both sizes are halved at that zoom. At ×2.0, both are doubled.
  • The range is ×0.2 to ×3.0. The default stops are ×0.5 at zoom 1 and ×1.5 at zoom 18.
Style section of the Centroids — Bubble layer with Size markers by set to pop_est, sizes 4 px to 20 px, the Curve slider at 1.0, a curve chart rising from ×0.5 at z1 to ×1.5 at z18, two stops under Zoom and Scale (zoom 1 at 0.5, zoom 18 at 1.5), Add stop, and Save

A saved layer with three scale stops, so markers draw at less than half size at world scale and twice their size by zoom 9:

Style section of the Major Cities — Population, Zoom Scaled layer with Size markers by set to population, sizes 3 px to 18 px, the note Size varies by zoom level, and three Scale stops: zoom 2 at ×0.4, zoom 5 at ×1.0, and zoom 9 at ×2.0

Small values still draw smaller than large values at every zoom. The size key in the legend doesn’t change with zoom. See How to size points by a number for the size range itself.

If the layer uses categories or class breaks

Zoom sizing replaces the marker size you set for each category or class. While zoom sizing is on, the per-row size controls in Customise categories and Customise Class Breaks are greyed out. MangoMap keeps your per-row sizes and uses them again when you turn zoom sizing off.

Rows that use an Icon or Custom Icon marker keep their fixed size. Only circle markers change size with zoom.

Turn zoom sizing off

  1. Click the Reset to fixed size button at the end of the marker size row.
  2. Click Save.

Markers go back to the fixed size they had before, and the zoom stops are deleted.

What viewers see in the legend

The legend doesn’t show the size change. A layer with one marker size keeps a fixed-size swatch in the legend at every zoom.

Troubleshooting

The Vary size by zoom level button is missing. Set Marker type to Circle.

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

Add stop is greyed out. The layer already has 6 stops. Remove a stop first.

Markers are the same size at every zoom. Check that you clicked Save, and that your stops have different sizes. Outside the first and last stop, the size stays fixed.