Synced zoom and pan across all maps.

This commit is contained in:
Felix Delattre 2026-01-11 14:35:32 +01:00
parent 68d894c59f
commit 9981482636

View file

@ -108,6 +108,22 @@
ndviMarkers[source] = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:5px;height:5px;background:red;border:1px solid white;border-radius:50%;box-shadow:0 0 1px rgba(0,0,0,0.5);'></div>", iconSize: [5, 5] }) }).addTo(ndvimaps[source]); ndviMarkers[source] = L.marker(sitePosition, { icon: L.divIcon({ className: "site-marker", html: "<div style='width:5px;height:5px;background:red;border:1px solid white;border-radius:50%;box-shadow:0 0 1px rgba(0,0,0,0.5);'></div>", iconSize: [5, 5] }) }).addTo(ndvimaps[source]);
} }
let syncing = false;
const allMaps = Object.values(maps).concat(Object.values(ndvimaps));
const syncMaps = (sourceMap) => {
if (syncing) return;
syncing = true;
const center = sourceMap.getCenter();
const zoom = sourceMap.getZoom();
allMaps.forEach(m => {
if (m !== sourceMap) m.setView(center, zoom);
});
syncing = false;
};
allMaps.forEach(m => {
m.on("moveend zoomend", () => syncMaps(m));
});
async function loadTimeseries() { async function loadTimeseries() {
const [s2, fusion, s3] = await Promise.all([ const [s2, fusion, s3] = await Promise.all([
fetch("../data/innsbruck/2024/processed/ndvi/s2/timeseries.json").then(r => r.json()), fetch("../data/innsbruck/2024/processed/ndvi/s2/timeseries.json").then(r => r.json()),