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

WIP: Plus-Icon bei überlappende Marker ausblenden wenn nur eine oder keine sichtbar geschaltet werden in Checkboxen

Browse Source
This commit is contained in:
ISA
2024-12-12 20:53:56 +01:00
parent 3f2786849a
commit 251fe7235f
1 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
utils/mapUtils.js
View File

@@ -78,24 +78,34 @@ export const restoreMapSettings = (map) => {
}; };
// Now update checkOverlappingMarkers to check if oms is initialized // Now update checkOverlappingMarkers to check if oms is initialized
// Globales Array, um Plus-Icons zu speichern
let plusMarkers = [];
export const checkOverlappingMarkers = (map, markers, plusIcon) => { export const checkOverlappingMarkers = (map, markers, plusIcon) => {
const overlappingGroups = {}; const overlappingGroups = {};
// Gruppiere Marker basierend auf ihrer Position // Gruppiere Marker basierend auf ihrer Position
markers.forEach((marker) => { markers.forEach((marker) => {
const latlngStr = marker.getLatLng().toString(); if (map.hasLayer(marker)) { // Überprüfen, ob der Marker sichtbar ist
if (overlappingGroups[latlngStr]) { const latlngStr = marker.getLatLng().toString();
overlappingGroups[latlngStr].push(marker); if (overlappingGroups[latlngStr]) {
} else { overlappingGroups[latlngStr].push(marker);
overlappingGroups[latlngStr] = [marker]; } else {
overlappingGroups[latlngStr] = [marker];
}
} }
}); });
// Entferne alte Plus-Icons
plusMarkers.forEach((plusMarker) => map.removeLayer(plusMarker));
plusMarkers = [];
// Füge Plus-Icons für überlappende Marker hinzu // Füge Plus-Icons für überlappende Marker hinzu
for (const coords in overlappingGroups) { for (const coords in overlappingGroups) {
if (overlappingGroups[coords].length > 1) { if (overlappingGroups[coords].length > 1) {
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number)); const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
const plusMarker = L.marker(latLng, { icon: plusIcon }).addTo(map); const plusMarker = L.marker(latLng, { icon: plusIcon }).addTo(map);
plusMarkers.push(plusMarker); // Speichere das Plus-Icon
plusMarker.on("click", (e) => { plusMarker.on("click", (e) => {
const clickedLatLng = e.latlng; const clickedLatLng = e.latlng;
@@ -115,8 +125,15 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
}); });
} }
} }
// Entferne alle Plus-Icons, wenn keine Marker sichtbar sind
if (Object.keys(overlappingGroups).length === 0) {
plusMarkers.forEach((plusMarker) => map.removeLayer(plusMarker));
plusMarkers = [];
}
}; };
export const handlePlusIconClick = (map, markers, oms, clickedLatLng) => { export const handlePlusIconClick = (map, markers, oms, clickedLatLng) => {
// Debugging-Ausgabe // Debugging-Ausgabe
console.log("Plus-Icon Position:", clickedLatLng); console.log("Plus-Icon Position:", clickedLatLng);