diff --git a/apps/web/src/widgets/map3d/Map3D.tsx b/apps/web/src/widgets/map3d/Map3D.tsx index f37f1e5..ad62098 100644 --- a/apps/web/src/widgets/map3d/Map3D.tsx +++ b/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); };