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

Füge: Plus-Icon hinzu, wenn Stationen überlappen

Browse Source 
- Funktion `checkOverlappingMarkers` hinzugefügt, die prüft, ob Marker überlappen, und bei Bedarf ein Plus-Icon anzeigt.
- Sichert ab, dass die Marker-Liste immer ein Array ist, um Fehler zu vermeiden.
- Verwendet `L.latLng` und `L.marker` für die präzise Positionierung des Plus-Icons bei überlappenden Stationen.
- Aktualisierte den Zustand für verschiedene Marker-Typen und Layer, um eine korrekte Anzeige sicherzustellen.
- Optimierte die Anzeige der Stationen und verbesserte die Tooltip- und Popup-Interaktionen.

Dieses Update verbessert die Übersichtlichkeit der Karte und vereinfacht das Navigieren bei überlappenden Stationen.
This commit is contained in:
ISA
2024-05-06 12:04:27 +02:00
parent af89d6827a
commit 297bc32dba
1 changed files with 129 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
components/MapComponent.js
View File

@@ -21,6 +21,14 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
//import { createRoot } from "react-dom/client";
const plusRoundIcon = L.icon({
//iconUrl: "/img/plus_round.png", // Update with your actual path
iconUrl: "/img/plus_round.png", // Update with your actual path
iconSize: [32, 32],
iconAnchor: [35, 55],
className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
});
const MapComponent = ({ locations, onLocationUpdate }) => {
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
const [poiTypMap, setPoiTypMap] = useState(new Map());
@@ -308,12 +316,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initMap);
const oms = new window.OverlappingMarkerSpiderfier(initMap, {
nearbyDistance: 20,
});
const overlappingMarkerSpiderfier =
new window.OverlappingMarkerSpiderfier(initMap, {
nearbyDistance: 20,
});
setMap(initMap);
setOms(oms);
setOms(overlappingMarkerSpiderfier);
initMap.on("zoomend", function () {
// Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
@@ -660,6 +669,16 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
marker.addTo(poiLayerRef.current);
/* //--------------
const plusMarker = L.marker([latitude, longitude], {
icon: plusRoundIcon,
zIndexOffset: 1000, // Higher z-index for visibility
});
// Add to the poiLayer
plusMarker.addTo(poiLayerRef.current);
console.log("Adding plus icon marker at", [latitude, longitude]);
//------------ */
});
}
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
@@ -815,6 +834,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
talasMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
@@ -823,8 +843,23 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
/* //--------------
const latitude = marker._latlng.lat;
const longitude = marker._latlng.lng;
const plusMarker = L.marker([latitude, longitude], {
icon: plusRoundIcon,
zIndexOffset: 1000, // Higher z-index for visibility
});
// Add to the poiLayer
plusMarker.addTo(poiLayerRef.current);
console.log("Adding plus icon marker at", [latitude, longitude]);
//------------ */
});
map.addLayer(TALAS);
// Call the function here
checkOverlappingMarkers(oms, map, plusRoundIcon);
}
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
@@ -847,7 +882,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(ECI);
}
}, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, eciMarkers]);
//console.log("eciMarkers", eciMarkers);
//-------------------------------------------
@@ -868,7 +903,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(GSMModem);
}
}, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, gsmModemMarkers]);
//console.log("gsmModemMarkers", gsmModemMarkers);
//-------------------------------------------
@@ -889,7 +924,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(CiscoRouter);
}
}, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, ciscoRouterMarkers]);
//console.log("ciscoRouterMarkers", ciscoRouterMarkers);
//-------------------------------------------
@@ -912,7 +947,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//toggleLayer(mapLayersVisibility.WAGO);
}
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
}, [map, wagoMarkers]);
//console.log("wagoMarkers", wagoMarkers);
//-------------------------------------------
@@ -933,7 +968,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(Siemens);
}
}, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, siemensMarkers]);
//console.log("siemensMarkers", siemensMarkers);
//-------------------------------------------
@@ -954,7 +989,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(OTDR);
}
}, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, otdrMarkers]);
//console.log("otdrMarkers", otdrMarkers);
//-------------------------------------------
@@ -975,7 +1010,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(WDM);
}
}, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, wdmMarkers]);
//console.log("wdmMarkers", wdmMarkers);
//-------------------------------------------
@@ -1078,7 +1113,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(GMA);
}
}, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, messstellenMarkers]);
//console.log("messstellenMarkers", messstellenMarkers);
//-------------------------------------------
@@ -1099,7 +1134,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
map.addLayer(TALASICL);
}
}, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, talasiclMarkers]);
//console.log("talasiclMarkers", talasiclMarkers);
//-------------------------------------------
@@ -1119,7 +1154,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
});
}
}, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, dauzMarkers]);
//console.log("dauzMarkers", dauzMarkers);
//-------------------------------------------
@@ -1139,7 +1174,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
});
}
}, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, smsfunkmodemMarkers]);
//console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
//-------------------------------------------
@@ -1159,7 +1194,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
});
}
}, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, ulafMarkers]);
//console.log("ulafMarkers", ulafMarkers);
//-------------------------------------------
@@ -1179,7 +1214,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
});
}
}, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, sonstigeMarkers]);
//console.log("sonstige", sonstigeMarkers);
//-------------------------------------------
@@ -1550,6 +1585,83 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Logik zur Aktualisierung der Map hier hinzufügen
// Beispiel: Daten neu laden oder aktualisieren
}, [poiReadTrigger]);
//---------------------------------------------------------
// Now update checkOverlappingMarkers to check if oms is initialized
function checkOverlappingMarkers(map, markers, plusIcon) {
// Ensure markers is always an array
if (!Array.isArray(markers)) {
console.error("The `markers` argument is not an array:", markers);
return;
}
const overlappingGroups = {};
// Group markers by coordinates as strings
markers.forEach((marker) => {
const latlngStr = marker.getLatLng().toString();
if (overlappingGroups[latlngStr]) {
overlappingGroups[latlngStr].push(marker);
} else {
overlappingGroups[latlngStr] = [marker];
}
});
// Add plus markers at coordinates where overlaps occur
for (const coords in overlappingGroups) {
if (overlappingGroups[coords].length > 1) {
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
const plusMarker = L.marker(latLng, { icon: plusIcon });
plusMarker.addTo(map);
console.log("Adding plus icon marker at", latLng);
}
}
}
//---------------------------------------------------------
useEffect(() => {
if (map) {
// Combine all markers from different layers
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...ulafMarkers,
];
// Call the function to check for overlaps and add plus icons
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}
}, [
map,
talasMarkers,
eciMarkers,
gsmModemMarkers,
ciscoRouterMarkers,
wagoMarkers,
siemensMarkers,
otdrMarkers,
wdmMarkers,
gmaMarkers,
messstellenMarkers,
talasiclMarkers,
dauzMarkers,
smsfunkmodemMarkers,
sonstigeMarkers,
ulafMarkers,
]);
//---------------------------------------------------------
return (