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',
|
||||
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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue