Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: Leaflet 1.9.x / Mapbox GL JS 2.15 / OpenLayers 9.x
Symptom
Checklist
  1. Screenshot the same road at two zoom levels and measure its pixel width
  2. Check whether `weight` is hardcoded in the style function
  3. Check for a `zoomend` handler that resets weight and inspect its formula
  4. Compare against the basemap road width to set a target ratio
  5. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

Atlaslog (2026). Road width does not change with zoom. https://www.jingweizhi.com/en/cookbook/line-width-zoom-interpolate.html (accessed 2026-11-03).