UX: zoom-scaled vehicle markers + hide labels at city overview
Some checks are pending
build / lint-test (push) Waiting to run
build / build-push (push) Blocked by required conditions

At z=10 (Nairobi overview) the constant 13px circles + always-on plate
labels overlapped into an unreadable blob. Markers now interpolate
across zoom:

  circle:  2px @ z5 → 7px @ z12 → 13px @ z15 → 20px @ z18
  arrow:   0.2 @ z5 → 0.45 @ z12 → 0.7 @ z15 → 1.0 @ z18
  label:   minzoom 11; text 8px @ z11 → 14px @ z17

text-offset is in ems so it scales with text-size automatically.
This commit is contained in:
kianiadee 2026-05-27 12:07:50 +03:00
parent 0f91668256
commit 26ce35e8eb

View file

@ -125,10 +125,26 @@ export function initMap(elementId, opts = {}) {
type: 'circle',
source: VEHICLE_SOURCE,
paint: {
'circle-radius': 13,
// Scale dot size with zoom — small at country/city overview to keep
// the Nairobi cluster legible, full size once you're zoomed into a
// neighbourhood. text-offset on the label layer is in ems so it
// scales naturally with text-size; no extra interpolation needed.
'circle-radius': [
'interpolate', ['linear'], ['zoom'],
5, 2,
9, 4,
12, 7,
15, 13,
18, 20,
],
'circle-color': ['get', 'marker_color'],
'circle-stroke-color': '#0b1220',
'circle-stroke-width': 2,
'circle-stroke-width': [
'interpolate', ['linear'], ['zoom'],
5, 0.5,
12, 1.5,
16, 2,
],
},
});
@ -143,7 +159,13 @@ export function initMap(elementId, opts = {}) {
'icon-rotation-alignment': 'map',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-size': 0.7,
'icon-size': [
'interpolate', ['linear'], ['zoom'],
5, 0.2,
12, 0.45,
15, 0.7,
18, 1.0,
],
},
});
@ -151,10 +173,18 @@ export function initMap(elementId, opts = {}) {
id: 'vehicles-label',
type: 'symbol',
source: VEHICLE_SOURCE,
// Plate-tail labels add nothing but clutter at city-overview zoom —
// skip them until you're zoomed in enough that they don't overlap.
minzoom: 11,
layout: {
'text-field': ['get', 'plate_short'],
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
'text-size': 11,
'text-size': [
'interpolate', ['linear'], ['zoom'],
11, 8,
14, 11,
17, 14,
],
'text-offset': [0, 1.7],
'text-anchor': 'top',
'text-allow-overlap': true,