From 5e354f7e8e3a5e4ca78fe23a64fe79030f518e3b Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 5 Jun 2026 09:20:41 +0200
Subject: [PATCH] =?UTF-8?q?MapLibre-Migration=20M1:=20Geometrie-Style-Modu?=
 =?UTF-8?q?l=20(MapGLStyle,=20Light+Dark,=20kein=20Glyph)=20f=C3=BCr=20zen?=
 =?UTF-8?q?trale=20Karte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/js/map-gl-style.js | 60 +++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 backend/static/js/map-gl-style.js

diff --git a/backend/static/js/map-gl-style.js b/backend/static/js/map-gl-style.js
new file mode 100644
index 0000000..b4fe7d5
--- /dev/null
+++ b/backend/static/js/map-gl-style.js
@@ -0,0 +1,60 @@
+// MapLibre-GL-Style für die zentrale Karte — gerendert aus unseren DACH-PMTiles
+// (OpenMapTiles-Schema). GPU + Worker → performant auf dem Handy (Ziel der Migration).
+// GEOMETRIE-ONLY (keine Symbol/Text-Layer) → KEINE Glyphs/Fonts nötig für den ersten
+// Perf-Test. Labels (mit Glyph-Hosting) kommen in M3, wenn die Performance steht.
+(function () {
+  'use strict';
+
+  var TILES_FILE = 'dach.pmtiles';
+  function tilesUrl() { return window.location.origin + '/tiles/' + TILES_FILE; }
+
+  var THEMES = {
+    light: {
+      bg: '#f4f1ec', land: '#dce8c8', park: '#c8e6b0', water: '#a0c8f0',
+      road: '#ffffff', roadCasing: '#d9cfc2', building: '#e6ddcf',
+      buildingLine: '#d4cabb', boundary: '#b08ac0',
+    },
+    dark: {
+      bg: '#1a1d21', land: '#222820', park: '#27331f', water: '#16242e',
+      road: '#3a4046', roadCasing: '#23282d', building: '#262b30',
+      buildingLine: '#31373d', boundary: '#7d5a8c',
+    },
+  };
+
+  // Liefert ein MapLibre-Style-JSON (Version 8) ohne glyphs/sprite.
+  function build(opts) {
+    opts = opts || {};
+    var t = THEMES[opts.dark ? 'dark' : 'light'];
+    return {
+      version: 8,
+      sources: {
+        by: { type: 'vector', url: 'pmtiles://' + tilesUrl() },
+      },
+      layers: [
+        { id: 'bg', type: 'background', paint: { 'background-color': t.bg } },
+        { id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover',
+          paint: { 'fill-color': t.land, 'fill-opacity': 0.55 } },
+        { id: 'park', type: 'fill', source: 'by', 'source-layer': 'park',
+          paint: { 'fill-color': t.park, 'fill-opacity': 0.5 } },
+        { id: 'water', type: 'fill', source: 'by', 'source-layer': 'water',
+          paint: { 'fill-color': t.water } },
+        { id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway',
+          paint: { 'line-color': t.water, 'line-width': 1 } },
+        { id: 'road-casing', type: 'line', source: 'by', 'source-layer': 'transportation',
+          minzoom: 11,
+          paint: { 'line-color': t.roadCasing,
+            'line-width': ['interpolate', ['linear'], ['zoom'], 11, 2, 16, 6] } },
+        { id: 'roads', type: 'line', source: 'by', 'source-layer': 'transportation',
+          paint: { 'line-color': t.road,
+            'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 12, 1.5, 16, 4] } },
+        { id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building',
+          minzoom: 13,
+          paint: { 'fill-color': t.building, 'fill-outline-color': t.buildingLine } },
+        { id: 'boundary', type: 'line', source: 'by', 'source-layer': 'boundary',
+          paint: { 'line-color': t.boundary, 'line-dasharray': [2, 2], 'line-width': 1 } },
+      ],
+    };
+  }
+
+  window.MapGLStyle = { build: build, tilesUrl: tilesUrl, tilesFile: TILES_FILE };
+})();