From 26ce35e8eb6e46f5346c3f32ec79f6831322c0f6 Mon Sep 17 00:00:00 2001
From: kianiadee <kianiadee@gmail.com>
Date: Wed, 27 May 2026 12:07:50 +0300
Subject: [PATCH] UX: zoom-scaled vehicle markers + hide labels at city
 overview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/fleet-core.js | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

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,