From 337df6b52715d4b3c95541ac5c250e0df8f818ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sat, 11 Apr 2026 01:46:55 +0200
Subject: [PATCH] Fix marker z-ordering: waypoints and highlight above POIs and
 route

Extract all Leaflet zIndexOffset values into z-index.ts constants:
  POI markers (-1000) < cursors (-1000) < ghost waypoint (-100)
  < waypoint markers (1000) < highlight dot (2000)

Replaced CircleMarker highlight with a Marker+DivIcon so it
participates in z-index ordering above waypoint markers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/PlannerMap.tsx    | 19 +++++++++++++------
 apps/planner/app/components/PoiPanel.tsx      |  3 ++-
 .../app/components/RouteInteraction.tsx       |  3 ++-
 apps/planner/app/lib/z-index.ts               | 12 ++++++++++++
 4 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 apps/planner/app/lib/z-index.ts

diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx
index c04cc39..392f16d 100644
--- a/apps/planner/app/components/PlannerMap.tsx
+++ b/apps/planner/app/components/PlannerMap.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from "react";
-import { MapContainer, TileLayer, LayersControl, Marker, CircleMarker, useMapEvents, useMap } from "react-leaflet";
+import { MapContainer, TileLayer, LayersControl, Marker, useMapEvents, useMap } from "react-leaflet";
 import L from "leaflet";
 import * as Y from "yjs";
 import { useTranslation } from "react-i18next";
@@ -10,6 +10,7 @@ import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
 import { isOvernight } from "~/lib/overnight";
 import { setOvernight } from "~/lib/overnight";
 import { usePois } from "~/lib/use-pois";
+import { Z_CURSOR, Z_WAYPOINT, Z_HIGHLIGHT } from "~/lib/z-index";
 import { NoGoAreaLayer } from "./NoGoAreaLayer";
 import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute";
 import { RouteInteraction } from "./RouteInteraction";
@@ -175,7 +176,7 @@ function CursorTracker({ awareness }: { awareness: YjsState["awareness"] }) {
         <Marker
           key={clientId}
           position={[cursor.lat, cursor.lng]}
-          zIndexOffset={-1000}
+          zIndexOffset={Z_CURSOR}
           icon={L.divIcon({
             className: "",
             html: `<div style="position:relative;z-index:400;pointer-events:none">
@@ -519,6 +520,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
           key={i}
           position={[wp.lat, wp.lon]}
           draggable
+          zIndexOffset={Z_WAYPOINT}
           icon={waypointIcon(i, wp.overnight, highlightedWaypoint === i)}
           eventHandlers={{
             mouseover: () => {
@@ -585,10 +587,15 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
       )}
 
       {highlightPosition && (
-        <CircleMarker
-          center={highlightPosition}
-          radius={6}
-          pathOptions={{ color: "#ef4444", fillColor: "#ef4444", fillOpacity: 1, weight: 2 }}
+        <Marker
+          position={highlightPosition}
+          zIndexOffset={Z_HIGHLIGHT}
+          interactive={false}
+          icon={L.divIcon({
+            className: "",
+            html: '<div style="width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>',
+            iconSize: [0, 0],
+          })}
         />
       )}
     </MapContainer>
diff --git a/apps/planner/app/components/PoiPanel.tsx b/apps/planner/app/components/PoiPanel.tsx
index 4650ed5..ca3eb64 100644
--- a/apps/planner/app/components/PoiPanel.tsx
+++ b/apps/planner/app/components/PoiPanel.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useMap } from "react-leaflet";
 import { poiCategories } from "~/lib/poi-categories";
 import type { PoiState } from "~/lib/use-pois";
+import { Z_POI_MARKER } from "~/lib/z-index";
 
 interface PoiPanelProps {
   poiState: PoiState;
@@ -111,7 +112,7 @@ export function PoiMarkers({ poiState }: PoiPanelProps) {
           ">${cat.icon}</div>`,
           iconSize: [0, 0],
         }),
-        zIndexOffset: -1000,
+        zIndexOffset: Z_POI_MARKER,
       });
 
       const popupLines = [`<strong>${poi.name ?? cat.icon + " " + poi.category}</strong>`];
diff --git a/apps/planner/app/components/RouteInteraction.tsx b/apps/planner/app/components/RouteInteraction.tsx
index 0689ca7..01f589d 100644
--- a/apps/planner/app/components/RouteInteraction.tsx
+++ b/apps/planner/app/components/RouteInteraction.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useCallback } from "react";
 import { useMap } from "react-leaflet";
 import L from "leaflet";
+import { Z_GHOST_WAYPOINT } from "~/lib/z-index";
 
 interface RouteInteractionProps {
   coordinates: [number, number, number][]; // [lon, lat, ele]
@@ -89,7 +90,7 @@ export function RouteInteraction({
       icon: ghostIcon,
       draggable: true,
       interactive: true,
-      zIndexOffset: -100,
+      zIndexOffset: Z_GHOST_WAYPOINT,
     });
     markerRef.current = marker;
 
diff --git a/apps/planner/app/lib/z-index.ts b/apps/planner/app/lib/z-index.ts
new file mode 100644
index 0000000..7466427
--- /dev/null
+++ b/apps/planner/app/lib/z-index.ts
@@ -0,0 +1,12 @@
+/**
+ * Leaflet marker z-index offsets for consistent layering.
+ * Higher values render on top of lower values.
+ *
+ * Rendering order (bottom to top):
+ *   POI markers → cursor markers → ghost waypoint → waypoint markers → highlight dot
+ */
+export const Z_POI_MARKER = -1000;
+export const Z_CURSOR = -1000;
+export const Z_GHOST_WAYPOINT = -100;
+export const Z_WAYPOINT = 1000;
+export const Z_HIGHLIGHT = 2000;