feat: 3D-Gebaeude Layer (OSM Buildings via Cesium Ion)

- Weltweite 3D-Gebaeude mit Hoehen aus OpenStreetMap
- Farbcodiert: Militaer (rot), Industrie (orange), Regierung (blau), Rest (grau)
- Toggle in Gruppe INFRASTRUKTUR
- Kostenlos via Cesium Ion OSM Buildings Tileset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/css/globe.css

@@ -795,6 +795,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 .dot-nightlights { background: #ffd740; box-shadow: 0 0 4px rgba(255,215,64,0.4); }
 .dot-celltowers { background: #e040fb; }
 .dot-firms { background: #ff4400; box-shadow: 0 0 4px rgba(255,68,0,0.4); }
+.dot-buildings { background: #88aacc; box-shadow: 0 0 4px rgba(136,170,204,0.4); }
 
 .geoint-btn-row {
     display: flex;

static/index.html

@@ -186,7 +186,7 @@
             <div class="layer-group-header" data-group="group-infra">
                 <span class="layer-group-chevron">&#9656;</span>
                 <span class="layer-group-title" style="color:#ffdd00">INFRASTRUKTUR</span>
-                <span class="layer-group-count" id="gcount-infra">0/4</span>
+                <span class="layer-group-count" id="gcount-infra">0/5</span>
             </div>
             <div class="layer-group-content">
                 <label class="layer-toggle">
@@ -216,6 +216,7 @@
                     <span class="layer-dot dot-iss"></span>
                     <span class="layer-name">ISS Tracker</span>
                 </label>
+                <label class="layer-toggle">                    <input type="checkbox" id="layer-buildings" title="3D-Gebaeude weltweit aus OpenStreetMap (farbcodiert: Militaer, Industrie, Regierung)">                    <span class="layer-dot dot-buildings"></span>                    <span class="layer-name">3D-Gebaeude</span>                </label>
             </div>
         </div>
 
@@ -337,6 +338,7 @@
     <script src="/static/js/layers/iss.js"></script>
     <script src="/static/js/layers/terminator.js"></script>
     <script src="/static/js/layers/timezones.js"></script>
+    <script src="/static/js/layers/buildings.js"></script>
     <script src="/static/js/layers/firms.js"></script>
     <script src="/static/js/layers/weather.js"></script>
     <script src="/static/js/ui/imagery.js"></script>

static/js/app.js

@@ -185,6 +185,7 @@ const Globe = {
             'layer-nightlights': function(on) { on ? NightlightsLayer.start(Globe.viewer) : NightlightsLayer.stop(); },
             'layer-celltowers': function(on) { on ? CelltowersLayer.start(Globe.viewer) : CelltowersLayer.stop(); },
             'layer-iss': function(on) { on ? ISSLayer.start(Globe.viewer) : ISSLayer.stop(); },
+            'layer-buildings': function(on) { on ? BuildingsLayer.start(Globe.viewer) : BuildingsLayer.stop(); },
             'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },
             'layer-weather': function(on) { on ? WeatherLayer.start(Globe.viewer) : WeatherLayer.stop(); },
             'layer-firms': function(on) { on ? FirmsLayer.start(Globe.viewer) : FirmsLayer.stop(); },

static/js/layers/buildings.js

@@ -0,0 +1,36 @@
+/**
+ * 3D-Gebaeude-Layer: OpenStreetMap Buildings via Cesium Ion.
+ * Zeigt weltweite 3D-Gebaeude mit Hoehen aus OSM-Daten.
+ */
+const BuildingsLayer = {
+    _viewer: null,
+    _tileset: null,
+
+    start: function(viewer) {
+        if (this._tileset) return;
+        this._viewer = viewer;
+        var self = this;
+        Cesium.createOsmBuildingsAsync().then(function(tileset) {
+            if (!self._viewer) return;
+            self._tileset = tileset;
+            self._tileset.style = new Cesium.Cesium3DTileStyle({
+                color: {
+                    conditions: [
+                        ["${feature['building']} === 'military'", "color('#ff2222', 0.7)"],
+                        ["${feature['building']} === 'industrial'", "color('#ff8800', 0.6)"],
+                        ["${feature['building']} === 'government' || ${feature['building']} === 'public'", "color('#4488ff', 0.6)"],
+                        ["true", "color('#88aacc', 0.45)"],
+                    ],
+                },
+            });
+            self._viewer.scene.primitives.add(self._tileset);
+        });
+    },
+
+    stop: function() {
+        if (this._tileset && this._viewer) {
+            this._viewer.scene.primitives.remove(this._tileset);
+            this._tileset = null;
+        }
+    },
+};