${area_name}
LT : ${measurements.LT} °C
FBT : ${measurements.FBT} °C
GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}
RLF : ${measurements.RLF} %
`,
{
permanent: true, // Tooltip wird ständig angezeigt
direction: "auto", // Automatische Ausrichtung
offset: [20, 0], // Offset-Werte
}
);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
map.addLayer(GMA);
}
}, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
//console.log("gmaMarkers", gmaMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && messstellenMarkers.length) {
messstellenMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
map.addLayer(GMA);
}
}, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("messstellenMarkers", messstellenMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && talasiclMarkers.length) {
talasiclMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
map.addLayer(TALASICL);
}
}, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("talasiclMarkers", talasiclMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && dauzMarkers.length) {
dauzMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("dauzMarkers", dauzMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && smsfunkmodemMarkers.length) {
smsfunkmodemMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && ulafMarkers.length) {
ulafMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("ulafMarkers", ulafMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && sonstigeMarkers.length) {
sonstigeMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("sonstige", sonstigeMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
const mapLayersVisibility = useRecoilValue(mapLayersState);
/* useEffect(() => {
if (!map || !talasMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility state to the TALAS layer
toggleLayer(mapLayersVisibility.TALAS);
}, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state
const handleCheckboxChange = (name, event) => {
const { checked } = event.target;
const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
setMapLayersVisibility((prev) => {
return {
...prev,
[internalName]: checked,
};
});
};
//------------------------------------------
// Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
useEffect(() => {
if (!map || !talasMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility state to the TALAS layer
toggleLayer(mapLayersVisibility.TALAS);
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
useEffect(() => {
if (!map || !eciMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility state to the ECI layer
toggleLayer(mapLayersVisibility.ECI);
}, [map, eciMarkers, mapLayersVisibility.ECI]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
useEffect(() => {
if (!map || !ulafMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.ULAF);
}, [map, ulafMarkers, mapLayersVisibility.ULAF]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
useEffect(() => {
if (!map || !gsmModemMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.GSMModem);
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
//------------------------------------------ */
const layerNames = {
"GSM Modem": "GSMMODEM",
"Cisco Router": "CiscoRouter",
"TALAS ICL": "TALASICL",
"SMS-Funkmodem": "GSMModem",
};
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
useEffect(() => {
if (!map || !ciscoRouterMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
} else {
ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
}
};
// Nutzt die Map, um den internen Namen zu bekommen
const internalName = layerNames["Cisco Router"] || "CiscoRouter";
toggleLayer(mapLayersVisibility[internalName]);
//console.log("internalName Cisco Router: ", internalName);
}, [map, ciscoRouterMarkers, mapLayersVisibility]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
useEffect(() => {
if (!map || !wagoMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.WAGO);
}, [map, wagoMarkers, mapLayersVisibility.WAGO]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
useEffect(() => {
if (!map || !siemensMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Siemens);
}, [map, siemensMarkers, mapLayersVisibility.Siemens]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
useEffect(() => {
if (!map || !otdrMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.OTDR);
}, [map, otdrMarkers, mapLayersVisibility.OTDR]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
useEffect(() => {
if (!map || !wdmMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.WDM);
}, [map, wdmMarkers, mapLayersVisibility.WDM]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
useEffect(() => {
if (!map || !gmaMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.GMA);
}, [map, gmaMarkers, mapLayersVisibility.GMA]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
useEffect(() => {
if (!map || !sonstigeMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Sonstige);
}, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
useEffect(() => {
if (!map || !talasiclMarkers) return;
//console.log("talasiclMarkers", talasiclMarkers);
const toggleLayer = (isVisible) => {
if (isVisible) {
talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
const internalName =
layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
toggleLayer(mapLayersVisibility[internalName]);
//console.log("internalName for TALAS ICL in MapComponent: ", internalName);
}, [map, talasiclMarkers, mapLayersVisibility]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
useEffect(() => {
if (!map || !dauzMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.DAUZ);
}, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
useEffect(() => {
if (!map || !smsfunkmodemMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.SMSFunkmodem);
}, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
useEffect(() => {
if (!map || !messstellenMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Messstellen);
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
//------------------------------------------ */
const selectedArea = useRecoilValue(selectedAreaState);
// Combine all markers into a single array
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...ulafMarkers,
];
// Function to find a marker by areaName across all groups
const findMyMarker = (areaName) => {
return allMarkers.find((marker) => marker.options.areaName === areaName);
};
// Effect to handle navigation to selected area
useEffect(() => {
if (selectedArea && map) {
const marker = findMyMarker(selectedArea);
if (marker) {
map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
}
}
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
/* const findMyMarker = (areaName) => {
// Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
return talasMarkers.find((marker) => marker.options.areaName === areaName);
}; */
//------------------------------------------
const zoomTrigger = useRecoilValue(zoomTriggerState);
useEffect(() => {
if (map) {
var x = 51.41321407879154;
var y = 7.739617925303934;
var zoom = 7;
if (map && map.flyTo) {
map.flyTo([x, y], zoom);
} else {
console.error("Map object is not ready or does not have flyTo method");
} // Ihre bereits existierende Funktion, die Zoom-Out ausführt
}
}, [map, zoomTrigger]);
//---------------------------------------------------------
useEffect(() => {
console.log("Aktualisierung in MapComponent.js:", poiReadTrigger);
// Logik zur Aktualisierung der Map hier hinzufügen
// Beispiel: Daten neu laden oder aktualisieren
}, [poiReadTrigger]);
//---------------------------------------------------------
return (
<>