diff --git a/.env.local b/.env.local index 905d3f37a..9f1fbbc78 100644 --- a/.env.local +++ b/.env.local @@ -1,37 +1,32 @@ #.env.local #je nach dem Mysql Server, ob localhost freigegeben ist oder die IP Adresse des Servers, manchmal die beide und manchmal nur eine -DB_HOST=10.10.0.30 +#DB_HOST=10.10.0.30 +#DB_USER=root +#DB_PASSWORD="root#$" +#DB_NAME=talas_v5 +#DB_PORT=3306 +######################### + +#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" +#NEXT_PUBLIC_SERVER_URL="http://10.10.0.30" +#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png" +######################### + + +DB_HOST=10.10.0.70 DB_USER=root DB_PASSWORD="root#$" DB_NAME=talas_v5 DB_PORT=3306 - ######################### NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" -NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30" -NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png" -NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" -######################### - - -#DB_HOST=10.10.0.70 -#DB_USER=root -#DB_PASSWORD="root#$" -#DB_NAME=talas_v5 -#DB_PORT=3306 - - -######################### - -#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" -#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" +NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" +NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" ######################### #DB_HOST=192.168.10.167 @@ -45,3 +40,6 @@ NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.pn #NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" #NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" + +######################### online +#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file diff --git a/components/MapComponent.js b/components/MapComponent.js index 0d3db4781..d55855bd6 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -499,17 +499,70 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { fetchData(); }, []); + //Tooltip an mouse position anzeigen für die Linien useEffect(() => { if (!map) return; + // Entferne alte Marker und Polylinien markers.forEach((marker) => marker.remove()); polylines.forEach((polyline) => polyline.remove()); + // Setze neue Marker und Polylinien mit den aktuellen Daten const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker); + newPolylines.forEach((polyline, index) => { + const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt"; + + polyline.bindTooltip(tooltipContent, { + permanent: false, + direction: "auto", + sticky: true, + offset: [0, 10], + pane: "tooltipPane", + }); + + // Mausbewegung tracken + polyline.on("mouseover", (e) => { + const tooltip = polyline.getTooltip(); + if (tooltip) { + const mousePos = e.containerPoint; // Mausposition relativ zur Karte + const mapSize = map.getSize(); // Größe der Karte + + // Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt + let direction = "right"; // Standard-Richtung + + if (mousePos.x > mapSize.x - 100) { + direction = "left"; // Bewege den Tooltip nach links, wenn der Mauszeiger nahe dem rechten Rand ist + } else if (mousePos.x < 100) { + direction = "right"; // Bewege den Tooltip nach rechts, wenn der Mauszeiger nahe dem linken Rand ist + } + + if (mousePos.y > mapSize.y - 100) { + direction = "top"; // Bewege den Tooltip nach oben, wenn der Mauszeiger nahe dem unteren Rand ist + } else if (mousePos.y < 100) { + direction = "bottom"; // Bewege den Tooltip nach unten, wenn der Mauszeiger nahe dem oberen Rand ist + } + + // Setze die neue Richtung und öffne den Tooltip + tooltip.options.direction = direction; + polyline.openTooltip(e.latlng); + } + }); + + /* polyline.on("mouseover", () => { + polyline.openTooltip(); + }); */ + + polyline.on("mouseout", () => { + polyline.closeTooltip(); + }); + }); + setMarkers(newMarkers); setPolylines(newPolylines); }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]); + // }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]); + //-------------------------------------------- useEffect(() => { if (map) {