/* Map.jsx — Stylized polar-projection map for PolarBearPaths */ /* global React, PBP_DATA */ const { useState, useEffect, useRef, useMemo } = React; const PBPMap = ({ tweaks, setTweak, // for the in-map settings flyout layers, bufferKm, selection, setSelection, hoveredEnc, timeIdx, // 0..23 (hours from now) setTimeIdx, // scrubber control playing, // play/pause state setPlaying, // toggle for play button iceFrameIdx, // 0..3 showProposed, // bool — show reroute proposed path }) => { const D = window.PBP_DATA; const VBW = 1000, VBH = 1000; const wrapRef = useRef(null); const [tip, setTip] = useState(null); const handleEnter = (e, html) => { const r = wrapRef.current.getBoundingClientRect(); setTip({ x: e.clientX - r.left + 14, y: e.clientY - r.top + 14, html }); }; const handleMove = (e) => { if (!tip) return; const r = wrapRef.current.getBoundingClientRect(); setTip(t => ({ ...t, x: e.clientX - r.left + 14, y: e.clientY - r.top + 14 })); }; const handleLeave = () => setTip(null); // Interpolate position along a polyline at fraction t∈[0,1] of arc length. // Returns { pos: [x,y], heading: degrees } where heading is the local segment // direction at that point — so map markers can rotate to face their travel. const posAndHeadingAlong = (path, t) => { if (!path || path.length === 0) return { pos: [0, 0], heading: 0 }; if (path.length === 1) return { pos: path[0], heading: 0 }; const total = path.length - 1; const f = Math.min(Math.max(t, 0), 1) * total; const i = Math.min(Math.floor(f), total - 1); const k = f - i; const a = path[i], b = path[i + 1]; const pos = [a[0] * (1 - k) + b[0] * k, a[1] * (1 - k) + b[1] * k]; // SVG y-axis points DOWN, so for compass-style rotation (0=up, 90=right): // heading = atan2(dx, -dy) const dx = b[0] - a[0], dy = b[1] - a[1]; const heading = (Math.atan2(dx, -dy) * 180) / Math.PI; return { pos, heading }; }; const vesselPos = (v) => posAndHeadingAlong(v.path, timeIdx / 23).pos; const vesselHeading = (v) => posAndHeadingAlong(v.path, timeIdx / 23).heading; const bearPos = (b) => posAndHeadingAlong(b.forecast, timeIdx / 23).pos; const bearHeading = (b) => posAndHeadingAlong(b.forecast, timeIdx / 23).heading; // Risk overlay: gradient circles around bears const bufferPx = (bufferKm / 25) * 38; // ~25km nominal -> 38px // Pan + zoom — viewBox manipulation, constrained so the visible window // can never leave the [0,0]–[VBW,VBH] map content area. const [view, setView] = useState({ x: 0, y: 0, zoom: 1 }); const dragRef = useRef(null); const clamp = (v, min, max) => Math.max(min, Math.min(max, v)); const vbW = VBW / view.zoom, vbH = VBH / view.zoom; const onPanDown = (e) => { if (e.button !== 0) return; dragRef.current = { sx: e.clientX, sy: e.clientY, vx: view.x, vy: view.y, rect: e.currentTarget.getBoundingClientRect() }; }; const onPanMove = (e) => { handleMove(e); if (!dragRef.current) return; const d = dragRef.current; const k = vbW / d.rect.width; // px → viewBox units const nx = clamp(d.vx - (e.clientX - d.sx) * k, 0, VBW - vbW); const ny = clamp(d.vy - (e.clientY - d.sy) * k, 0, VBH - vbH); setView(v => ({ ...v, x: nx, y: ny })); }; const onPanUp = () => { dragRef.current = null; }; const onWheel = (e) => { e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); const fx = (e.clientX - rect.left) / rect.width; const fy = (e.clientY - rect.top) / rect.height; setView(v => { const newZoom = clamp(v.zoom * (e.deltaY < 0 ? 1.15 : 0.87), 1, 8); if (newZoom === v.zoom) return v; const oldVbW = VBW / v.zoom, oldVbH = VBH / v.zoom; const cx = v.x + fx * oldVbW, cy = v.y + fy * oldVbH; const nVbW = VBW / newZoom, nVbH = VBH / newZoom; return { zoom: newZoom, x: clamp(cx - fx * nVbW, 0, VBW - nVbW), y: clamp(cy - fy * nVbH, 0, VBH - nVbH), }; }); }; const onPanLeave = () => { handleLeave(); dragRef.current = null; }; return (
{/* sea texture */} {/* SEA */} {/* GRATICULE — polar projection lines */} {[1,2,3,4,5,6].map(i => ( ))} {[0,30,60,90,120,150,180,210,240,270,300,330].map(deg => { const r = 480; const rad = (deg - 90) * Math.PI / 180; const x = 500 + Math.cos(rad) * r; const y = 500 + Math.sin(rad) * r; return ; })} {/* SEA ICE EXTENT */} {layers.ice && ( {/* historic outline (faint) */} )} {/* LAND */} {D.LAND.map((d, i) => ( ))} {/* GLACIERS */} {layers.glaciers && ( {/* Background CryoClim glaciers — every Svalbard tidewater + >30 km² polygon */} {(D.GLACIERS_BG || []).map(g => ( ))} {/* Featured glaciers (retreat panel) — full opacity, hover tooltip */} {D.GLACIERS.map(g => ( handleEnter(e, ( {g.name}{g.retreat_note || (g.real ? "CryoClim outline" : "")} ))} onMouseLeave={handleLeave} /> ))} )} {/* SHIPPING LANES */} {layers.lanes && ( {/* EMODnet 2024 vessel-density envelopes — corridor (faint) under major (stronger) */} {D.LANE_DENSITY && ( {(D.LANE_DENSITY.corridor || []).map((p, i) => ( ))} {(D.LANE_DENSITY.major || []).map((p, i) => ( ))} )} {D.LANES.map(l => { const t = l.type || "all"; const dash = t === "fishing" ? "2 4" : t === "passenger" ? "1 3" : "6 4"; const w = t === "passenger" ? 1.0 : t === "fishing" ? 1.0 : 1.4; const op = t === "all" ? 0.65 : 0.55; const desc = t === "fishing" ? "fishing corridor" : t === "passenger" ? "cruise corridor" : "commercial corridor"; return ( handleEnter(e, ( {l.name}{desc} · {l.length_km ? `${l.length_km} km` : "EMODnet 2024"} ))} onMouseLeave={handleLeave} /> ); })} )} {/* RISK VIZ — heatmap mode */} {layers.risk && tweaks.riskViz === "heatmap" && ( {D.BEARS.map(b => { const [x, y] = bearPos(b); const r = bufferPx * (1 + b.stress_idx * 1.4); return ( ); })} )} {/* RISK VIZ — contours mode */} {layers.risk && tweaks.riskViz === "contours" && ( {D.BEARS.map(b => { const [x, y] = bearPos(b); const r = bufferPx * (1 + b.stress_idx * 1.4); return [0.4, 0.7, 1.0].map((k, i) => ( )); })} )} {/* RISK VIZ — pulses mode */} {layers.risk && tweaks.riskViz === "pulses" && ( {D.BEARS.filter(b => b.stress_idx > 0.5).map(b => { const [x, y] = bearPos(b); const r = bufferPx * (0.8 + b.stress_idx); return ( ); })} )} {/* SHIPPING — current vessels with paths */} {layers.vessels && ( {D.VESSELS.map(v => { const [vx, vy] = vesselPos(v); // Each vessel carries its own A* reroute when one is useful. // Paint the green proposed line only for the currently-selected // vessel that has a useful detour, so the map doesn't get // cluttered with multiple greens at once. const hasOwnReroute = v.reroute && v.reroute.useful; const isSelected = selection?.kind === "vessel" && selection.id === v.id; const isReroute = hasOwnReroute && isSelected; const showOriginal = !showProposed || !isReroute; const pathD = isReroute && showProposed ? v.reroute.proposed.path : v.path; const dStr = pathD.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" "); return ( {/* original (faded if reroute shown) */} {isReroute && showProposed && ( `${i===0?"M":"L"} ${p[0]} ${p[1]}`).join(" ")} fill="none" stroke="var(--risk-high)" strokeWidth="1.4" strokeDasharray="3 4" opacity="0.55" /> )} {/* live path */} {/* path waypoints */} {pathD.map((p, i) => ( ))} {/* vessel marker — heading derived from local path segment */} setSelection({ kind: "vessel", id: v.id })} onMouseEnter={(e) => handleEnter(e, ( {v.name}{v.type} · {v.speed_kn} kn · heading {Math.round(vesselHeading(v))}° ))} onMouseLeave={handleLeave} > {/* vessel hull silhouette */} {/* wake */} {/* selection ring */} {selection?.kind === "vessel" && selection.id === v.id && ( )} {/* label */} {v.id} ); })} )} {/* BEARS */} {layers.bears && ( {D.BEARS.map(b => { const [bx, by] = bearPos(b); const isSel = selection?.kind === "bear" && selection.id === b.id; const isHL = hoveredEnc && hoveredEnc.bear === b.id; return ( {/* track (past) */} `${i===0?"M":"L"} ${p[0]} ${p[1]}`).join(" ")} fill="none" stroke="var(--bear-track)" strokeWidth="0.9" strokeDasharray="1.5 2" opacity="0.4" /> {/* forecast (future) */} `${i===0?"M":"L"} ${p[0]} ${p[1]}`).join(" ")} fill="none" stroke="var(--bear-track)" strokeWidth="0.7" strokeDasharray="3 4" opacity="0.65" /> {/* bear paw glyph — rotated to face the bear's travel direction */} setSelection({ kind: "bear", id: b.id })} onMouseEnter={(e) => handleEnter(e, ( {b.name} · {b.id}BCI {b.condition} · stress {(b.stress_idx*100).toFixed(0)}% ))} onMouseLeave={handleLeave} > {/* invisible hit-target so hover area covers the paw */} {/* paw print — wrapped in .bear-glyph so :hover scales it without inflating the hit area */} {(isSel || isHL) && ( )} {/* bear name label */} {b.name} ); })} )} {/* Place labels */} Spitsbergen Nordaustlandet Edgeøya Bjørnøya Greenland Sea Barents Sea Norwegian Sea {/* film grain */} {/* Map overlays */}
BARENTS · SVALBARD
76°N–81°N · 10°E–35°E
polar stereographic · {D.ICE_FRAMES[iceFrameIdx].label}
T+{String(timeIdx).padStart(2,"0")}h
forecast horizon · 24h
{/* outer ring */} {/* 8-point rose face — light guide lines */} {/* tick marks at the 4 cardinals */} {/* needle — N half (accent) and S half (ink) form a diamond */} {/* hub */} {/* N letter at the top, just inside the ring */} N
{/* Settings flyout sits on top of the scale — same width column */} {setTweak && } {/* Scale */}
SCALE
0 100 200 km
{/* Time scrubber — sits directly above the chip bar, same width */}
T+{String(timeIdx).padStart(2,"0")}h
setTimeIdx && setTimeIdx(+e.target.value)} />
+24h
{/* Counts chip bar */}
Bears: {D.BEARS.length} Vessels: {D.VESSELS.length} Risk zones
{tip && (
{tip.html}
)}
); }; window.PBPMap = PBPMap;