From 13a7414798f1a2b3c0e67948d8abe4867b45ec20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antonia=20P=C3=A9rez-Cerezo?= Date: Thu, 13 Mar 2025 22:01:07 +0100 Subject: [PATCH] Mark markers markers that are not on a way in dark red --- frontend/common/map.js | 21 ++++++++++++++++----- frontend/common/styles.css | 1 + 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/common/map.js b/frontend/common/map.js index 4342863..210e8a4 100644 --- a/frontend/common/map.js +++ b/frontend/common/map.js @@ -139,8 +139,9 @@ function addGeoJsonToMap(dat) { async function updateBrouter () { if (markers.length > 0) { - for (i=1; i< markers.length-1; i++) { + for (i=0; i< markers.length; i++) { markers[i]._icon.classList.remove("red"); + markers[i]._icon.classList.remove("darkred"); } markers[markers.length-1]._icon.classList.add("red"); markers[0]._icon.classList.add("green"); @@ -156,16 +157,26 @@ async function updateBrouter () { const marker1 = markers[i].getLatLng(); const marker2 = markers[i+1].getLatLng(); const url = `https://brouter.de/brouter?lonlats=${marker1.lng},${marker1.lat}|${marker2.lng},${marker2.lat}&profile=rail&alternativeidx=0&format=geojson`; - fetch(url).then((response) => response.json()) + fetch(url).then((response) => { + if (geojson != undefined) { + map.removeLayer(geojson); + } + if (!response.ok) { + throw new Error("HTTP error " + response.status); + } + return response.json() + }) .then((data) => { - if (geojson != undefined) { - map.removeLayer(geojson); - } delete data.features[0].properties.messages geojsons.push(data.features[0]); const dat = {type: "FeatureCollection", features: geojsons}; geojson = addGeoJsonToMap(dat); }) + .catch(err => { + markers[i]._icon.classList.add("darkred"); + markers[i+1]._icon.classList.add("darkred"); + } + ) } } diff --git a/frontend/common/styles.css b/frontend/common/styles.css index 150beda..67294e2 100644 --- a/frontend/common/styles.css +++ b/frontend/common/styles.css @@ -21,3 +21,4 @@ body { } img.red { filter: hue-rotate(120deg); } img.green { filter: hue-rotate(-120deg); } +img.darkred { filter: hue-rotate(160deg); }