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

.env.development

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.320
+NEXT_PUBLIC_APP_VERSION=1.1.321

.env.production

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.320
+NEXT_PUBLIC_APP_VERSION=1.1.321

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.320",
+  "version": "1.1.321",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.320",
+      "version": "1.1.321",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.320",
+  "version": "1.1.321",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

public/config.json

@@ -1,9 +1,32 @@
 {
-  "//info": "tileSources: 'local' für offline, 'osm' für online",
+  "_comment": [
+    "tileSources: 'local' für offline, 'osm' für online",
+    "center: Startmittelpunkt der Karte (lat, lng)",
+    "zoomOutCenter: Zielkoordinaten für Herauszoomen (lat, lng)",
+    "minZoom/maxZoom: erlaubte Zoomstufen pro Quelle"
+  ],
   "tileSources": {
-    "local": "http://localhost/talas5/TileMap/mapTiles/{z}/{x}/{y}.png",
-    "osm": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    "local": {
+      "url": "http://localhost/talas5/TileMap/mapTiles/{z}/{x}/{y}.png",
+      "_comment": "Offline-Kartenquelle (lokal)",
+      "minZoom": 5,
+      "maxZoom": 15
+    },
+    "osm": {
+      "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      "_comment": "OpenStreetMap Online-Kartenquelle",
+      "minZoom": 0,
+      "maxZoom": 19
+    }
   },
   "active": "osm",
-  "basePath": "/talas5"
+  "_comment_active": "Aktive Kartenquelle: 'local' oder 'osm'",
+  "center": [53.111111, 8.4625],
+  "_comment_center": "Startmittelpunkt der Karte (lat, lng)",
+
+  "zoomOutCenter": [51.41321407879154, 7.739617925303934],
+  "_comment_zoomOutCenter": "Zielkoordinaten für Herauszoomen (lat, lng)",
+
+  "basePath": "/talas5",
+  "_comment_basePath": "Basis-URL für API und Routing"
 }

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()));
   }