feat: osm von server als proxy für den client

.env.development

@@ -23,4 +23,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.348
+NEXT_PUBLIC_APP_VERSION=1.1.349

.env.production

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.348
+NEXT_PUBLIC_APP_VERSION=1.1.349

package-lock.json

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

package.json

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

public/config.json

@@ -13,8 +13,8 @@
       "maxZoom": 15
     },
     "osm": {
-      "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      "url": "/tiles/{z}/{x}/{y}.png",
-      "_comment": "OpenStreetMap Online-Kartenquelle",
+      "_comment": "OpenStreetMap Online-Kartenquelle über Server-Proxy (relativ)",
       "minZoom": 0,
       "maxZoom": 19
     }

server.js

@@ -27,10 +27,35 @@ const extractData = (json, name) => {
 };
 
 app.prepare().then(() => {
-  const server = createServer((req, res) => {
+  const express = require("express");
+  const expressApp = express();
+  // Proxy-Route für Karten-Tiles
+  expressApp.get("/tiles/:z/:x/:y.png", async (req, res) => {
+    const { z, x, y } = req.params;
+    // OSM-Subdomain (a, b, c) zufällig wählen
+    const subdomains = ["a", "b", "c"];
+    const s = subdomains[Math.floor(Math.random() * subdomains.length)];
+    const tileUrl = `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`;
+    try {
+      const response = await fetch(tileUrl);
+      if (!response.ok) {
+        res.status(response.status).send("Tile not found");
+        return;
+      }
+      res.set("Content-Type", "image/png");
+      response.body.pipe(res);
+    } catch (err) {
+      res.status(500).send("Error fetching tile");
+    }
+  });
+
+  // Alle anderen Routen an Next.js
+  expressApp.all("*", (req, res) => {
     handle(req, res);
   });
 
+  const server = createServer(expressApp);
+
   const io = new Server(server);
 
   // ✅ Globaler Cache für alle aktuellen Daten

utils/initializeMap.js

@@ -89,6 +89,12 @@ export const initializeMap = (
       if (config.tileSources && config.active && config.tileSources[config.active]) {
         const tileSource = config.tileSources[config.active];
         tileLayerUrl = tileSource.url || tileLayerUrl;
+        // Dynamische URL für Server-Tiles
+        if (tileLayerUrl.startsWith("/tiles") || tileLayerUrl.startsWith("tiles")) {
+          tileLayerUrl = `${window.location.origin.replace(/\/$/, "")}${
+            tileLayerUrl.startsWith("/") ? tileLayerUrl : "/" + tileLayerUrl
+          }`;
+        }
         minZoom = tileSource.minZoom ?? minZoom;
         maxZoom = tileSource.maxZoom ?? maxZoom;
       }