diff --git a/web/fleet-core.js b/web/fleet-core.js index ccfde40..50178e7 100644 --- a/web/fleet-core.js +++ b/web/fleet-core.js @@ -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,