diff --git a/.env.development b/.env.development index 65971fa6e..bbd825e72 100644 --- a/.env.development +++ b/.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 diff --git a/.env.production b/.env.production index 4f0d3c7d7..fd95a18ee 100644 --- a/.env.production +++ b/.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 diff --git a/package-lock.json b/package-lock.json index 5f10c77db..1de35c462 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3158041ea..8b5b127d2 100644 --- a/package.json +++ b/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", diff --git a/public/config.json b/public/config.json index 97329c276..11d00de99 100644 --- a/public/config.json +++ b/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" } diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 088727c16..dac1fc7fa 100644 --- a/utils/initializeMap.js +++ b/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); diff --git a/utils/zoomAndCenterUtils.js b/utils/zoomAndCenterUtils.js index 5bd87b9e2..9dc488c10 100644 --- a/utils/zoomAndCenterUtils.js +++ b/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())); }