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

add: Event-Listener zu den Polylinien hinzufügen, um die Breite der Linie bei Mouseover zu ändern. lokaler API-Endpoint-Funktion

Browse Source
This commit is contained in:
ISA
2024-06-19 06:42:03 +02:00
parent 0b28058496
commit 8947eef70f
3 changed files with 15 additions and 2355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2349
components/MapComponent - Kopie.js
View File

File diff suppressed because it is too large Load Diff

17
components/MapComponent.js
View File

@@ -1727,25 +1727,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
if (!map || !talasMarkers) return;
const someLineCoordinatesforTalas = [
/* const someLineCoordinatesforTalas = [
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
];
]; */
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
//console.log("talasMarkers", talasMarkers);
//console.log("talasMarkers.color", talasMarkers.color);
//talasMarkers.forEach((marker) => map.removeLayer(marker));
console.log("talasMarkers linePositions ", linePositions);
/* console.log("talasMarkers linePositions ", linePositions);
const polyline = L.polyline(someLineCoordinatesforTalas, {
color: "green",
}).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS
);
); */
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
@@ -2165,6 +2165,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Draw polyline
const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
// Add mouseover and mouseout events to change the polyline width
polyline.on("mouseover", () => {
polyline.setStyle({ weight: 8 }); // Increase width on hover
});
polyline.on("mouseout", () => {
polyline.setStyle({ weight: 5 }); // Reset width when not hovered (default width can be adjusted)
});
//---------------------------
// Function to update the polyline when markers are dragged
markers.forEach((marker, index) => {

4
config/config.js
View File

@@ -37,8 +37,8 @@ if (typeof window !== "undefined") {
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
//webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
//webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
//http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484