---
title: "How to vary marker size by zoom level"
description: "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."
sidebar:
label: "Vary marker size by zoom"
---
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](https://mangomap-staging.com/examples-staging/maps/042tb3tl/world-point-styling-lab)**
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.
{/* video-content: id=vary-marker-size-by-zoom
Start: A fully loaded map with the Style tab open for a point layer. Marker type
is Circle, Size markers by is Uniform size, and the marker size is 8 px. The map
shows the layer at about zoom 3, with many small markers.
Show:
1. Click the Vary size by zoom level button at the end of the marker size row.
Two zoom stops appear: zoom 1 at 4 px and zoom 12 at 8 px.
2. Drag the size slider on the zoom 12 stop to 20 px. The curve chart rises.
3. Click Add stop. Type 14 in the new stop's Zoom box, and drag its size slider
to 40 px, the largest size.
4. Click Save.
5. Zoom the map in with the map's zoom-in control from zoom 3 to zoom 14. The
markers grow from about 7 px to 40 px.
End: The map at zoom 14, with two very large markers (Rome and Vatican City).
Exclude: Authentication, loading screens, fixture setup, the Curve slider,
Remove stop, other marker types, and size by a field. The spec must
restore the layer's original style after capture, outside the recording.
*/}
{/* walkthrough: id=vary-marker-size-by-zoom */}
{/* /walkthrough */}
## 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](/docs/styling-layers/set-layer-zoom-visibility).
## 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.
## 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.
{/* diagram:marker-size-zoom-curve */}
{/* /diagram:marker-size-zoom-curve */}
## 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](/docs/styling-layers/troubleshoot-style-not-applying).
## 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.
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:
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](/docs/styling-layers/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.
## Related
- [How to change marker colour by zoom level](/docs/styling-layers/colour-markers-by-zoom) — use it with zoom sizing on the same layer.
- [How to size points by a number](/docs/styling-layers/size-points-by-a-number)
- [How to set the zoom range a layer is visible at](/docs/styling-layers/set-layer-zoom-visibility) — hide a layer outside a zoom range instead of resizing it.
- [How to set a uniform style on a point layer](/docs/styling-layers/set-a-uniform-point-style)
- [Point layer style controls](/docs/styling-layers/point-style-reference)
- [How layer styling works in MangoMap](/docs/styling-layers/concepts-layer-styling)
## 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.
{/* diagram:marker-size-zoom-curve */}
{/* /diagram:marker-size-zoom-curve */}
## 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](/docs/styling-layers/troubleshoot-style-not-applying).
## 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.
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:
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](/docs/styling-layers/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.
## Related
- [How to change marker colour by zoom level](/docs/styling-layers/colour-markers-by-zoom) — use it with zoom sizing on the same layer.
- [How to size points by a number](/docs/styling-layers/size-points-by-a-number)
- [How to set the zoom range a layer is visible at](/docs/styling-layers/set-layer-zoom-visibility) — hide a layer outside a zoom range instead of resizing it.
- [How to set a uniform style on a point layer](/docs/styling-layers/set-a-uniform-point-style)
- [Point layer style controls](/docs/styling-layers/point-style-reference)
- [How layer styling works in MangoMap](/docs/styling-layers/concepts-layer-styling)