viewof map = { /* ─── layout sizes ────────────────────────────────────────── */ const SIDEBAR_W = 160; // not used for width calc anymore, but kept for consistency const GAP = 0; const BOX = Math.min(640, Math.max(320, width)); // ← full width (no sidebar) const w = BOX, h = BOX; /* ─── helpers ─────────────────────────────────────────────── */ const normId = x => String(x); const hasPointer = typeof window !== "undefined" && "PointerEvent" in window; function safeTime(v){ const x = +v; return Number.isFinite(x) ? x : Infinity; } /* ─── SVG (map) ───────────────────────────────────────────── */ const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") .style("height", "auto") .style("display", "block") .attr("font-family", "Poppins, sans-serif") .style("touch-action", "manipulation"); /* ── projection & base map ─────────────────────────────────── */ const projection = d3.geoMercator().fitSize([w, h], countywgs84); const path = d3.geoPath().projection(projection); svg.append("g") .attr("class", "ph-county") .style("pointer-events", "none") .selectAll("path") .data(countywgs84.features) .join("path") .attr("d", path) .attr("fill", "#f5f5f5") .attr("stroke","#333"); /* ─── color scale (0–60 min) ──────────────────────────────── */ const colorScale = d3.scaleSequential( d3.interpolateRgbBasis(["#e8e1fe","#cbbbfd","#af94fc","#926efb","#7549f9","#5a28f6"]) ).domain([0, 60]).clamp(true); /* ─── state & style ───────────────────────────────────────── */ const removedNros = new Set(); // string IDs const selectedNros = new Set(); // string IDs let hoveredCircleId = null; const CIRCLE_BASE = "#29254d"; const HOVER_STROKE = "#FFDC52"; const OUTLINE_BLACK = "#29254d"; const RED_FILL = "#E53935"; const RED_STROKE = "#E53935"; const MAX_REMOVED = 4; const LIMIT_MSG = "Voit piilottaa enintään 4 asemaa kerrallaan."; /* ─── tooltip (fixed) ─────────────────────────────────────── */ const tooltip = d3.select("body").append("div") .attr("class", "ph-map-tooltip") .style("position", "fixed") .style("pointer-events", "none") .style("background", "#fff") .style("border", "1px solid #333") .style("border-radius", "4px") .style("padding", "4px 6px") .style("font-family", "Poppins, sans-serif") .style("font-size", "12px") .style("color", "#111") .style("display", "none"); // Keep error text from being immediately overwritten by hover tooltips let squelchTooltipUntil = 0; const restoreTooltipStyle = () => { tooltip .style("background", "#fff") .style("border", "1px solid #333") .style("color", "#111"); }; // One place to hide & reset tooltip (used everywhere) const hideTooltip = () => { restoreTooltipStyle(); tooltip.style("display", "none"); squelchTooltipUntil = 0; if (tooltip._errT) { clearTimeout(tooltip._errT); tooltip._errT = null; } }; // Kill tooltips on zoom/viewport/visibility changes so nothing gets stuck const installOnce = (() => { let done = false; return () => { if (done) return; done = true; window.addEventListener("resize", hideTooltip, {passive:true}); window.addEventListener("orientationchange", hideTooltip, {passive:true}); window.addEventListener("scroll", hideTooltip, {passive:true, capture:true}); document.addEventListener("visibilitychange", hideTooltip); window.addEventListener("blur", hideTooltip); window.addEventListener("wheel", e => { if (e.ctrlKey) hideTooltip(); }, {passive:true}); window.addEventListener("gesturestart", hideTooltip, {passive:true}); // Safari window.addEventListener("keydown", e => { if ((e.ctrlKey || e.metaKey) && (e.key === "+" || e.key === "-" || e.key === "=" || e.key === "0")) { hideTooltip(); } }); }; })(); installOnce(); const getEventClientXY = (evt) => { const t = evt?.touches?.[0] || evt?.changedTouches?.[0] || evt; return { x: t?.clientX ?? 0, y: t?.clientY ?? 0 }; }; const showErrorTooltip = (evt, msg = LIMIT_MSG) => { const { x, y } = getEventClientXY(evt); squelchTooltipUntil = Date.now() + 1500; tooltip .text(msg) .style("display", "block") .style("background", "#b91c1c") .style("border", "1px solid #b91c1c") .style("color", "#fff") .style("left", (x - 30) + "px") .style("top", (y - 50) + "px"); clearTimeout(tooltip._errT); tooltip._errT = setTimeout(() => { hideTooltip(); }, 1500); }; /* ─── station labels (from ttm toimipiste_1..5) ───────────── */ const stationLabelMap = (() => { const m = new Map(); for (const d of data_ttm) { for (let i = 1; i <= 5; i++) { const id = d[`to_id_${i}`]; if (id == null) continue; const sid = normId(id); const name = d[`toimipiste_${i}`]; const nm = (name != null && String(name).trim() !== "") ? name : sid; if (!m.has(sid)) m.set(sid, nm); } } return m; })(); const stationLabel = id => stationLabelMap.get(normId(id)) ?? normId(id); /* ─── travel-time helpers ─────────────────────────────────── */ function getTravelTime(d) { for (let i = 1; i <= 5; i++) { const sid = normId(d[`to_id_${i}`]); if (sid && !removedNros.has(sid)) { const t = safeTime(d[`travel_time_p50_${i}`]); if (Number.isFinite(t)) return Math.max(0, Math.min(200, t)); } } return "N/A"; } function getClosestStation(d) { for (let i = 1; i <= 5; i++) { const sid = normId(d[`to_id_${i}`]); const t = safeTime(d[`travel_time_p50_${i}`]); if (sid && !removedNros.has(sid) && Number.isFinite(t)) return sid; } return null; } /* ─── layers ─────────────────────────────────────────────── */ const gSquares = svg.append("g").attr("class", "ph-squares"); const gStations = svg.append("g").attr("class", "ph-stations"); const gHover = svg.append("g").attr("class", "ph-hover").style("pointer-events", "none"); /* ─── squares ─────────────────────────────────────────────── */ const rects = gSquares .selectAll("rect") .data(data_ttm) .join("rect") .attr("x", d => projection([+d.x, +d.y])[0] - 5) .attr("y", d => projection([+d.x, +d.y])[1] - 5) .attr("width", 10) .attr("height", 10) .attr("fill", d => colorScale(getTravelTime(d))) .attr("fill-opacity", 1); const hoverOutline = gHover.append("rect") .attr("width", 10) .attr("height", 10) .attr("fill", "none") .attr("stroke-width", 2) .attr("display", "none"); const clearSquareHover = () => hoverOutline.attr("display", "none"); /* ─── square hover handlers ───────────────────────────────── */ function showTooltipSquare(event, d) { if (Date.now() < squelchTooltipUntil) return; const { x, y } = getEventClientXY(event); restoreTooltipStyle(); tooltip .text(`${getTravelTime(d)} min`) .style("display", "block") .style("left", (x - 30) + "px") .style("top", (y - 50) + "px"); } function onSquareEnter(event, d) { const [px, py] = projection([+d.x, +d.y]); hoverOutline.attr("x", px - 5).attr("y", py - 5) .attr("stroke", OUTLINE_BLACK).attr("display", null); updateCircleStyles(getClosestStation(d)); showTooltipSquare(event, d); } function onSquareMove(event, d){ showTooltipSquare(event, d); } function onSquareLeave(){ clearSquareHover(); updateCircleStyles(null); hideTooltip(); // ensure no lingering tooltip } rects.on("mouseenter", onSquareEnter) .on("mousemove", onSquareMove) .on("mouseleave", onSquareLeave); /* ─── circles (Safari-safe handlers) ─────────────────────── */ const circleById = new Map(); const circles = gStations .selectAll("circle") .data(data_hs) .join("circle") .attr("cx", d => projection([+d.x, +d.y])[0]) .attr("cy", d => projection([+d.x, +d.y])[1]) .attr("r", 6) .attr("fill", CIRCLE_BASE) .attr("pointer-events", "all") .style("cursor","pointer") .each(function(d){ circleById.set(normId(d.nro), this); }); function showTooltipCircle(event, d) { if (Date.now() < squelchTooltipUntil) return; const { x, y } = getEventClientXY(event); restoreTooltipStyle(); tooltip .text(stationLabel(d.nro)) .style("display", "block") .style("left", (x - 30) + "px") .style("top", (y - 50) + "px"); } function handleCircleToggle(node, d, event) { const sid = normId(d.nro); clearSquareHover(); const ok = toggleStation(sid); if (!ok) { showErrorTooltip(event, LIMIT_MSG); // ← show as tooltip next to the circle return; } selectedNros.clear(); selectedNros.add(sid); hoveredCircleId = null; updateRectColors(); updateCircleStyles(); syncListFromState(); updateStationStats(); d3.select(node).raise(); } if (hasPointer) { circles.on("pointerdown", function(event, d){ event.preventDefault(); event.stopPropagation(); handleCircleToggle(this, d, event); this.__justHandled = Date.now(); }); } circles.on("mousedown", function(event, d){ event.preventDefault(); event.stopPropagation(); handleCircleToggle(this, d, event); this.__justHandled = Date.now(); }); circles.on("touchstart", function(event, d){ event.preventDefault(); event.stopPropagation(); handleCircleToggle(this, d, event); this.__justHandled = Date.now(); }, { passive: false }); circles.on("click", function(event, d){ if (this.__justHandled && Date.now() - this.__justHandled < 200) return; event.preventDefault(); event.stopPropagation(); handleCircleToggle(this, d, event); }); circles .on("mouseenter", (event, d) => { clearSquareHover(); hoveredCircleId = normId(d.nro); updateCircleStyles(); showTooltipCircle(event, d); }) .on("mousemove", (event, d) => { if (hoveredCircleId === normId(d.nro)) showTooltipCircle(event, d); }) .on("mouseleave", () => { hoveredCircleId = null; updateCircleStyles(); hideTooltip(); // ensure no lingering tooltip }); gStations.raise(); function updateCircleStyles(hoverIdFromSquares = null) { circles.each(function (c) { const sid = normId(c.nro); const selected = selectedNros.has(sid); const circleHover = hoveredCircleId !== null && sid === hoveredCircleId; const squareHover = !circleHover && hoverIdFromSquares !== null && sid === hoverIdFromSquares; d3.select(this) .attr("fill", removedNros.has(sid) ? RED_FILL : CIRCLE_BASE) .attr("stroke", circleHover ? RED_STROKE : (squareHover ? HOVER_STROKE : null)) .attr("stroke-width", (circleHover || squareHover) ? 2 : 0); if (selected || circleHover || squareHover) d3.select(this).raise(); }); } function updateRectColors() { const selectedId = [...selectedNros][0]; rects.each(function(d) { const activeClosest = getClosestStation(d); const isSelectedClosest = selectedId != null && activeClosest === selectedId; d3.select(this) .attr("fill", colorScale(getTravelTime(d))) .attr("fill-opacity", selectedId == null ? 1 : (isSelectedClosest ? 1 : 0.6)); }); } /* ─── municipality borders (non-interactive) ──────────────── */ svg.append("g") .attr("class", "ph-municipalities") .style("pointer-events", "none") .selectAll("path") .data(municipalitywgs84.features) .join("path") .attr("d", path) .attr("fill","none") .attr("stroke","#989d9e"); /* ─── legend (non-interactive) ────────────────────────────── */ const maxBarW = Math.min(300, w * 0.7); const legendPadL = 24; const legendBarW = maxBarW; const legendSvgW = legendPadL + legendBarW; const fsLabel = Math.round(13 * (legendBarW / 300)); const fsTicks = Math.round(12 * (legendBarW / 300)); const legendH = fsLabel + 6 + 12 + fsTicks + 6; const legendSvg = d3.create("svg") .attr("width", w) .attr("height", legendH) .attr("font-family", "Poppins, sans-serif") .style("pointer-events", "none"); const gLegend = legendSvg.append("g") .attr("transform", `translate(${(w - legendSvgW) / 2},0)`); gLegend.append("text") .attr("x", legendPadL + legendBarW / 2) .attr("y", fsLabel) .attr("text-anchor", "middle") .attr("font-size", fsLabel) .attr("font-weight", 600) .attr("fill", "#333") .text("Matka-aika"); const gradId = "legend-gradient"; const grad = gLegend.append("defs").append("linearGradient") .attr("id", gradId).attr("x1","0%").attr("x2","100%").attr("y1","0%").attr("y2","0%"); d3.range(0, 1.01, 0.1).forEach(t => grad.append("stop") .attr("offset", `${t * 100}%`).attr("stop-color", colorScale(t * 60))); gLegend.append("rect") .attr("x", legendPadL) .attr("y", fsLabel + 6) .attr("width", legendBarW) .attr("height", 12) .attr("fill", `url(#${gradId})`) .attr("stroke", "#989d9e"); const tickY = fsLabel + 6 + 12 + fsTicks; gLegend.append("text").attr("x", legendPadL).attr("y", tickY).attr("font-size", fsTicks).attr("fill", "#333").text("0 min"); gLegend.append("text").attr("x", legendPadL + legendBarW / 2).attr("y", tickY).attr("font-size", fsTicks).attr("fill", "#333").attr("text-anchor","middle").text("30 min"); gLegend.append("text").attr("x", legendPadL + legendBarW).attr("y", tickY).attr("font-size", fsTicks).attr("fill", "#333").attr("text-anchor","end").text("60 min"); /* ─── top toolbar: centered, equal heights, consistent spacing ─ */ const stations = data_hs .map(d => ({ id: normId(d.nro), label: stationLabel(d.nro) })) .sort((a, b) => d3.ascending(a.label, b.label)); const sidebar = html`

`; /* ── references for existing logic ─────────────────────────── */ const listEl = sidebar.querySelector("#station-list"); const checkboxById = new Map(); const limitMsgEl = sidebar.querySelector("#limit-msg"); const limitToastEl = sidebar.querySelector("#limit-toast"); // menu-only now const stnBtn = sidebar.querySelector("#stn-btn"); const stnMenu = sidebar.querySelector("#stn-menu"); const searchEl = sidebar.querySelector("#stn-search"); const resetEl = sidebar.querySelector("#stn-reset"); /* ── keep one row unless it would overflow; then wrap ─────── */ const wrapEl = sidebar.querySelector("#toolbar-wrap"); function adjustToolbarWrap() { const needWrap = wrapEl.scrollWidth > wrapEl.clientWidth + 1; wrapEl.style.flexWrap = needWrap ? "wrap" : "nowrap"; } const ro = new ResizeObserver(adjustToolbarWrap); ro.observe(wrapEl); window.addEventListener("resize", adjustToolbarWrap, { passive: true }); setTimeout(adjustToolbarWrap, 0); /* ── dropdown open/close & outside click ───────────────────── */ function isMenuOpen(){ return stnMenu.style.display !== "none"; } function setMenu(open){ stnMenu.style.display = open ? "" : "none"; stnBtn.setAttribute("aria-expanded", open ? "true" : "false"); } stnBtn.addEventListener("click", (e)=>{ e.stopPropagation(); setMenu(!isMenuOpen()); }); // Keep menu open when clicking inside it (incl. on labels & rows) stnMenu.addEventListener("mousedown", e => e.stopPropagation()); stnMenu.addEventListener("click", e => e.stopPropagation()); document.addEventListener("click", (e)=>{ if(!sidebar.contains(e.target)) setMenu(false); }); /* ── filter state + renderer (uses your existing addItem) ──── */ let q = ""; // search query (lowercased) function visibleStationsFiltered(){ const query = q; return stations.filter(s => !query || s.label.toLowerCase().includes(query) || s.id.toLowerCase().includes(query) ); } function renderStationList(){ listEl.innerHTML = ""; checkboxById.clear(); visibleStationsFiltered().forEach(addItem); syncListFromState(); } /* ── wire up filter controls ───────────────────────────────── */ searchEl.addEventListener("input", e => { q = e.target.value.trim().toLowerCase(); renderStationList(); }); resetEl.addEventListener("click", (e) => { e.stopPropagation(); removedNros.clear(); selectedNros.clear(); hoveredCircleId = null; renderStationList(); updateRectColors(); updateCircleStyles(); updateStationStats(); }); /* ── show limit notices (menu + toast for menu only) ──────── */ function showLimitNotice() { if (isMenuOpen()) { limitMsgEl.style.display = ""; clearTimeout(limitMsgEl._t); limitMsgEl._t = setTimeout(() => { limitMsgEl.style.display = "none"; }, 2000); } if (limitToastEl){ limitToastEl.style.display = ""; clearTimeout(limitToastEl._t); limitToastEl._t = setTimeout(() => { limitToastEl.style.display = "none"; }, 2000); } } // Handle a checkbox toggle from the station list / dropdown function onCheckboxToggle(stId, checked) { const wasOpen = isMenuOpen(); const ok = setStationIncluded(stId, checked); if (!ok) { const inp = checkboxById.get(stId); if (inp) inp.checked = true; showLimitNotice(); // menu path keeps using menu toast return; } selectedNros.delete(stId); hoveredCircleId = null; updateRectColors(); updateCircleStyles(); const node = circleById.get(stId); if (node) d3.select(node).raise(); updateStationStats(); // Re-render list and keep dropdown open if it was open renderStationList(); if (wasOpen) setMenu(true); } /* ── addItem (click name toggles; keep menu open) ─────────── */ function addItem(st) { const row = html` `; const input = row.querySelector("input"); const span = row.querySelector("span"); span.textContent = st.label; span.title = st.label; // tooltip with the full name input.checked = !removedNros.has(st.id); // Keep the menu open; clicking the name toggles the checkbox row.addEventListener("mousedown", e => e.stopPropagation()); row.addEventListener("click", e => { e.stopPropagation(); if (e.target !== input) input.checked = !input.checked; onCheckboxToggle(st.id, input.checked); }); input.addEventListener("input", (e) => { e.stopPropagation(); onCheckboxToggle(st.id, e.target.checked); }); input.addEventListener("change", (e) => { e.stopPropagation(); onCheckboxToggle(st.id, e.target.checked); }); checkboxById.set(st.id, input); listEl.append(row); } /* ── initial render of list ────────────────────────────────── */ renderStationList(); /* ── stats ─────────────────────────────────────────────────── */ const statsVisibleEl = sidebar.querySelector("#visible-count"); const statsTotalEl = sidebar.querySelector("#total-count"); const statsAvgEl = sidebar.querySelector("#avg-time"); function updateStationStats() { const total = data_hs.length; let visible = 0; for (const d of data_hs) if (!removedNros.has(normId(d.nro))) visible++; statsVisibleEl.textContent = visible; statsTotalEl.textContent = total; const avg = d3.mean(data_ttm, d => { const t = +getTravelTime(d); return Number.isFinite(t) ? Math.max(0, Math.min(60, t)) : undefined; }); statsAvgEl.textContent = avg == null ? "–" : avg.toFixed(1); } updateStationStats(); /* ─── include/toggle helpers (string IDs) ─────────────────── */ function setStationIncluded(id, included) { const sid = normId(id); if (included) { removedNros.delete(sid); return true; } if (removedNros.has(sid)) return true; if (removedNros.size >= MAX_REMOVED) return false; removedNros.add(sid); return true; } function toggleStation(id) { const sid = normId(id); if (removedNros.has(sid)) { removedNros.delete(sid); return true; } if (removedNros.size >= MAX_REMOVED) return false; removedNros.add(sid); return true; } function syncListFromState() { checkboxById.forEach((inp, id) => { inp.checked = !removedNros.has(normId(id)); }); } /* ─── layout container (toolbar above map) ────────────────── */ const rightCol = html`

`; rightCol.append(sidebar); // top toolbar rightCol.append(svg.node()); // map rightCol.append(legendSvg.node()); // legend const container = html`

`; container.append(rightCol); container.value = null; return container; }