feat(config): Map-Parameter (Zoom, Center, etc.) in config.json ausgelagert

- minZoom, maxZoom, center, zoomOutCenter und basePath in config.json konfigurierbar gemacht
- Kommentare zur Erklärung als _comment-Felder ergänzt
- initializeMap.js und zoomAndCenterUtils.js angepasst, um Werte aus config.json zu lesen
- OSM-Standards für Zoom-Stufen dokumentiert

utils/initializeMap.js

@@ -61,9 +61,14 @@ export const initializeMap = (
   }
 
   let tileLayerUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  let minZoom = 5;
+  let maxZoom = 15;
+  let mapCenter = [53.111111, 8.4625];
   try {
-    if (window && window.__tileSource) {
-      tileLayerUrl = window.__tileSource;
+    if (window && window.__tileSource && window.__tileSourceUrl) {
+      tileLayerUrl = window.__tileSourceUrl;
+      minZoom = window.__tileSourceMinZoom;
+      maxZoom = window.__tileSourceMaxZoom;
     } else {
       // Synchronous config fetch using XMLHttpRequest (since fetch is async)
       const xhr = new XMLHttpRequest();
@@ -72,8 +77,18 @@ export const initializeMap = (
       if (xhr.status === 200) {
         const config = JSON.parse(xhr.responseText);
         if (config.tileSources && config.active && config.tileSources[config.active]) {
-          window.__tileSource = config.tileSources[config.active];
-          tileLayerUrl = window.__tileSource;
+          const source = config.tileSources[config.active];
+          tileLayerUrl = source.url;
+          minZoom = source.minZoom;
+          maxZoom = source.maxZoom;
+          window.__tileSourceUrl = tileLayerUrl;
+          window.__tileSourceMinZoom = minZoom;
+          window.__tileSourceMaxZoom = maxZoom;
+          if (source.center && Array.isArray(source.center) && source.center.length === 2) {
+            mapCenter = source.center;
+          } else if (config.center && Array.isArray(config.center) && config.center.length === 2) {
+            mapCenter = config.center;
+          }
         }
       }
     }
@@ -84,10 +99,10 @@ export const initializeMap = (
   let initMap;
   try {
     initMap = L.map(mapContainer, {
-      center: [53.111111, 8.4625],
-      zoom: 12,
-      minZoom: 5,
-      maxZoom: 15,
+      center: mapCenter,
+      zoom: minZoom,
+      minZoom: minZoom,
+      maxZoom: maxZoom,
       zoomControl: false,
       dragging: true,
       contextmenu: true,
@@ -108,8 +123,8 @@ export const initializeMap = (
   L.tileLayer(tileLayerUrl, {
     attribution: "© Eigene Kartenquelle (offline)",
     tileSize: 256,
-    minZoom: 5,
-    maxZoom: 15,
+    minZoom: minZoom,
+    maxZoom: maxZoom,
     noWrap: true,
     errorTileUrl: "/img/empty-tile.png", // Optional
   }).addTo(initMap);

utils/zoomAndCenterUtils.js

@@ -15,29 +15,71 @@ export const zoomIn = (e, map) => {
     return;
   }
 
-  const currentZoom = map.getZoom();
+  let maxZoom = 19;
+  try {
+    if (window && window.__tileSourceMaxZoom !== undefined) {
+      maxZoom = window.__tileSourceMaxZoom;
+    } else {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", "/config.json", false);
+      xhr.send(null);
+      if (xhr.status === 200) {
+        const config = JSON.parse(xhr.responseText);
+        if (config.tileSources && config.active && config.tileSources[config.active]) {
+          maxZoom = config.tileSources[config.active].maxZoom;
+        }
+      }
+    }
+  } catch (e) {}
 
-  if (currentZoom < 14) {
-    map.flyTo(e.latlng, 14);
-    localStorage.setItem("mapZoom", 16);
+  const currentZoom = map.getZoom();
+  if (currentZoom < maxZoom) {
+    map.flyTo(e.latlng, currentZoom + 1);
+    localStorage.setItem("mapZoom", currentZoom + 1);
     localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
   }
 };
 
-export const zoomOut = (map) => {
+export const zoomOut = map => {
   if (!map) {
     console.error("map is not defined in zoomOut");
     return;
   }
 
+  let minZoom = 5;
+  try {
+    if (window && window.__tileSourceMinZoom !== undefined) {
+      minZoom = window.__tileSourceMinZoom;
+    } else {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", "/config.json", false);
+      xhr.send(null);
+      if (xhr.status === 200) {
+        const config = JSON.parse(xhr.responseText);
+        if (config.tileSources && config.active && config.tileSources[config.active]) {
+          minZoom = config.tileSources[config.active].minZoom;
+        }
+      }
+    }
+  } catch (e) {}
+
   const currentZoom = map.getZoom();
+  if (currentZoom > minZoom) {
+    let zoomOutCenter = [51.41321407879154, 7.739617925303934];
+    try {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", "/config.json", false);
+      xhr.send(null);
+      if (xhr.status === 200) {
+        const config = JSON.parse(xhr.responseText);
+        if (Array.isArray(config.zoomOutCenter) && config.zoomOutCenter.length === 2) {
+          zoomOutCenter = config.zoomOutCenter;
+        }
+      }
+    } catch (e) {}
+    const zoom = minZoom;
 
-  if (currentZoom > 7) {
-    const x = 51.41321407879154;
-    const y = 7.739617925303934;
-    const zoom = 7;
-
-    map.flyTo([x, y], zoom);
+    map.flyTo(zoomOutCenter, zoom);
     localStorage.setItem("mapZoom", zoom);
     localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
   }