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

Tooltip für die Linien an Maus-Koordinaten positionieren

Browse Source
This commit is contained in:
ISA
2024-09-10 13:06:03 +02:00
parent 5676208265
commit d57d86cf6c
2 changed files with 73 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
.env.local
View File

@@ -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"

53
components/MapComponent.js
View File

@@ -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) {