/* global React */
// Manchester map — clean Google basemap + our overlays + zoom/pan.
const { useState, useRef, useEffect } = React;
function ManchesterMap({ venues, categories, activeCat, onPinClick, theme, route, routeNumbers }) {
const isDark = theme === "dark";
const catMap = Object.fromEntries(categories.map(c => [c.id, c]));
const visibleVenues = venues.filter(v => v.x != null && v.y != null).map(v => ({
...v,
dim: activeCat && activeCat !== "all" && v.cat !== activeCat
}));
const [zoom, setZoom] = useState(1);
const [pan, setPan] = useState({ x: 0, y: 0 });
const wrapRef = useRef(null);
const dragRef = useRef(null);
const ZOOM_MIN = 1;
const ZOOM_MAX = 4;
const ZOOM_STEP = 0.5;
// Clamp pan so you can't drag the map away from view
function clampPan(p, z, w, h) {
if (z <= 1) return { x: 0, y: 0 };
const maxX = (w * (z - 1)) / 2;
const maxY = (h * (z - 1)) / 2;
return {
x: Math.max(-maxX, Math.min(maxX, p.x)),
y: Math.max(-maxY, Math.min(maxY, p.y))
};
}
function setZoomAt(newZoom, originPx) {
if (!wrapRef.current) { setZoom(newZoom); return; }
const rect = wrapRef.current.getBoundingClientRect();
const w = rect.width, h = rect.height;
// origin defaults to centre
const ox = originPx ? originPx.x : w / 2;
const oy = originPx ? originPx.y : h / 2;
// Convert origin to image coords (relative to image centre, accounting for current pan/zoom)
const imgCx = (ox - w / 2 - pan.x) / zoom;
const imgCy = (oy - h / 2 - pan.y) / zoom;
// After zoom change, we want imgCx/imgCy to project back to ox/oy
const newPan = {
x: ox - w / 2 - imgCx * newZoom,
y: oy - h / 2 - imgCy * newZoom
};
setZoom(newZoom);
setPan(clampPan(newPan, newZoom, w, h));
}
function zoomIn() { setZoomAt(Math.min(ZOOM_MAX, zoom + ZOOM_STEP)); }
function zoomOut() { setZoomAt(Math.max(ZOOM_MIN, zoom - ZOOM_STEP)); }
function resetView() { setZoom(1); setPan({ x: 0, y: 0 }); }
// Drag-to-pan
function handlePointerDown(e) {
// Don't start a drag if the user tapped a button (zoom controls, pins)
if (e.target.closest('button')) return;
if (zoom <= 1) return;
e.currentTarget.setPointerCapture(e.pointerId);
dragRef.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
}
function handlePointerMove(e) {
if (!dragRef.current) return;
const dx = e.clientX - dragRef.current.startX;
const dy = e.clientY - dragRef.current.startY;
if (!wrapRef.current) return;
const rect = wrapRef.current.getBoundingClientRect();
setPan(clampPan(
{ x: dragRef.current.panX + dx, y: dragRef.current.panY + dy },
zoom, rect.width, rect.height
));
}
function handlePointerUp(e) {
dragRef.current = null;
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
}
// Wheel-to-zoom (desktop)
function handleWheel(e) {
if (!e.ctrlKey && !e.metaKey && Math.abs(e.deltaY) < 30) return; // ignore tiny scrolls
e.preventDefault();
if (!wrapRef.current) return;
const rect = wrapRef.current.getBoundingClientRect();
const ox = e.clientX - rect.left;
const oy = e.clientY - rect.top;
const delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoom + delta));
setZoomAt(newZoom, { x: ox, y: oy });
}
// Districts — soft polygons + labels
const districts = [
{ id: "salford", name: "SALFORD", color: "#9C7B5A",
path: "M 2,18 Q 10,12 18,16 Q 24,22 20,30 Q 14,36 6,32 Q 0,26 2,18 Z",
labelX: 11, labelY: 22 },
{ id: "spinningfields",name: "SPINNINGFIELDS", color: "#E8B23A",
path: "M 26,42 Q 34,40 40,46 Q 42,54 36,58 Q 28,58 24,52 Q 24,46 26,42 Z",
labelX: 33, labelY: 50 },
{ id: "city", name: "CITY CENTRE", color: "#B58FE6",
path: "M 42,42 Q 52,40 58,46 Q 58,54 52,56 Q 44,56 42,50 Q 40,46 42,42 Z",
labelX: 49, labelY: 49 },
{ id: "nq", name: "NORTHERN QUARTER", color: "#3CC8B5",
path: "M 56,30 Q 66,28 70,34 Q 70,42 64,46 Q 56,46 54,40 Q 52,34 56,30 Z",
labelX: 61, labelY: 38 },
{ id: "ancoats", name: "ANCOATS", color: "#5BB872",
path: "M 70,28 Q 82,26 86,32 Q 86,40 80,44 Q 72,44 68,38 Q 68,32 70,28 Z",
labelX: 77, labelY: 35 },
{ id: "piccadilly", name: "PICCADILLY", color: "#E8742C",
path: "M 60,52 Q 72,50 78,56 Q 78,64 72,68 Q 64,68 60,62 Q 58,56 60,52 Z",
labelX: 68, labelY: 60 },
{ id: "mayfield", name: "MAYFIELD", color: "#E84B7C",
path: "M 72,66 Q 82,64 84,70 Q 84,76 78,78 Q 72,78 70,72 Q 70,68 72,66 Z",
labelX: 77, labelY: 72 },
{ id: "oxford", name: "OXFORD ROAD", color: "#4FA8E0",
path: "M 46,72 Q 58,70 62,76 Q 62,82 56,84 Q 48,84 46,80 Q 44,76 46,72 Z",
labelX: 54, labelY: 78 },
{ id: "hulme", name: "HULME", color: "#A8341A",
path: "M 32,76 Q 44,74 48,80 Q 48,86 42,88 Q 34,88 32,84 Q 30,80 32,76 Z",
labelX: 40, labelY: 82 }
];
// Stations — re-positioned at the actual icon coordinates from the latest basemap
// (The basemap has no labels of its own — these ARE the labels.)
const stations = [
{ name: "VICTORIA", x: 47.5, y: 27 },
{ name: "PICCADILLY", x: 65, y: 63 },
{ name: "OXFORD RD", x: 47, y: 81 }
];
// Labels scale-down with zoom so they don't get huge when zoomed in.
// (Counter-scale: divide font size by zoom roughly.)
const labelScale = 1 / Math.sqrt(zoom);
// Inner content (everything that scales together): basemap + overlays + pins
const inner = (
{/* Base map */}
{/* District blobs */}
{/* Labels (district + station) — drawn separately so blend mode doesn't murder them */}
{/* Walking route (only when route prop provided) */}
{route && route.length > 1 && (
)}
);
// Pins live OUTSIDE the scaled inner so their visual size stays exact —
// their position is computed from pan/zoom in JS so they track the map.
const pinsLayer = (
{visibleVenues.map(v => {
const c = catMap[v.cat];
const dim = v.dim;
const label = routeNumbers && routeNumbers[v.n] ? routeNumbers[v.n] : v.n;
// Convert venue % position into final on-screen position based on pan + zoom.
// Inner is scaled around centre, then translated by pan.
// Final pct = 50 + (v - 50) * zoom + panPct
// We render via CSS calc using container size (left/top in %).
const cx = 50 + (v.x - 50) * zoom; // % within container before pan
const cy = 50 + (v.y - 50) * zoom;
return (
);
})}
{/* District blobs */}
{/* Labels (district + station) — drawn separately so blend mode doesn't murder them */}
{/* Walking route (only when route prop provided) */}
{route && route.length > 1 && (
)}