Atlaslog / Field Notes / Styling & rendering
Field note · Styling & rendering
Road width does not change with zoom
Quick answer
A `weight: 3` road looks like an arterial at zoom 12 and like a hairline at 17, because pixels are fixed while metres per pixel halve each level. Three pixels span 115 m at z12 but only 3.6 m at z17.
Symptom
- The same road measures 3 screen pixels at both zoom 12 and zoom 17
- `156543.03392 / 2**12` is 38.22 m per pixel versus `1.19` m per pixel at z17
- Raising `weight` to 12 makes roads a solid band at zoom 12 that covers whole blocks
Checklist
- Screenshot the same road at two zoom levels and measure its pixel width
- Check whether `weight` is hardcoded in the style function
- Check for a `zoomend` handler that resets weight and inspect its formula
- Compare against the basemap road width to set a target ratio
- Compute metres per pixel at each zoom level
Fix
Interpolate width in Mapbox GL (`'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 8, 0.8, 12, 1.6, 16, 4, 18, 7]`), or recompute `weight` on `zoomend` in Leaflet with a stepped function returning 1 below z10 up to 5 above z16.
Code
17 级:156543.03 / 2^17 ≈ 1.19 米/像素
12 级:156543.03 / 2^12 ≈ 38.22 米/像素console.log(156543.03392 / Math.pow(2, 12)); // 38.22
console.log(156543.03392 / Math.pow(2, 17)); // 1.19
Watch out
- Setting one large `weight` so high zooms look right, which turns roads into solid bands at low zoom
- Calling `setStyle` on `zoomend` without a style function, which resets every other style property
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Road width does not change with zoom. https://www.jingweizhi.com/en/cookbook/line-width-zoom-interpolate.html (accessed 2026-11-03).