From 6f347d04dd109c14ef4d94e666984cefca7b12fd Mon Sep 17 00:00:00 2001 From: Felix Delattre Date: Sun, 21 Dec 2025 13:42:14 +0100 Subject: [PATCH] Added more ndvi stats to webapp. --- webapp/index.html | 105 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 98 insertions(+), 7 deletions(-) diff --git a/webapp/index.html b/webapp/index.html index 918475c..b844658 100644 --- a/webapp/index.html +++ b/webapp/index.html @@ -7,15 +7,17 @@ @@ -29,13 +31,21 @@

S2

+
NDVI Timeseries
+
RGB Imagery
+
NDVI Imagery
+

S3

+
NDVI Timeseries
+
RGB Imagery
+
NDVI Imagery
+
@@ -47,12 +57,18 @@ const slider = document.getElementById("dateSlider"); const dateDisplay = document.getElementById("dateDisplay"); const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; - const osmOpts = { attribution: "OpenStreetMap" }; + const osmOpts = { attribution: "OpenStreetMap", opacity: 0.4 }; + const mapOpts = { zoomControl: false }; const maps = { - s2: L.map("s2map").setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)), - s3: L.map("s3map").setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)) + s2: L.map("s2map", mapOpts).setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)), + s3: L.map("s3map", mapOpts).setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)) + }; + const ndvimaps = { + s2: L.map("s2ndvimap", mapOpts).setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)), + s3: L.map("s3ndvimap", mapOpts).setView([47.27, 11.39], 12).addLayer(L.tileLayer(osmUrl, osmOpts)) }; const overlays = { s2: null, s3: null }; + const ndviOverlays = { s2: null, s3: null }; let timeseries = { s2: [], s3: [] }; async function loadTimeseries() { @@ -121,6 +137,16 @@ ctx.moveTo(xPos, pad); ctx.lineTo(xPos, pad + plotH); ctx.stroke(); + + const closest = data.reduce((c, t) => + Math.abs(new Date(t.date) - new Date(currentDate)) < Math.abs(new Date(c.date) - new Date(currentDate)) ? t : c + ); + if (closest && closest.ndvi !== null) { + const yPos = y(closest.ndvi); + ctx.fillStyle = "#f00"; + ctx.font = "bold 10px sans-serif"; + ctx.fillText(closest.ndvi.toFixed(3), xPos + 5, yPos - 5); + } } } @@ -190,10 +216,48 @@ const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode); if (overlays[source]) maps[source].removeLayer(overlays[source]); - overlays[source] = L.imageOverlay(canvas.toDataURL(), bounds, { opacity: 0.7 }).addTo(maps[source]); + overlays[source] = L.imageOverlay(canvas.toDataURL(), bounds, { opacity: 0.95 }).addTo(maps[source]); maps[source].fitBounds(bounds); } + async function loadNDVI(source, filename) { + const tiff = await GeoTIFF.fromArrayBuffer(await (await fetch(`../data/innsbruck/2024/ndvi/${source}/${filename}`)).arrayBuffer()); + const image = await tiff.getImage(); + const data = Array.from((await image.readRasters())[0]); + const width = image.getWidth(); + const height = image.getHeight(); + const bbox = image.getBoundingBox(); + const geoKeys = image.getGeoKeys(); + const crsCode = geoKeys.ProjectedCSTypeGeoKey ? `EPSG:${geoKeys.ProjectedCSTypeGeoKey}` : + geoKeys.GeographicTypeGeoKey !== 4326 ? `EPSG:${geoKeys.GeographicTypeGeoKey}` : "EPSG:4326"; + + let minVal = Infinity, maxVal = -Infinity; + for (const v of data) if (!isNaN(v) && v !== 0) { minVal = Math.min(minVal, v); maxVal = Math.max(maxVal, v); } + + const canvas = Object.assign(document.createElement("canvas"), { width, height }); + const ctx = canvas.getContext("2d"); + ctx.imageSmoothingEnabled = false; + const imgData = ctx.createImageData(width, height); + + for (let i = 0; i < data.length; i++) { + const val = data[i]; + const idx = i * 4; + if (val === 0 || isNaN(val)) { + imgData.data[idx + 3] = 0; + } else { + const n = ((val - minVal) / (maxVal - minVal || 1)) * 255; + imgData.data[idx] = imgData.data[idx + 1] = imgData.data[idx + 2] = n; + imgData.data[idx + 3] = 255; + } + } + ctx.putImageData(imgData, 0, 0); + + const bounds = crsCode === "EPSG:4326" ? [[bbox[1], bbox[0]], [bbox[3], bbox[2]]] : transformBounds(bbox, crsCode); + if (ndviOverlays[source]) ndvimaps[source].removeLayer(ndviOverlays[source]); + ndviOverlays[source] = L.imageOverlay(canvas.toDataURL(), bounds, { opacity: 0.95 }).addTo(ndvimaps[source]); + ndvimaps[source].fitBounds(bounds); + } + const fmtDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; const dateFromDays = (days) => fmtDate(new Date(start.getTime() + days * 86400000)); const daysFromDate = (dateStr) => { @@ -201,6 +265,25 @@ return Math.floor((new Date(y, m - 1, d) - start) / 86400000); }; + async function findNDVIFile(dateStr, source) { + const target = new Date(dateStr); + for (let offset = 0; offset < 15; offset++) { + for (const dir of [0, -1, 1]) { + const d = new Date(target); + d.setDate(d.getDate() + offset * dir); + const date = d.toISOString().split("T")[0].replace(/-/g, ""); + for (let i = 0; i < 3; i++) { + const filename = `${date}_${i}.geotiff`; + try { + const res = await fetch(`../data/innsbruck/2024/ndvi/${source}/${filename}`); + if (res.ok) return filename; + } catch {} + } + } + } + return null; + } + async function updateImages() { const date = dateFromDays(parseInt(slider.value)); dateDisplay.textContent = date; @@ -215,6 +298,14 @@ console.error(`Error loading ${source}:`, e); } } + const ndviFilename = await findNDVIFile(date, source); + if (ndviFilename) { + try { + await loadNDVI(source, ndviFilename); + } catch (e) { + console.error(`Error loading NDVI ${source}:`, e); + } + } } }