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(() => { useEffect(() => {
if (!map || !talasMarkers) return; if (!map || !talasMarkers) return;
const someLineCoordinatesforTalas = [ /* const someLineCoordinatesforTalas = [
[53.111111, 8.4625], [53.111111, 8.4625],
[53.111111, 8.4625], [53.111111, 8.4625],
[53.111111, 8.4625], [53.111111, 8.4625],
[53.111111, 8.4625], [53.111111, 8.4625],
]; ]; */
const toggleLayer = (isVisible) => { const toggleLayer = (isVisible) => {
if (isVisible) { if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
//console.log("talasMarkers", talasMarkers); //console.log("talasMarkers", talasMarkers);
//console.log("talasMarkers.color", talasMarkers.color); //console.log("talasMarkers.color", talasMarkers.color);
//talasMarkers.forEach((marker) => map.removeLayer(marker)); //talasMarkers.forEach((marker) => map.removeLayer(marker));
console.log("talasMarkers linePositions ", linePositions); /* console.log("talasMarkers linePositions ", linePositions);
const polyline = L.polyline(someLineCoordinatesforTalas, { const polyline = L.polyline(someLineCoordinatesforTalas, {
color: "green", color: "green",
}).addTo( }).addTo(
//Linien-Farbe /Farbe für die Strecke zwischen den Markern //Linien-Farbe /Farbe für die Strecke zwischen den Markern
TALAS TALAS
); ); */
} else { } else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
} }
@@ -2165,6 +2165,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Draw polyline // Draw polyline
const polyline = L.polyline(lineData.coordinates, { color }).addTo(map); 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 // Function to update the polyline when markers are dragged
markers.forEach((marker, index) => { 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}`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`; //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
//webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`; webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
//http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484 //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484