diff --git a/static/css/globe.css b/static/css/globe.css
index 3c094e0..9286f99 100644
--- a/static/css/globe.css
+++ b/static/css/globe.css
@@ -552,3 +552,20 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
.ch-ring-1 { width: 200px; height: 200px; transform: translate(-50%, -50%); }
.ch-ring-2 { width: 400px; height: 400px; transform: translate(-50%, -50%); }
.ch-ring-3 { width: 600px; height: 600px; transform: translate(-50%, -50%); }
+
+
+/* === Imagery Selector === */
+.imagery-select {
+ width: 100%;
+ padding: 4px 6px;
+ background: rgba(255,255,255,0.05);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ cursor: pointer;
+ outline: none;
+}
+.imagery-select:hover { border-color: var(--accent); }
+.imagery-select option { background: var(--bg-primary); color: var(--text); }
diff --git a/static/index.html b/static/index.html
index 7975cb4..ef09bb1 100644
--- a/static/index.html
+++ b/static/index.html
@@ -129,6 +129,23 @@
+
+
+
SATELLITENBILDER
+
+
Cesium Ion (Standard)
+
+
LAT: -- LON: --
@@ -182,6 +199,7 @@
+
diff --git a/static/js/app.js b/static/js/app.js
index 718a515..2660f05 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -84,6 +84,7 @@ const Globe = {
this._toggleLabels(true);
if (typeof VisualModes !== 'undefined') VisualModes.init();
if (typeof Sidebar !== 'undefined') Sidebar.init();
+ if (typeof ImagerySwitch !== 'undefined') ImagerySwitch.init(this.viewer);
if (typeof SearchUI !== 'undefined') SearchUI.init();
this._loadLagen();
document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';
diff --git a/static/js/ui/imagery.js b/static/js/ui/imagery.js
new file mode 100644
index 0000000..54a07d2
--- /dev/null
+++ b/static/js/ui/imagery.js
@@ -0,0 +1,85 @@
+/**
+ * Imagery Switcher: Verschiedene Satellitenbilder + historische Aufnahmen.
+ */
+const ImagerySwitch = {
+ _viewer: null,
+ _currentLayer: null,
+ _currentId: 'default',
+
+ _sources: {
+ 'default': { name: 'Cesium Ion (Standard)', url: null },
+ 'esri': {
+ name: 'Esri World Imagery',
+ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+ },
+ 's2-2024': {
+ name: 'Sentinel-2 (2024)',
+ url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+ },
+ 's2-2023': {
+ name: 'Sentinel-2 (2023)',
+ url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+ },
+ 's2-2022': {
+ name: 'Sentinel-2 (2022)',
+ url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+ },
+ 's2-2020': {
+ name: 'Sentinel-2 (2020)',
+ url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+ },
+ 's2-2018': {
+ name: 'Sentinel-2 (2018)',
+ url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+ },
+ 'topo': {
+ name: 'OpenTopoMap',
+ url: 'https://tile.opentopomap.org/{z}/{x}/{y}.png',
+ },
+ 'osm': {
+ name: 'OpenStreetMap',
+ url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+ },
+ },
+
+ init(viewer) {
+ this._viewer = viewer;
+ },
+
+ switchTo(id) {
+ if (!this._viewer || this._currentId === id) return;
+ var src = this._sources[id];
+ if (!src) return;
+
+ // Alle eigenen Imagery-Layer entfernen (nicht den Cesium-Default und nicht Labels)
+ if (this._currentLayer) {
+ this._viewer.imageryLayers.remove(this._currentLayer);
+ this._currentLayer = null;
+ }
+
+ if (id === 'default') {
+ // Cesium Ion Default wiederherstellen — nichts tun, der ist immer da
+ this._currentId = id;
+ } else {
+ // Neuen Layer als untersten hinzufuegen (ueber dem Default)
+ this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: src.url,
+ maximumLevel: 18,
+ credit: src.name,
+ })
+ );
+ // Unter Labels aber ueber Default
+ this._viewer.imageryLayers.lower(this._currentLayer);
+ this._currentId = id;
+ }
+
+ // Dropdown aktualisieren
+ var sel = document.getElementById('imagery-select');
+ if (sel) sel.value = id;
+
+ // Status
+ var label = document.getElementById('imagery-label');
+ if (label) label.textContent = src.name;
+ },
+};