UX: zoom-scaled vehicle markers + hide labels at city overview
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:
parent
0f91668256
commit
26ce35e8eb
1 changed files with 34 additions and 4 deletions
|
|
@ -125,10 +125,26 @@ export function initMap(elementId, opts = {}) {
|
||||||
type: 'circle',
|
type: 'circle',
|
||||||
source: VEHICLE_SOURCE,
|
source: VEHICLE_SOURCE,
|
||||||
paint: {
|
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-color': ['get', 'marker_color'],
|
||||||
'circle-stroke-color': '#0b1220',
|
'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-rotation-alignment': 'map',
|
||||||
'icon-allow-overlap': true,
|
'icon-allow-overlap': true,
|
||||||
'icon-ignore-placement': 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',
|
id: 'vehicles-label',
|
||||||
type: 'symbol',
|
type: 'symbol',
|
||||||
source: VEHICLE_SOURCE,
|
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: {
|
layout: {
|
||||||
'text-field': ['get', 'plate_short'],
|
'text-field': ['get', 'plate_short'],
|
||||||
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
|
'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-offset': [0, 1.7],
|
||||||
'text-anchor': 'top',
|
'text-anchor': 'top',
|
||||||
'text-allow-overlap': true,
|
'text-allow-overlap': true,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue