Scarriffle/Trainpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linien-Label flackert nicht mehr, Hover-Kärtchen fährt mit dem Zug mit

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
This commit is contained in:
Claude
2026-10-21 20:50:57 +02:00
parent a064fccb23
commit 4df29e7e6c
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+16 -5
View File
@@ -77,7 +77,9 @@ const map = new maplibregl.Map({
layout: {
"text-field": ["get", "line"],
"text-font": ["Noto Sans Medium"], "text-size": 11,
"text-offset": [0, 1.1], "text-anchor": "top", "text-optional": true,
"text-offset": [0, 1.1], "text-anchor": "top",
// nicht bei jedem Animationsschritt neu auf Überschneidung prüfen, sonst flackert die Linie
"text-allow-overlap": true, "text-ignore-placement": true,
},
paint: { "text-color": "#111827", "text-halo-color": "#fff", "text-halo-width": 1.5 } },
],
@@ -210,6 +212,10 @@ function render() {
f.properties.bearing = cur === undefined ? target : cur + turn(cur, target) * ease;
}
map.getSource("trains").setData(trains);
if (hoverId) { // Hover-Kärtchen fährt mit dem Zug mit
const f = trains.features.find((x) => x.properties.id === hoverId);
if (f) hover.setLngLat(f.geometry.coordinates); else { hover.remove(); hoverId = null; }
}
}
let lastFrame = 0;
@@ -291,14 +297,19 @@ document.getElementById("close").onclick = closeTrip;
map.on("click", "trains", (e) => showTrip(e.features[0].properties.id));
const hover = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 12, className: "hover" });
let hoverId = null;
function hoverHtml(p) {
const delay = p.delay === undefined || p.delay === null ? "" : delayText(Number(p.delay)) || '<span class="d" style="color:var(--ok)">pünktlich</span>';
return `<b>${esc(p.line)} ${esc(p.nr)}</b> ${delay}<br>nach ${esc(p.to)}`;
}
map.on("mousemove", "trains", (e) => {
map.getCanvas().style.cursor = "pointer";
const p = e.features[0].properties;
const delay = p.delay === undefined || p.delay === null ? "" : delayText(Number(p.delay)) || '<span class="d" style="color:var(--ok)">pünktlich</span>';
hover.setLngLat(e.features[0].geometry.coordinates)
.setHTML(`<b>${esc(p.line)} ${esc(p.nr)}</b> ${delay}<br>nach ${esc(p.to)}`).addTo(map);
if (p.id !== hoverId) hover.setHTML(hoverHtml(p));
hoverId = p.id;
hover.setLngLat(e.features[0].geometry.coordinates).addTo(map);
});
map.on("mouseleave", "trains", () => { map.getCanvas().style.cursor = ""; hover.remove(); });
map.on("mouseleave", "trains", () => { map.getCanvas().style.cursor = ""; hover.remove(); hoverId = null; });
map.on("load", () => {
let mode = "light";