pantierra/efast-phenocam-validation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added phenocam download.

Browse source
This commit is contained in:
Felix Delattre 2026-01-11 14:27:46 +01:00
parent bf92a399e2
commit 68d894c59f
3 changed files with 185 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

32
webapp/index.html
View file

@ -20,6 +20,10 @@
.map-label { font-size: 12px; margin-bottom: 5px; color: #666; }
.map-date { font-size: 11px; margin-top: 5px; color: #999; }
.map { height: 500px; border: 1px solid #ccc; }
.phenocam-container { margin-top: 20px; width: 100%; }
.phenocam-label { font-size: 12px; margin-bottom: 5px; color: #666; }
.phenocam-date { font-size: 11px; margin-top: 5px; color: #999; }
.phenocam-image { width: 100%; max-height: 400px; object-fit: contain; border: 1px solid #ccc; }
.leaflet-image-layer { image-rendering: pixelated; }
.leaflet-control-attribution { display: none; }
</style>
@ -65,6 +69,11 @@
<div id="s3ndvimap" class="map"></div>
</div>
</div>
<div class="phenocam-container">
<div class="phenocam-label">PhenoCam Imagery</div>
<div id="phenocamdate" class="phenocam-date"></div>
<img id="phenocamimage" class="phenocam-image" alt="PhenoCam">
</div>
</div>
<script>
proj4.defs("EPSG:32632", "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
@ -335,6 +344,28 @@
return null;
}
async function loadPhenoCam(dateStr) {
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, "");
const url = `../data/innsbruck/2024/raw/phenocam/${date}.jpg`;
try {
const res = await fetch(url);
if (res.ok) {
document.getElementById("phenocamimage").src = url;
document.getElementById("phenocamdate").textContent = `${date.slice(0,4)}-${date.slice(4,6)}-${date.slice(6,8)}`;
return;
}
} catch {}
}
}
document.getElementById("phenocamimage").src = "";
document.getElementById("phenocamdate").textContent = "";
}
async function updateImages() {
const date = dateFromDays(parseInt(slider.value));
dateDisplay.textContent = date;
@ -360,6 +391,7 @@
}
}
}
await loadPhenoCam(date);
}
const urlParams = new URLSearchParams(location.search);