Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamische ev.local und URL für Karte, Karte ist lokal zugreifen ohne IP zu ändern auf verschiedene Server

Browse Source
This commit is contained in:
ISA
2024-12-12 20:24:38 +01:00
parent 8a628c9f16
commit 4f154e262a
3 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -6,7 +6,7 @@ DB_USER=root
DB_PASSWORD="root#$"
DB_NAME=talas_v5
DB_PORT=3306
######################### Online Karte
######################### Karte die ist in /config/url.js
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
######################### Offline Karte
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"

4
config/urls.js
View File

@@ -12,7 +12,9 @@ if (typeof window !== "undefined") {
SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy
OFFLINE_TILE_LAYER = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
//OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
//OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
OFFLINE_TILE_LAYER = `${originWithoutPort}/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png`; //Map von Talas_v5 Server
//OFFLINE_TILE_LAYER = `${originWithoutPort}:3000/mapTiles/{z}/{x}/{y}.png`;
//OFFLINE_TILE_LAYER = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;
MAP_TILES_LAYER = OFFLINE_TILE_LAYER; // Standardwert

94
hooks/layers/useGmaMarkersLayer.js
View File

@@ -3,6 +3,49 @@ import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
const zoomIn = (e, map) => {
if (!map) {
console.error("map is not defined in zoomIn");
return;
}
const currentZoom = map.getZoom();
if (currentZoom < 14) {
map.flyTo(e.latlng, 14);
localStorage.setItem("mapZoom", 16);
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}
};
const zoomOut = (map) => {
if (!map) {
console.error("map is not defined in zoomOut");
return;
}
const currentZoom = map.getZoom();
if (currentZoom > 7) {
const x = 51.41321407879154;
const y = 7.739617925303934;
const zoom = 7;
map.flyTo([x, y], zoom);
localStorage.setItem("mapZoom", zoom);
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
}
};
const centerHere = (e, map) => {
if (!map) {
console.error("map is not defined in centerHere");
return;
}
map.panTo(e.latlng);
localStorage.setItem("mapZoom", map.getZoom());
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
};
const protocol = window.location.protocol; // Holt das Protokoll (z.B. http oder https)
const hostname = window.location.hostname; // Holt den Hostnamen (z.B. 10.10.0.70)
const baseUrl = `${protocol}//${hostname}/talas5/devices/`; // Basis-URL zusammenstellen
@@ -64,6 +107,7 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt");
// Kombiniere die Kontextmenü-Items
// Kombiniere die Kontextmenü-Items
const combinedContextMenuItems = [
{
@@ -80,32 +124,34 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
},
},
{ separator: true },
// Füge zusätzliche Items hinzu
...[
{
text: "Koordinaten anzeigen",
icon: "/img/not_listed_location.png",
callback: (e) => {
alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
},
//Koordinaten anzeigen auf den gesamte Tooltip fläche ist ein Wert, deswegen ausgeblendet
/* {
text: "Koordinaten anzeigen",
icon: "/img/not_listed_location.png",
callback: () => {
const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker
alert("Breitengrad: " + latlng.lat.toFixed(5) + "\nLängengrad: " + latlng.lng.toFixed(5));
},
{ separator: true },
{
text: "Reinzoomen",
icon: "img/zoom_in.png",
callback: () => map.zoomIn(),
}, */
{ separator: true },
{
text: "Reinzoomen",
icon: "img/zoom_in.png",
callback: () => zoomIn(map),
},
{
text: "Rauszoomen",
icon: "img/zoom_out.png",
callback: () => zoomOut(map),
},
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: () => {
const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker
centerHere({ latlng }, map);
},
{
text: "Rauszoomen",
icon: "img/zoom_out.png",
callback: () => map.zoomOut(),
},
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: (e) => map.panTo(e.latlng),
},
],
},
];
// Benutzerdefiniertes Kontextmenü anzeigen