fix: resolve globe ship circle-radius expression and ensure ship layers top

apps/web/src/widgets/map3d/Map3D.tsx

@@ -478,6 +478,29 @@ const GLOBE_OVERLAY_PARAMS = {
   depthWriteEnabled: false,
 } as const;
 
+function makeGlobeCircleRadiusExpr() {
+  const base3 = 4;
+  const base7 = 6;
+  const base10 = 8;
+  const base14 = 11;
+
+  return [
+    "interpolate",
+    ["linear"],
+    ["zoom"],
+    3,
+    ["case", ["==", ["get", "selected"], 1], 4.6, ["==", ["get", "highlighted"], 1], 4.2, base3],
+    7,
+    ["case", ["==", ["get", "selected"], 1], 6.8, ["==", ["get", "highlighted"], 1], 6.2, base7],
+    10,
+    ["case", ["==", ["get", "selected"], 1], 9.0, ["==", ["get", "highlighted"], 1], 8.2, base10],
+    14,
+    ["case", ["==", ["get", "selected"], 1], 11.8, ["==", ["get", "highlighted"], 1], 10.8, base14],
+  ];
+}
+
+const GLOBE_SHIP_CIRCLE_RADIUS_EXPR = makeGlobeCircleRadiusExpr() as never;
+
 function getMapTilerKey(): string | null {
   const k = import.meta.env.VITE_MAPTILER_KEY;
   if (typeof k !== "string") return null;
@@ -2032,54 +2055,20 @@ export function Map3D({
       }
 
       const visibility = settings.showShips ? "visible" : "none";
-      const baseCircleRadius: unknown[] = [
-        "interpolate",
-        ["linear"],
-        ["zoom"],
-        3,
-        4,
-        7,
-        6,
-        10,
-        8,
-        14,
-        11,
-      ] as const;
-      const highlightedCircleRadius: unknown[] = [
-        "case",
-        ["==", ["get", "selected"], 1],
-        [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          3,
-          4.6,
-          7,
-          6.8,
-          10,
-          9.0,
-          14,
-          11.8,
-        ] as unknown[],
-        ["==", ["get", "highlighted"], 1],
-        [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          3,
-          4.2,
-          7,
-          6.2,
-          10,
-          8.2,
-          14,
-          10.8,
-        ] as unknown[],
-        baseCircleRadius,
-      ];
 
       // Put ships at the top so they're always visible (especially important under globe projection).
       const before = undefined;
+      const bringShipLayersToFront = () => {
+        const ids = [haloId, outlineId, symbolId];
+        for (const id of ids) {
+          if (!map.getLayer(id)) continue;
+          try {
+            map.moveLayer(id);
+          } catch {
+            // ignore
+          }
+        }
+      };
 
       if (!map.getLayer(haloId)) {
         try {
@@ -2100,7 +2089,7 @@ export function Map3D({
                 ] as never,
               },
               paint: {
-                "circle-radius": highlightedCircleRadius as never,
+                "circle-radius": GLOBE_SHIP_CIRCLE_RADIUS_EXPR,
                 "circle-color": ["coalesce", ["get", "shipColor"], "#64748b"] as never,
                 "circle-opacity": [
                   "case",
@@ -2129,7 +2118,7 @@ export function Map3D({
             0.34,
             0.16,
           ] as never);
-          map.setPaintProperty(haloId, "circle-radius", highlightedCircleRadius as never);
+          map.setPaintProperty(haloId, "circle-radius", GLOBE_SHIP_CIRCLE_RADIUS_EXPR);
         } catch {
           // ignore
         }
@@ -2143,7 +2132,7 @@ export function Map3D({
               type: "circle",
               source: srcId,
               paint: {
-                "circle-radius": highlightedCircleRadius as never,
+                "circle-radius": GLOBE_SHIP_CIRCLE_RADIUS_EXPR,
                 "circle-color": "rgba(0,0,0,0)",
                 "circle-stroke-color": [
                   "case",
@@ -2348,6 +2337,7 @@ export function Map3D({
       }
 
       // Selection and highlight are now source-data driven.
+      bringShipLayersToFront();
       kickRepaint(map);
     };