From 2de2b3dd922b1eaccee85cb59ff0656193fc6937 Mon Sep 17 00:00:00 2001
From: OziinG <145884442+OziinG@users.noreply.github.com>
Date: Wed, 22 Jul 2026 17:14:14 +0900
Subject: [PATCH] Make route pins easier to read at operational zoom levels

Increase the shared map pin scale and move completion indicators with the larger marker so planned and tracked stops stay legible without overlap.

Constraint: Keep the existing marker SVG and MapLibre layer architecture.
Rejected: Adding a second marker asset | the shared marker constants already cover this presentation change.
Confidence: high
Scope-risk: narrow
Directive: Keep completion badge and check translations aligned when changing pin scale.
Tested: 351 app tests; focused 93 tests; build; typecheck; public URL guard
Not-tested: browser pixel comparison.
---
 apps/shopify-app/app/features/delivery/route-detail-map.js | 4 ++--
 apps/shopify-app/app/features/maps/map-markers.js          | 2 +-
 apps/shopify-app/tests/orders-page.test.mjs                | 4 ++--
 apps/shopify-app/tests/route-tracking-live.test.mjs        | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/shopify-app/app/features/delivery/route-detail-map.js b/apps/shopify-app/app/features/delivery/route-detail-map.js
index 36a2de5..2cb7f63 100644
--- a/apps/shopify-app/app/features/delivery/route-detail-map.js
+++ b/apps/shopify-app/app/features/delivery/route-detail-map.js
@@ -993,7 +993,7 @@ function syncRouteDetailMapMarkerLayers(map, departureLocation, routeStops, rout
           "circle-radius": 7,
           "circle-stroke-color": "#ffffff",
           "circle-stroke-width": 2,
-          "circle-translate": [-8, -23],
+          "circle-translate": [-10, -28],
           "circle-translate-anchor": "viewport",
         },
       });
@@ -1013,7 +1013,7 @@ function syncRouteDetailMapMarkerLayers(map, departureLocation, routeStops, rout
         },
         paint: {
           "text-color": "#ffffff",
-          "text-translate": [-8, -23],
+          "text-translate": [-10, -28],
           "text-translate-anchor": "viewport",
         },
       });
diff --git a/apps/shopify-app/app/features/maps/map-markers.js b/apps/shopify-app/app/features/maps/map-markers.js
index 45e6867..6e2fe64 100644
--- a/apps/shopify-app/app/features/maps/map-markers.js
+++ b/apps/shopify-app/app/features/maps/map-markers.js
@@ -15,7 +15,7 @@ export const MAP_MARKER_PALETTE = {
 export const MAP_PIN_PATH =
   "M20 50C20 50 4 31.5 4 18C4 9.16 11.16 2 20 2s16 7.16 16 16c0 13.5-16 32-16 32Z";
 export const MAP_PIN_PIXEL_RATIO = 2;
-export const MAP_PIN_ICON_SIZE = 0.54;
+export const MAP_PIN_ICON_SIZE = 0.66;
 export const MAP_PIN_SYMBOL_LAYOUT = {
   "icon-allow-overlap": true,
   "icon-anchor": "bottom",
diff --git a/apps/shopify-app/tests/orders-page.test.mjs b/apps/shopify-app/tests/orders-page.test.mjs
index a796ddd..9248c29 100644
--- a/apps/shopify-app/tests/orders-page.test.mjs
+++ b/apps/shopify-app/tests/orders-page.test.mjs
@@ -1513,11 +1513,11 @@ test("Orders map renders planned markers above overlapping unplanned markers", (
   assert.doesNotMatch(ordersPageSource, /sortedLocatedOrders/);
 });
 
-test("Orders map keeps planned pins the same size and centers the planned number", () => {
+test("Orders map keeps planned pins two display steps larger and centers the planned number", () => {
   assert.match(mapMarkersSource, /export const MAP_PIN_PIXEL_RATIO = 2/);
   assert.match(mapMarkersSource, /const width = \(options\.width \?\? 40\) \* pixelRatio/);
   assert.match(mapMarkersSource, /const height = \(options\.height \?\? 52\) \* pixelRatio/);
-  assert.match(mapMarkersSource, /export const MAP_PIN_ICON_SIZE = 0\.54/);
+  assert.match(mapMarkersSource, /export const MAP_PIN_ICON_SIZE = 0\.66/);
   assert.match(mapMarkersSource, /"icon-size": MAP_PIN_ICON_SIZE/);
   assert.match(mapMarkersSource, /function createMapPinSymbolLayer\(\{ id, source, iconImage/);
   assert.match(ordersPageSource, /createMapPinSymbolLayer\(\{\s+id: ORDERS_MAP_ORDER_LAYER_ID,\s+source: ORDERS_MAP_SOURCE_ID,\s+\}\)/);
diff --git a/apps/shopify-app/tests/route-tracking-live.test.mjs b/apps/shopify-app/tests/route-tracking-live.test.mjs
index 82fb269..68850ef 100644
--- a/apps/shopify-app/tests/route-tracking-live.test.mjs
+++ b/apps/shopify-app/tests/route-tracking-live.test.mjs
@@ -133,7 +133,8 @@ test("live tracking updates MapLibre sources instead of rebuilding the child map
   assert.match(routeMapSource, /const ROUTE_DETAIL_STOP_COMPLETION_BADGE_LAYER_ID/);
   assert.match(routeMapSource, /const ROUTE_DETAIL_STOP_COMPLETION_CHECK_LAYER_ID/);
   assert.match(routeMapSource, /isCompleted: Boolean\(stop\.isTrackingCompleted \|\| isRouteStopCompleted\(stop\)\)/);
-  assert.match(routeMapSource, /"circle-translate": \[-8, -23\]/);
+  assert.match(routeMapSource, /"circle-translate": \[-10, -28\]/);
+  assert.match(routeMapSource, /"text-translate": \[-10, -28\]/);
   assert.match(routeMapSource, /"text-field": "✓"/);
   assert.doesNotMatch(routeMapSource, /const stopOpacity = isTrackingView \? 0\.42 : 1/);
   assert.match(routeDetailSource, /completedTrackingStopIds/);