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

feat:Linien Mouse over polyline.setStyle

Browse Source
This commit is contained in:
ISA
2024-07-11 13:11:40 +02:00
parent cd3d84f12c
commit f75db21738
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/CircleIcon.js
View File

@@ -5,7 +5,7 @@ import "leaflet/dist/leaflet.css";
const circleIcon = L.divIcon({ const circleIcon = L.divIcon({
className: "custom-div-icon", className: "custom-div-icon",
html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;'></div>", html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;border: solid black 1px;'></div>",
iconSize: [25, 25], iconSize: [25, 25],
iconAnchor: [5, 5], iconAnchor: [5, 5],
}); });

2
components/EndIcon.js
View File

@@ -2,7 +2,7 @@
import L from "leaflet"; import L from "leaflet";
const endIcon = L.divIcon({ const endIcon = L.divIcon({
className: "custom-end-icon", className: "custom-end-icon",
html: "<div style='background-color: gray; width: 14px; height: 14px;'></div>", // Graues Viereck html: "<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>", // Graues Viereck
iconSize: [14, 14], iconSize: [14, 14],
iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
}); });

9
components/MapComponent.js
View File

@@ -1944,10 +1944,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
updatedPolyline.on("mouseover", () => { updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 10 }); updatedPolyline.setStyle({ weight: 10 });
updatedPolyline.bringToFront(); updatedPolyline.bringToFront();
console.log("Mouse over");
}); });
updatedPolyline.on("mouseout", () => { updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 }); updatedPolyline.setStyle({ weight: 3 });
console.log("Mouse out"); console.log("Mouse out");
}); });
@@ -2045,10 +2044,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
// Optional: Visualisiere, dass die Linie interaktiv ist // Optional: Visualisiere, dass die Linie interaktiv ist
polyline.setStyle({ color: "blue", weight: 10 }); //polyline.setStyle({ color: "blue", weight: 10 });
polyline.setStyle({ weight: 10 });
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
//polyline.setStyle({ color: "blue", weight: 3 });
polyline.setStyle({ weight: 3 });
// Setze die ursprüngliche Farbe zurück // Setze die ursprüngliche Farbe zurück
polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" }); polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
}); });