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);
+ }
+ }
}
}